公民道德建设网站厦门人才网
字体
常见字体设置
body {font-family: font-family: "Microsoft YaHei", Tahoma, Arial, Hiragino Sans GB,sans-serif;
}
浏览器从前到后匹配，找到可用字体结束，都没匹配上，使用浏览器默认字体
常用字号
不同浏览器默认字号可能不一样，建议手动设置通用基础字体大小，需要调整的地方再进行单独设置
font-size: 16px;
字体粗细
字体粗细可以用属性值和数字表示
属性值：
bolder, bold, normal. lighter
数字：
400 = normal ；700 = bold （数字越大，字体越粗）
样式
font-style: normal / italic
文本
颜色
color: 颜色名词 / 16进制 / rgb
对齐方式
设置盒子内，内容对齐方式，设置在父元素，作用在子元素
text-align: left/center/right
文本装饰（给文本画标线）
text-decoration: underline/overline/line-through/none(默认)
最常用于去掉 a 标签默认的下划线
文本缩进
text-indent: 2em;
常用于段落首行缩进，em 为相对单位，其大小相对于当前字体的倍数
行间距
行间距 = 上边距 + 文本高度 + 下边距
单行文本，在盒子垂直居中，可设置 行间距（行高）等于盒子高度即可
line-height: 16px;
背景
背景颜色
background-color: #555555/transparent(默认：透明);
设置透明度使用 rgba(r, g, b, [0, 1]); 最后一位 0-1 表示透明度
背景图片
background-image: none | url(http://xxxx....)
同时设置，背景颜色和背景图片时，图片覆盖颜色，但是超出图片的位置，依然以背景色为准
常用于 小的装饰图片，便于调整其位置 和 大的底层背景图
图片平铺
背景图片默认 x y轴都平铺，占满盒子
background-repeat: repeat | no-repeat | repeat-x | repeat-y
背景图片位置
background-position: position(top|bottom|left|right|center) | length(百分比|具体数值)
可以用方位名词和数值表示
top/bottom 为垂直方向，left/right 为水平方向，center 都可以表示
- 一个值
- 方位名词：根据名词语义表示一个方向的对齐方式，另一个方向上居中
- 数值：数值表示 X 轴，Y轴居中
- 两个值
- 方位名词：按实际名词语义对齐
- 数字：按 X Y 的顺序对齐
- 名词和数字混合：第一个表示 X轴方向，第二个表示 Y轴方向
背景图片固定
background-attachment: scroll（默认） | fixed
默认，背景图片会随着页面一起滚动