层叠样式表—批量选中元素表钱,再统一设置样式
由于页面中可能会出现大量的重复元素标签,需要改每个元素表钱设置样式,
导致代码出现冗余,开发效率就会降低,使用CSS这门技术来批量选择指定元素标签再进行设置样式。
div(盒子模型)
table表格标签来进行页面布局是比较复杂且不灵活,引入div来进行页面布局,提供页面布局的灵活性
<div> | 块级标签 一个元素代表一行 |
---|---|
<p> | 块级标签 一个元素代表一行 |
<span> | 行内元素 一行可以有多个元素 |
div+css
1.引入css方式
a.第一种:在标签身上直接书写style属性,只能对当前标签起作用
b.第二种:在head标签中引入style子标签,在style子标签里书写css代码
c.第三种:在head标签中引入link子标签,在link子标签中添加属性引入外部css文件
d.在head标签里引入style子标签,在子标签里书写代码引入外部css文件
2.选择器
基本选择器
id选择器
#id{
css代码
}
class选择器
.class{
css代码
}
元素名选择器
div{
css代码
}
扩展选择器
后代元素选择器
div span{
css代码
}
可以吧div里所有的后台span元素选择进来(儿子级别、孙子级别甚至更高级别)
子元素选择器
div>span{
css代码
}
可以把div里所有的子级span元素选择进来
相邻兄弟选择器
div+span{
css代码
}
可以把当前div之后相邻的span元素选择进来
属性选择器
div[name]{
css代码
}
可以把含有name属性的div匹配进来
多元素(分组)选择器
#div1,.class,div+span{
css代码
}
伪元素选择器(超链接)
其实就在html中预先定义好的一些选择器。成为伪元素。是因为css的术语
:link 未点击的状态
:visited 被点击过的状态
注意:在不设置visited状态时active生效,否则会出现visited覆盖active效果
:hover 鼠标移动到元素之上但是未点击的状态
:active 被鼠标点击着的状态
注意:
1.样式离标签元素越近越优先生效
2.选择器选择越具体越优先生效