มูลนิธิ - การพิมพ์พื้นฐาน

คำอธิบาย

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

กำหนดขนาดหน้าจอของส่วนหัวและแต่ละคีย์คือเบรกพอยต์และแต่ละค่าคือแผนที่ของขนาดส่วนหัว

แผนที่
small: (
   'h1': 24
   'h2': 20
   'h3': 19
   'h4': 18
   'h5': 17
   'h6': 16
)
medium: (
   'h1': 48
   'h2': 40
   'h3': 31
   'h4': 25
   'h5': 20
   'h6': 16
)
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

ให้สีข้อความสำหรับ<cite>องค์ประกอบ

สี เทาเข้ม
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 ขีด $ ดำ