CSS - @ กฎ

บทนี้จะครอบคลุมกฎ @ ที่สำคัญดังต่อไปนี้ -

@import: กฎนำเข้าสไตล์ชีตอื่นไปยังสไตล์ชีตปัจจุบัน
@charset กฎบ่งชี้ถึงชุดอักขระที่สไตล์ชีตใช้
@font-face กฎใช้เพื่ออธิบายหน้าตาแบบอักษรอย่างละเอียดถี่ถ้วนสำหรับใช้ในเอกสาร
!important กฎระบุว่ากฎที่ผู้ใช้กำหนดควรมีความสำคัญเหนือสไตล์ชีตของผู้เขียน

NOTE - มีกฎ @ อื่น ๆ ที่เราจะกล่าวถึงในบทต่อ ๆ ไป

กฎ @import

กฎ @import อนุญาตให้คุณนำเข้าสไตล์จากสไตล์ชีตอื่น ควรปรากฏที่จุดเริ่มต้นของสไตล์ชีตก่อนกฎใด ๆ และค่าของมันคือ URL

สามารถเขียนได้ด้วยวิธีใดวิธีหนึ่งดังต่อไปนี้:

<style type = "text/css">
   <!--
      @import "mystyle.css";
      or
      @import url("mystyle.css");
      .......other CSS rules .....
   -->
</style>

ความสำคัญของกฎ @import คือช่วยให้คุณสามารถพัฒนาสไตล์ชีตของคุณด้วยวิธีการแบบแยกส่วน คุณสามารถสร้างสไตล์ชีตต่างๆแล้วรวมไว้ที่ใดก็ได้ที่คุณต้องการ

กฎ @charset

หากคุณกำลังเขียนเอกสารของคุณโดยใช้ชุดอักขระอื่นที่ไม่ใช่ ASCII หรือ ISO-8859-1 คุณอาจต้องการตั้งค่ากฎ @charset ที่ด้านบนสุดของสไตล์ชีตเพื่อระบุว่าชุดอักขระใดในสไตล์ชีตเขียน

กฎ @charset ต้องเขียนที่จุดเริ่มต้นของสไตล์ชีตโดยไม่ต้องเว้นวรรคก่อน ค่าจะอยู่ในเครื่องหมายคำพูดและควรเป็นหนึ่งในชุดอักขระมาตรฐาน ตัวอย่างเช่น -

<style type = "text/css">
   <!--
      @charset "iso-8859-1"
      .......other CSS rules .....
   -->
</style>

กฎ @ font-face

กฎ @ font-face ใช้เพื่ออธิบายหน้าตาฟอนต์อย่างละเอียดถี่ถ้วนสำหรับใช้ในเอกสาร อาจใช้ @ font-face เพื่อกำหนดตำแหน่งของแบบอักษรสำหรับการดาวน์โหลดแม้ว่าอาจมีข้อ จำกัด เฉพาะในการนำไปใช้งานก็ตาม

โดยทั่วไปแล้ว @ font-face มีความซับซ้อนมากและไม่แนะนำให้ใช้สำหรับผู้ใดยกเว้นผู้ที่เชี่ยวชาญในการวัดแบบอักษร

นี่คือตัวอย่าง -

<style type = "text/css">
   <!--
      @font-face {
         font-family: "Scarborough Light";
         src: url("http://www.font.site/s/scarbo-lt");
      }
      @font-face {
         font-family: Santiago;
         src: local ("Santiago"),
         url("http://www.font.site/s/santiago.tt")
         format("truetype");
         unicode-range: U+??,U+100-220;
         font-size: all;
         font-family: sans-serif;
      }
   -->
</style>

กฎที่สำคัญ

Cascading Style Sheets เรียงซ้อน หมายความว่าสไตล์จะถูกนำไปใช้ในลำดับเดียวกับที่เบราว์เซอร์อ่าน สไตล์แรกจะถูกนำไปใช้แล้วสไตล์ที่สองและอื่น ๆ

กฎสำคัญมีวิธีสร้าง CSS cascade ของคุณ นอกจากนี้ยังรวมถึงกฎที่จะต้องใช้เสมอ กฎที่มีคุณสมบัติ! important จะถูกนำไปใช้เสมอไม่ว่ากฎนั้นจะปรากฏที่ใดในเอกสาร CSS

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

<style type = "text/css">
   <!--
      p { color: #ff0000; }
      p { color: #000000; }
   -->
</style>

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

<html>
   <head>
      <style type = "text/css">
         p { color: #ff0000 !important; }
         p { color: #000000; }
      </style>
   </head>

   <body>
      <p>Tutorialspoint.com</p>
   </body>
</html>

นี่คุณได้ทำp {color: # ff0000! important; }บังคับตอนนี้กฎนี้จะใช้เสมอแม้ว่าคุณจะกำหนดกฎอื่นไว้แล้วp {color: # 000000; }

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