第八章 给网页添加图片
1、背景图片：background-image:url(images/bg.gif);
2、控制重复：background-repeat:repeat/no-repeat/repeat-x/repeat-y
3、定位背景图片：background-position:
4、固定背景图片：background-attachment:scroll/fixed
5、调整背景图片起点：background-origin:border-box（border区域的左上角）/padding-box（padding区域的左上角）/content-box（内容区域的右上角）
6、限制背景图片的显示区域：background-clip:border-box（内容区域到border区域的后面）/padding-box（内容区域和padding区域的后面）/content-box（内容区域的后面）
7、缩放背景图片：background-size:contain/cover/100% auto
8、background快捷属性：background:background-image background-position background-attachment background-color
9、多个背景图片：
10、渐变色背景：
1）线性渐变：background-image:linear-gradient();
2）重复线性渐变：background-image:repeating-linear-gradient();
3）径向渐变：background-image:radial-gradient();
4）重复径向渐变：background-image:repeating-radial-gradient();
第九章 装饰网站导航
1、链接状态
1）:link 未访问过的链接
2）:visited 已访问的链接，不能定义color、background-color以及border-color等样式
3）:hover 访问者的鼠标悬停在上方的链接
4）:active 正被点击的链接
2、导航栏
<ul class=”nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>Reviews</a></li>
</ul>
.nav{
list-style-type:none;
padding-left:0;
margin-left:0;
}
.nav li{
display:inline;
}
.nav a{
dispaly:inline-block;
8em;
height:1.25em;
text-align:center;
text-decoration:none;
}
(.nav{
list-style-type:none;
padding-left:0;
margin-left:0;
overflow:hidden;
}
.nav li{
float:left;
}
.nav a{
dispaly:block;
8em;
height:1.25em;
text-align:center;
text-decoration:none;
}
)
3、给特殊的链接类型定义样式
1）链接到其他网站：a[href^=’http://’]
2）链接到电子邮箱：a[href^=’mailto:’]
3）链接到特殊类型的文件：a[href$=’.pdf’]
第十章 CSS的transform、transition和animation属性
1、变形：transform
1）旋转：transform:rotate(deg)
2）缩放：transform:scale(n,n)/scaleX(n)/scaleY(n)，0<n<1表示缩小，n>1表示放大，n<0表示翻转
3）移动：transform:translate(px,px)/translateX(px)/translateY(px)
4）倾斜：transform:skew(deg,deg)/skewX(deg)/skewY(deg)
5）变换点：transform-origin:
2、transition
.navButton{
border-color:white;
transition-property:background-color,border-color/all;
transition-duration:1s,.5s;
transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out
transition-delay:.0,.5s
}.
navButton:hover{
border-color:black;
}
3、animation
@keyframes backgroundGlow{
from{
}
25% 75%{
}
to{
}
}
.announcement{
animation-name:backgroundGlow;
animation-duration:1s;
animation-timing-function:linear/ease/ease-in/ease-out/ease-in-out
animation-delay:.0,.5s
animation-iteration-count:10;
animation-direction:alternate;
animation-fill-mode:forwards;
}
.announcement:hover{
animation-play-state:paused/running;
}
第十一章 表格和表格的格式化
1、表格的格式
<table>
<caption></caption>
<colgroup>
<col/>
<col/>
</colgroup>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
2、表格的样式
1）内边距：padding
2）水平对齐（继承）：text-align:left/center/right/justify
3）垂直对齐（不继承）：vertical-align:top/middle/bottom/baseline
4）控制表格单元之间的空格：border-spacing:0
5）消除双边框：border-collapse：collapse/separate
6）圆角：border-radius:5px
7）隐藏空白单元格：empty-cells:hide;
3、表单的样式
1）每个lable（标签）都用一个tag（标签）包围起来
2）将display属性值设为inline-block，并设置宽度