CSS 学习笔记（三）

CSS 文本属性

CSS Text（文本）属性可定义文本的外观，比如说文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本颜色

在前文有提到过，color属性用于定义文本的颜色，基本格式如下：

div{    color: blue;}

我们有三种方法来表示颜色，分别是：

1.预定义的颜色值

属性值为 pink，blue 等

2.十六进制

属性值为 #FF0000,#29D794 等

3.RGB 代码

rgb（255，0，0）或 rgb（100%，0%，0%）

第二种和第三种不需要特殊记忆每个颜色的表示方式，都可以 x 进行选择，开发中最常用的是十六进制。

对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式，基本格式如下：

div {    text-align: center;}

除了居中对齐（center）之外，我们还可以让他右对齐（right）和左对齐（left）。

装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线等，基本语法格式如下：

div {    text-decoration: underline;}

常用的属性值有：none（默认），underline（下划线），overline（上划线），line-through（删除线），其中 none 和 underline 较为常用。

文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进，基本语法格式如下：

div {    text-indent: 10px;}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

div{    text-indent：2em;}

em 是一个相对单位，就是当前元素（font-size）一个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字的大小。

行间距

line-height 属性用于设置行间的距离，可以控制文字行与行之间的距离，基本语法格式如下：

p {    line-height: 26px；}

行间距=文本高度+上间距+下间距

CSS 的引入方式

按照 css 样式书写的位置，css 样式表可以分为三大类：

行内样式表（行内式）

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 css 样式。适用于修改简单样式。基本格式如下：

<p style="color:pink;">听雨的声音</p>

内部样式表（嵌入式）

内部样式表是写到 html 页面内部，将所有的 css 代码抽取出来，单独放到 <style>标签里。它能够实现部分结构和样式相分离，我们前面提到的都为内部样式表。

外部样式表（链接式）

外部样式表是把样式单独写到 css 文件中，之后把 css 文件引入到 html 页面中使用，在实际开发中用到的都是外部样式表，它能够完全实现结构和样式相分离。

引入外币样式表分为两步：

1.新建一个后缀为.css 的样式文件，把所有 CSS 代码都放入文件中。

2.在 HTML 页面中，使用<link>标签引入这个文件，格式如下:

<link rel="stylessheet" href="css文件路径"

其中 rel 属性定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。

href 属性定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径。