CSS布局基础（一）字体 & 文本 & 背景

字体

常见字体设置

body {
    font-family: "Microsoft YaHei", Tahoma, Arial, "Hiragino Sans GB",sans-serif;
}

浏览器从前到后匹配，找到可用字体结束，都没匹配上，使用浏览器默认字体

常用字号

不同浏览器默认字号可能不一样，建议手动设置通用基础字体大小，需要调整的地方再进行单独设置

font-size: 16px;

字体粗细

字体粗细可以用属性值和数字表示
属性值：

bolder, bold, normal. lighter

数字：

400 = normal ；700 = bold （数字越大，字体越粗）

font-weight: normal;

样式

font-style: normal / italic

字体复合写法

/* font-size font-family; 必须，其他属性可省略，有默认值。*/
font: <font-style> <font-weight> font-size</line-height> font-family;

font: italic 400 16px/15px "Microsoft YaHei";

文本

颜色

color: 颜色名词 / 16进制 / rgb

行内（块）元素对齐方式

设置盒子内，行内（块） 元素的水平对齐方式，设置在父元素，作用在子元素

text-align: left/center/right

文本装饰（给文本画标线）

text-decoration: underline/overline/line-through/none(默认)

最常用于去掉 a 标签默认的下划线

文本缩进

text-indent: 2em;

常用于段落首行缩进，em 为相对单位，其大小相对于当前字体的倍数

行间距/行高

行间距 = 上边距 + 文本高度 + 下边距
行高越小，文字往上，越大文字往下
单行文本，在盒子垂直居中，可设置 行间距（行高）等于盒子高度即可
行高可以设置在父盒子上，文字可以继承该属性；因此多行文本可以直接设置在p标签上。

line-height: 16px;

背景

背景颜色

background-color: #555555/transparent(默认：透明);

背景颜色可以使用 颜色词，16进制，**RGB(A)**的形式表示。

其中rgba中的a设置透明度使用 rgba(r, g, b, [0, 1]); 最后一位 0-1 表示透明度

背景色渐变（C3）

默认的背景色是纯色；C3提供了一种渐变的背景色。
从起始位置，由第一个颜色逐渐变成最后一个颜色。
由于标准语法和兼容语法不太一样，具体查看地址

 /*background: linear-gradient(起始方位 颜色1 颜色2);*/ 方位可以是方位名词，或者度数；标准语法和兼容语法不太一样
 background: -webkit-linear-gradient(颜色1, 颜色2); // 兼容老版本 从左边向右变化
 background: -webkit-linear-gradient(left top ,颜色1, 颜色2); // 兼容老版本 从左上角向右下角变化
 background: linear-gradient(to left, 颜色1, 颜色2)

背景图片

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

默认，背景图片会随着页面一起滚动

背景复合写法

复合写法顺序并非是固定的 也不是所有属性必须，这一点和font 不一样。

background: 颜色 图片 平铺 位置 滚动