การใช้สไตล์ชีทในการกำหนดคุณลักษณะของตัวอักษร ตอนที่ 2

2. การกำหนดสกุลอักษรจากภายนอก (@Font-Face Rule)

• @font-face rule ช่วยให้สามารถนำ Font จากภายนอกแสดงผลบนเว็บเบราเซอร์ได้ 
• คุณสมบัติของ font-face ช่วยให้สามารถกำหนดชื่อสกุลและตำแหน่งสกุลอักษรได้ โดยสกุลอักษรที่จะนำมาใช้นั้น จะต้องเป็นนามสกุลTrueType format (TTF)

การใช้สไตล์ชีทในการกำหนดคุณลักษณะของตัวอักษร ตอนที่ 1

Using the CSS Font Properties (Part 1)

1. การกำหนดสกุลอักษร (Specifying Font Family)

    ในการให้เว็บเพจแสดงผลตัวอักษรให้มีลักษณะเป็นไปตามที่ผู้ออกแบบได้ออกแบบไว้นั้น จำต้องมีการกำหนดสกุลให้แก่อักษร เพื่อทราบว่าลักษณะอักษรนั้นจะมีรูปแบบอย่างไร การกำหนดสกุลอักษร (font family) มีรูปแบบพื้นฐาน ดังนี้

font-family: sans-serif;

    หาก font family มีชื่อหลายคำ ให้กำหนด “” ครอบ เช่น “Times New Roman” และ หากมีการกำหนด font family ลำดับรอง ให้ขั้นด้วย เครื่องหมาย Comma

font-family: “Times New Roman”, sans-serif;

    การกำหนดสกุลอักษร โดยใช้ชื่อสกุลสามัญ (generic names) ซึ่งชื่อสกุลสามัญ คือ font family ที่สามารถนำมาใช้ได้ทันที และเป็นที่ทราบโดยทั่วกันว่าจะสามารถแสดงผลบนเว็บเบราเซอร์ได้หลากหลาย

font-family: serif;

font-family: sans-serif; 

font-family: cursive;

font-family: fantasy;

font-family: monospace; 

    Serif แปลว่า เส้นเล็กๆ ของตัวพิมพ์ที่ทำให้เด่นชัด

    Sans แปลว่า ปราศจาก
    Sans-Serif แปลว่า ปราศจากเส้นเล็กๆของตัวพิมพ์

    Font Family ในสกุล Sans-Serif มีอีกหลายลักษณะ เช่น สกุล Arial และ สกุล Helvetica ดังตัวอย่างในภาพ

ตัวอย่าง

การกำหนดสกุลอักษรสามัญ Generic Font Families

p { font-family: sans-serif; }

การระบุเจาะจงสกุลอักษรด้วย “”  Specific Font Families

p { font-family: "lucida console"; }

การระบุสกุลอักษรแบบลำดับ  Font Fallbacks

p { font-family: arial, helvetica; }

ข้อควรระวัง

ในการกำหนดสกุลอักษรนั้น เมื่อแสดงผลบนเว็บเบราเซอร์แต่ละยี่ห้ออาจให้ลักษณะของตัวอักษรที่แตกต่างกัน ดังภาพ

SELECTOR IN CASCADING STYLE SHEET: CSS [Part1]

SELECTOR IN CASCADING STYLE SHEET: CSS
ตัวเลือกสำหรับการกำหนดสไตล์

Selector คือ ตัวเลือกสำหรับการกำหนดไสตล์ โดย Selector เป็นการเลือก element ที่สอดคล้องกับเงื่อนไข เพื่อแสดงผลตามที่ Selector นั้นๆ กำหนดไว้เฉพาะนั่นเอง โดย Selector มีโครงสร้างดังนี้

Selector {
          Property: Value;}

โดยที่

          Selector คือ ชื่อของตัวเลือกสำหรับการกำหนดสไตล์
          Property คือ คุณสมบัติที่ต้องการกำหนดการแสดงผล
          Value คือ ค่าของคุณสมบัติ (Property)
          เครื่องหมาย { } คือ ขอบเขตของ Selector นั้นๆ
          เครื่องหมาย : คือ การกำหนดค่าของ Property
          เครื่องหมาย ; คือ การจบการกำหนดค่าของ Property
          ชุดของ Property: Value; เรียกว่า Declaration

Selector นั้นมีหลากหลายแบบ โดยสามารถจำแนกเป็น 6 ประเภทใหญ่ๆ คือ

          1. ตัวเลือกอเนกประสงค์ (Universal Selector)

          2. ตัวเลือกชนิดอีลิเมนท์ (Element Selector)

          3. ตัวเลือกชนิดไอดี (ID Selector)

          4. ตัวเลือกชนิดคลาส (Class Selector)

          5. ตัวเลือกชนิดแอ็ตทริบิวท์ (Attribute Selector)

          6. ตัวเลือกเทียม (Pseudo-Selector)