css设置内容(css常用属性之文本的设置)(1)

对这简短的文本进行设置

利用id选择器对文本进行不同的设置(还是利用CSS内部样式进行设置)

<style type="text/css"></style>

css设置内容(css常用属性之文本的设置)(2)

利用ID选择器对文本进行简单设置

1、

#bt{/*设置文本颜色,即字体颜色 颜色也是有3种选择(rgb 16进制 颜色名)*/

color: rgb(108, 63, 211);}

对id='bt'的文本,示例中即对文本 春晓 进行颜色设置

css设置内容(css常用属性之文本的设置)(3)

春晓 文本颜色的设置,其他没有设置的默认黑色

2、

#wb1{/*文本的对齐方式 left(默认的是左对齐) right (右对齐) center(居中对齐) */

text-align: center;}

对id='wb1'的文本,示例中即对文本 春眠不觉晓 进行居中对齐,若是不设置这个对齐,文本都是默认左对齐的。

css设置内容(css常用属性之文本的设置)(4)

春眠不觉晓 进行了居中对齐

3、#wb2{/*文本修饰 text-decoration 取不同的值有不同的效果*/

text-decoration: overline;/*上划线*/

text-decoration: underline;/*下划线*/

text-decoration: line-through;/*中划线*/}

对id='wb2'的文本,示例中即对文本 处处闻啼鸟 进行不同的修饰

css设置内容(css常用属性之文本的设置)(5)

上划线

css设置内容(css常用属性之文本的设置)(6)

下划线

css设置内容(css常用属性之文本的设置)(7)

中划线

注意:以上 text-decoration 的三个属性值如上例一样的书写,根据就近原则,文本最后呈现的也只有中划线的效果。要想3种效果同时出现,

则需要text-decoration: overline underline line-through; 书写

3、

#wb3{/*同时设置上、中、下 三种下划线 居中看效果*/

text-decoration: overline underline line-through;

text-align: center;}

对id='wb2'的文本,示例中即对文本夜来风雨声 的三种效果同时呈现

css设置内容(css常用属性之文本的设置)(8)

上、中、下 三种效果同时呈现

4、

对于元素a标签的文本会自带下划线,若想去除自带下划线则需要text-decoration: none;

css设置内容(css常用属性之文本的设置)(9)

a标签自带下划线

a{/*去除文本修饰*/

text-decoration: none;}

对a标签内的文本 花落知多少 进行去下划线设置

css设置内容(css常用属性之文本的设置)(10)

a标签已去文本修饰设置

5、

#p1{/*首行缩进 可以自己设置缩进量 em 代表文字的高度*/

text-indent: 2em;}

对id='p1'的文本,示例中即对p文本中的内容进行首行缩进,2em代表缩进2个文字的距离

css设置内容(css常用属性之文本的设置)(11)

文本进行首行缩进

,