对这简短的文本进行设置
利用id选择器对文本进行不同的设置(还是利用CSS内部样式进行设置)
<style type="text/css"></style>
利用ID选择器对文本进行简单设置
1、
#bt{/*设置文本颜色,即字体颜色 颜色也是有3种选择(rgb 16进制 颜色名)*/
color: rgb(108, 63, 211);}
对id='bt'的文本,示例中即对文本 春晓 进行颜色设置
春晓 文本颜色的设置,其他没有设置的默认黑色
2、
#wb1{/*文本的对齐方式 left(默认的是左对齐) right (右对齐) center(居中对齐) */
text-align: center;}
对id='wb1'的文本,示例中即对文本 春眠不觉晓 进行居中对齐,若是不设置这个对齐,文本都是默认左对齐的。
春眠不觉晓 进行了居中对齐
3、#wb2{/*文本修饰 text-decoration 取不同的值有不同的效果*/
text-decoration: overline;/*上划线*/
text-decoration: underline;/*下划线*/
text-decoration: line-through;/*中划线*/}
对id='wb2'的文本,示例中即对文本 处处闻啼鸟 进行不同的修饰
上划线
下划线
中划线
注意:以上 text-decoration 的三个属性值如上例一样的书写,根据就近原则,文本最后呈现的也只有中划线的效果。要想3种效果同时出现,
则需要text-decoration: overline underline line-through; 书写
3、
#wb3{/*同时设置上、中、下 三种下划线 居中看效果*/
text-decoration: overline underline line-through;
text-align: center;}
对id='wb2'的文本,示例中即对文本夜来风雨声 的三种效果同时呈现
上、中、下 三种效果同时呈现
4、
对于元素a标签的文本会自带下划线,若想去除自带下划线则需要text-decoration: none;
a标签自带下划线
a{/*去除文本修饰*/
text-decoration: none;}
对a标签内的文本 花落知多少 进行去下划线设置
a标签已去文本修饰设置
5、
#p1{/*首行缩进 可以自己设置缩进量 em 代表文字的高度*/
text-indent: 2em;}
对id='p1'的文本,示例中即对p文本中的内容进行首行缩进,2em代表缩进2个文字的距离
文本进行首行缩进
,