CSS ข้อความ

คุณสมบัติข้อความใน CSS สามารถกำหนดลักษณะของข้อความ

ผ่านการใช้คุณสมบัติข้อความ คุณสามารถเปลี่ยนสีของข้อความ ระยะระหว่างตัวอักษร จัดระบบข้อความ ตกแต่งข้อความ ทำให้ข้อความมีการถอนรายทาง และอื่นๆ

เน้นข้อความ

การถอนรายทางแรกของย่อหน้า Web ที่ใช้บ่อยที่สุดในการจัดรูปแบบข้อความ

CSS ได้เสนอ คุณสมบัติ text-indentคุณสมบัตินี้สามารถใช้งานได้อย่างสะดวกสบายในการถอนรายทางของข้อความ

ผ่านการใช้คุณสมบัติ text-indent ทุกองค์ประกอบสามารถถอนรายทางแรกของเขียนด้วยความยาวที่กำหนดไว้ แม้ว่าความยาวนี้จะเป็นตัวเลขลบ

คุณสมบัตินี้มีการใช้งานที่เป็นที่รู้จักที่สุดคือการย่อหน้าบทความแรก ข้อกฎที่ด้านล่างนี้จะทำให้บทความทุกตัวมีการย่อหน้าบทความแรก 5 em:

p {text-indent: 5em;}

注意：โดยทั่วไป คุณสามารถนำคุณสมบัติ text-indent มาใช้กับองค์ประกอบระดับบล็อค แต่ไม่สามารถนำคุณสมบัตินี้มาใช้กับองค์ประกอบระดับแนวเส้นหรือองค์ประกอบที่มีความแทนที่เช่น รูปภาพ และองค์ประกอบที่มีความแทนที่ไม่สามารถนำคุณสมบัติ text-indent มาใช้ได้ อย่างไรก็ตาม หากองค์ประกอบระดับบล็อค (เช่น บทความ) มีรูปภาพในบทความแรกของบทความ มันจะเคลื่อนตัวร่วมกับข้อความของบทความที่เหลือเด้านขวา:

คำเตือน:ถ้าคุณต้องการที่จะ "ย่อหน้า" บทความแรกขององค์ประกอบภายในองค์ประกอบภายใน คุณสามารถสร้างปรากฎการณ์นี้ด้วยเมื่อใช้เมื่อเข้าออกด้านซ้ายหรือด้านนอก:

คุณสมบัติ text-indent ยังสามารถตั้งค่าเป็นค่าลบได้ ด้วยเทคนิคนี้ คุณสามารถปฏิบัติการที่มีความสนใจมากมาย เช่น

p {text-indent: -5em;}

อย่างไรก็ตาม ในการตั้งค่าค่าลบให้กับ text-indent คุณต้องเล็งเห็น หากคุณตั้งค่าค่าลบให้กับบทความ บางส่วนของข้อความของบทความอาจจะหลุดออกนอกช่องตรงของเว็บเบราเซอร์ ในการป้องกันปัญหาการแสดงนี้ แนะนำให้ตั้งค่าเมื่อเข้าออกด้านนอกหรือด้านในเพื่อคุณสมบัติ negative text-indent:

p {text-indent: -5em; padding-left: 5em;}

ใช้เปอร์เซ็นต์

คุณสมบัติ text-indent สามารถใช้หน่วยความยาวทั้งหมด รวมถึงเปอร์เซ็นต์

เปอร์เซ็นต์ควรเป็นสัดส่วนต่อความกว้างขององค์ประกอบพ่อของคุณสมบัติ text-indent ดังนั้น หากคุณตั้งค่า text-indent ให้เป็น 20% แล้ว องค์ประกอบที่ได้รับผลกระทบของคุณสมบัติ text-indent จะย่อหน้าเป็น 20% ของความกว้างขององค์ประกอบพ่อของมัน

ในตัวอย่างด้านล่างนี้ ค่าย่อหน้าคือ 20% ขององค์ประกอบพ่อของคุณสมบัติ text-indent หรือ 100 พิกเซล:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

สืบทอด

คุณสมบัติ text-indent สามารถสืบทอดได้ โปรดพิจารณาการทำเครื่องหมายดังนี้:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.</div>
<p>this is a paragragh.</p>
</div>
</div>

ส่วนที่มีการทำเครื่องหมายนี้จะมีการย่อหน้าออกซ้าย 50 พิกเซล นี้เพราะบทความนี้สืบทอดค่าย่อหน้าจากองค์ประกอบ div ที่มี id ว่า inner。

การจัดระเบียงตั้งแต่ด้านซ้ายไปขวา

text-align เป็นคุณลักษณะพื้นฐานที่ส่งผลต่อแถวข้อความการจัดระเบียงเฉพาะตัว. ค่าทั้งสามของมันเหมือนกันมาก แต่ค่าที่สี่และห้าเล็กน้อยที่ซับซ้อนกว่านี้.

ค่า left, right และ center จะทำให้ข้อความในองค์ประกอบจัดระเบียงซ้าย,ขวา และตรงกลางตามลำดับ.

ภาษาตะวันตกมักจะอ่านจากซ้ายไปขวา ดังนั้นค่าเริ่มต้นของ text-align จะเป็น left. ข้อความจะถูกจัดระเบียงที่ขอบขวางแถวซ้ายและมีทรงร่างที่คล้ายดินรั้ว (เรียกว่าข้อความจากซ้ายไปขวา). สำหรับภาษาเช่นฮีบรูและอาหรับ ค่าเริ่มต้นของ text-align จะเป็น right เพราะพวกนั้นอ่านจากขวาไปซ้าย. ไม่น่าประหลาดที่ center จะทำให้แถวข้อความทุกแถวตั้งตรงกลางในองค์ประกอบ.

คำเตือน:การจัดระเบียงองค์ประกอบบล็อคหรือตารางเพื่อที่จะตั้งตรงกลาง จะต้องตั้งค่ามุมของช่องว่างด้านซ้ายและด้านขวาอย่างเหมาะสมในองค์ประกอบนั้น.

text-align:center และ <CENTER>

คุณอาจจะคิดว่า text-align:center มีความหมายเหมือนกับ <CENTER> แต่ในความเป็นจริงทั้งสองมันแตกต่างกันมาก.

<CENTER> ไม่เพียงแต่ส่งผลต่อข้อความ ยังจะทำให้องค์ประกอบทั้งหมดตั้งตรงกลาง. text-align จะไม่ควบคุมการจัดระเบียงขององค์ประกอบ แต่แค่ส่งผลต่อสาระภายใน. องค์ประกอบเองจะไม่ถูกย้ายจากหนึ่งบทความไปยังอีกบทความ แต่แค่ข้อความภายในถูกส่งผลต่อ.

justify

คุณภาพของการจัดระเบียงตั้งแต่ด้านซ้ายถึงขวาคือ justify.

ในการจัดระเบียงข้อความทั้งสองข้าง ข้อความของแถวจะถูกจัดระเบียงทั้งสองข้างของพ่อประกอบ. หลังจากนั้น ปรับเปลี่ยนช่องว่างระหว่างคำและอักษร เพื่อที่ให้แถวทุกแถวมีความยาวเหมือนกัน. คุณอาจจะสังเกตว่า การจัดระเบียงข้อความทั้งสองข้างเป็นสิ่งที่มีชื่อเสียงในสาขาการพิมพ์.

ต้องสนใจว่า ในการจัดระเบียงข้อความทั้งหมดที่จัดระเบียงทั้งสองข้าง จะมีการเพิ่มขยายข้อความโดยใช้ตัวแทนผู้ใช้ (ไม่ใช่ CSS) ในการจัดระเบียงข้อความทั้งสองข้างเพื่อที่จะติดตั้งของพ่อประกอบของพวกเขา. สำหรับข้อมูลละเอียดเพิ่มเติม โปรดดู CSS text-align มีหน้าค้นหาเอกสาร。

ช่องว่างของคำ

word-spacing มีความหมายว่าเป็นค่าความยาวหรือค่าลบ ความยาว.สามารถเปลี่ยนช่องว่างมาตรฐานระหว่างคำ (คำ) ได้. ค่าเริ่มต้นของมันคือ normal ที่เหมือนกับการตั้งค่าค่า 0.

word-spacing มีความหมายว่าเป็นค่าความยาวหรือค่าลบ ความยาว. ถ้าใส่ค่าความยาวบวก จะเพิ่มช่องว่างระหว่างคำ. ถ้าตั้งค่าค่าลบให้กับ word-spacing จะขยายความห่างของมัน:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
นี่คือบทความ. ช่องว่างระหว่างคำจะถูกเพิ่มขึ้น.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

ตัวอย่าง TIY: เพิ่มหรือลดระยะห่างตัว (ระยะห่างคำ)

注释：หากต้องการทราบความหมายของ CSS ในการนิยาม 'ตัว' (word) โปรดเข้าถึง หน้าค้นหาคุณภาพ word-spacing CSS。

ระยะห่างตัวอักษร

คุณภาพ letter-spacingความแตกต่างกับ word-spacing คือ letter-spacing จะแก้ไขระยะห่างระหว่างตัวหรือตัวอักษร.

เหมือนกับคุณภาพ word-spacing คุณภาพ letter-spacing ที่มีค่าน่าใช้รวมถึงทุกค่าขนาด. คำถามโดยเรียบง่ายคือค่าทางเลขจะเพิ่มหรือลดระยะห่างระหว่างตัวอักษรเพื่อจำนวนที่กำหนด:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

ตัวอย่าง TIY: กำหนดระยะห่างตัวอักษร (ระยะห่างอักษร)

การเปลี่ยนแปลงอักษร

คุณภาพ text-transformการจัดการขนาดตัวอักษรของข้อความ. คุณภาพนี้มีค่า 4 ของมัน:

  • none
  • uppercase
  • lowercase
  • capitalize

ค่าเริ่มต้น none ไม่ทำการแก้ไขข้อความ ใช้ตัวอักษรที่มีอยู่ในเอกสารต้นแบบ. ตามชื่อ uppercase และ lowercase จะเปลี่ยนแปลงข้อความเป็นตัวใหญ่หรือตัวเล็กทั้งหมด. สุดท้าย capitalize จะเปลี่ยนแปลงตัวอักษรแรกของทุกคำเป็นตัวใหญ่.

ในฐานะคุณภาพ ทั้งนี้ text-transform อาจไม่มีประโยชน์ แต่หากคุณตัดสินใจที่จะเปลี่ยนแปลงตัวแปล h1 ทั้งหมดเป็นตัวใหญ่ คุณภาพนี้จะมีประโยชน์มาก. คุณไม่จำเป็นต้องเปลี่ยนแปลงโดยตรงตัวเอง แต่ใช้ text-transform ที่จะทำการเปลี่ยนแปลงให้คุณ:

h1 {text-transform: uppercase}

การใช้งาน text-transform มีประโยชน์สองด้าน. ในต้นนั้น คุณเพียงแค่เขียนกฎง่ายๆ เพื่อทำการเปลี่ยนแปลง โดยไม่ต้องเปลี่ยนแปลงตัวแปล h1 ตัวเอง. นอกจากนี้ หากคุณตัดสินใจที่จะเปลี่ยนแปลงการใช้งานตัวอักษรใหม่อีกครั้ง จะง่ายต่อการเปลี่ยนแปลงมากขึ้น.

ตัวอย่าง TIY: ควบคุมขนาดตัวอักษรในข้อความ

การเรียงลำดับข้อความ

ต่อมา เราจะเรียกร้อง text-decoration คุณภาพนี่เป็นคุณสมบัติที่มีความน่าสนใจมาก และมีการทำงานที่น่าสนใจมากมาย:

text-decoration มี 5 ค่า:

  • none
  • underline
  • overline
  • line-through
  • blink

underline จะเพิ่มสีสายด้านล่างให้กับองค์ประกอบ ซึ่งเหมือนกับองค์ประกอบ U ใน HTML ตามที่เรียกว่า overline จะทำงานตรงกันข้าม โดยวาดสีสายด้านบนของข้อความ ค่า line-through จะวาดสีสายผ่านข้อความทางกลาง ซึ่งเท่ากับองค์ประกอบ S หรือ strike ใน HTML ตามที่เรียกว่า blink จะทำให้ข้อความเหลือวิ่ง:

ค่า none จะปิดการแสดงสีสายทั้งหมดที่เคยมีการปรับปรุงไปยังองค์ประกอบนี้ไว้ โดยทั่วไปแล้ว ข้อความที่ไม่มีการแสดงสีสายจะมีลักษณะปกติ แต่ไม่จำเป็นต้องเป็นนั้นเสมอ ตัวอย่างเช่น ลิงก์จะมีสีสายด้านล่างโดยเริ่มต้น หากต้องการที่จะลบสีสายด้านล่างของลิงก์ คุณสามารถใช้ CSS ต่อไปนี้:

a {text-decoration: none;}

注意：ถ้าเอากฎนี้ใช้เพื่อลบสีสายด้านล่างของลิงก์ แล้ว ข้อความหลังจากลิงก์และข้อความปกติจะมีความแตกต่างทางทางที่มองเห็นเพียงด้านสี ซึ่งหากแน่นอนแล้วก็เป็นที่ยิ่งยากที่จะประกาศว่าสีของมันจะมีความแตกต่างได้ (อย่างไรก็ตาม มันก็ไม่สามารถประกาศได้ที่สีของมันจะไม่มีความแตกต่างได้เลย):

ยังสามารถผสมกฎการแสดงหลายอย่างในกฎเดียวกันได้ ถ้าต้องการที่ทุกๆ ลิงก์จะมีสีสายด้านล่างและสีสายด้านบน กฎต่อไปนี้จะเป็นตัวอย่าง:

a:link a:visited {text-decoration: underline overline;}

แต่ต้องสังเกตว่า ถ้ากฎการแสดงที่แตกต่างกันสองกฎจะตรงกันข้ามกับองค์ประกอบเดียวกัน ค่าที่ชนะกันจะทดแทนค่าอื่นๆ ทั้งหมด โปรดพิจารณากฎต่อไปนี้:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

สำหรับกฎที่ให้ไปนี้ ทุกองค์ประกอบที่มีคลาส stricken ขององค์ประกอบ h2 จะมีการแสดงด้วยสีสายทางด้านล่างเพียงเดียว โดยไม่มีการแสดงสีสายด้านบนหรือสีสายด้านล่าง เพราะ ค่า text-decoration จะทดแทนแทนที่จะจับตามากัน。

จัดการช่องว่าง

คุณสมบัติ white-spaceจะส่งผลกระทบต่อการจัดการช่องว่าง บรรยายข้อความ และตัว tab ของตัวแทนผู้ใช้ (user agent) ในเอกสารต้นฐาน:

ด้วยการใช้คุณสมบัตินี้ สามารถทำให้เปลี่ยนแปลงวิธีที่เบราเซอร์จัดการช่องว่างระหว่างตัวอักษรและช่องว่างระหว่างบรรยายข้อความ จากนักเข้าถึงข้อความที่มีช่องว่างหลายตัว ในรูปแบบที่มาแปลงแปลงเองนี้ ซึ่งยังไม่ได้ทำการปรับปรุงช่องว่าง ซึ่งจะรวบรวมช่องว่างทั้งหมดเป็นช่องว่างเดียว ดังนั้นในกรณีที่มีการใช้สัญญาณต่อไปนี้ ในการแสดงที่เบราเซอร์ เมื่อแสดงข้อความในเว็บ จะแสดงตัวอักษรแต่ละตัวที่มีช่องว่างระหว่างตัวอักษรเพียงช่องว่างเดียว และละเลยการแสดงบรรยายข้อความที่มีช่องว่างสำหรับแอลอิเลมนต์:

<p>This     paragraph has    many
    spaces           in it.</p>

สามารถตั้งค่าการกระทำปกตินี้ด้วยประโยคดังนี้:

p {white-space: normal;}

กฎที่กล่าวข้างต้นบอกให้โปรแกรมนำทางจัดการช่องว่างเหมือนปกติ หากใช้ค่านี้ ตัวอักษรบรรยาย (ช่องว่างของแบบบันทึก) จะถูกแปลงเป็นช่องว่างเดียว และตัวอักษรว่างมากกว่าหนึ่งตัวอักษรในแถวจะถูกแปลงเป็นช่องว่างเดียว

ตัวอย่าง TIY: white-space: normal

ค่า pre

แต่ถ้าตั้งค่า white-space ให้เป็น pre การจัดการตัวอักษรว่างขององค์ประกอบที่ได้รับผลกระทบโดยอัตราแบบนี้จะแตกต่างขึ้น พฤติกรรมของมันเหมือนกับองค์ประกอบ pre ของ XHTML ซึ่งตัวอักษรว่างจะไม่ถูกละเลย

ถ้าค่าของอัตราแบบ white-space คือ pre โปรแกรมนำทางจะให้ความสำคัญต่อช่องว่างพิเศษ และรวมถึงช่องว่างของแบบบันทึก ในเรื่องนี้และแค่ในเรื่องนี้ องค์ประกอบใดๆ ก็สามารถเทียบได้กับองค์ประกอบ pre

ตัวอย่าง TIY: white-space: pre

注意：ทดสอบได้ทราบว่า IE 7 และเวอร์ชันเบราเซอร์ที่เก่ากว่าไม่สนับสนุนค่านี้ ดังนั้นกรุณาใช้เวอร์ชันเบราเซอร์ที่ไม่ใช้ IE เพื่อดูตัวอย่างด้านบน

ค่า nowrap

ค่าที่ตรงข้ามคือ nowrap ซึ่งจะป้องกันการแบ่งบรรยายข้อความในองค์ประกอบ ยกเว้นแต่การใช้ br อิเลเมนต์ การใช้ nowrap ใน CSS มีความเหมือนกับการใช้ <td nowrap> ใน HTML 4 ซึ่งตั้งค่าเซลล์ตารางไม่ให้แบ่งบรรยาย อย่างไรก็ตาม ค่า white-space สามารถนำไปใช้กับองค์ประกอบทุกชนิด

ตัวอย่าง TIY: white-space: nowrap

ค่า pre-wrap และ pre-line

CSS2.1 ได้เพิ่มค่า pre-wrap และ pre-line ซึ่งไม่มีในสัญญาณ CSS อื่น การทำงานของค่านี้มีจุดประสงค์ให้ผู้สร้างผลงานสามารถควบคุมการจัดการตัวอักษรว่างได้ดีขึ้น

ถ้าค่า white-space ขององค์ประกอบถูกตั้งเป็น pre-wrap ข้อความในองค์ประกอบจะกลับค่าตัวอักษรว่างต่อตัวอักษร แต่บรรยายข้อความจะแบ่งบรรยายอย่างปกติ หากตั้งค่าเป็นค่านี้ ข้อความแบ่งบรรยายของข้อความต้นแบบและข้อความแบ่งบรรยายที่สร้างขึ้นจะถูกกลับค่าเช่นกัน pre-line ซึ่งเป็นที่ตรงข้ามกับ pre-wrap จะรวมตัวอักษรว่างต่อตัวอักษรอย่างเช่นข้อความปกติ แต่ยังคงค่าบรรยายแบ่งบรรยาย

实例 TIY ：white-space: pre-wrap

实例 TIY ：white-space: pre-line

注意：我们在 IE7 和 FireFox2.0 浏览器中测试了上面的两个实例，但是结果是，值 pre-wrap 和 pre-line 都没有得到很好的支持。

总结

下面的表格总结了 white-space 属性的行为：

值 空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许

文本方向

如果您阅读的是英文书籍，就会从左到右、从上到下地阅读，这就是英文的流方向。不过，并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的，当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。

direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。

注释：对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。

direction 屬性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文字。如果显示从右到左的文字，应使用值 rtl。

CSS 文字實例：

設定文字顏色
本例演示如何設定文字的顏色。
設定文字的背景顏色
本例顯示如何設定部分文字的背景顏色。
規定字符間距
本例演示如何增加或減少字符間距。
使用百分比設定行間距
本例演示如何使用百分比值來設定段落中的行間距。
使用像素值設定行間距
本例演示如何使用像素值來設定段落中的行間距。
使用數值來設定行間距
本例演示如何使用一個數值來設定段落中的行間距。
對齊文字
本例演示如何對齊文字。
裝飾文字
本例演示如何向文字添加裝飾。
เน้นข้อความ
本例演示如何縮進文字首行。
控制文字中的字母
本例演示如何控制文字中的字母。
在元素中禁止文字折行
本例演示如何禁止在元素中的文字折行。
增加單詞間距
本例演示如何增加段落中單詞間的距離。

CSS 文字屬性

屬性 描述
color 設定文字顏色
direction ตั้งทิศทางของข้อความ
line-height ตั้งความสูงของบรรทัด
letter-spacing ตั้งระยะห่างของอักษร
text-align จัดตัวข้อความในองค์ประกอบ
text-decoration เพิ่มลวดลายข้อความ
text-indent มีดฉันท์ข้อความในบรรทัดแรกขององค์ประกอบ
text-shadow ตั้งเงาของข้อความ
text-transform ควบคุมอักษรในองค์ประกอบ
unicode-bidi ตั้งทิศทางของข้อความ
white-space ตั้งวิธีการจัดการพื้นที่ว่างในองค์ประกอบ
word-spacing ตั้งระยะห่างของอักษร