CSS属性

一、字体属性

1、字体类型

• 使用font-family定义字体类型
• 不同字体使用逗号隔开

p {
	font-family: 'Times New Roman', 'Microsoft Yahei';
}

2、字体属性

• 使用font-size定义字体大小
• 谷歌浏览器默认字体大小为16px
• 不同浏览器中的大小不一致，应该明确给出一个至，不要默认
• 可以给body指定整个页面文字的大小
• 标题文字需单独设定

p {
	font-size: 12px;
}

3、字体粗细

• 使用font-weight定义字体粗细
• font-weight: normal(相当于400)| bold(相当于700)| bolder| lighter| number(100-900)
• 默认属性为normal,相当于number为400时的粗细
• 实际开发中更习惯用数字
  p {
  font-weight: 700;
  }

4、字体风格

• 使用font-stylet定义字体风格
• font-style: `normal | italic
• 默认属性为normal
• 实际开发中更习惯用数字
  p {
  font-style: italic;
  }

5、字体属性的复合属性

• font: font-style font-weight font-size/line-height font-family;
• 除了font-size, font-family其它属性都可以省略, 属性用空格隔开。
• 优点：节省代码

二、外观属性

1、颜色的表示

颜色的表示有3种

• 预定义颜色
• 十六制颜色
• RGB 颜色

2、对齐属性

• text-align:left（默认值）|center | right
• 效果：设置文本内容的水平对齐方式

3、装饰文本

• text-decoration:none(默认值)|underline(下划线) |overline|line-trough`
• 效果：设置文本的修饰

4、文本缩进

• text-indent: 2em;
• 效果：设置文本的缩进值

5、行间距

• line-height: 16px;

三、背景属性

1、背景颜色

• background-color: transparent(默认);

2、背景图片

• background-image: none(默认)| url;
• 背景图片常用语logo、装饰性小图标或者超大背景图片

3、背景平铺

• background-repeat: repeat(默认) | no-repeat | repeat-x | repeat-y

4、背景图片位置

• background-position: x y;
  • x坐标和y坐标可以使用方位名词或者精确单位
    • length: 百分数 | 浮点数和单位标识符组成的长度值
    • position: top | center | bottom | left |right
    • 当position是方位名词时，次序没有关系
    • 当position只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
    • 当position的x,y是精确坐标，必须一一对应
      
      

background-position: 20px;   //  离左边缘20px，上下居中
background-position: 20px center;   //  离左边缘20px，上下居中
background-position: center 20px;   //  离上边缘20px，水平居中

5、背景图像固定

6、背景属性的复合写法

为了简化背景属性的代码，可以将这些属性简写在同一属性background中。从而节约代码量。当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

• background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

四、CSS的书写规范