ค่าเริ่มต้นของ W3.CSS
W3.CSS อ่านง่าย
หน้า W3.CSS นั้นอ่านง่าย แม้แต่ผู้ที่มีความบกพร่องในการอ่านเล็กน้อย
- ขนาดตัวอักษรเริ่มต้นคือ 15px
- แบบอักษรเริ่มต้นคือ Verdana ซึ่งมีการเว้นวรรคตัวอักษรที่ดี
- ระยะห่างบรรทัดเริ่มต้น (1.5) ก็ดีมากเช่นกัน
หัวข้อ HTML <h1> - <h6>
ตามค่าเริ่มต้น รูปแบบ W3.CSS ส่วนหัว HTML มีลักษณะดังนี้:
ตัวอย่าง
<h1>Heading 1 (36px)</h1>
<h2>Heading 2 (30px)</h2>
<h3>Heading 3 (24px)</h3>
<h4>Heading 4 (20px)</h4>
<h5>Heading 5 (18px)</h5>
<h6>Heading 6 (16px)</h6>
คลาสขนาดตัวอักษร
ควรใช้หัวเรื่องสำหรับสิ่งที่เป็น: หัวเรื่อง
ด้วย W3.CSS ขนาดแบบอักษรสามารถกำหนดได้ตาม คลาส ขนาด w3- ต่อไปนี้ :
ตัวอย่าง
w3-tiny
w3-small
w3-medium (Default)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo
เอาชนะ W3.CSS Defaults
การลบล้างการตั้งค่าเริ่มต้นของ W3.CSS ทำได้ง่ายมาก
คุณมีอย่างน้อยสามตัวเลือก:
- แทนที่การตั้งค่าเริ่มต้นในส่วน <head> ของเพจของคุณ
- เพิ่มไฟล์ CSS ของคุณเองหลัง W3.CSS
- ดาวน์โหลดและเปลี่ยนเนื้อหาของไฟล์ W3.CSS
แทนที่ใน<head>
h1{font-size:64px;}
h2{font-size:48px;}
h3{font-size:36px;}
h4{font-size:24px;}
h5{font-size:20px;}
h6{font-size:18px;}
เพิ่ม CSS . ของคุณเอง
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="myStyle.css">
เปลี่ยน W3.CSS
h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px}
การเปลี่ยนแบบอักษรเริ่มต้น
ในส่วนหัวของหน้าเว็บของคุณ (หรือในสไตล์ชีตของคุณ) หลังจากโหลด W3.CSS แล้ว ให้เปลี่ยนสไตล์ของ html และ body:
ตัวอย่าง
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
html, body, h1, h2, h3, h4, h5, h6 {
font-family: cursive, sans-serif;
}
</style>