มูลนิธิ CSS อ้างอิง
ค่าเริ่มต้นของมูลนิธิ
มูลนิธิจะใช้ขนาดตัวอักษรเริ่มต้นเบราว์เซอร์ ( font-size:100% ) สำหรับอุปกรณ์เบราว์เซอร์สก์ท็อปส่วนใหญ่ขนาดตัวอักษรเริ่มต้นคือ 16px เบราว์เซอร์สำหรับอุปกรณ์มือถือขนาดตัวอักษรเริ่มต้นคือ 12px ตัวอักษรเริ่มต้นคือ "Helvetica Neue" เริ่มต้น line-height ไป 1.5
การตั้งค่าเหล่านี้จะถูกนำไปใช้กับ <body> องค์ประกอบภายในองค์ประกอบ
นอกจากนี้ <p> องค์ประกอบด้านนอกและด้านล่างของระยะทาง (ขอบล่าง) เป็น 1.25rem, line-height 1.6
ข้อความ
ต่อไปนี้องค์ประกอบ HTML, มูลนิธิตั้งค่ารูปแบบการแสดงผลแยกจากกันมันจะไม่ใช้รูปแบบเริ่มต้นของเบราเซอร์ คลิก "ลอง" เพื่อดูตัวอย่างออนไลน์
| ธาตุ | ลักษณะ | ตัวอย่างออนไลน์ |
|---|---|---|
| <h1> - <H6> | H1 - h6 หัว | ความพยายาม |
| <a> | การเชื่อมโยงสีฟ้าอ่อน, เลื่อนเมาส์ไปที่เชื่อมโยงจะถูกขีดเส้นใต้ | ความพยายาม |
| <small> | แสงคำบรรยายข้อความสีเทา | ความพยายาม |
| <Blockquote> | โมดูลการอ้างอิง | ความพยายาม |
| <strong> | ข้อความเป็นตัวหนา | ความพยายาม |
| <em> | หนังสือแบบตัวเอียง | ความพยายาม |
| <abbr> | ระบุคำย่อใช้องค์ประกอบปรากฏจุดขีดเส้นใต้ข้อความเลื่อนเมาส์ขึ้นจะแจ้งให้ | ความพยายาม |
| <Kbd> | ได้รับคำสั่งใส่แป้นพิมพ์: CTRL + P | ความพยายาม |
| <hr> | ชั้น | ความพยายาม |
| <code> | ส่วน | ความพยายาม |
| <ul> | รายการเรียงลำดับ | ความพยายาม |
| <ol> | รายการสั่งซื้อ | ความพยายาม |
| <Dl> | รายการพรรณนา | ความพยายาม |
การจัดตำแหน่งข้อความ
ใช้คลาส CSS เพื่อปรับเปลี่ยนการจัดตำแหน่งของข้อความ:
| หมวดหมู่ | ลักษณะ | ตัวอย่าง |
|---|---|---|
| .Text ซ้าย | ข้อความชิดซ้าย | ความพยายาม |
| .Text ขวา | ข้อความชิดขอบขวา | ความพยายาม |
| .Text ศูนย์ | ศูนย์ | ความพยายาม |
| .Text-ปรับ | ธรรม | ความพยายาม |
ตําแหน่งขนาดหน้าจอที่แตกต่างกัน
ใช้คลาส CSS เพื่อปรับเปลี่ยนการจัดตำแหน่งข้อความที่มีขนาดหน้าจอที่แตกต่างกัน
| หมวดหมู่ | ลักษณะ | ตัวอย่าง |
|---|---|---|
| ซ้าย | ||
| .small ข้อความซ้าย | ขนาดหน้าจอทั้งหมดไปทางซ้าย | ความพยายาม |
| .small เท่านั้นข้อความซ้าย | หน้าจอขนาดเล็กซ้าย (ความกว้างน้อยกว่า 40em) | ความพยายาม |
| .medium ข้อความซ้าย | ความกว้างมีขนาดใหญ่กว่าขนาดหน้าจอ 40.0625em ซ้าย | ความพยายาม |
| .medium เท่านั้นข้อความซ้าย | ความกว้าง 40.0625em ชิดด้านซ้ายของขนาดหน้าจอ 64em | ความพยายาม |
| .large ข้อความซ้าย | ความกว้างมีขนาดใหญ่กว่าขนาดหน้าจอ 64.0625em ซ้าย | ความพยายาม |
| .large เท่านั้นข้อความซ้าย | ความกว้าง 64.0625em ชิดด้านซ้ายของขนาดหน้าจอ 90em | ความพยายาม |
| .xlarge ข้อความซ้าย | ความกว้างมีขนาดใหญ่กว่าขนาดหน้าจอ 90.0625em ซ้าย | ความพยายาม |
| .xlarge เท่านั้นข้อความซ้าย | ความกว้าง 90.0625em ชิดด้านซ้ายของขนาดหน้าจอ 120em | ความพยายาม |
| .xxlarge ข้อความซ้าย | ความกว้างมีขนาดใหญ่กว่าขนาดหน้าจอ 120em ซ้าย | ความพยายาม |
| จัดชิดขวา | ||
| .small ข้อความขวา | ทุกมิติของหน้าจอขวาธรรม | ความพยายาม |
| .small เท่านั้นข้อความขวา | หน้าจอขนาดเล็กการจัดตำแหน่งที่เหมาะสม (กว้างน้อยกว่า 40em) | ความพยายาม |
| .medium ข้อความขวา | ความกว้างมากกว่าขนาดของหน้าจอ 40.0625em จัดชิดขวาที่ | ความพยายาม |
| .medium เท่านั้นข้อความขวา | ความกว้าง 40.0625em สอดคล้องกับขนาดหน้าจอด้านขวา 64em | ความพยายาม |
| .large ข้อความขวา | ความกว้างมากกว่าขนาดของหน้าจอ 64.0625em จัดชิดขวาที่ | ความพยายาม |
| .large เท่านั้นข้อความขวา | ความกว้าง 64.0625em สอดคล้องกับขนาดหน้าจอด้านขวา 90em | ความพยายาม |
| .xlarge ข้อความขวา | ความกว้างมากกว่าขนาดของหน้าจอ 90.0625em จัดชิดขวาที่ | ความพยายาม |
| .xlarge เท่านั้นข้อความขวา | ความกว้าง 90.0625em สอดคล้องกับขนาดหน้าจอด้านขวา 120em | ความพยายาม |
| .xxlarge ข้อความขวา | ความกว้างมากกว่าขนาดของหน้าจอ 120em จัดชิดขวาที่ | ความพยายาม |
| เป็นเส้นตรง | ||
| .small ข้อความศูนย์ | ตําแหน่งทุกขนาดหน้าจอ | ความพยายาม |
| .small เท่านั้นข้อความศูนย์ | ขนาดที่เล็กของหน้าจอเป็นศูนย์กลาง (กว้างน้อยกว่า 40em) | ความพยายาม |
| .medium ข้อความศูนย์ | ความกว้างมากกว่าขนาดของหน้าจอเป็นศูนย์กลาง 40.0625em | ความพยายาม |
| .medium เท่านั้นข้อความศูนย์ | ความกว้าง 40.0625em ให้มีขนาดหน้าจอ 64em ศูนย์กลาง | ความพยายาม |
| .large ข้อความศูนย์ | ความกว้างมากกว่าขนาดของหน้าจอเป็นศูนย์กลาง 64.0625em | ความพยายาม |
| .large เท่านั้นข้อความศูนย์ | ความกว้าง 64.0625em ให้มีขนาดหน้าจอ 90em ศูนย์กลาง | ความพยายาม |
| .xlarge ข้อความศูนย์ | ความกว้างมากกว่าขนาดของหน้าจอเป็นศูนย์กลาง 90.0625em | ความพยายาม |
| .xlarge เท่านั้นข้อความศูนย์ | 90.0625em กว้าง 120em ขนาดหน้าจอที่เป็นศูนย์กลาง | ความพยายาม |
| .xxlarge ข้อความศูนย์ | ความกว้างมากกว่าขนาดของหน้าจอเป็นศูนย์กลาง 120em | ความพยายาม |
| ธรรม | ||
| .small-ข้อความแสดงให้เห็นถึง | ทุกขนาดหน้าจอจะมีความชอบธรรม | ความพยายาม |
| .small เท่านั้น-ข้อความแสดงให้เห็นถึง | ปรับขนาดของหน้าจอ (กว้างน้อยกว่า 40em) | ความพยายาม |
| .medium-ข้อความแสดงให้เห็นถึง | ความกว้างมีขนาดใหญ่กว่าขนาดหน้าจอ 40.0625em ชิด | ความพยายาม |
| .medium เท่านั้น-ข้อความแสดงให้เห็นถึง | ตําแหน่งปลายทั้งสองด้านของความกว้างหน้าจอขนาด 64em 40.0625em | ความพยายาม |
| .large-ข้อความแสดงให้เห็นถึง | ความกว้างมีขนาดใหญ่กว่าขนาดหน้าจอ 64.0625em ชิด | ความพยายาม |
| .large เท่านั้น-ข้อความแสดงให้เห็นถึง | ตําแหน่งปลายทั้งสองด้านของความกว้างหน้าจอขนาด 90em 64.0625em | ความพยายาม |
| .xlarge-ข้อความแสดงให้เห็นถึง | ความกว้างมีขนาดใหญ่กว่าขนาดหน้าจอ 90.0625em ชิด | ความพยายาม |
| .xlarge เท่านั้น-ข้อความแสดงให้เห็นถึง | ตําแหน่งปลายทั้งสองของความกว้างของ 90.0625em ขนาดหน้าจอเพื่อ 120em | ความพยายาม |
| .xxlarge-ข้อความแสดงให้เห็นถึง | ความกว้างมีขนาดใหญ่กว่าขนาดหน้าจอ 120em ชิด | ความพยายาม |
อื่น ๆ
| หมวดหมู่ | ลักษณะ | ตัวอย่าง |
|---|---|---|
| .left | ซ้ายลอยองค์ประกอบ | ความพยายาม |
| .right | องค์ประกอบขวาลอย | ความพยายาม |
| .clearfix | ลอยชัดเจน - ต้องเพิ่มองค์ประกอบองค์ประกอบหลักลอย | |
| .hide | องค์ประกอบที่ซ่อนอยู่ (แบบ CSS display: none ) | ความพยายาม |
| .list-แบบอินไลน์ | องค์ประกอบทั้งหมดจัดอยู่ในแถวเดียวกัน | ความพยายาม |
| ตะกั่ว | Let <p> องค์ประกอบที่โดดเด่นมาก | ความพยายาม |
| .subheader | การตั้งค่าแสงสี <h1> - <H6> องค์ประกอบ | ความพยายาม |