《CSS3秘籍》第8-11章

第八章 给网页添加图片

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，并设置宽度