工具/材料:电脑、sublime text、HTML文档
1、首先就是打开sublime text,准备一个HTML文档,在其中加入一个DIV。
2、然后通过CSS给DIV设置宽,高,背景色。
3、接下来在给div添加一个hover的伪类样式,hover就代表的是鼠标经过的样式。
4、然后,我们运行页面,就可以看到背景颜色已经设置成功了。
这里就涉及到css样式的优先级了。从大的方面将,html文档中样式有三种定义方式。
1、外部样式,通过link引用外部样式文件,如<link rel="stylesheet" type="text/css" href="style.css"/>
2、内部样式,在html文档中定义样式,如h3{color:green}
3、内嵌样式,在某个dom元素上定义style。
这三种方式的优先级从1-3逐渐增强。
如果同时定义了好几个样式作用于一个元素上,则最终起作用的按照以下优先级。
1. 内联样式表的权值最高 1000;
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1
权值越高的就优先起作用。