字体大小
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;
超链接美化
<!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>
