HTML5开发教程：HTML5基础知识2

HTML5

1.CSS样式

1）背景：background-attachment背景图像是否固或者随着页面的其余部分滚动，background-color背景颜 色，background-image背景图片，background-position设置背景图片起始位置，background-repeat设置 背景图片是否重复，background-size背景图片的尺寸，background-origin背景图片的定位区域，background- clip背景的绘制区域等；

2）文本：color文本颜色，direction文本方向，line-height行高，letter-spacing字符间距，text-align 文本对齐，text-decoration文本修饰，text-indent文本首行缩进，text-transform元素字母，unicode- bidi文本方向，white-space空白部分，word-spacing字间距，text-shadow文本阴影，word-wrap文本换行规则 等；

3）字体：font-family字体系列，font-size字体尺寸，font-style字体风格，font-weight字体粗细等；

4）链接：a:link未被访问，a:visited已经访问，a:hover鼠标悬停，a:active鼠标点击，text-decoration去掉下划线等；

5）列表：list-style列表项，list-style-image列表图像，list-style-position列表标志位置，list-style-type列表类型等；

6）表格：boder-collapse折叠边框等；

7）轮廓：outline属性，outline-color颜色，outline-style样式，outline-width宽度等。

2.选择器

1）派生选择器：两个标签一起使用，例如?div?a；

2）id选择器：指定唯一id进行选择，先查找再样式，例如#id；

3）class选择器：同id区别，不唯一，并且先样式再查找，例如.class，也可以使用.class.class多类选择器；

4）属性选择器：对带有指定属性的元素设置样式，例如[div];

5）元素选择器：标签即为选择器，子元素选择器使用>，例如p>a；

6）多组选择器：例如a1、a2，通配符选择器*；

7）后代选择器：例如?div?a；

8）相邻兄弟选择器：具有相同父级，例如li+li，第一个li不变，后面的才变。

3.盒子模型

1）内边距：padding内边距，padding-bottom下边距，padding-left左边距，padding-right右边距，padding-top上边距；

2）边框：border-style边框风格，border-width边框宽度，border-color边框颜色，都可以分成四个方向进行设置，border-radius圆角边框，box-shadow边框阴影，border-image边框图片；

3）外边距：margin外边距，可以设置四个方向；

4）外边距合并，两个标签之间的区域外边距会进行合并。

4.定位

1）定位：position位置（absolute绝对，relative相对，fixed固定，static静态），top上，left 左，right右，bottom下，overflow溢出，clip形状，vertical-align垂直对齐，z-index堆叠顺序；

2）浮动：float浮动，left左，right右，none不，inherit继承，clear清除，both全部。

5.常用操作

1）对齐：使用margin、position、float等进行对其操作；

2）尺寸：height高度、line-height行高、max-height最大高度、max-width最大宽度、min-width最小宽度、min-height最大宽度、width宽度；

3）分类：clear清除浮动、悬停指针类型、display显示元素方式（inline常用作导航栏）、float浮动、position位置、visibility是否可见；

4）导航栏：使用display进行设置，block和inline。

6.动画效果

1）2D转换（transform）：translate平移，rotate旋转，scale缩放，skew倾斜，matrix矩阵变换，deg角度；

2）3D转换：rotateX，rotateY；

3）过渡：transtion设置四个过渡属性，transition-property过度的名称，transition-duration过渡效 果花费的时间，transition-timing-function过渡效果的时间，transition-delay过渡效果开始时间；

4）动画效果：animation，通过anim指定名称?设置动画时间，通过@keyframes?anmi指定名称设置不同百分比位置时的状态，从而进行动画效果；

5）多列（多栏）：column-count列数，column-gap距离，column-rule间隔的线及属性。