学习html5（2）

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间隔的线及属性。