CSS บทนำ
CSS เป็นภาษาที่เราใช้ในการจัดรูปแบบเว็บเพจ
CSS คืออะไร?
- CSS ย่อมาจาก Cascading Style Sheets
- CSS อธิบายวิธีการแสดงองค์ประกอบ HTML บนหน้าจอ กระดาษ หรือสื่ออื่นๆ
- CSS ช่วยประหยัดงานได้มาก สามารถควบคุมเลย์เอาต์ของหน้าเว็บหลาย ๆ หน้าได้พร้อมกัน
- สไตล์ชีตภายนอกถูกเก็บไว้ในไฟล์ CSS
CSS Demo - หนึ่งหน้า HTML - หลายรูปแบบ!
ที่นี่ เราจะแสดงหน้า HTML หนึ่งหน้าที่แสดงด้วยสไตล์ชีตที่แตกต่างกันสี่แบบ คลิกลิงก์ "สไตล์ชีต 1" "สไตล์ชีต 2" "สไตล์ชีต 3" "สไตล์ชีต 4" ด้านล่างเพื่อดูสไตล์ต่างๆ
ทำไมต้องใช้ CSS?
CSS ใช้เพื่อกำหนดสไตล์สำหรับหน้าเว็บของคุณ รวมถึงการออกแบบ เลย์เอาต์ และรูปแบบต่างๆ ในการแสดงผลสำหรับอุปกรณ์และขนาดหน้าจอต่างๆ
ตัวอย่าง CSS
body
{
background-color: lightblue;
}
h1
{
color: white;
text-align: center;
}
p
{
font-family: verdana;
font-size: 20px;
}
CSS แก้ปัญหาใหญ่
HTML ไม่เคยมีเจตนาให้มีแท็กสำหรับการจัดรูปแบบหน้าเว็บ!
HTML ถูกสร้างขึ้นเพื่ออธิบายเนื้อหาของหน้าเว็บ เช่น:
<h1>นี่คือหัวเรื่อง</h1>
<p>นี่คือย่อหน้า</p>
เมื่อมีการเพิ่มแท็ก เช่น <font> และแอตทริบิวต์ของสีลงในข้อกำหนด HTML 3.2 ทำให้เกิดฝันร้ายสำหรับนักพัฒนาเว็บ การพัฒนาเว็บไซต์ขนาดใหญ่ที่มีการเพิ่มฟอนต์และข้อมูลสีลงในทุกๆ หน้า กลายเป็นกระบวนการที่ใช้เวลานานและมีราคาแพง
เพื่อแก้ปัญหานี้ World Wide Web Consortium (W3C) ได้สร้าง CSS
CSS ลบการจัดรูปแบบสไตล์ออกจากหน้า HTML!
หากคุณไม่ทราบว่า HTML คืออะไร เราขอแนะนำให้คุณอ่าน บทช่วย สอน HTMLของ เรา
CSS ช่วยประหยัดงานได้มาก!
โดยปกติ คำจำกัดความของสไตล์จะถูกบันทึกไว้ในไฟล์ .css ภายนอก
ด้วยไฟล์สไตล์ชีตภายนอก คุณสามารถเปลี่ยนรูปลักษณ์ของทั้งเว็บไซต์ได้โดยการเปลี่ยนเพียงไฟล์เดียว!