CSS文本样式

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS⽂本样式⽂本样式
⽂本缩进
属性名：text-indent
取值：
1、数字+px
2、数字+em(推荐：1em=当前标签font-size的⼤⼩)(推荐使⽤)
<style>
p{
/* text-indent: 32px; */ //第⼀种
text-indent: 2em;
}
</style>
⽂本⽔平对齐⽅式
属性名：text-align
取值：
属性值效果
left左对齐
center居中对齐
right右对齐
注意点：如果需要让⽂本⽔平居中，text-align属性给⽂本所在标签(⽂本的⽗元素)设置。

例如：
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
text-align:center;
}
</style>
</head>
<body>
<div class="box"> //div标签相当于是⽂本的⽗元素，所以text-align设置在⽗元素中。

我是⼀⾏⽂本 //这⾥的⽂本相当于是div标签的⼦元素
</div>
⽂本修饰
属性名：text-decoration
取值：
属性值效果
underline下划线(常⽤)
line-through删除线(不常⽤)
overline上划线(⼏乎不⽤)
none⽆装饰线(常⽤)
注意点：在开发中会使⽤text-decoration：none；清除a标签默认下的下划线。

例如：
<style>
div{
text-decoration: underline;
color: red;
}
a{
text-decoration: none; //在此把下划线去掉
}
</style>
</head>
<body>
<div>我是⼀个标签</div>
<a href="#">我是⼀个链接标签</a> //在刷新时会默认带有下划线
</body>
⽔平居中的⽅法
1、text-align属性
可以使⽂本，span，a，input，img标签⽔平居中。

例如：
<style>
div{
width: 400px;
height: 400px;
background-color: skyblue;
text-align: center;
}
span{
color: red;
}
a{
color:orangered
}
</style>
</head>
<body>
<div>




<img src="images1/a74e3e6f7ba6cdd52e9cd9fbd0ffca81.jpg">
</div>
</body>
2、margin：0 auto
如果需要div、p、h(⼤盒⼦)⽔平居中，我们可以通过margin：0 auto；来实现
注意点：
如果需要让div、p、h(⼤盒⼦)⽔平居中，直接给当前元素本⾝设置即可。

margin：0 auto⼀般针对于固定宽度的盒⼦，如果⼤盒⼦没有设置宽度，此时会默认占满⽗元素的宽度。

⾏⾼
⾏⾼计算⽅法：⾏⾼-当前⽂本的⾼度，剩余的距离进⾏等分。

作⽤：控制⾏间距(给⼀⾏上下增加间距)
属性名：line-height
取值：1、数字+px
2、倍数(当前标签font-size的倍数)
应⽤：1、让单⾏⽂本垂直居中可以设置line-height：⽂字⽗元素⾼度
2、⽹页精准布局时，会设置line-height：可以取消上下间距
⾏⾼font连写的注意点：
1、如果同时设置了⾏⾼和font连写，注意覆盖问题
2、font：style、weight、size/line-height family(较为标准的写法)
Chrome调试⼯具。