CSS学习（2）

目录

一、字体属性

1.字体系列

2.字体大小

3.字体粗细

4.文字样式

5.字体复合属性

二、文本属性

1.文本颜色

2.文本对齐

3.装饰文本

4.文本缩进

5.行间距

 具体参考：CSS3 文本效果 | 菜鸟教程 (runoob.com)

三、引入方式

1.行内样式表（行内式）

2.内部样式表（嵌入式）

3.外部样式表（链接式）

---

一、字体属性

1.字体系列

语法：

font-family:'字体1', ‘字体2'；

多个字体，若电脑没有字体1，则显示字体2...

常用字体：'微软雅黑'，tahoma,arial,'Hiragino San GB'

2.字体大小

定义字体大小，不同浏览器可能默认显示的字号大小不一致，尽量定义一个明确值大小。

语法：

p{
    font-family: '微软雅黑';
    font-size: 20px;
}

3.字体粗细

正常字体大小为normal，相当于400。700为bold为加粗。

数字取值为100~900。

语法：

p{
    font-weight: 100;
}
/* 100后不要添加单位 */

4.文字样式

设置文本风格，主要为设置斜体。italic为斜体。

语法：

p{
    font-style: italic;
}

5.字体复合属性

简写，顺序不可以改变。不需要设置的属性可以省略，但必须保留font-size和font-family。

语法：

font: font-style  font-weight  font-size/line-height  font-family

例：

div{
    font: italic 700 16px '微软雅黑'
}

二、文本属性

定义文本的外观，如文本颜色、对齐文本、装饰文本、文本缩进、行间距等。

1.文本颜色

表示形式：

（1）预定义的颜色值。

（2）十六进制

（3）RGB代码

语法：

div{
    color: red;
}

2.文本对齐

text-align只能设置元素内文本内容水平对齐方式。

语法：

div{
    text-align: center;
}

center为居中对齐。right为右对齐。left为左对齐（默认值）。

3.装饰文本

即给文本添加下划线、上划线、删除线等。

语法：

div{
    text-decoration: underline;
}

none：默认。没有装饰线。

underline：下划线，链接a自带下划线。

overline：上划线。

line-through：删除线。

4.文本缩进

用来指定文本第一行的缩进。

语法：

div{
    text-indent: 2em;
}

em为当前元素（font-size）1个文字的大小。也可以用长度单位表示，可以是负值。

5.行间距

一个行间距为上间距+文本高度+下间距，改变的是上间距和上间距                                                。

语法：

p{
    line-height: 26px;
}

 具体参考：CSS3 文本效果 | 菜鸟教程 (runoob.com)

三、引入方式

1.行内样式表（行内式）

在元素标签内部的style属性中设置css样式，在双引号中间。

例：

<div style="color: red; font-size: 12px;">行内样式表</div>

2.内部样式表（嵌入式）

在html页面内部i书写样式，单独写道style标签内部。

3.外部样式表（链接式）

（1）将代码放入css文件中 ，css文件中只有定义没有标签。

（2）在HTML页面中，使用<link>标签引入这个文件。

<link rel="stylesheet" href="css文件路径">

stylesheet表示被链接色文档是一个样式表文件。href可以是相对路径也可以是绝对路径。