เรียนรู้มาตรฐานเว็บและปฏิบัติตามมาตรฐานเว็บเพื่อการพัฒนาและการผลิต 52CSS.com ได้พูดคุยกับคุณหลายประเด็นที่เกี่ยวข้องกับเค้าโครง และเนื้อหาหลักที่นำเสนอบนหน้านี้คือรูปภาพและข้อความ วันนี้เราจะหารือกับคุณเกี่ยวกับประเด็นที่เกี่ยวข้องกับเค้าโครงข้อความในเค้าโครงหน้าเว็บ CSS
วิธีการตั้งค่าแบบอักษร สี ขนาด พื้นที่ย่อหน้า Drop Cap และการเยื้องบรรทัดแรก สุดท้ายนี้ เราจะพูดถึงรูปแบบภาษาจีนที่ใช้กันทั่วไปบนหน้าเว็บ เช่น การตัดตัวอักษรจีน การตัดคำที่มีความกว้างคงที่ (การตัดคำและการแบ่งคำ) เป็นต้น เนื่องจากฉันเพิ่งเขียนประสบการณ์การใช้งานแอปพลิเคชันบางส่วน หากคุณต้องการคำแนะนำโดยละเอียดเกี่ยวกับคุณสมบัติ CSS และการศึกษาเชิงลึกเพิ่มเติม คุณสามารถอ่านบทช่วยสอนเพิ่มเติมได้ที่ 52CSS.com
1. ตั้งค่าแบบอักษรของข้อความ สี ขนาด ฯลฯ โดยใช้แบบอักษร ฯลฯ
รูปแบบตัวอักษรตั้งค่าตัวเอียง เช่น Font-style: italic;
Font-weight กำหนดความหนาของข้อความ เช่น Font-weight: Bold;
ขนาดตัวอักษร กำหนดขนาดตัวอักษร เช่น ขนาดตัวอักษร: 12px (หรือ 9pt โปรดดูคู่มือ CSS สำหรับปัญหาการแสดงผลในหน่วยต่างๆ)
line-height กำหนดระยะห่างระหว่างบรรทัด เช่น line-height: 150%;
color กำหนดสีข้อความ (หมายเหตุ ไม่ใช่สีแบบอักษร) เช่น สี: สีแดง;
ตระกูลฟอนต์ ตั้งค่าฟอนต์ เช่น ตระกูลฟอนต์: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans-serif (นี่เป็นวิธีการเขียนทั่วไป)
2. เค้าโครงย่อหน้า: ใช้ระยะขอบ ช่องว่างภายใน และการจัดแนวข้อความ
ย่อหน้าภาษาจีนใช้แท็ก <p> (หรือคอนเทนเนอร์อื่นๆ) สามารถใช้ระยะขอบหรือช่องว่างภายในสำหรับด้านซ้ายและด้านขวา (เทียบเท่ากับการเยื้อง) และช่องว่างก่อนและหลังย่อหน้า ตัวอย่างเช่น:
ตัวอย่างซอร์สโค้ด [www.downcodes.com]
พี{
ระยะขอบ: 18px 6px 6px 18px;
/*ขึ้น ขวา ล่าง ซ้าย ตามเข็มนาฬิกา เริ่มตั้งแต่สิบสองนาฬิกา*/
-
ใช้การจัดตำแหน่งข้อความสำหรับการจัดตำแหน่งข้อความ เช่น:
ตัวอย่างซอร์สโค้ด [www.downcodes.com]
พี{
การจัดตำแหน่งข้อความ: center; /*การจัดตำแหน่งกึ่งกลาง*/
-
วิธีการจัดตำแหน่ง ได้แก่ ซ้าย ขวา และชิดขอบ (จัดชิดขอบทั้งสองด้าน)
มีสามเณรจำนวนมากที่ไม่คุ้นเคยกับระยะขอบและช่องว่างภายใน โปรดดูภาพด้านล่างสำหรับการนำเสนอ
3. ข้อความแนวตั้ง: ใช้โหมดการเขียน
คุณลักษณะโหมดการเขียนมีสองค่า lr-tb และ tb-rl ค่าแรกคือค่าดีฟอลต์ซ้าย-ขวา บนล่าง และค่าหลังคือบนล่าง ขวา-ซ้าย
ตัวอย่างเช่น:
ตัวอย่างซอร์สโค้ด [www.downcodes.com]
พี{
โหมดการเขียน: tb-rl;
-
สามารถใช้ร่วมกับการเรียงพิมพ์ทิศทางได้
4. ปัญหาหัวข้อย่อย: การใช้ list-style
สัญลักษณ์หัวข้อย่อยใน CSS ได้แก่ ดิสก์ (จุดทึบ) วงกลม (วงกลมเปิด) สี่เหลี่ยม (สี่เหลี่ยมทึบ) ทศนิยม (เลขอารบิค) โรมันล่าง (เลขโรมันตัวพิมพ์เล็ก) โรมันบน (เลขโรมันตัวพิมพ์ใหญ่) -อัลฟาล่าง (ตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก), อัลฟาตัวบน (ตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่), ไม่มี (ไม่มี) ตัวอย่างเช่น ตั้งค่าสัญลักษณ์แสดงหัวข้อย่อยของรายการ (ul หรือ ol) เป็นรูปสี่เหลี่ยม เช่น:
ตัวอย่างซอร์สโค้ด [www.downcodes.com]
ลี่{
รายการสไตล์: สี่เหลี่ยม;
-
นอกจากนี้ list-style ยังมีค่าบางอย่างอีกด้วย ตัวอย่างเช่น คุณสามารถใช้รูปภาพเล็กๆ เป็นสัญลักษณ์แสดงหัวข้อย่อย และเพียงเขียน url ("ที่อยู่รูปภาพ") ไว้ใต้ list-style โดยตรง แต่ 52CSS.com ไม่สนับสนุนแนวทางนี้อย่างยิ่ง ขอแนะนำให้คุณตั้งค่ารูปภาพเป็นพื้นหลังของ li
5. เอฟเฟกต์ฝาหล่น
วัตถุหลอก: ตัวอักษรตัวแรกสามารถใช้กับขนาดตัวอักษรและลอยเพื่อสร้างเอฟเฟกต์ตัวพิมพ์ใหญ่
ตัวอย่างเช่น:
ตัวอย่างซอร์สโค้ด [www.downcodes.com]
p:อักษรตัวแรก{
ช่องว่างภายใน: 6px;
ขนาดตัวอักษร: 32pt;
ลอย: ซ้าย;
-
6. การเยื้องข้อความ: ใช้การเยื้องข้อความ
text-indent สามารถเยื้องบรรทัดแรกในคอนเทนเนอร์ตามหน่วยที่กำหนดได้ ตัวอย่างเช่น ย่อหน้าภาษาจีนมักจะมีอักขระจีนสองตัวอยู่หน้าแต่ละย่อหน้า สามารถเขียนได้ดังนี้:
ตัวอย่างซอร์สโค้ด [www.downcodes.com]
พี{
text-indent: 2em; /*em เป็นหน่วยสัมพันธ์, 2em มีขนาดใหญ่เป็นสองเท่าของคำ*/
-
หากขนาดตัวอักษรคือ 12px ดังนั้นการเยื้องข้อความ: 2em จะถูกเยื้อง 24px
7. การตัดทอนอักขระภาษาจีนที่มีความกว้างคงที่: ใช้ข้อความล้น (แสดงเอฟเฟกต์จุดไข่ปลา)
ภาษาพื้นหลังสามารถใช้เพื่อตัดทอนเนื้อหาฟิลด์ในฐานข้อมูลได้ เช่น ตัวอักษรจีน 12 ตัว (หลังจากนั้นใช้จุดไข่ปลา) แต่บางครั้งก็จำเป็นต้องกรองแท็ก html ฯลฯ แต่การใช้ CSS ควบคุมก็ไม่มีปัญหานี้ ตัวอย่างเช่น ใช้สไตล์ต่อไปนี้กับรายการ:
ตัวอย่างซอร์สโค้ด [www.downcodes.com]
ลี่{
ล้น: ซ่อน;
ข้อความล้น: จุดไข่ปลา;
พื้นที่สีขาว: nowrap;
-
8. ตัวแบ่งบรรทัดตัวอักษรจีน (คำ) ความกว้างคงที่: ใช้ตัวแบ่งคำ
ตัวอย่างเช่น หากคุณต้องการแสดงชื่อสถานที่จำนวนมาก (ถือว่าคั่นด้วยช่องว่าง) ในคอนเทนเนอร์ที่มีความกว้างคงที่ เพื่อหลีกเลี่ยงไม่ให้ชื่อสถานที่แตกตรงกลาง (นั่นคือ คำหนึ่งอยู่ด้านบนและอีกคำหนึ่ง ถูกตัดไปบรรทัดถัดไป) จากนั้นคุณสามารถใช้ตัวแบ่งคำได้ ตัวอย่างเช่น:
ตัวอย่างซอร์สโค้ด [www.downcodes.com]
<div style="width:210px;height: 200px;พื้นหลัง: #ccc;word-break:keep-all">
หนานจิง เซี่ยงไฮ้ เซี่ยงไฮ้ หนานจิง เซี่ยงไฮ้ หนานจิง เซี่ยงไฮ้ เซี่ยงไฮ้ เซี่ยงไฮ้ หนานจิง เซี่ยงไฮ้ เซี่ยงไฮ้ หนานจิง เซี่ยงไฮ้ เซี่ยงไฮ้ หนานจิง เซี่ยงไฮ้ หนานจิง เซี่ยงไฮ้ หนานจิง เซี่ยงไฮ้ หนานจิง เซี่ยงไฮ้ หนานจิง เซี่ยงไฮ้ หนานจิง เซี่ยงไฮ้ หนานจิง เซี่ยงไฮ้ เซี่ยงไฮ้ หนานจิง เซี่ยงไฮ้ เซี่ยงไฮ้
</div>
เป็นที่น่าสังเกตว่าไม่สามารถแทนที่ช่องว่างภายในได้ (ต้องมีช่องว่างอย่างน้อยหนึ่งช่อง) -
9. สัญกรณ์การออกเสียงภาษาจีน: การใช้แท็กทับทิมและแอตทริบิวต์การจัดแนวทับทิม
ตัวอย่างเช่น สำหรับ <ruby>Zhuyin<rt style="font-size: 11px;">zhu yin</rt></ruby> คุณสามารถใช้ ruby-align เพื่อตั้งค่าการจัดตำแหน่งได้ ดูได้จากคู่มือ CSS คุณสามารถตรวจสอบรายการ ruby-align เพื่อดูรายละเอียดได้