css标签——⽂本标签
⽂本标签
针对⽂本的样式操作(渲染)
color:设置⽂本的颜⾊
text-align:设置⽂本的对齐⽅式
1. left:默认值,左对齐
2. center:居中对齐
3. right:右对齐
注意:text-align可以设置⽂本的对齐⽅式,在设置时可以设置⾥⾯的对齐元素格式。通常配合着line-height⼀起使⽤,使⽂字垂直居中显⽰
效果:
说明:在⼀个元素div中,如果设置了text-align只能对其字标签中的⽂本有设置效果,对其容器和表格之类的不能有效。
line-height:⾏⾼
像素
数字或百分数:数字参考的⽂字的字体⼤⼩,是字⼤⼩的倍数
注意:如果在元素中只有⼀⾏内容,那么我们就可以采取⾼和⾏⾼设置相同的值来做到内容的垂直居中的在元素中。
1<style>
2 .textstyle {
3 width: 100px;
4 height: 300px;
5 line-height: 80px;
6 background-color: pink;
7 }
8
9 .textstyle1 {
10 width: 100px;
11 height: 300px;
12 line-height: 300px;
13 background-color: pink;
14 }
15 </style>
16</head>
17
18<body>
19 <div class="textstyle">
20 <p>⽂本格式⽂字</p>
21 <p>⽂本格式⽂字</p>
22 </div>
23 <div class="textstyle1">
24 <p>⽂本格式⽂字</p>
25 </div>
显⽰:
text-decoration:设置⽂本的修饰符
none:⽂本⽆符号修饰(经常使⽤在去除a超链接的下划线上演⽰)underline:下划线
line-through:删除线
overline:上划线
演⽰:
显⽰:
⿏标悬停上后会变为红⾊字体
其他样式⽂本
letter-spacing :设置字符间距,⼀个中⽂就是⼀个字符(⼀个英⽂字母也是)word-spacing :单词间
距(只适⽤于英⽂),是因为此设置的为英⽂空格的宽度text-indent :⾸⾏缩进,适⽤于p元素text-transform:设置字母的⼤⼩capitalize:⾸字母⼤写uppercase:全⼤写(经常适⽤于验证码)lowercase:全⼩写
none:⽆
direction :设置⽂本⽅向(⼏乎不⽤)
1
.hover {2
text-align: center;3
}4
5
.nav {6
text-decoration: none;7
color: pink;8
text-align: center;9
text align center}10
11
.nav:hover {12
color: red;13
}14
15
<div class="hover">16
<a href="#" class="nav">这是⼀个超链接</a>17 </div>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论