CSS文本属性

CSS text（文本）属性就是设置文本的外观，比如字体颜色、对齐方式、缩进、行间距等。

• 文本颜色

属性名：color。

属性值：

颜色英文单词：color：red;

16进制颜色值：color：#000000;

RGB代码：color: rgb(255,255,255)或rgb(100%,0%,0%)

一般在开发中常用的是十六进制写法。

代码示例：

    


     
    
我是文本属性的单词颜色设置
    
我是文本属性的16进制颜色设置
    
我说文本属性的rgb颜色设置

• 文本对齐方式

属性名：text-align。

属性值：

“text-align: left”：默认值，文本左对齐。

“text-align：center”：文本居中对齐。

“text-align：right”：文本右对齐。

代码示例：

    


    
    
文本左对齐
    
文本居中对齐
    
文本右对齐

运行界面：

• 文本装饰

属性：text-decoration。

属性值：

“text-decoration：none”：默认值，没有装饰线。

“text-decoration：underline”：给文本添加下划线。

注意：a标签中自带下划线，可以使用默认值属性去除a标签的下划线。

“text-decoration：overline”：给文本添加上划线。

“text-decoration：line-through”：给文本添加删除线。

代码示例：

    


    
    
文本装饰线：默认状态
    
文本装饰线：文本添加下划线
    
文本装饰线：文本添加删除线
    
文本装饰线：文本添加上划线
    我是超链接标签，文本自带下划线

    我是超链接标签，文本自带下划线。使用默认值属性，可去除文本下划线

运行界面：

• 文本缩进

属性名：text-indent。通常指段落首行缩进。

属性值：px或em。

em是一个相对单位，

如果当前元素已经设置文字大小，就按照当前元素1个文字的大小显示缩进。

如果当前元素中没有设置，则按照父元素的1个文字大小，即1个em=16px显示缩进。

代码示例：

    


    
    
我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
    
    
我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
    

运行界面：

• 行间距

属性名：ling-height。用于设置文本的行高。即行与行之间的距离。

行间距=文本高度+上间距+下间距。（上间距=下间距）

行间距调整就是设置的上下间距的高

属性值：px或em。

代码示例：

    


    
    

        我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
        我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
        我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
        我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
         我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
          我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
    

运行界面：

CSS引入方式

分为三类：行内样式表（行内式）、内部样式表（内嵌式）、外部样式表（链接式）

• 行内样式表：

位置：直接写在元素的开始标签中。

特点：书写内容少，权重级别高，只能控制一个标签，结构样式混乱。

语法：style=”color: red;”

注意：多个属性之间使用空格分隔。

代码示例：

行内样式表：在使用属性的元素开始标签中直接设置属性。如给字体设置红色属性。

行内样式表：在使用属性的元素开始标签中直接设置属性。如给字体设置红色属性和字体28px。

• 内部样式表（内嵌式）

位置：在head标签下，和title标签并列。样式属性均包含在style标签中。

特点：部分结构与样式相分离，还是在同一html文件上。

语法：

代码示例：

 	
	


	
    
内部样式表：样式属性写在同一个html文件中的head标签里，和title标签并列。

• 外部样式表（链接式）

第一步：创建index.css文件，在文件中输入样式属性，不用任何标签。

第二步：在html文件的head标签中，添加link标签，引入css文件。

第三步：给html文件中需要添加属性的元素添加选择器名称。

特点：结构和样式全局分离，一个css文件可以控制多个html页面。

注意：在css文件中只有样式没有标签，即直接书写标签器和属性，不要写style标签。

代码示例：

第一步：新建index.css文件，设置样式属性。

* {
    margin: 0;
    padding: 0;
}
.linC {
    font-size: 32px;
    color: blue;
}

第二步：在html文件的head标签中添加link标签引用css文件。

第三步：在标签中调用属性。

   	
    

        外部样式表：

        第一步：新建一个css文件，文件中直接编辑样式属性，不需要添加style标签。

        第二步：使用css文件的html文档，应该在其head标签中添加link标签选择css文件的存储位置,

        第三步：调用css文件中的样式。
    

运行界面：

以上就是今天学习的内容，明天继续学习CSS的相关内容，今天就到这里了，各位晚安！