CSS - การรวม

มีสี่วิธีในการเชื่อมโยงสไตล์กับเอกสาร HTML ของคุณ วิธีการที่ใช้บ่อยที่สุดคือ CSS แบบอินไลน์และ CSS ภายนอก

CSS แบบฝัง - องค์ประกอบ <style>

คุณใส่กฎ CSS ลงในเอกสาร HTML ได้โดยใช้องค์ประกอบ <style> แท็กนี้อยู่ในแท็ก <head> ... </head> กฎที่กำหนดโดยใช้ไวยากรณ์นี้จะนำไปใช้กับองค์ประกอบทั้งหมดที่มีอยู่ในเอกสาร นี่คือไวยากรณ์ทั่วไป -

<!DOCTYPE html>
<html>
   <head>
      <style type = "text/css" media = "all">
         body {
            background-color: linen;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      </style>
   </head>   
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณลักษณะ

แอตทริบิวต์ที่เกี่ยวข้องกับองค์ประกอบ <style> คือ -

แอตทริบิวต์	มูลค่า	คำอธิบาย
ชนิด	ข้อความ / css	ระบุภาษาสไตล์ชีตเป็นชนิดเนื้อหา (ชนิด MIME) นี่คือแอตทริบิวต์ที่จำเป็น
สื่อ	หน้าจอ tty โทรทัศน์ การฉายภาพ มือถือ พิมพ์ อักษรเบรลล์ หู ทั้งหมด	ระบุอุปกรณ์ที่จะแสดงเอกสาร ค่าเริ่มต้นคือทั้งหมด นี่เป็นแอตทริบิวต์ที่เป็นทางเลือก

Inline CSS - แอตทริบิวต์สไตล์

คุณสามารถใช้สไตล์แอตทริบิวต์ขององค์ประกอบ HTML ใดก็ได้เพื่อกำหนดกฎสไตล์ กฎเหล่านี้จะใช้กับองค์ประกอบนั้นเท่านั้น นี่คือไวยากรณ์ทั่วไป -

<element style = "...style rules....">

คุณลักษณะ

แอตทริบิวต์	มูลค่า	คำอธิบาย
สไตล์	กฎสไตล์	ค่าแอตทริบิวต์styleคือการรวมกันของการประกาศสไตล์ที่คั่นด้วยอัฒภาค (;)

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างของ CSS แบบอินไลน์ตามไวยากรณ์ด้านบน -

<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

CSS ภายนอก - องค์ประกอบ <link>

องค์ประกอบ <link> สามารถใช้เพื่อรวมไฟล์สไตล์ชีทภายนอกในเอกสาร HTML ของคุณ

สไตล์ชีตภายนอกคือไฟล์ข้อความแยกต่างหากที่มี .cssส่วนขยาย. คุณกำหนดกฎสไตล์ทั้งหมดภายในไฟล์ข้อความนี้จากนั้นคุณสามารถรวมไฟล์นี้ในเอกสาร HTML ใดก็ได้โดยใช้องค์ประกอบ <link>

นี่คือไวยากรณ์ทั่วไปของการรวมไฟล์ CSS ภายนอก -

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

คุณลักษณะ

แอตทริบิวต์ที่เกี่ยวข้องกับองค์ประกอบ <style> คือ -

แอตทริบิวต์	มูลค่า	คำอธิบาย
ชนิด	ข้อความ css	ระบุภาษาสไตล์ชีตเป็นชนิดเนื้อหา (ชนิด MIME) ต้องระบุแอตทริบิวต์นี้
href	URL	ระบุไฟล์สไตล์ชีตที่มีกฎสไตล์ แอตทริบิวต์นี้จำเป็น
สื่อ	หน้าจอ tty โทรทัศน์ การฉายภาพ มือถือ พิมพ์ อักษรเบรลล์ หู ทั้งหมด	ระบุอุปกรณ์ที่จะแสดงเอกสาร ค่าเริ่มต้นคือทั้งหมด นี่เป็นแอตทริบิวต์ทางเลือก

ตัวอย่าง

พิจารณาไฟล์สไตล์ชีตธรรมดาที่มีชื่อว่าmystyle.cssโดยมีกฎต่อไปนี้ -

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

ตอนนี้คุณสามารถรวมmystyle.cssไฟล์นี้ไว้ในเอกสาร HTML ได้ดังนี้ -

<head>
   <link type = "text/css" href = "mystyle.css" media = " all" />
</head>

CSS ที่นำเข้า - @import Rule

@import ใช้เพื่อนำเข้าสไตล์ชีตภายนอกในลักษณะที่คล้ายกับองค์ประกอบ <link> นี่คือไวยากรณ์ทั่วไปของกฎ @import

<head>
   @import "URL";
</head>

นี่คือ URL ของไฟล์สไตล์ชีตที่มีกฎสไตล์ คุณสามารถใช้ไวยากรณ์อื่นได้เช่นกัน -

<head>
   @import url("URL");
</head>

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่แสดงวิธีการนำเข้าไฟล์สไตล์ชีตลงในเอกสาร HTML -

<head>
   @import "mystyle.css";
</head>

การแทนที่กฎ CSS

เราได้พูดถึงสี่วิธีในการรวมกฎสไตล์ชีตในเอกสาร HTML นี่คือกฎในการแทนที่กฎสไตล์ชีตใด ๆ

สไตล์ชีตแบบอินไลน์จะมีลำดับความสำคัญสูงสุด ดังนั้นมันจะลบล้างกฎใด ๆ ที่กำหนดไว้ในแท็ก <style> ... </style> หรือกฎที่กำหนดไว้ในไฟล์สไตล์ชีตภายนอก
กฎใด ๆ ที่กำหนดในแท็ก <style> ... </style> จะลบล้างกฎที่กำหนดไว้ในไฟล์สไตล์ชีตภายนอก
กฎใด ๆ ที่กำหนดไว้ในไฟล์สไตล์ชีตภายนอกจะมีลำดับความสำคัญต่ำที่สุดและกฎที่กำหนดในไฟล์นี้จะถูกนำไปใช้ก็ต่อเมื่อกฎสองข้อข้างต้นไม่สามารถใช้ได้

การจัดการเบราว์เซอร์เก่า

ยังมีเบราว์เซอร์เก่าจำนวนมากที่ไม่รองรับ CSS ดังนั้นเราควรระมัดระวังในขณะที่เขียน Embedded CSS ในเอกสาร HTML ตัวอย่างต่อไปนี้แสดงวิธีใช้แท็กความคิดเห็นเพื่อซ่อน CSS จากเบราว์เซอร์รุ่นเก่า -

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

ความคิดเห็น CSS

หลายครั้งคุณอาจต้องใส่ความคิดเห็นเพิ่มเติมในบล็อกสไตล์ชีตของคุณ ดังนั้นจึงเป็นเรื่องง่ายมากที่จะแสดงความคิดเห็นใด ๆ ในสไตล์ชีต คุณสามารถใส่ความคิดเห็นของคุณลงใน /*..... นี่คือความคิดเห็นในสไตล์ชีต ..... * /.

คุณสามารถใช้ / * .... * / เพื่อแสดงความคิดเห็นบล็อกหลายบรรทัดในลักษณะเดียวกับที่คุณทำในภาษาโปรแกรม C และ C ++

ตัวอย่าง

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
            /* This is a single-line comment */
            text-align: center;
         }
         /* This is a multi-line comment */
      </style>
   </head>

   <body>
      <p>Hello World!</p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -