1.标签设置字体（已废弃）
<h1><font face="宋体" color="red" size="20px">CSS层叠样式</font></h1>
2.文字样式属性
2.1 font-family
1
2
3
2.2 font-size 文字大小
绝对单位
相对单位
2.2.1 px（手机端一般不使用px）
分辨率越低越大
p{font-size: 50px;}
<p>文字大小px,受显示器分辨率影响</p>
2.2.2 larger 和 smaller
.larger{font-size: larger;}
.smaller{font-size: smaller;}
<p>文字大小<span class="larger">相对于父元素的文字大小变大</span></p>
<p>文字大小<span class="smaller">相对于父元素的文字大小变小</span></p>
2.2.3 em和%都是针对父元素
1
2
2.2.4 字体大小可以继承(只能继承父元素绝对值大小)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#fontSize{font-size: 20px;}
#percent{font-size: 150%；}
.em{font-size: 2em;}
</style>
</head>
<body>
<div id="fontSize">
<p>文字大小<span class="em">相对值em</span></p>
<p id="percent">文字大小<span id="percent">相对值%</span></p>
</div>
</body>
</html>
3.字体颜色
1
256色里有40种颜色在Macintosh和Windows里显示的效果不一样，所以能安全使用的只有216色。为了尽量让用户看到色彩相同的网页，请尽量使用下面的216色。
web安全色
4.其他样式
4.1加粗font-weight
4.2设置斜体
font-style
<em></em>
<i></i>
normal 正常、italic 斜体、oblique倾斜,一般使用italic
4.3 设置元素中文本为小型大写字母font-variant
5.简写font属性
6.文本对齐方式text-align
text-align 可以继承
7.行高line-height
浏览器有默认行高,行高可以继承，但是不要继承。子类重新写。
8.vertical-align
默认值是
baseLine，只对行内元素和单元格元素起作用
基线
设置行高后%为 1.5em的百分比
可以给单元格加垂直对齐方式
图片.png
单行文字居中
图片.png
多行文字居中
1.设置父元素 display：table
2.设置自己display:table-cell
3.此时设置自己居中显示verical-align(只能设置行内元素或者单元格，div为块级元素)
9.word-spacing和letter-spacing和text-transform
图片.png
图片.png
去除a链接中的下划线
网友评论