CSS微课_W3CSchool笔记

#CSS

###5.css属性_背景属性
####background-attachment属性
background-attachment属性设置背景图像是固定的还是与页面的其余部分一起滚动。

background-attachment属性的参数：

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

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

###6.css属性_表
####css 列表样式

#####list-style-type属性

CSS列表属性允许我们设置不同的列表项标记。 在HTML中，有两种类型的列表：

无序列表（<ul>） - 列表项目用项目符号标记
有序列表（<ol>） - 列表项目用数字或字母标记

使用CSS，列表可以进一步风格化，图像可以用作列表项标记。

其中一种方法是使用list-style-type属性，可以设置为
none,circle, square, decimal, disc, lower-alpha等。

 list-style-type属性的none值可以将列表的标记设置为不显示，在使用ul/ol进行一些网页布局（例如菜单）的时候较常使用到~

#####列表的图标和位置

还有其他列表属性，如：

list-style-image ： 指定要用作列表项标记的图像。
list-style-position ： 指定标记框的位置（属性值包括：inside, outside）。

"list-style-position: outside"是默认值

#####list-style属性

list-style属性是设置list-style-type，list-style-image和list-style-position的简写属性。 它用于在一个声明中设置所有的列表属性：

list-style: square outside none;

####css 表格样式
#####table属性

使用CSS可以大大提高HTML表格的外观。

border-collapse属性指定表格边框是否折叠为单个边框或默认分开。 如果边框是分开的，则可以使用border-spacing属性来更改间距。

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

HTMl代码

<table border="1">
<caption>w3cschool</caption>
<tr>
  <th>Course name</th>
  <th>Lessons</th>
  <th>Quizzes</th>
</tr>
<tr>
  <td>C++</td>
  <td>81</td>
  <td>363</td>
</tr>
<tr>
  <td>JavaScript</td>
  <td>48</td>
  <td>144</td>
</tr>
<tr>
  <td>HTML</td>
  <td>38</td>
  <td>119</td>
</tr>
<tr>
  <td>CSS</td>
  <td>70</td>
  <td>174</td>
</tr>
</table>

css代码

caption {
   caption-side: top;
}

#####empty-cells属性

empty-cells属性指定是否在表格中的空单元格上显示边框和背景。

参数值可以是：

show：呈现空单元格的边框
hide ：隐藏空单元格的边框

table {
   border-collapse: separate;
   empty-cells: hide;
}

####css 链接样式
####css 自定义鼠标光标样式

###7.css 定位与布局

###8.1css3基础

###8.2css3渐变与背景

###8.3css3过渡与转换