เรียนรู้เพิ่มเติมเกี่ยวกับ CSS

  • 4 นาที

เรามาสํารวจวิธีที่ CSS สามารถทําให้การจัดการเนื้อหาของคุณง่ายขึ้นและเนื้อหาของคุณน่าสนใจมากขึ้นสําหรับผู้อ่านของคุณ

ความ คิด เห็น

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

สําคัญ

ข้อคิดเห็นของ CSS เป็นแบบสาธารณะ และสามารถเข้าถึงได้โดยทั้งเบราว์เซอร์และผู้ใช้ของเว็บไซต์ของคุณ อย่า จัดเก็บข้อมูลที่สําคัญในข้อคิดเห็น

ข้อคิดเห็น CSS มีการจัดรูปแบบที่แตกต่างจากข้อคิดเห็น HTML ข้อคิดเห็นใน HTML ใช้ไวยากรณ์ <!--comment-->

การตั้งค่าแบบอักษร

คุณสามารถใช้ CSS เพื่อบอกเบราว์เซอร์ว่าแบบอักษรใดที่คุณต้องการใช้สําหรับข้อความที่ระบุ บางครั้งคุณต้องการใช้ Arial เพื่อความยากง่ายในการอ่านหรือสิ่งที่ชื่นชอบสําหรับสไตล์ รูปต่อไปนี้แสดงบางข้อความใน Arial และข้อความอื่น ๆ ในแบบอักษรที่เรียกว่า "ผลกระทบ"

สกรีนช็อตของการแสดงผลเบราว์เซอร์ของข้อความ H T M L ในสองแบบอักษร

ตัวเลือกทั่วไปส่วนใหญ่สําหรับการตั้งค่าฟอนต์ที่จะใช้บนหน้าคือ font-family โดยทั่วไปแล้ว font-family จะถูกตั้งค่าเป็นรายการแบบอักษร ทําให้เบราว์เซอร์สามารถใช้แบบอักษรแรกที่แสดงที่สามารถสนับสนุนได้ ตัวอย่างเช่น การตั้งค่าของความพยายาม Tahoma, Verdana, sans-serif ที่จะใช้ Tahoma ตามด้วย Verdana และสุดท้ายเป็นแบบอักษรซานเซอริฟทั่วไป

คุณยังสามารถใช้ตัวเลือกอื่น ๆ เช่น สไตล์ น้ําหนัก และการตกแต่ง font-style ใช้ในการทําตัวเอียงข้อความโดยการตั้งค่าเป็น italic font-weight รองรับการตั้งค่าตัวหนาที่แตกต่างกันโดย bold เป็นเรื่องธรรมดาที่สุด และสุดท้าย text-decoration จะถูกใช้เพื่อ underlineoverlineหรือ line-through ข้อความ

CSS ผล
font-weight: bold; สาธิต
font-style: italic; สาธิต
text-decoration: line-through; สาธิต

text-decoration อาจแตกต่างจากตัวเลือกอื่น ๆ ที่ใช้ในการปรับเปลี่ยนการแสดงผลของแบบอักษร ความแตกต่างที่สําคัญคือ text-decoration ถูกใช้เพื่อนําลักษณะไปใช้รอบ ๆ หรือบนข้อความ แต่ไม่ได้ปรับเปลี่ยนแบบอักษรจริง ตัวหนาและตัวเอียงกําลังปรับเปลี่ยนแบบอักษร

โน้ต

โดยทั่วไปควรหลีกเลี่ยงการใช้ขีดเส้นใต้บนเว็บเพจ เนื่องจากข้อความอาจดูเหมือนเป็นการเชื่อมโยงหลายมิติ

ปรับขนาดแบบอักษร

font-size ช่วยให้คุณสามารถระบุขนาดฟอนต์ที่คุณต้องการใช้ CSS มีความสามารถในการใช้การปรับขนาดแบบสัมบูรณ์หรือแบบสัมพัทธ์ โดยทั่วไปการปรับขนาดแบบสัมบูรณ์จะถูกตั้งค่าเป็นพิกเซลและใช้ขนาดที่ระบุเสมอ การปรับขนาดที่สัมพันธ์กันอาจขึ้นอยู่กับขนาดเริ่มต้นสําหรับเบราว์เซอร์และวัดเป็นเปอร์เซ็นต์หรือขึ้นอยู่กับการปรับขนาดขององค์ประกอบอ้างอิง

โน้ต

ขนาดฟอนต์เริ่มต้นสําหรับเบราว์เซอร์จํานวนมากคือ 16 พิกเซล

สามารถวัดขนาดแบบสัมบูรณ์เป็นพิกเซลและระบุใน CSS โดยใช้ px หากต้องการตั้งค่าแบบอักษรเป็น 14 พิกเซล คุณสามารถใช้คําสั่ง font-size: 14px;ได้

โดยทั่วไปแล้ว การปรับขนาดแบบสัมพัทธ์สําหรับแบบอักษรจะถูกวัดโดยใช้ em หรือ rem em สั้นสําหรับองค์ประกอบ และสัมพันธ์กับพาเรนต์ (em) หรือราก (rem) รากคือองค์ประกอบ html 1em หรือ 1rem เท่ากับขนาดขององค์ประกอบหลักหรือราก ในขณะที่ 2em หรือ 2em จะเป็นสองเท่าของขนาด เนื่องจากขนาดหน้าจออาจแตกต่างกัน โดยทั่วไปแล้วจะเป็นการใช้งานการปรับขนาดแบบสัมพัทธ์เมื่อใดก็ตามที่เป็นไปได้

พิจารณา HTML และ CSS ต่อไปนี้เป็นตัวอย่าง:

<html>
    <body>  
        <div>Sample text</div>
    </body>
</html>

html {
    font-size: 18px;
}
div {
    font-size: 14px;
}

ถ้าdivองค์ประกอบ1emเป็น 14 พิกเซลเนื่องจากพาเรนต์เป็น div และตั้งค่าเป็น 14pxในขณะที่1remจะเป็น 18 พิกเซลเนื่องจากรากhtmlถูกตั้งค่าเป็น18px

1.5em สําหรับองค์ประกอบ div จะเป็น 21 พิกเซล (14 * 1.5 = 21) และ 1.5rem จะเป็น 27 พิกเซล (18 * 1.5 = 27) คุณสามารถใช้ em และ rem เพื่อให้แน่ใจว่าส่วนที่เหลือของหน้าจะปรับขนาดเมื่อคุณอัปเดตขนาดหลักหรือราก

ธง

คุณสามารถตั้งค่าสีแบบอักษรได้โดยใช้คุณสมบัติ color color สามารถตั้งค่าเป็นค่า RGB (สีแดง สีเขียว สีน้ําเงิน) หรือหนึ่งในสีที่มีชื่อมากมาย เช่น black หรือ lightgray

ค่า RGB ใน CSS สามารถเป็นค่าเลขหกที่ขึ้นต้นด้วย #หรือค่า 0 ถึง 255 ภายในฟังก์ชัน rgb ได้ หากต้องการตั้งค่าสีเป็นเฉดสีน้ําตาลตามค่าเริ่มต้น คุณจะใช้ color: brown; สําหรับเฉดสีม่วงแบบกําหนดเอง คุณอาจใช้ color: #7462e0

/* named value */
div {
    color: brown;
}

/* RGB hex value */
h1 {
    color: #7462e0;
}

/* RGB function */
h2 {
    color: rgb(105, 6, 19);
}

สําคัญ

การเลือกสีควรพิจารณาผู้ที่มีความบกพร่องในการมองเห็นสีเสมอ คุณสามารถใช้เครื่องมือ เช่น Color Safe เพื่อช่วยในการเลือกสีที่ตัดกัน เพื่อให้แน่ใจว่าผู้ใช้ทุกคนสามารถเข้าถึงไซต์ของคุณได้

ในขณะที่คุณอาจสงสัยว่ามีสีที่มีชื่อมากมายและค่า RGB เสนอชุดตัวเลือกไม่มีที่สิ้นสุด ผู้แก้ไขเช่น vscode.dev หรือ Visual Studio Code สามารถช่วยระบุค่าสีที่พร้อมใช้งานได้ ตัวแก้ไขทั้งสองแสดงตัวอย่างตัวอย่างสีใน CSS ของคุณ หากคุณวางเมาส์เหนือตัวอย่าง คุณจะเห็นตัวเลือกสีที่คุณสามารถใช้เพื่อตั้งค่าสีที่คุณต้องการได้

สกรีนช็อตของตัวเลือกสีจาก Visual Studio Code