CSS คืออะไร?
CSSย่อมาจากC ascading S tyle S heets
CSS อธิบายวิธีการแสดงองค์ประกอบHTML
ตัวอย่าง CSS
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
คลิกที่ปุ่ม "ลองด้วยตัวคุณเอง" เพื่อดูว่ามันทำงานอย่างไร
ไวยากรณ์ CSS
กฎ CSS ประกอบด้วยตัวเลือกและบล็อกการประกาศ :
ตัวเลือกชี้ไปที่องค์ประกอบ HTML เพื่อจัดรูปแบบ (h1)
บล็อกการประกาศ (ในวงเล็บปีกกา) มีการประกาศตั้งแต่หนึ่งรายการขึ้นไปโดยคั่นด้วยเครื่องหมายอัฒภาค
การประกาศแต่ละรายการมีชื่อคุณสมบัติ CSS และค่า โดยคั่นด้วยเครื่องหมายทวิภาค
ในตัวอย่างต่อไปนี้ องค์ประกอบ <p> ทั้งหมดจะถูกจัดกึ่งกลาง สีแดง และมีขนาดแบบอักษร 32 พิกเซล:
ตัวอย่าง
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
ตัวอย่างเดียวกันสามารถเขียนได้ดังนี้:
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
สไตล์ชีตภายนอก
สไตล์ชีต CSS สามารถเก็บไว้ใน ไฟล์ ภายนอก ได้ :
mystyle.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
สไตล์ชีตภายนอกเชื่อมโยงกับหน้า HTML ที่มีแท็ก<link> :
ตัวอย่าง
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
สไตล์อินไลน์
ตัวอย่าง
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
ลำดับการเรียงซ้อน
หากมีการระบุสไตล์ที่แตกต่างกันสำหรับองค์ประกอบ HTML สไตล์นั้นจะ เรียงต่อกันเป็นสไตล์ใหม่โดยมีลำดับความสำคัญดังต่อไปนี้:
- ลำดับความสำคัญ 1: สไตล์อินไลน์
- ลำดับความสำคัญ 2: สไตล์ชีตภายนอกและภายใน
- ลำดับความสำคัญ 3: ค่าเริ่มต้นของเบราว์เซอร์
- หากมีการกำหนดสไตล์ที่แตกต่างกันในระดับความสำคัญเดียวกัน อันสุดท้ายจะมีลำดับความสำคัญสูงสุด
ตัวอย่าง
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
CSS Demo - หนึ่งหน้า HTML - หลายรูปแบบ!
ที่นี่เราจะแสดงหน้า HTML หนึ่งหน้าที่แสดงด้วย 4 สไตล์ชีตที่แตกต่างกัน
คลิกที่ปุ่มสไตล์ชีต (1-4) เพื่อดูหน้าที่แสดงด้วยสไตล์ที่แตกต่างกัน
กวดวิชา CSS แบบเต็ม
นี่เป็นคำอธิบายสั้นๆ ของ CSS
สำหรับการสอน CSS แบบเต็ม ให้ไปที่W3Schools CSS Tutorial
สำหรับการอ้างอิง CSS แบบเต็ม ให้ไปที่W3Schools CSS Reference