สร้าง CSS
เมื่ออ่านแผ่นสไตล์เบราว์เซอร์จะขึ้นอยู่กับเอกสาร HTML ของรูปแบบ
วิธีการแทรกสไตล์
ใส่แผ่นสไตล์ในสามวิธี:
- สไตล์ชีตภายนอก
- สไตล์ชีตภายใน
- สไตล์แบบอินไลน์
สไตล์ชีตภายนอก
เมื่อรูปแบบถูกนำไปใช้หลายหน้าต้องสไตล์ชีตภายนอกจะเป็นตัวเลือกที่เหมาะ ในกรณีของแผ่นลักษณะภายนอกคุณสามารถเปลี่ยนไฟล์ที่จะเปลี่ยนรูปลักษณ์ของเว็บไซต์ทั้งหมด แต่ละหน้าใช้ <link> แท็กเชื่อมโยงไปยังแผ่นสไตล์ <link> แท็กใน (เอกสาร) หัวหน้า:
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
เบราว์เซอร์จะอ่านจากประกาศ mystyle.css ไฟล์รูปแบบให้สอดคล้องกับการเป็นรูปแบบเอกสาร
สไตล์ชีตภายนอกสามารถแก้ไขได้ในโปรแกรมแก้ไขข้อความใด ๆ ไฟล์ที่ไม่สามารถมีแท็กใด ๆ สไตล์ชีตจะถูกบันทึกไว้ที่มีนามสกุล .css นี่คือตัวอย่างของไฟล์แผ่นสไตล์:
p {margin-left:20px;}
body {background-image:url("../images/back40.gif");}
อย่าปล่อยให้ช่องว่างระหว่างมูลค่าทรัพย์สินและหน่วย ถ้าคุณใช้ "ขอบซ้าย: 20 px" แทน "ขอบซ้าย: 20px" มันก็เป็นเพียงที่ถูกต้องใน IE 6 แต่มันไม่ทำงานใน Mozilla / Firefox หรือ Netscape ใน
สไตล์ชีตภายใน
เมื่อเอกสารเดียวต้องมีรูปแบบพิเศษสไตล์ชีทภายในควรนำมาใช้ คุณสามารถใช้ <style> แท็กในหัวของเอกสารที่จะกำหนดสไตล์ชีทภายในเช่นนี้
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
สไตล์แบบอินไลน์
เนื่องจากประสิทธิภาพการทำงานและเนื้อหาผสมเข้าด้วยกัน, รูปแบบอินไลน์จะสูญเสียจำนวนมากในข้อดีของแผ่นสไตล์ โปรดระมัดระวังวิธีนี้เช่นเมื่อรูปแบบจะต้องมีการใช้เพียงครั้งเดียวในองค์ประกอบหนึ่ง
ที่จะใช้รูปแบบอินไลน์, คุณจำเป็นต้องใช้แอตทริบิวต์สไตล์ (style) ในแท็กที่เกี่ยวข้อง แอตทริบิวต์สไตล์สามารถมีคุณสมบัติ CSS ใด ๆ ตัวอย่างนี้แสดงให้เห็นถึงวิธีการเปลี่ยนสีของย่อหน้าและขอบด้านซ้ายไปนี้:
รูปแบบที่หลาย ๆ
หากคุณลักษณะบางอย่างมีการกำหนดตัวเลือกเหมือนกันในแผ่นสไตล์แตกต่างกันแล้วมูลค่าทรัพย์สินจากแผ่นลักษณะเฉพาะเจาะจงมากขึ้นคือการสืบทอด
ยกตัวอย่างเช่นสไตล์ชีตภายนอกมีสามคุณสมบัติสำหรับตัวเลือก H3:
{
color:red;
text-align:left;
font-size:8pt;
}
แผ่นสไตล์ภายในมีสองคุณสมบัติสำหรับตัวเลือก H3:
{
text-align:right;
font-size:20pt;
}
หากรูปแบบที่มีแผ่นสไตล์ภายในและแผ่นแบบ External Link หน้านี้ในเวลาเดียวกันแล้ว h3 ได้รับคือ:
text-align:right;
font-size:20pt;
นั่นคือคุณสมบัติของสีจะได้รับการสืบทอดมาจากแผ่นลักษณะภายนอกและการจัดเรียงข้อความ (การจัดตำแหน่งข้อความ) และขนาดตัวอักษร (font-size) จะถูกแทนที่ด้วยกฎสไตล์ชีทภายใน
รูปแบบหลายเคลือบหนึ่ง
แผ่นสไตล์ช่วยให้ข้อมูลรูปแบบที่กำหนดไว้ในรูปแบบต่างๆ รูปแบบที่สามารถระบุได้ในองค์ประกอบ HTML ที่เดียวองค์ประกอบแรกของหน้า HTML หรือในไฟล์ CSS ภายนอก แม้หลายแผ่นลักษณะภายนอกสามารถอ้างอิงภายในเอกสาร HTML เดียว
เพื่อเก็บซ้อน
เมื่อองค์ประกอบ HTML เดียวกันจะถูกกำหนดโดยรูปแบบมากกว่าหนึ่งรูปแบบที่จะใช้มันได้หรือไม่
โดยทั่วไปแล้วทุกรูปแบบจะถูกซ้อนกันในแผ่นลักษณะเสมือนใหม่ตามกฎต่อไปนี้ซึ่งมีจำนวน 4 มีความสำคัญสูงสุด
- เบราว์เซอร์เริ่มต้น
- สไตล์ชีตภายนอก
- (แท็กภายในใน <head>) แผ่นลักษณะภายใน
- สไตล์แบบอินไลน์ (องค์ประกอบ HTML ภายใน)
ดังนั้นรูปแบบอินไลน์ (ภายในองค์ประกอบ HTML) มีความสำคัญสูงสุดซึ่งหมายความว่ามันจะเหนือกว่าการประกาศรูปแบบต่อไปนี้: คำสั่งรูปแบบฉลากรูปแบบคำสั่งรูปแบบแผ่นภายนอกหรืองบสไตล์เบราว์เซอร์ (ค่าเริ่มต้น)
เคล็ดลับ: หากคุณใช้ไฟล์รูปแบบภายนอก <head> นอกจากนี้ยังมีการกำหนดรูปแบบแผ่นสไตล์จะเข้ามาแทนที่รูปแบบไฟล์ภายในภายนอก