颜色

颜色名称

设置背景

在制作网页时我们往往需要在网页中添加一些背景颜色、背景图像让网页更加美观，吸引访问者的眼球。CSS中提供了一系列用于设置HTML元素背景效果的属性，如下所示：

• background-color: 设置元素的背景颜色
• background-image:设置元素的背景图像
• background-repeat:控制背景图像是否重复
• background-attachment：控制背景图像是否跟随窗口滚动
• background-position：控制背景图像在元素中的位置
• background-size：设置背景图像的尺寸
• background-origin：设置brackground-position属性相对于什么位置来定位背景图像
• background-clip：设置背景图像的显示区域
• background：背景属性的缩写，可以在一个声明中设置所有的背景属性

background-image设置

选择图片的url可以是本地的，也可以是网上的

background-image: url(http://xxxx)
background-image: url("http://xxxx")

加引号和不加引号是一样的

background-repeat

background-position

brackground-attchment

用来设置背景图像是固定在某个位置还是跟随页面一起滚动，该属性的可选值如下：

background

是背景属性的简写形式，通过它不仅可以为元素设置某个背景属性，还可以同时设置多个或者所有的背景属性。在设置多个背景时并没有固定顺序

 body {
      background-color: whitesmoke;
      background-image: url("");
      background-repeat: no-repeat;
      background-size: 300px;
      background-position: right bottom;
      background-attachment: fixed;
  }

  body {
      background: whitesmoke url("") no-repeat right bottom /300px fixed;
  }

这两种一样

文本样式

• text-align：设置文本的水平对齐方式

影响块级元素，不影响行内元素

• text-decoration：设置文本的装饰

text-decoration属性用于设置或删除文本的修饰，最常用的做法就是使用text-decoration属性来删除a标签的默认下划线。

• text-transform：设置文本中英文的大小写转化方式

text-transform属性用来控制文本中英文字母的大小写，通过该属性您可以在不修改原文的基础上，将文本中的英文统一改为小写字母、大写字母或者首字母大写的形式。

text-transform属性的可选值如下：

• text-indent：设置文本的缩进方式

text-indent属性用来为元素中的文本添加首行缩进的效果，属性可选值如下：

• line-height：设置行高

line-height属性用来设置文本的行高，属性的可选值如下：

• letter-spacing：设置字符间距

用来设置字符之间的间距，属性的可选值如下：

• word-spacing：设置单词与单词之间的间距(对文本无效)

用来设置单词与单词之间的间距，但对中文无效，属性的可选值如下：

• text-shadow：设置文本阴影

为文本加阴影及模糊效果，属性的语法格式如下：

text-shadow: h-shadow v-shadow blur color;

h-shadow：必须值，设置阴影的水平位置，允许为负值；

v-shadow：必须值，设置阴影的垂直位置，允许为负值；

blur：可选值，设置模糊的距离；

color：可选值，设置阴影的颜色。

• vertical-align：设置文本垂直对齐

语法：

vertical-align: auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom|length

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

• direction：设置文本方向

CSS边框样式

CSS的边框是围绕着元素内容和内边距的一条或多条线段，您可以自定义这些线段的样式、宽度和颜色：

• border-style：设置边框的样式，例如实现、虚线等
• border-width：设置边框的宽度(厚度)
• border-color：设置边框的颜色
• border：上面三个边框属性的缩写

border-style

设置元素中所有边框的样式，或者单独为某个边框设置样式，其语法格式如下：

写边框的时候，需要注意，一个元素有四个方向的边框，我们可以给四个方向单独设置边框，border-style属性有多种不同的用法：

• 如果提供全部的四个参数，则会按照上、右、下、左的顺序分别设置边框四个边的样式
• 如果提供三个参数，那么第一个参数会作用在上边框，第二个参数会作用在左、右两个边框上，第三个参数会作用在下边框上
• 如果提供两个参数，那么第一个参数会作用在上、下两个边框，第二个参数作用在左、右两个边框上
• 如果提供一个参数，这个参数将同时作用在四个边框上

除了可以使用border-style属性设置元素的边框样式外，您还可以使用下面的属性分别设置元素上、下、左、右四个边框的样式：

• border-bottom-style：设置下边框的样式
• border-top-style：设置上边框的样式
• border-left-style：设置左边框的样式
• border-right-style：设置右边框的样式

boder-width

设置元素中所有边框的宽度，或者单独为某个边框设置宽度，其语法格式如下：

同样支持上下左右。

border-color

用来设置边框的颜色，与颜色的用法一致，也是支持每个边框单独设置颜色

border

这是一个结合的属性，和background一样，很多时候都是直接简写

border: border-width border-style border-color;

同样也是支持给各个方向进行单独设置

• border-bottom：统一设置下边框的宽度、样式、颜色
• border-top：统一设置上边框的宽度、样式、颜色
• border-left：统一设置左边框的宽度、样式、颜色
• border-right：统一设置右边框的宽度、样式、颜色

border-status圆角样式

圆角设置一般设置的是边框的

• 四个值(左上角、右上角、右下角、左下角)：border-radius: 15px 50px 30px 5px;
• 三个值(第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角)：border-radius: 15px 50px 30px;
• 两个值(第一个值用于左上角和右下角，第二个值用于右上角和左下角)：border-radius: 15px 50px;
• 一个值(该值用于所有四个角，圆角都是一样的)：border-radius: 15px;

同样也是支持各个角单独设置

• border-top-left-radius：定义左上角边框的形状
• border-top-right-radius：定义右上角边框的形状
• border-bottom-right-radius：定义右下角边框的形状
• border-bottom-left-radius：定义左下角边框的形状

cursor(鼠标样式)

在浏览网页的过程中，当我们将鼠标移动到一些元素上时，鼠标的样式会发生相应的改变，例如当鼠标指向文本时，鼠标的样式会变成类似大写字母I的样子；当鼠标指向链接时，鼠标会变成一个小手的形状等。除了这些默认的变化外，您还可以通过CSS中的cursor属性来改变网页中鼠标(光标)的样式，下表中列举了cursor的可选值：

记住一些常用的

点击     pointer
等待     progress
不可点击  not-allowed

outline(轮廓)

参数有三个

outline: 宽度 样式 颜色;

outline-offset

默认情况下轮廓是紧贴着边框的，通过outline-offset属性可以设置轮廓与边框之间的距离

outline-offset: 2px;