2020年2月14号--CSS学习笔记（四）

2020年2月14号–CSS学习笔记（四）

CSS属性–背景属性

1. background-color属性
   background-color属性用于指定元素的背景颜色。
   background-color的属性值
   颜色名称关键词：red、blue等；
   十六进制值：#fff、#000、#6e6e6e等；
   RGB：rgb(255,255,255)、rgba(0,0,0,0.5)等（使用rgba可以实现透明背景色）；

2. background-image属性
   background-image属性在元素中设置一个或多个背景图像。
   默认情况下，背景图像放置在元素的左上角，并且水平重复和垂直以覆盖整个元素 (相当于background-repeat:repeat)。

3. background-repeat属性
   background-repeat属性指定如何重复背景图像。 背景图像可以沿水平轴 ，垂直轴 ，两个轴重复，或者根本不重复。repeat-x 只会水平重复背景图像。repeat-y 只会垂直重复背景图像。
   设置继承值
   当您将background-repeat属性设置为inherit时，它将采用与元素父级 的属性 相同的指定值。

4. background-attachment属性
   background-attachment属性设置背景图像是固定的 还是与页面的其余部分一起滚动 。
   background-attachment属性的参数：
   scroll： 默认值。背景图像会随着页面其余部分的滚动而移动。
   fixed： 当页面的其余部分滚动时，背景图像不会移动 。
   inherit： 规定应该从父元素继承 background-attachment 属性的设置。

注意： 设置了fixed属性后，即使元素具有滚动机制，背景图像会固定在某个位置不会跟随页面元素滚动。

CSS列表样式

1. list-style-type属性
   CSS列表属性 允许我们设置不同的列表项标记。 在HTML中，有两种类型的列表：
   无序列表（<ul>） - 列表项目用项目符号标记
   有序列表（<ol>） - 列表项目用数字或字母标记
   使用CSS，列表可以进一步风格化，图像可以用作列表项标记。
   其中一种方法是使用list-style-type属性，可以设置为none,circle, square, decimal, disc, lower-alpha等。
   list-style-type属性的none值可以将列表的标记设置为不显示，在使用ul/ol进行一些网页布局 （例如菜单） 的时候较常使用到~

2. 列表的图标和位置
   list-style-image ： 指定要用作列表项标记的图像。
   list-style-position ： 指定标记框的位置（属性值包括：inside, outside）。
   解析：
   inside： 列表项目标记放置在文本以内，且环绕文本根据标记对齐
   outside： 默认值。 保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

3. list-style属性
   list-style属性是设置list-style-type，list-style-image和list-style-position的简写属性。

4. table属性
   border-collapse属性指定表格边框是否折叠为单个边框或默认分开。 如果边框是分开的，则可以使用border-spacing:length length;属性来更改间距。
   (如果使用border-separate：separate;而没有使用border-spaceing属性来设置分开的间距，默认的还是会有分离的效果的)
   如果定义一个 length 参数，那么定义的是水平和垂直间距 。
   如果定义两个 length 参数，那么第一个设置水平间距 ，而第二个设置垂直间距 。

5. caption-side属性
   caption-side属性指定表标题的位置。 值可以设置为 top 或 bottom。

6. empty-cells属性
   empty-cells属性指定是否在表格中的空单元格 上显示边框 和背景 。
   参数值可以是：
   show： 呈现空单元格 的边框
   hide ： 隐藏空单元格 的边框

7. table-layout属性
   table-layout指定如何计算表格列的宽度 。
   参数值可以是：
   auto ： 当列或单元格宽度未明确设置时，列宽将与组成列的单元格中的内容量成比例。
   fixed ： 当列或单元格宽度未明确设置时，列宽将不受组成列的单元格中的内容数量的影响。
   表格布局默认设置为auto。

设置链接样式

8. 设置链接样式
   以下伪选择器可用：
   a:link - 定义正常的未访问链接的样式
   a:visited - 定义访问链接的样式
   a:active - 一旦你点击链接，链接就会激活
   a:hover - 当鼠标悬停时，链接悬停

   当为链接设置样式时，必须遵循以下规则：- a:hover 必须在a:link和a:visited之后（鼠标不访问链接，a:link肯定在鼠标悬停前面；如果鼠标点击链接，就会有a:visited样式,但是一瞬间鼠标无法移开链接，因此鼠标还是在悬停，故a:hover必定在后面啦！）,- a:active 必须在a:hover之后（鼠标悬停再点击，因此肯定在后面啦！）

9. 链接中文本的样式
   处理带链接的文本CSS最常见的用法之一是删除下划线。text-decoration属性用于删除下划线。
   以下属性用于控制链接的样式：
   border:none - 从包含链接的图像中删除边框
   outline:none - 删除IE中点击链接行上的虚线边框

10. 设置鼠标光标样式
    CSS允许您将鼠标悬停 在元素上时设置所需的光标样式。cursor属性
    cursor参数值:
    default - 默认光标
    crosshair - 光标显示为十字准线
    pointer - 光标显示手形图标
    cursor的值较多，以下用图片的形式列出。