CSS常用属性

1、字体

1. 字体 font-family
2. 字体样式 font-style
3. 缩写形式 font的缩写形式依次为font-style、font-weight、font-size、font-family，分别对应了字体样式、字体粗细、字号、字体族.

2、字号与颜色属性

1 、设置字体粗细：font-weight，可选属性值：bold加粗、lighter细体或者填写100-900的数字（400为正常，700为加粗）
2、 设置字体大小：font-size，属性值通常为px或者%
3、 设置字体颜色：color 属性值有三种表达方式

     1）直接写颜色的英文名字：red、green、blue 等。
     2）十六进制写法：#FFFFFF，#后每位可选值为数字 0～9 以及英文的 a～f，每两位表
     示一种颜色，分别对应红绿蓝的比例（最常用，推荐）。
     3）rgb 写法：
         rgb(0～255,0～255,0～255)
         rgba(0～255,0～255,0～255,0～1) 第 4 位数表示透明度，0 表示全透明，1 表示不透明。

4、设置透明度：opacity: 属性值为0-1的数字。此处需要注意一个点，那就是使用opacity时当前元素以及子元素都会透明，而使用rgba调整时，只会使当前元素透明，不会改变子元素透明度。

3、文本属性

   1.line-height

    设置行高，属性值有三种表达方式

   1）像素单位，如48px

   2）纯数值，表示正常行高的倍数

   3）百分数，表示正常行高的百分数

   2.text-align

    设置块级元素中文字的水平对齐方式，属性值有left、center、right.

  3.letter-spacing

    设置字符间距，即字与字之间的间距，属性值通常为**px。

  4.text-decoration

    文本修饰属性，常用的有四个，分别为下划线underline、删除线line-through、上划线overline、不做修饰none。

  5.overflow（overflow-x和overflow-y）

    控制超出范围文本的显示方式，常用属性值有以下三个。

    1）auto：根据文字多少自动显示滚动条

    2）scroll：始终显示滚动条。

    3）hidden：超出范围文本隐藏，可以通过overflow-x和overflow-y分别设置水平垂直方向的隐藏。

  6.text-overflow

     设置多余文字的显示方式，常用属性值有两个。

     1）clip：剪裁文本；

     2）ellipsis：使用省略号代替多余文字。

  7.white-space

     设置元素内的空白符怎样处理，常用属性有三个

      1）normal：默认，空白会被浏览器忽略

      2）nowrap：设置中文行末不断行显示。

      3）pre：空白会被浏览器保留。作用类似于HTML中的<pre>标签

      重点：如何让每行多余文字显示省略号？

    1）white-space：nowrap；如果是中文，需设置行末不断行。

    2）overflow：hidden；设置控件超出范围隐藏。

    3）text-overflow：ellipsis；设置多余文本省略号显示。

   8.text-shadow

      设置文本阴影，有四个属性值。

     1）水平阴影距离：必写，数值越大，阴影右移。

     2）垂直阴影距离：必写，数值越大，阴影下移。

     3）阴影模糊距离：可写，数值越大，阴影越模糊。默认为0，不模糊。

     4）阴影颜色：可写，默认为黑色。

  进阶版也可以设置多个阴影，看个人需求吧，中间以逗号隔开就可。

   9.text-indent

     首行缩进，可以使用像素值调整段落文字的首行缩进大小。 

  10.text-stroke

      设置文字描边，需要注意text-stroke只能在webkit内核浏览器使用，所以平时我们必须使用前缀“-webkit-”，共接收两个属性值分别为描边的粗细，描边的颜色。

4、CSS常用的背景属性

1 背景颜色属性

background-color;

2. 背景图像属性

1、background-image

设置背景图像，背景和背景色同时存在时，背景图会覆盖背景色

2、background-repeat

当背景图大小小于元素实际区域时，会默认将背景图进行平铺展示，可选属性有四个分别为
1、no-repeat：不平铺
2、repeat：平铺（默认）
3、repeat-x：水平方向平铺
4、repeat-y：垂直方向平铺

3、background-size

设置背景图大小，可以分为两种方式设置
（1）指定宽度和高度
指定宽高的写法也分为两种，第一种是直接写带像素单位的数值；第二种是写百分比（即宽高为父容器宽高的百分比）.两种方式都有两个属性值，第一个属性值为宽度。第二个属性值为高度。
当只有一个属性值时，默认为宽度和高度等比缩放。
当有两个属性值时，会按照指定的高度与宽度进行压缩或拉伸显示。
（2）等比缩放
等比缩放也有两种方式，分别是contain和cover。
contain：图片等比缩放，缩放到宽或高的某一边等于父容器的宽高，另一边按照图片大小缩放（可能导致部分区域无法覆盖）.
cover：图片等比缩放，使背景图完全覆盖背景区域（可能导致背景图部分区域无法显示）

4、background-position

设置背景图像的起始位置，属性值有两种写法，第一种使用指定位置关键字；第二种是使用数值。
（1）指定位置关键字：属性值有left、right、top、bottom和center。当只写一个属性值时，另一个默认为center。
（2）使用数值：两个值，分别表示水平位置和垂直位置，可以采用像素值或百分比形式。
在使用background-position属性时需要注意以下三点：
1）当只写一个属性值时，默认为水平方向，垂直设为居中。
2）当使用像素时，数值表示图片的左上角往各个方向移动的实际距离。
需要注意的是，在水平方向上，正数右移，负数左移，在竖直方向上，正数下移，负数上移
3）当使用百分数时，一般只能拿正数。百分数表示去掉图片的大小后，元素中剩余空白距离的分布比例。

5、background-origin

设置背景图的定位方式，属性值有三个：
（1）border-box：从边框外缘开始。
（2）padding-box：从边框内缘开始。
（3）content-box：从文字内容区开始。
background-origin不改变背景图显示区域大小，只决定左上角定位位置。

6、background-clip

裁切背景图和背景色显示区域，其属性值有三个：
（1）border-box：从边框外缘开始显示。
（2）padding-box：从边框内缘开始显示。
（3）content-box：从文字内容区开始显示。

7、background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动，主要属性值有两个：
（1）scroll：默认值，背景图像会随着页面其余部分的滚动而滚动。
（2）fixed：当页面的其余部分滚动时，背景图像不会随之移动。

8、background

背景的简写属性，在一个声明中设置所有的背景属性，当使用简写属性时，属性值的顺序如下所示：
background-color
background-image
background-repeat
background-attachment
background-position

5、css其他常用属性

1、列表常用属性

list-style规定列表的样式，即每个列表前的标志

属性值	方式
none	无样式
circle	空心圆
disc	实心圆
square	实心正方形
decimal	数字

2、超链接样式属性

超链接与其他标签相比比较特殊，可以选择多个状态，如“未访问状态”“已访问状态”等，而用于表示不同状态样式的选择器就叫做伪类选择器
a:link 未被访问的状态
a:visited 已被访问的状态
a:hover 鼠标指针移动到链接上
a:active 正在被单击的链接
需要注意的时，当为链接不同 状态设置不同样式时，按如下规则
1）a:hover必须位于a:link和a:visited之后。
2）a:active必须位于a:hover之后