文本属性和字体属性
字体大小
font-size: 20px;
- px:像素单位,固定大小
- rem:移动端使用
- em:移动端字体大小,1em为一个字体大小,文字缩进将用em单位
- %:百分比,盒子不设置宽度,继承父盒子宽度,可设置为父盒子的百分比
字体粗细
font-weight: bolder;
- bolder:加粗
- lighter:纤细
- 100-900:逐渐加粗
- normal:默认的标准粗细
- inherit:继承父元素字体
设置字体
font-family: "Microsoft YaHei UI","微软雅黑","Arial",sans-serif;
文字位置
text-align: center;
- center:居中对齐
文字修饰
清除a标签样式
text-decoration: none;
行高设置和盒子一样的高度文本将垂直居中显示
line-height: 150px;
仿造a标签,鼠标移动上去显示小手状态
cursor: pointer;
单行文本垂直居中显示
将line-height:盒子高度;
多行文本垂直居中显示
通过对父级元素设置padding属性来控制
padding-top=(盒子高度-(行高+字体大小)*行数)/2
font-family属性设置字体
备选字体可以用逗号分隔设置多个
font-size: 15px; line-height: 20px; font-family: "宋体"; /*上面三行等价于下面一行*/ font: 15px/20px "宋体";
- 网页中不是所有字体都可使用,通常使用微软雅黑、宋体、黑体,Arial,Times New Roman。用逗号隔开写多个字体,逐个匹配。都没匹配到则显示宋体
- 所有中文字体都有对应的英文别名
- 行高可用百分比,表示字号的百分之多少
文本缩进
设置首行文字缩进,单位通常用em单位,1em等于一个字体大小。
text-indent: 2em;
超链接美化
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接美化</title> <style type="text/css"> *{ padding: 0; margin: 0; } .bar{ width: 960px; overflow: hidden;/*也可以通过伪元素after来设置*/ background-color: #666666; margin: 0 auto; /*设置边框圆角*/ -webkit-border-radius: 3px 3px 0px 0px; -moz-border-radius: 3px 3px 0px 0px; border-radius: 3px 3px 0px 0px; } /*.bar:after{*/ /*content: "";*/ /*display: block;*/ /*clear: both;*/ /*}*/ ul li{ list-style: none; } .bar ul li{ float: left; width: 160px; height: 40px; line-height: 40px; text-align: center; color: white; font-family: "幼圆"; } /*a标签不继承父元素的color属性*/ .bar ul li a{ display: block;/*行内元素,必须设置成block后设置宽高*/ color: white; text-decoration: none; width: 160px; height: 40px; } .bar ul li a:hover{ background-color: #A9A9A9; } </style> </head> <body> <div class="bar"> <ul> <li><a href="#">网站导航</a></li> <li><a href="#">网站导航</a></li> <li><a href="#">网站导航</a></li> <li><a href="#">网站导航</a></li> <li><a href="#">网站导航</a></li> <li><a href="#">网站导航</a></li> </ul> </div> </body> </html>