มูลนิธิ - การพิมพ์พื้นฐาน
คำอธิบาย
Typography in Foundation กำหนดหัวเรื่องย่อหน้ารายการและองค์ประกอบอินไลน์อื่น ๆ ซึ่งสร้างรูปแบบเริ่มต้นที่น่าสนใจและเรียบง่ายสำหรับองค์ประกอบ
ตารางต่อไปนี้แสดงประเภทการพิมพ์ต่างๆที่ใช้ใน Foundation -
| ซีเนียร์ | วิชาการพิมพ์และคำอธิบาย |
|---|---|
| 1 | ย่อหน้า ย่อหน้าคือกลุ่มของประโยคที่กำหนดด้วยขนาดตัวอักษรที่แตกต่างกันคำที่เน้นความสูงของบรรทัดเป็นต้น |
| 2 | หัวข้อ กำหนดหัวเรื่อง HTML ตั้งแต่ h1 ถึง h6 |
| 3 | ลิงค์ สร้างไฮเปอร์ลิงก์ที่เปิดเอกสารอื่นเมื่อคุณคลิกที่ข้อความหรือรูปภาพ |
| 4 | วงเวียน ใช้เพื่อแบ่งส่วนระหว่างส่วนต่างๆโดยใช้แท็ก <hr> |
| 5 | รายการสั่งซื้อและไม่เรียงลำดับ มูลนิธิรองรับรายการสั่งซื้อรายการที่ไม่เรียงลำดับเพื่อแสดงรายการสิ่งต่างๆ |
| 6 | รายการคำจำกัดความ รายการนิยามใช้เพื่อแสดงคู่ค่าของชื่อ |
| 7 | Blockquotes แสดงถึงบล็อกของข้อความซึ่งกำหนดให้ใหญ่กว่าปกติมาก |
| 8 | ตัวย่อและรหัส คำย่อกำหนดระยะสั้นของคำหรือวลีและรหัสหมายถึงส่วนของรหัส |
| 9 | การกดแป้นพิมพ์ ใช้เพื่อทำหน้าที่เฉพาะ |
| 10 | การเข้าถึง Foundation มีหลักเกณฑ์บางประการในการเข้าถึงเนื้อหาของเพจ |
การอ้างอิง Sass
คุณสามารถเปลี่ยนรูปแบบของส่วนประกอบได้โดยใช้ตัวแปร SASS ต่อไปนี้ตามรายการในตาราง
| ซีเนียร์ | ชื่อและคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | $header-font-family ระบุตระกูลฟอนต์สำหรับองค์ประกอบส่วนหัว |
สตริงหรือรายการ | $ body-font-family |
| 2 | $header-font-weight ระบุน้ำหนักแบบอักษรของส่วนหัว |
สตริง | $ global-weight-normal |
| 3 | $header-font-style จัดเตรียมรูปแบบตัวอักษรของส่วนหัว |
สตริง | ปกติ |
| 4 | $font-family-monospace Font stack ที่ใช้สำหรับองค์ประกอบที่ใช้ชนิด monospaced เช่นตัวอย่างโค้ด |
สตริงหรือรายการ | Consolas, 'Liberation Mono', Courier, monospace |
| 5 | $header-sizes กำหนดขนาดหน้าจอของส่วนหัวและแต่ละคีย์คือเบรกพอยต์และแต่ละค่าคือแผนที่ของขนาดส่วนหัว |
แผนที่ | |
| 6 | $header-color ให้สีของส่วนหัว |
สี | สืบทอด |
| 7 | $header-lineheight กำหนดความสูงบรรทัดของส่วนหัว |
จำนวน | 1.4 |
| 8 | $header-margin-bottom จัดเตรียมขอบด้านล่างของส่วนหัว |
จำนวน | 0.5rem |
| 9 | $header-text-rendering กำหนดวิธีการสำหรับการแสดงผลข้อความ |
สตริง | optimizeLegibility |
| 10 | $small-font-size ระบุขนาดฟอนต์สำหรับอิลิเมนต์ <small> |
จำนวน | 80% |
| 11 | $paragraph-margin-bottom ระบุขอบล่างของย่อหน้า |
จำนวน | 1rem |
| 12 | $paragraph-text-rendering วิธีการแสดงข้อความย่อหน้า |
สตริง | optimizeLegibility |
| 13 | $code-color แสดงสีข้อความให้กับตัวอย่างโค้ด |
สี | $ ดำ |
| 14 | $code-font-family จัดเตรียมตระกูลฟอนต์ให้กับตัวอย่างโค้ด |
สตริงหรือรายการ | $ font-family-monospace |
| 15 | $code-border ระบุเส้นขอบรอบรหัส |
รายการ | 1px solid $ กลาง - เทา |
| 16 | $code-padding ระบุช่องว่างรอบ ๆ ข้อความ |
หมายเลขหรือรายการ | รี - แคล (2 5 1) |
| 17 | $anchor-color สีเริ่มต้นสำหรับลิงก์ |
สี | $ หลักสี |
| 18 | $anchor-color-hover ระบุสีเริ่มต้นสำหรับลิงก์บนโฮเวอร์ |
สี | ขนาดสี ($ anchor-color, $ lightness: -14%) |
| 19 | $anchor-text-decoration การตกแต่งข้อความเริ่มต้นสำหรับลิงก์ |
สตริง | ไม่มี |
| 20 | $anchor-text-decoration-hover การตกแต่งข้อความเริ่มต้นสำหรับลิงก์ที่วางเมาส์เหนือ |
สตริง | ไม่มี |
| 21 | $hr-width กำหนดความกว้างสูงสุดของตัวแบ่ง |
จำนวน | $ global-width |
| 22 | $hr-border ระบุเส้นขอบเริ่มต้นสำหรับตัวแบ่ง |
รายการ | 1px solid $ กลาง - เทา |
| 23 | $hr-margin ระยะขอบเริ่มต้นสำหรับตัวแบ่ง |
หมายเลขหรือรายการ | rem-calc (20) อัตโนมัติ |
| 24 | $list-lineheight เป็นการกำหนดความสูงของบรรทัดสำหรับรายการในรายการ |
จำนวน | $ ย่อหน้า |
| 25 | $list-style-type ระบุประเภทสัญลักษณ์แสดงหัวข้อย่อยสำหรับรายการที่ไม่ได้เรียงลำดับ |
สตริง | ดิสก์ |
| 26 | $list-style-position เป็นการกำหนดตำแหน่งสำหรับสัญลักษณ์แสดงหัวข้อย่อยในรายการที่ไม่เรียงลำดับ |
สตริง | ข้างนอก |
| 27 | $list-side-margin กำหนดระยะขอบด้านซ้าย (หรือขวา) |
จำนวน | 1.25rem |
| 28 | $defnlist-term-weight ให้น้ำหนักแบบอักษรสำหรับองค์ประกอบ <dt> |
สตริง | $ global-weight-bold |
| 29 | $defnlist-term-margin-bottom จัดเตรียมระยะห่างระหว่างองค์ประกอบ <dt> และ <dd> |
จำนวน | 0.3rem |
| 30 | $blockquote-color ใช้สีข้อความขององค์ประกอบ <blockquote> |
สี | เทาเข้ม |
| 31 | $blockquote-padding จัดเตรียมช่องว่างภายในองค์ประกอบ <blockquote> |
หมายเลขหรือรายการ | รี - แคล (9 20 0 19) |
| 32 | $blockquote-border มันให้เส้นขอบด้านข้างสำหรับองค์ประกอบ <blockquote> |
รายการ | 1px solid $ กลาง - เทา |
| 33 | $cite-font-size กำหนดขนาดฟอนต์สำหรับองค์ประกอบ <cite> |
จำนวน | รี - แคล (13) |
| 34 | $cite-color ให้สีข้อความสำหรับ |
สี | เทาเข้ม |
| 35 | $keystroke-font กำหนดตระกูลฟอนต์สำหรับองค์ประกอบ <kbd> |
สตริงหรือรายการ | $ font-family-monospace |
| 36 | $keystroke-color กำหนดสีข้อความสำหรับองค์ประกอบ <kbd> |
สี | $ ดำ |
| 37 | $keystroke-background ให้สีพื้นหลังสำหรับองค์ประกอบ <kbd> |
สี | $ สีเทาอ่อน |
| 38 | $keystroke-padding ระบุช่องว่างภายในสำหรับองค์ประกอบ <kbd> |
หมายเลขหรือรายการ | รี - แคล (2 4 0) |
| 39 | $keystroke-radius แสดงรัศมีเส้นขอบสำหรับองค์ประกอบ <kbd> |
หมายเลขหรือรายการ | $ global-radius |
| 40 | $abbr-underline จัดเตรียมสไตล์เส้นขอบด้านล่างสำหรับองค์ประกอบ <abbr> |
รายการ | 1px ขีด $ ดำ |