ด้วยคุณสมบัติหลายอย่างที่ CSS มอบให้ ทำให้สามารถกำหนดสไตล์ข้อความต่างๆ ได้อย่างง่ายดายและมีประสิทธิภาพ เช่น สี การจัดตำแหน่ง ระยะห่าง การตกแต่ง การแปลง ฯลฯ
คุณลักษณะข้อความที่ใช้กันทั่วไปได้แก่: การจัดข้อความ, การตกแต่งข้อความ, การแปลงข้อความ, การเยื้องข้อความ, ความสูงของบรรทัด, ระยะห่างระหว่างตัวอักษร, ระยะห่างระหว่างคำ ฯลฯ คุณสมบัติเหล่านี้ช่วยให้คุณควบคุมลักษณะที่ปรากฏของอักขระ คำ ช่องว่าง และอื่นๆ ได้อย่างแม่นยำ
มาดูวิธีตั้งค่าคุณสมบัติข้อความเหล่านี้สำหรับองค์ประกอบต่างๆ กันดีกว่า
1.การจัดตำแหน่งข้อความให้ตรงกัน
แอตทริบิวต์ text-align ใช้เพื่อตั้งค่าการจัดตำแหน่งแนวนอนของข้อความในองค์ประกอบ ค่าที่เป็นทางเลือกของแอตทริบิวต์มีดังนี้:
ตัวอย่าง:
<!DOCTYPEhtml><html><head><style>p{border:1pxsolidblack;/*เพื่อให้สะท้อนถึงการจัดแนวของข้อความได้ง่ายขึ้น นี่คือชุดเส้นขอบสำหรับแท็ก p*/}.text1{text- align: left;}.text2{text-align :right;}.text3{text-align:center;}</style></head><body><pclass=text1>จัดชิดซ้าย</p><pclass=text2>จัดชิดขวา</p><pclass= text3>การจัดกึ่งกลาง</p></body></html>ผลลัพธ์ที่แสดงมีดังนี้:
2. การตกแต่งข้อความ
แอตทริบิวต์การตกแต่งข้อความใช้เพื่อตั้งค่าหรือลบการตกแต่งข้อความ วิธีการที่พบบ่อยที่สุดคือการใช้แอตทริบิวต์การตกแต่งข้อความเพื่อลบการขีดเส้นใต้เริ่มต้นของแท็ก <a> แน่นอน คุณยังสามารถใช้แอตทริบิวต์ text- decoration เพื่อเพิ่มการตกแต่งให้กับข้อความในองค์ประกอบที่จำเป็นเพื่อให้ได้เอฟเฟกต์การเน้นสี
ค่าตัวเลือกสำหรับแอตทริบิวต์การตกแต่งข้อความมีดังนี้:
ตัวอย่าง:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>การตกแต่งข้อความ</title><style>h1.under{text- decoration:underline;}h1.over{text- decoration:overline ;}p.line{ข้อความ-การตกแต่ง:เส้นผ่าน;}p.blink{ข้อความ-การตกแต่ง:blink;}a.none{text-de coration:none;}p.underover{text- decoration:underlineoverline;}</style></head><body><h1class=under>ขีดเส้นใต้</h1><pclass=lin e>ขีดทับ</p><pclass=blink>เอฟเฟกต์แฟลช แต่เบราว์เซอร์จะไม่แสดง</p><h1class=over>ขีดเส้นใต้</h1><p>นี่คือลิงก์ <aclass=nonehref=#> </a> ตามค่าเริ่มต้นแล้ว ลิงก์จะถูกขีดเส้นใต้ ซึ่งเราจะลบออก </p><pclass=underover>โอเวอร์ไลน์และขีดเส้นใต้</p></body></html>ผลลัพธ์ที่แสดงมีดังนี้:
3.การแปลงข้อความ
แอตทริบิวต์การแปลงข้อความใช้เพื่อควบคุมตัวพิมพ์ภาษาอังกฤษในข้อความ ด้วยคุณลักษณะนี้ คุณสามารถเปลี่ยนตัวอักษรภาษาอังกฤษในข้อความให้เป็นตัวอักษรพิมพ์เล็ก ตัวอักษรพิมพ์ใหญ่ หรืออักษรตัวแรกที่เป็นตัวพิมพ์ใหญ่ได้อย่างสม่ำเสมอโดยไม่ต้องแก้ไขข้อความต้นฉบับ
4.ข้อความเยื้อง
คุณลักษณะ text-indent ใช้เพื่อเพิ่มเอฟเฟกต์การเยื้องบรรทัดแรกให้กับข้อความในองค์ประกอบ ค่าทางเลือกของแอตทริบิวต์มีดังนี้:
5.line-height ความสูงของเส้น
คุณสมบัตินี้ส่งผลต่อโครงร่างของกล่องบรรทัด เมื่อนำไปใช้กับองค์ประกอบระดับบล็อก จะกำหนดระยะห่างขั้นต่ำระหว่างเส้นฐานในองค์ประกอบนั้น แทนที่จะเป็นระยะทางสูงสุด
ความแตกต่างที่คำนวณได้ระหว่างความสูงของบรรทัดและขนาดแบบอักษร (ระยะห่างบรรทัด) จะถูกแบ่งออกเป็นสองซีกและเพิ่มที่ด้านบนและด้านล่างของบรรทัดเนื้อหาข้อความ กล่องที่เล็กที่สุดที่สามารถบรรจุเนื้อหานี้ได้คือกล่องบรรทัด
ตัวอย่าง:
<!DOCTYPEhtml><html><head><style>p.small{line-height:0.8;}p.big{line-height:200%;}</style></head><body><p> นี่คือความสูงแถวมาตรฐานเริ่มต้น<br>นี่คือความสูงแถวมาตรฐานเริ่มต้น<br>นี่คือความสูงแถวมาตรฐานเริ่มต้น<br></p><pclas s=small>ใช้ตัวเลขเพื่อกำหนดความสูงของแถวที่เล็กลง<br>ใช้ตัวเลขเพื่อกำหนดความสูงของแถวที่เล็กลง<br>ใช้ตัวเลขเพื่อกำหนดความสูงของแถวที่เล็กลง<br></p><pclass=big>ใช้ ใช้แบบฟอร์ม เปอร์เซ็นต์เพื่อกำหนดความสูงของแถวที่ใหญ่ขึ้น<br>ใช้รูปแบบเปอร์เซ็นต์เพื่อกำหนดความสูงของแถวที่ใหญ่ขึ้น<br>ใช้รูปแบบเปอร์เซ็นต์เพื่อกำหนดความสูงของแถวที่ใหญ่ขึ้น<br></p></body>< /html >ผลลัพธ์ที่แสดงมีดังนี้:
6.การเว้นวรรคตัวอักษร
ระยะห่างระหว่างข้อความ ค่าอาจเป็นค่าลบ ค่าเริ่มต้นคือปกติ
ตัวอย่าง:
<!DOCTYPEhtml><html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gbk2312/><title>แอตทริบิวต์การเว้นวรรคตัวอักษรของ css</title><style>*{margin:0; ช่องว่างภายใน:0 ;}body{width:1000px;margin:200pxauto;}p{font-size:18px;}.p01{letter-spacing:2px;}.p02{letter-spacing:10px}</style></head>< body><pclass=p01>ข้อความทดสอบการเว้นวรรคข้อความ CSS! </p><pclass=p02>ข้อความทดสอบระยะห่างข้อความ CSS! </p></body></html>ผลลัพธ์ที่แสดงมีดังนี้:
7.การเว้นวรรคคำ
คุณลักษณะการเว้นวรรคคำใช้เพื่อกำหนดระยะห่างระหว่างคำ แต่ไม่ถูกต้องสำหรับภาษาจีน ค่าทางเลือกของแอตทริบิวต์มีดังนี้:
8.เงาข้อความ เงาข้อความ
text-shadow เพิ่มเงาให้กับข้อความ คุณสามารถเพิ่มเงาได้หลายแบบให้กับข้อความและการตกแต่ง ค่าเงาจะถูกคั่นด้วยเครื่องหมายจุลภาค ค่าเงาแต่ละค่าประกอบด้วยการชดเชยขององค์ประกอบในทิศทาง X และ Y รัศมีการเบลอ และค่าสี
9.จัดแนวตั้ง
แอตทริบิวต์การจัดแนวแนวตั้งจะกำหนดการจัดตำแหน่งตามแนวตั้งขององค์ประกอบ
แอตทริบิวต์การจัดแนวแนวตั้งใน CSS สามารถใช้ได้เฉพาะกับองค์ประกอบแบบอินไลน์และองค์ประกอบที่ถูกแทนที่เท่านั้น (เช่น รูปภาพและช่องป้อนข้อมูลแบบฟอร์ม) แอตทริบิวต์นี้ไม่ได้รับการสืบทอด
ก่อนอื่น เรามาดูภาพกันก่อน เส้นบนสุด เส้นกลาง และเส้นฐานของข้อความ
มีการกล่าวถึงแนวคิดต่างๆ เช่น เส้นพื้นฐาน เส้นล่าง เส้นบน และเส้นกลาง สิ่งเหล่านี้หมายความว่าอย่างไร
(1) บรรทัดบนสุด: ขอบด้านบนของตัวอักษรจีน
(2) เส้นกึ่งกลาง: เส้นที่ลากผ่านตรงกลางของตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก x;
(3) เส้นพื้นฐาน: ขอบล่างของตัวอักษรตัวพิมพ์เล็ก x;
(4) บรรทัดล่าง: ขอบล่างของตัวอักษรจีน
(5) พื้นที่เนื้อหา: หมายถึงพื้นที่ที่ล้อมรอบด้วยบรรทัดล่างและบรรทัดบนสุด
(6) ความสูงของบรรทัด: ประกอบด้วยพื้นที่เนื้อหาและพื้นที่ว่างที่ขยายแบบสมมาตรตามพื้นที่เนื้อหา เราเรียกว่าความสูงของบรรทัด ซึ่งถือได้ว่าเป็นระยะห่างระหว่างเส้นฐานของบรรทัดข้อความที่อยู่ติดกัน
(7) ระยะห่างบรรทัด: หมายถึงระยะห่างระหว่างบรรทัดข้อความที่อยู่ติดกันระหว่างบรรทัดล่างสุดของบรรทัดข้อความก่อนหน้าและบรรทัดบนสุดของบรรทัดข้อความถัดไป
(8) กล่องอินไลน์: เป็นแนวคิดในรูปแบบการแสดงผลของเบราว์เซอร์และไม่สามารถแสดงได้ แต่มีอยู่จริงและความสูงจะเท่ากับความสูงของบรรทัด
(9) กล่องบรรทัด: แนวคิดคล้ายกับกล่องด้านในของบรรทัดเดียวกัน กล่องบรรทัดหมายถึงกล่องสี่เหลี่ยมเสมือนของบรรทัดนี้และยังเป็นแนวคิดในโหมดการแสดงผลของเบราว์เซอร์ ความสูงของกล่องบรรทัดเท่ากับค่าที่ใหญ่ที่สุดของกล่องในบรรทัดจากองค์ประกอบทั้งหมดในบรรทัดนี้ (กล่องในบรรทัดที่มีค่าความสูงของบรรทัดมากที่สุดจะใช้เป็นการวัดประสิทธิภาพ และกล่องในบรรทัดอื่นๆ จะจัดแนวให้ตรงกับการวัดประสิทธิภาพโดยใช้ของตัวเอง วิธีการจัดตำแหน่ง และความสูงของกล่องบรรทัดจะถูกคำนวณในที่สุด)
10.white-space จัดการอักขระช่องว่าง
ตารางต่อไปนี้สรุปลักษณะการทำงานของแอตทริบิวต์ช่องว่าง:
ทิศทางข้อความ 11.direction