HTML和CSS

1.使用CSS实现动态效果，要求IE9以上

实际例子：

/* 使用animation-duration、animation-name、animation-delay配合@keyframes实现动态效果，animation-duration设置动态时间必须设置，否则为0就没有动态效果，
animation-name设置元素的名称，@keyframes配合元素的名称给元素设置效果，animation-delay设置效果延迟开始的时间*/
        .estrela.style4 {
            animation-duration: 2s;
            animation-delay: .8s;
            animation-name: estrelaDestacada;
        }
        /*0% 是动画的开始，100% 是动画的完成*/
        @keyframes estrelaDestacada {
            0% {
                background-color: #FFFFFF;
                box-shadow: 0 0 10px 0px rgba(255, 255, 255, 1);
            }
            20% {
                background-color: #FFC4C4;
                box-shadow: 0 0 10px 0px rgb(255, 196, 196, 1);
            }
            80% {
                background-color: #C4CFFF;
                box-shadow: 0 0 10px 0px rgb(196, 207, 255, 1);
            }
            100% {
                background-color: #FFFFFF;
                box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.2);
            }

        }

2.HTML元素的选择器

类型选择器：

以元素的类型为名字设定，比如body｛｝，div｛｝，td｛｝等，会对同一类型的元素起作用，同时对多中类型的元素设置属性时可以用“，”逗号隔开，如：

body, h2, p, table, th, td, pre, strong, em {color:gray;}

.aaa, .bbb, .ccc,#abc {color:red;}

class选择器：

class可以重复，一个class中用空格分成多个类名时，各类名优先级相同，在设置属性时，根据加载的顺序，如果有相同属性，后加载的会将先加载的覆盖掉。可以通过class给元素设置类群。

ID选择器：

每个元素的ID在整个页面是唯一的，可以用ID来获取特定的元素

结合元素的选择器：

p.aaaa{ }，匹配class属性包含aaaa的所有p元素

属性选择器：

*[title] { },匹配所有包含标题（title）的元素

a[href]｛｝，匹配所有包含锚（href）的a标签

a[title][href],匹配两者都有的a标签

后代选择器：

.class .class .class {} 父子代之间用空格隔开，表示选中符合条件的子代元素

伪类选择器：

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */

first-child伪类：

.class:first-child，匹配满足条件的第一个.class元素

伪元素——用于向某些选择器设置特殊效果：

.class：first-line，向文本首行设置特殊样式

.class：first-letter，向文本首字母设置特殊样式

.class：before,在元素前面插入新的内容，如：p:before{content:url(logo.gif);}表示在p段落前加入一张图片

.class:after,在元素后面插入内容