รูปแบบ HTML - CSS
CSS ย่อมาจาก Cascading Style Sheets
CSS ช่วยประหยัดงานได้มาก สามารถควบคุมเลย์เอาต์ของหน้าเว็บหลาย ๆ หน้าพร้อมกันได้
CSS = สไตล์และสี
CSS คืออะไร?
Cascading Style Sheets (CSS) ใช้เพื่อจัดรูปแบบเค้าโครงของหน้าเว็บ
ด้วย CSS คุณสามารถควบคุมสี แบบอักษร ขนาดของข้อความ ระยะห่างระหว่างองค์ประกอบ วิธีจัดตำแหน่งและจัดวางองค์ประกอบ รูปภาพพื้นหลังหรือสีพื้นหลังใดที่จะใช้ จอแสดงผลต่างๆ สำหรับอุปกรณ์และขนาดหน้าจอที่แตกต่างกัน และ ล้นหลาม!
เคล็ดลับ:คำว่าcascadingหมายความว่าสไตล์ที่ใช้กับองค์ประกอบหลักจะนำไปใช้กับองค์ประกอบย่อยทั้งหมดภายในพาเรนต์ด้วย ดังนั้น หากคุณตั้งค่าสีของข้อความเนื้อหาเป็น "สีน้ำเงิน" หัวเรื่อง ย่อหน้า และองค์ประกอบข้อความอื่นๆ ภายในเนื้อหาจะได้รับสีเดียวกัน (เว้นแต่คุณจะระบุอย่างอื่น)
การใช้ CSS
คุณสามารถเพิ่ม CSS ลงในเอกสาร HTML ได้ 3 วิธี:
- อินไลน์ - โดยใช้
styleแอตทริบิวต์ภายในองค์ประกอบ HTML - ภายใน - โดยใช้
<style>องค์ประกอบใน<head>ส่วน - ภายนอก - โดยใช้
<link>องค์ประกอบเพื่อเชื่อมโยงไปยังไฟล์ CSS ภายนอก
วิธีที่พบบ่อยที่สุดในการเพิ่ม CSS คือการเก็บสไตล์ไว้ในไฟล์ CSS ภายนอก อย่างไรก็ตาม ในบทช่วยสอนนี้ เราจะใช้รูปแบบอินไลน์และสไตล์ภายใน เนื่องจากจะสาธิตได้ง่ายกว่าและให้คุณลองใช้เองได้ง่ายขึ้น
CSS แบบอินไลน์
CSS แบบอินไลน์ใช้เพื่อนำสไตล์ที่ไม่ซ้ำไปใช้กับองค์ประกอบ HTML เดียว
CSS แบบอินไลน์ใช้styleแอตทริบิวต์ขององค์ประกอบ HTML
ตัวอย่างต่อไปนี้กำหนดสีข้อความของ<h1>องค์ประกอบเป็นสีน้ำเงิน และสีข้อความของ<p>องค์ประกอบเป็นสีแดง
ตัวอย่าง
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p>
CSS ภายใน
CSS ภายในใช้เพื่อกำหนดสไตล์สำหรับหน้า HTML หน้าเดียว
CSS ภายในถูกกำหนดไว้ใน<head>ส่วนของหน้า HTML ภายใน<style>องค์ประกอบ
ตัวอย่างต่อไปนี้กำหนดสีข้อความของ<h1>องค์ประกอบทั้งหมด (ในหน้านั้น) เป็นสีน้ำเงิน และสีข้อความของ<p>องค์ประกอบทั้งหมดเป็นสีแดง นอกจากนี้ หน้าจะแสดงด้วยสีพื้นหลัง "powderblue":
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS ภายนอก
สไตล์ชีตภายนอกใช้เพื่อกำหนดสไตล์สำหรับหน้า HTML จำนวนมาก
หากต้องการใช้สไตล์ชีตภายนอก ให้เพิ่มลิงก์ใน<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>
สไตล์ชีตภายนอกสามารถเขียนได้ในโปรแกรมแก้ไขข้อความ ไฟล์ต้องไม่มีโค้ด HTML และต้องบันทึกด้วยนามสกุล .css
นี่คือลักษณะของไฟล์ "styles.css":
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
เคล็ดลับ:ด้วยสไตล์ชีตภายนอก คุณสามารถเปลี่ยนรูปลักษณ์ของทั้งเว็บไซต์ได้โดยการเปลี่ยนไฟล์เดียว!
CSS สี แบบอักษร และขนาด
ในที่นี้ เราจะสาธิตคุณสมบัติ CSS ที่ใช้กันทั่วไป คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับพวกเขาในภายหลัง
คุณสมบัติ CSS colorกำหนดสีข้อความที่จะใช้
คุณสมบัติ CSS font-familyกำหนดแบบอักษรที่จะใช้
คุณสมบัติ CSS font-sizeกำหนดขนาดข้อความที่จะใช้
ตัวอย่าง
การใช้คุณสมบัติสี CSS ตระกูลฟอนต์ และขนาดฟอนต์:
<!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>
CSS Border
คุณสมบัติ CSS borderกำหนดเส้นขอบรอบองค์ประกอบ HTML
เคล็ดลับ:คุณสามารถกำหนดเส้นขอบสำหรับองค์ประกอบ HTML เกือบทั้งหมดได้
ตัวอย่าง
การใช้คุณสมบัติเส้นขอบ CSS:
p {
border: 2px
solid powderblue;
}
CSS Padding
คุณสมบัติ CSS paddingกำหนดช่องว่างภายใน (ช่องว่าง) ระหว่างข้อความและเส้นขอบ
ตัวอย่าง
การใช้คุณสมบัติเส้นขอบและช่องว่างของ CSS:
p {
border: 2px
solid powderblue;
padding: 30px;
}
มาร์จิ้น CSS
คุณสมบัติ CSS marginกำหนดระยะขอบ (ช่องว่าง) นอกเส้นขอบ
ตัวอย่าง
การใช้คุณสมบัติขอบ CSS และระยะขอบ:
p {
border: 2px
solid powderblue;
margin: 50px;
}
ลิงก์ไปยัง CSS ภายนอก
สามารถอ้างอิงสไตล์ชีตภายนอกด้วย URL แบบเต็มหรือด้วยเส้นทางที่สัมพันธ์กับหน้าเว็บปัจจุบัน
ตัวอย่าง
ตัวอย่างนี้ใช้ URL แบบเต็มเพื่อลิงก์ไปยังสไตล์ชีต:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
ตัวอย่าง
ตัวอย่างนี้เชื่อมโยงไปยังสไตล์ชีตที่อยู่ในโฟลเดอร์ html บนเว็บไซต์ปัจจุบัน:
<link rel="stylesheet" href="/html/styles.css">
ตัวอย่าง
ตัวอย่างนี้เชื่อมโยงไปยังสไตล์ชีตที่อยู่ในโฟลเดอร์เดียวกับหน้าปัจจุบัน:
<link rel="stylesheet" href="styles.css">
คุณสามารถอ่านเพิ่มเติมเกี่ยวกับพา ธของไฟล์ได้ในบทHTML File Paths
สรุปบท
- ใช้แอตทริบิวต์ 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สำหรับช่องว่างนอกเส้นขอบ
เคล็ดลับ:คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ CSS ได้ใน บทช่วย สอน CSSของ เรา
แบบฝึกหัด HTML
แท็กสไตล์ HTML
| Tag | Description |
|---|---|
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |
สำหรับรายการแท็ก HTML ทั้งหมดที่มีอยู่ โปรดไปที่การอ้างอิงแท็ก HTMLของ เรา