前端语言——CSS（三）｜青训营CSS文本属性 color属性用于定义文本的颜色 1.语法：表示属性值预定义的颜

CSS文本属性

color属性用于定义文本的颜色

1.语法：

div {
color:red;
    }

表示	属性值
预定义的颜色值	red，green，blue，pink
十六进制	#FF0000，#FF6600，#FF29D794
RGB代码	rgb（255,0,0）或rgb(100%,0%,0%)

注意：开发中最常用的时十六进制。

2.对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式。

div {
text-align:center;
}

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

.3.装饰文本

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等。

div {
text-decoration:underline;
}

属性值	解释
none	默认，没有装饰线（最常用）
underline	下划线：链接a自带下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

4.文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

div {
text-indent:10px/2em;
}

*:2em代表2个字符

5.行间距

line-height属性用于设置行间的距离（行高），可以控制文本的行与行之间的距离。

p { line-height: 26px;}

**:用Faststone chature 软件的标尺测量上一行的行底与下一行的行底之间的距离。

CSS的引入方式

1.CSS的三种样式表

按照CSS样式书写的位置（或者引入方式）

分类：

行业样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

2.内部样式表

内部样式表（内嵌样式表）是写道html页面内部，是将所有的CSS代码抽取出来，单独放到一个标签中。

<style>
     div{
         color:red;
         font-size: 12px;
         }
</style>

标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中。
通过此种方式，可以方便控制当前整个页面中的元素样式设置。
代码结构清晰，但是并没有实现结构与样式完全分离。

3.行内样式表

行内样式表（内嵌样式表）是在元素标签内部的style属性中设置CSS样式，适合于修改简单样式。

<div style="color:red; font-size:12px;">青春不常在，抓紧谈恋爱</div>

style其实就是标签的属性
在双引号中间，写法要符合CSS规范。
可以控制当前的标签设置样式。
由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。
使用行内样式表设定CSS，通常也被成为行内式引入。

4.外部样式表

实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。

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

新建一个后缀名为CSS的样式文件，把所有CSS代码都放入此文件中。
在HTML页面中，使用标签引入这个文件。

<link rel="style sheet" href"CSS文件路径">

感受

CSS主要是用来对页面的样式进行设计。我们可以通过运用CSS技术来设计出我们想要的页面效果，并且CSS是与HTML内容是分开的，这极大地方便了我们阅读、修改程序，也使得CSS具有一定的重复使用的特性，只需要在html文件中引入CSS文件即可，这对设计者来说十分方便的。除此以外，CSS比较容易学习但是如果想要使用的非常自然、熟悉的话是比较困难的，需要不断的运用、尝试才能设计出最具有自我特色的html页面。因此，学习CSS不仅要学它的使用，更要学习如何合理的运用到你想要表达的页面当中去，打造一个属于你自我特色的页面，这种实践内容才是我们学习的目的，才能促进我们不断进步。

前端语言——CSS（三）｜ 青训营