前端开发工程师-前端基础-CSS3_文本与颜色.docx

PAGE1

PAGE1

文本样式与属性

1CSS3文本属性概览

在CSS3中，文本样式与属性的控制得到了极大的增强，提供了丰富的工具来美化网页上的文本。以下是一些关键的文本属性概览：

font-family:用于指定文本的字体系列。

font-size:控制字体的大小。

line-height:设置行间距。

font-weight:调整字体的粗细。

font-style:改变字体的样式，如斜体。

text-align:控制文本的对齐方式。

text-transform:改变文本的大小写。

text-decoration:添加或删除文本的下划线、删除线等装饰。

text-shadow:为文本添加阴影效果。

letter-spacing:调整字符之间的间距。

word-spacing:控制单词之间的间距。

text-indent:设置文本首行缩进。

white-space:控制空白符的处理，如换行和空格。

1.1示例：使用CSS3文本属性

/*文本属性示例*/

p{

font-family:Arial,sans-serif;/*字体系列*/

font-size:16px;/*字体大小*/

line-height:1.5;/*行高*/

font-weight:bold;/*字体粗细*/

font-style:italic;/*字体样式*/

text-align:justify;/*文本对齐*/

text-transform:uppercase;/*文本转换*/

text-decoration:underline;/*文本装饰*/

text-shadow:2px2px4px#000000;/*文本阴影*/

letter-spacing:2px;/*字符间距*/

word-spacing:4px;/*单词间距*/

text-indent:50px;/*首行缩进*/

white-space:pre-wrap;/*空白符处理*/

}

2字体选择与加载

2.1@font-face规则

@font-face规则允许网页加载并使用自定义字体，这为设计师提供了更多的字体选择。

2.2示例：加载自定义字体

/*加载自定义字体*/

@font-face{

font-family:MyFont;

src:url(myfont.eot);/*IE9CompatModes*/

src:url(myfont.eot?#iefix)format(embedded-opentype),/*IE6-IE8*/

url(myfont.woff2)format(woff2),/*SuperModernBrowsers*/

url(myfont.woff)format(woff),/*PrettyModernBrowsers*/

url(myfont.ttf)format(truetype),/*Safari,Android,iOS*/

url(myfont.svg#MyFont)format(svg);/*LegacyiOS*/

font-weight:normal;

font-style:normal;

}

body{

font-family:MyFont,sans-serif;

}

3字体大小与行高设置

3.1font-size属性

font-size属性用于设置字体的大小，可以使用相对单位（如em、rem）或绝对单位（如px、pt）。

3.2line-height属性

line-height属性用于设置行间距，可以是一个数值、长度或百分比。

3.3示例：字体大小与行高设置

/*字体大小与行高设置*/

h1{

font-size:2em;/*相对单位*/

line-height:1.2;

}

p{

font-size:16px;/*绝对单位*/

line-height:24px;

}

4字体粗细与样式

4.1font-weight属性

font-weight属性用于设置字体的粗细，可以是关键字（如normal、bold）或数值（100-900）。

4.2font-style属性

font-style属性用于设置字体的样式，如斜体或倾斜。

4.3示例：字体粗细与样式

/*字体粗细与样式*/

strong{

font