文本相关样式也是可以继承的,在父元素中设置后子元素中同样生效。
一、对齐方式
注:要给它们的父元素设置
使用text-align属性,设置文字、内联块和内联元素 居中对齐:
text-align: center; 居中对齐
text-align: left; 居左对齐
text-align: right; 居右对齐
我们简单设置一下,我在一个div内放入了文字、连接和图片(中间有br换行),div是它们的父元素,我设置上居中对齐属性:
html:
css:
div{
text-align: center;
width:400px;
height:400px;
background-color: pink;
}
效果如下,实现了居中对齐:
二、文本装饰(下划线等)
(1)使用text decoration进行文本装饰,可以给各种文本加上下划线,也可以消除自带的下划线:
text-decoration: underline; 下划线
text-decoration: overline; 上划线
text-decoration: line-through; 中划线
text-decoration: none; 没有线
我们用三行文字和一行连接来体现效果:
html:
我有上划线
我有中划线
我有下划线
我是没有下划线的链接
css:
.s1{
text-decoration:overline;
}
.s2{
text-decoration: line-through;
}
.s3{
text-decoration: underline;
}
a{
text-decoration:none;
}
效果如下:
(2)给文本装饰改变样式
注意顺序是“上划线(中划线,下划线) 线的样式 线的颜色 ”中间空格分离
text-decoration: underline wavy red;
下划线 波浪形 红色
线的样式:
- 实线 solid
- 点状 dotted
- 虚线 dashed
- 双线double
- 波浪线 wavy
举几个例子试试看:
html:
下划线波浪形红色
中划线双线绿色
上划线点状蓝色
css:
.s1{
text-decoration:overline wavy red;
}
.s2{
text-decoration: line-through double green;
}
.s3{
text-decoration: underline dotted blue;
}
(3)给父元素设置上划线,再给子元素设置下划线,子元素不会把父元素里的上划线覆盖掉,而是又加了一个下划线,会出现两条线。
我们在(2)的css基础上,再给它们的父元素div添加一个文本装饰属性:
div{
text-decoration:overline;
}
效果如下:文本装饰是不会覆盖掉的,会累加
三、首行缩进
使用text-indent进行设置,实现自然段的功能
em的大小是根据字号font-size决定的,2em就是缩进2个字大小的意思(这个值可以是负的哦):
text-indent:2em; 缩进2个字
我们用两段文字来感受一下(为了方便看到缩进效果,我设置了下段落宽度为300px)
html:
在我年纪尚轻,涉世未深时,父亲教导过我一句话,至今言犹在耳。
“当你想开口批评别人的时候,”父亲对我说 ,“你要想到,这个世界上不是所有人都像你一样拥有那么多优越的条件。”
css:
p{
width:300px;
text-indent: 2em;
}
效果如下,实现了首行缩进:
四、字间距
使用letter-spacing设置字母与字母之间的距离,文字与文字之间的距离
letter-spacing: 30px; 设置字间距为30px
接下来我们给一句中文和英文分别试一下,设置字间距为10px:
html:
勇敢做自己。
Dare to be yourself.
css:
p{
letter-spacing: 10px;
}
效果:
五、词间距
使用word-spacing设置单词与单词之间的距离
word-spacing: 30px; 设置词间距为30px
我们把刚刚字间距模块的
样式改为调整词间距的:
html:
勇敢做自己。
Dare to be yourself.
css:
p{
word-spacing: 10px;
}
效果如下,只对英文单词有用哦: