基础 - 基础排版

描述

Foundation中的排版定义了标题,段落,列表和其他内联元素,这些元素为元素创建了有吸引力且简单的默认样式.

下表列出了Foundation : 中使用的不同类型的排版;

Sr.No.排版&说明
1Paragraphs

段落是一组用不同的字体大小,突出显示的单词,行高等定义的句子.

2抬头

它定义了从h1到h6的HTML标题.

3链接

当您单击文本或图像时,它会创建一个打开另一个文档的超链接.

4分隔线

它用于通过使用< hr>来区分各部分.标签.

5有序和无序列表

基金会支持有序列表,无序列表以列出事物.

6定义列表

定义列表用于显示名称值对.

7Blockquotes

它代表文本块,定义比正常大得多.

8缩写和代码

缩写定义了缩写词或短语,代码代表一段代码.

9击键

用于执行特定功能.

10辅助功能

基金会提供了一些指导访问页面内容.

Sass Reference

您可以使用表中列出的以下SASS变量来更改组件的样式.

Sr.No.姓名&说明输入默认值
1

$ header-font-family

指定标题元素的字体系列.

字符串或列表$ body-font-family
2

$ header-font-weight

指定字体粗细标题.

字符串$ global-weight-normal
3

$ header-font-style

提供标题的字体样式.

String正常
4

$ font-family-monospace

用于使用等宽类型的元素的字体堆栈,例如代码样本.

Consolas,'Liberation Mono',Courier,monospace
5

$ header-sizes

定义标题的屏幕大小,每个键都是一个断点,每个值都是标题大小的地图.

Map
 
 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

指定<的字体大小小&GT;元素.

数字80%
11

$ paragraph-margin-bottom

指定段落的下边距.

数字1rem
12

$ paragraph-text-rendering

文本呈现段落的方法.

字符串optimizeLegibility
13

$ code-color

提供文本颜色代码样本.

颜色$ black
14

$ code -font-family

为代码示例提供字体系列.

字符串或列表$ font-family-monospace
15

$ code-border

指定代码周围的边框.

列表1px solid $ medium-grey
16

$ code-padding

指定文本周围的填充.

数字或列表rem-calc(2 5 1)
17

$ anchor-color

链接的默认颜色.

颜色$ primary -color
18

$ anchor-color-hover

指定悬停时链接的默认颜色.

颜色比例颜色($ anchor-color,$ lightness:-14%)
19

$ anchor-text-decorat离子

链接的默认文本修饰.

Stringnone
20

$ anchor-text-decoration-hover

悬停时链接的默认文字装饰.

Stringnone
21

$ hr-width

定义分隔符的最大宽度.

数字$ global -width
22

$ hr-border

指定分隔符的默认边框.

列表1px solid $ medium-grey
23

$ hr-margin

a的默认保证金divider.

数字或列表rem-calc(2 0)auto
24

$ list-lineheight

它定义列表中项目的行高.

数字$ paragraph-lineheight
25

$ list-style-type

提供无序列表的项目符号类型.

Stringdisc
26

$ list -style-position

它定义了无序列表上项目符号的定位.

Stringoutside
27

$ list-side-margin

定义左侧(或右侧)边距.

数字1.25rem
28

$ defnlist-term-权重

为< dt>提供字体权重元素.

字符串$ global-weight-bold
29

$ defnlist -term-margin-bottom

提供< dt>之间的间距和< dd>元素.

数字0.3rem
30

$ blockquote-color

它应用< blockquote>的文本颜色.元素.

颜色$ dark-grey
31

$ blockquote-padding

在< blockquote>内提供填充.元素.

数字或列表rem-calc(9 20 0 19)
32

$ blockquote-border

它为< blockquote>提供了边框.元素.

列表1px solid $ medium-grey
33

$ cite -font-size

定义< cite>的字体大小元素.

数字rem-calc(13)
34

$ cite -color

< cite> 元素提供文字颜色.

颜色$ dark-grey
35

$ keystroke-font

为< kbd>定义字体系列元素.

字符串或列表$ font-family-monospace
36

$ keystroke-color

为< kbd>定义文本颜色元素.

颜色$ black
37

$ keystroke-background

为< kbd>提供背景颜色.元素.

颜色$ light-grey
38

$ keystroke-padding

指定< kbd>的填充.元素.

数字或列表rem-calc(2 4 0)
39

$ keystroke-radius

显示< kbd>的边框半径元素.

数字或列表$ global-radius
40

$ abbr -underline

为< abbr>提供底部边框样式元素.

列表1px点缀$ black