Texts เล่นกับตัวหนังสือ

css กับการจัดการตัวหนังสือ มึน งง และ อ้าวเฮ้ย อาจจะเกิดขึ้นกับหลายๆ คน เมื่อได้เห็นลักษณะของการเขียนบทความของผม เพราะมันออกจะดู มั่วๆ

ไร้ระเบียบแบบแผนไปหน่อย จับโน่นมาก่อน จับนี่มาหลัง ทั้งที่จริงมันควรจะเรียงแบบ เป็นขั้นเป็นตอน อย่างว่าแหละครับ คนที่จะเริ่มปั่นไปพร้อมๆ กับการเขียนเว็บด้วย CSS นี่ อย่างน้อยต้องรู้ html กันมาอยู่แล้ว ผมก็เลยถือเอาว่า ทุกท่าน ไม่มีทาง งง แน่นอน ก็เลยเขียนไปๆ มาๆ อย่างนี้

สำหรับวันนี้มาว่ากันด้วยเรื่องของ ตัวหนังสือกันครับ สำหรับการกำหนดว่า เว็บเราจะใช้ตัวหนังสือ อะไรเป็นฐาน หรือมาตรฐาน ของเว็บ ให้แสดงสีนี้ ทุกหน้า หรือ ขนาดเท่านี้ ทุกหน้า เราสามารถกำหนดได้โดย

 body {
 font-family: Tahoma, Ms Sans Serif;
font-size: 0.8em;
color: #000000;
}

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

การกำหนดสีตัวอักษรให้แตกต่างกันในแต่ละคลาส เช่น

ใน box ใดๆ ที่เราคิดว่าจะให้ตัวหนังสือเป็นสีอื่น ไม่ใช่สีดำ

body {
margin: 0 auto;
padding: 0;
background-color: #f6f8ef;
font-family: Tahoma;
font-size: 0.9em;
color: #000000;
}

คลาสที่ใช้ลักษณะตัวหนังสือที่กำหนดโดย body

.boxblack {
width: 600px;
height: 100px;
position:relative;
float: none;
margin: 0 auto;
}

ตัวหนังสือที่ไม่ใช่สี ดำ แต่เป็นสีส้ม #FF9900

.box {
width: 600px;
position:relative;
float: none;
margin: 0 auto;
}
.box P {
color: #ff9900;
}

<div class="box">
 <p> ตัวหนังสือที่ไม่ใช่สี ดำ แต่เป็นสีส้ม #FF9900 </p>
</div>

การเขียน .box P { } แทนที่จะเขียน P เฉยๆ เป็นการเจาะจงว่า ให้กำหนดเฉพาะ P ที่ยู่ในคลาส box เท่านั้น ตั้งหนังสือที่ถูกครอบอยู่ด้วย P ใน คลาส .box จะแสดงเป็นสี #FF9900; เสมอ