HTML <style>แท็ก
ตัวอย่าง
การใช้องค์ประกอบ <style> เพื่อนำสไตล์ชีตอย่างง่ายไปใช้กับเอกสาร HTML:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
แท็ ก<style>นี้ใช้เพื่อกำหนดข้อมูลรูปแบบ (CSS) สำหรับเอกสาร
ภายใน<style>องค์ประกอบ คุณระบุวิธีการแสดงองค์ประกอบ HTML ในเบราว์เซอร์
เคล็ดลับและหมายเหตุ
หมายเหตุ:เมื่อเบราว์เซอร์อ่านสไตล์ชีต เบราว์เซอร์จะจัดรูปแบบเอกสาร HTML ตามข้อมูลในสไตล์ชีต หากมีการกำหนดคุณสมบัติบางอย่างสำหรับตัวเลือกเดียวกัน (องค์ประกอบ) ในสไตล์ชีตที่ต่างกัน ค่าจากสไตล์ชีตที่อ่านล่าสุดจะถูกใช้ (ดูตัวอย่างด้านล่าง)!
เคล็ดลับ:หากต้องการลิงก์ไปยังสไตล์ชีตภายนอก ให้ใช้แท็ก<link>
เคล็ดลับ:หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับสไตล์ชีต โปรดอ่าน บทช่วย สอน CSSของ เรา
รองรับเบราว์เซอร์
| Element | |||||
|---|---|---|---|---|---|
| <style> | Yes | Yes | Yes | Yes | Yes |
คุณลักษณะ
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Specifies what media/device the media resource is optimized for |
| type | text/css | Specifies the media type of the <style> tag |
คุณสมบัติสากล
แท็ ก<style>ยังสนับสนุน Global Attributes ในHTML
คุณสมบัติของเหตุการณ์
แท็ ก<style>ยังสนับสนุนแอตทริบิวต์เหตุการณ์ใน HTML
ตัวอย่างเพิ่มเติม
ตัวอย่าง
หลายรูปแบบสำหรับองค์ประกอบเดียวกัน:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
<style>
h1 {color:green;}
p {color:pink;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
หน้าที่เกี่ยวข้อง
กวดวิชา HTML: HTML CSS
กวดวิชา CSS : CSS กวดวิชา
การอ้างอิง HTML DOM: Style Object
การตั้งค่า CSS เริ่มต้น
เบราว์เซอร์ส่วนใหญ่จะแสดง<style>องค์ประกอบด้วยค่าเริ่มต้นดังต่อไปนี้:
style {
display: none;
}