CSS = รูปแบบและสี
จัดแต่งทรงผม HTML กับ CSS
CSS ย่อมาจาก Cascading Style Sheets
จัดแต่งทรงผมสามารถเพิ่มไปยังองค์ประกอบ HTML ใน 3 วิธี:
- Inline - ใช้แอตทริบิวต์สไตล์ในองค์ประกอบ HTML
- ภายใน - ใช้ <style> องค์ประกอบใน HTML <head> ส่วน
- ภายนอก - ใช้มากกว่าหนึ่งไฟล์ CSS ภายนอก
วิธีที่ใช้กันมากที่สุดในการเพิ่มจัดแต่งทรงผมเพื่อให้รูปแบบในไฟล์ CSS แยกต่างหาก แต่ในการกวดวิชานี้เราจะใช้จัดแต่งทรงผมภายในเพราะมันเป็นเรื่องง่ายที่จะแสดงให้เห็นถึงและง่ายขึ้นสำหรับคุณที่จะลองด้วยตัวคุณเอง
คุณสามารถเรียนรู้มากขึ้นเกี่ยวกับ CSS ของเรา สอน CSS
จัดแต่งทรงผมอินไลน์ (Inline CSS)
จัดแต่งทรงผมอินไลน์จะใช้ในการใช้รูปแบบที่ไม่ซ้ำกับองค์ประกอบ HTML ที่เดียว:
จัดแต่งทรงผมอินไลน์ใช้ style แอตทริบิวต์
ตัวอย่างเช่นนี้จะเปลี่ยนสีข้อความของ <h1> องค์ประกอบสีน้ำเงิน:
จัดแต่งทรงผมภายใน (Internal CSS)
จัดแต่งทรงผมภายในจะใช้ในการกำหนดรูปแบบสำหรับหน้าเว็บ HTML หนึ่ง
จัดแต่งทรงผมภายในกำหนดไว้ใน <head> ส่วนของหน้าเว็บ HTML ภายใน <style> องค์ประกอบ:
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> ลองตัวเอง» จัดแต่งทรงผมภายนอก (External CSS)
สไตล์ชีตภายนอกจะใช้ในการกำหนดรูปแบบสำหรับหลายหน้า
ด้วยแผ่นลักษณะภายนอกคุณสามารถเปลี่ยนรูปลักษณ์ของเว็บไซต์ทั้งหมดโดยการเปลี่ยนไฟล์เดียว!
การใช้แผ่นลักษณะภายนอกเพิ่มลิงค์ไปไว้ใน <head> ส่วนของหน้า HTML:
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> ลองตัวเอง» สไตล์ชีตภายนอกสามารถเขียนได้ในโปรแกรมแก้ไขข้อความใด ๆ ไฟล์ที่ไม่ควรมีแท็กใด ๆ แฟ้มแผ่นลักษณะต้องถูกบันทึกไว้ด้วย .css ขยาย
นี่คือวิธีการที่ " styles.css " ดู:
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}CSS แบบอักษร
ซีเอสเอ color คุณสมบัติกำหนดสีของตัวอักษรที่จะใช้สำหรับองค์ประกอบ HTML
ซีเอสเอ font-family คุณสมบัติกำหนดตัวอักษรที่จะใช้สำหรับองค์ประกอบ HTML
ซีเอสเอ font-size คุณสมบัติกำหนดขนาดตัวอักษรที่จะใช้สำหรับองค์ประกอบ HTML
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> ลองตัวเอง» ซีเอสเอแบบกล่อง
องค์ประกอบ HTML ทุกคนมีกล่องรอบแม้ว่าคุณจะไม่สามารถดูได้
ซีเอสเอ border คุณสมบัติกำหนดเส้นขอบที่มองเห็นได้รอบองค์ประกอบ HTML:
ซีเอสเอ padding คุณสมบัติกำหนด padding (space) ภายในพรมแดน:
ซีเอสเอ margin คุณสมบัติกำหนดอัตรากำไรขั้นต้น (space) นอกพรมแดน:
ซีเอสเอตัวอย่างข้างต้นใช้ px เพื่อกำหนดขนาดพิกเซล
id แอตทริบิวต์
ตัวอย่างทั้งหมดข้างต้นใช้ CSS เพื่อองค์ประกอบรูปแบบ HTML ในลักษณะทั่วไป
เพื่อกำหนดรูปแบบพิเศษสำหรับองค์ประกอบพิเศษครั้งแรกเพิ่มแอตทริบิวต์ id ขององค์ประกอบนี้:
<p id="p01">I am different</p>แล้วกำหนดรูปแบบสำหรับองค์ประกอบที่มีเฉพาะ id :
class แอตทริบิวต์
การกำหนดรูปแบบสำหรับชนิดพิเศษ ( class ) ขององค์ประกอบที่เพิ่ม class แอตทริบิวต์องค์ประกอบ:
<p class="error">I am different</p>ตอนนี้คุณสามารถกำหนดรูปแบบที่แตกต่างกันสำหรับองค์ประกอบที่มีเฉพาะชั้น:
ใช้ id เพื่อที่อยู่ single องค์ประกอบ ใช้ class เพื่อที่อยู่ groups ขององค์ประกอบ
บทสรุป
- ใช้ HTML style แอตทริบิวต์สำหรับจัดแต่งทรงผมแบบอินไลน์
- ใช้ HTML <style> องค์ประกอบในการกำหนด CSS ภายใน
- ใช้แบบ HTML <link> องค์ประกอบในการอ้างถึงไฟล์ CSS ภายนอก
- ใช้แบบ HTML <head> องค์ประกอบในการจัดเก็บ <style> และ <link> องค์ประกอบ
- ใช้แบบ CSS color อสังหาริมทรัพย์สำหรับสีข้อความ
- ใช้แบบ CSS font-family อสังหาริมทรัพย์สำหรับอักษรข้อความ
- ใช้ CSS font-size คุณสมบัติสำหรับขนาดข้อความ
- ใช้ CSS border อสังหาริมทรัพย์สำหรับเส้นขอบองค์ประกอบที่มองเห็นได้
- ใช้แบบ CSS padding อสังหาริมทรัพย์สำหรับพื้นที่ภายในชายแดน
- ใช้แบบ CSS margin อสังหาริมทรัพย์สำหรับพื้นที่นอกชายแดน
ทดสอบตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ใช้สิทธิ 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ใช้สิทธิ 5 » ออกกำลังกาย 6 »
รูปแบบแท็ก HTML
| แท็ก | ลักษณะ |
|---|---|
| <style> | กำหนดข้อมูลสไตล์สำหรับเอกสาร HTML |
| <link> | กำหนดความเชื่อมโยงระหว่างเอกสารและทรัพยากรภายนอก |