CSS3
网页分成三个部分
- 结果(HTML)
- 表现(CSS)
- 行为(javascript)
CSS
- 层叠样式表
- 网页实际上是一个多层的结果,通过CSS可以分别为王爷的每一层设置样式
- 最终我们能看到的只是网页最上面一层
- 总之一句好,CSS用于来设置网页中元素的样式
CSS基础使用
使用CSS来修改元素的样式
第一种样式(内联样式,行内样式):
- 在标签内部通过style属性来设置元素的样式
- 问题:
- 使用内联样式,样是只能对一个标签生效
如果虚妄影响到多个元素必须在每一个元素中都复制一遍
并且当样式发生变化时,我们必须要一个一个的修改,非常的不方便
-注意:开发时绝对不要使用内联样式
- 使用内联样式,样是只能对一个标签生效
<p style="color:red;">少小离家老大回,乡音未改鬓毛哀</p>
第二种样式(内部样式表):
- 将样式编写到head中的style标签中
- 然后通过CSS的选择器来选中元素并为其设置各种样式
- 可以同时为多个标签设置样式,并且修改时只需要修改一处即可
- 内部样式表更方便对样式进行复用
第三种方式(外部样式表) 最佳实践:
- 可以将CSS样式编写到一个外部的CSS文件中
- 然后通过link标签来引入外部的CSS文件
- 外部样式表需要通过link标签进行引入,意味着只要想使用这些样式的网页都可以对其引用
- 使样式可以在不同页面之间进行复用
- 将样式编写到外部的CSS文件中,可以使用到浏览器的缓存机制
- 从而加快网页的加载速度,提高用户的体验
<link rel="stylesheet" href="./style.css">
CSS注释
/*
CSS的注释,注释的内容会自动被浏览器忽略
*/
CSS选择器
- 标签选择器
- 类选择器
- id选择器
- 通配选择器
class 是一个标签的属性,他和id类似,不同的是class可以重复使用
- 可以通过classs属性来为元素分组
- 可以同时为一个元素指定多个class属性
通配符选择器:
- 选中页面中的所有元素
-
复合选择器
交集选择器
- 选中同时复合多个条件的元素
- 选择器1选择器2选择3选择器n{}
- 注意:交集选择器中如果有元素选择器,必须使用元素选择器开头
选择器分组(并集选择器)
同时选择多个选择器对应的元素
选择器1,选择器2,选择器3,选择器n{}
关系选择器
-
父元素
- 直接包含子元素的元素叫做父元素
-
子元素
- 直接被父元素包含的元素是子元素
-
祖先元素
- 直接或间接包含后代元素的元素叫做祖先元素
- 一个元素的父元素也是他的祖先元素
-
后代元素
- 直接或间接被祖先元素包含的元素叫做后代元素
- 子元素也是后代元素
-
兄弟元素
- 拥有相同父元素的元素时兄弟元素
-
子元素选择器:
- 作用:选择指定父元素的指定子元素
- 语法:父元素 > 子元素
-
后代元素选择器
- 作用:选中指定元素内的指定后代元素
- 语法:祖先 后代
-
选择下一个兄弟
- 语法:前一个 + 下一个
-
选择下边所有的兄弟
- 语法:兄 ~ 弟
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定开头的元素
[属性名$=属性值] 选择属性值以指定结尾的元素
[属性名*=属性值] 选择属性值中含有某些元素的元素
伪类选择器
伪类(不存在的类,特殊的类)
- 伪类用来描述一个元素的特殊状态
- 比如:第一个子元素、被点击的元素、鼠标移入的元素…
- 伪类一般情况下都是使用:开头
- :first-child
以上这些伪类都是根据所有的子元素进行排序
- :first-child
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似,不同点他们是在同类型元素中进行排序
:first-child
第一个子元素
last-child
最后一个子元素
nth-child(n)
选中第n个子元素,属性指定
特殊值:n,n的范围0~∞
2n 或 even,表示选中偶数位的元素
2n+1 或 odd,表示选中奇数位的元素
:not()否定伪类
将符合条件的元素从选择器中去除
超链接的伪类
- 未访问过的链接 蓝色
- 已访问过的链接
:link
用来表示没访问过的链接(正常的链接)
:visited
用来表示已访问过的链接
由于隐私的原因,所以visited这伪类只能修改链接的颜色
:hover
用来表示鼠标移入的状态
:active
用来表示鼠标点击的状态
伪元素
表示页面的一些特殊的并不真实存在的元素(特殊的位置)
伪元素的使用 :: 开头
::first-letter
表示第一个字母
::first-line
表示第一行
::selection
表示选中的内容
::before
表示元素的开始位置
::after
表示元素的最后位置
before和after 必须结合content属性使用,before和after经常使用
继承
样式的继承
我们为一个元素设置的样式同时也会应用到他的后代元素上
继承是发生在祖先后代之间的
继承的设计是为了方便我们的开发
-
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上,
-
这样只需要设置一次即可让所有的元素都具有该样式
注意:并不是所有的样式都会被继承 -
比如 背景相关,布局相关等的这些样式都不会被继承
选择器的权重
样式冲突:
- 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突
- 发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定
选择器的权重:
- 内联样式 1,0,0,0
- id选择器 0,1,0,0,
- 类和伪类选择器 0,0,1,0
- 元素选择器 0,0,0,1
- 通配选择器 0,0,0,0
- 继承的样式 没有优先级
比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器是单独计算的)
选择器的累加不会超过其最大的数量级,类选择器再高也不会超过id选择器
如果优先级计算后相同,此时则优先使用靠下的样式
可以在某一个样式的后面添加 !important ,则此时该样式会获取到最高的优先级,甚至超过内联样式
注意:在开发中这个玩意儿一定要慎用!
继承没有优先级
像素与百分比
长度单位:
- 像素
- 屏幕(显示器)实际上是由一个一个的小点点构成的
- 不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰
- 所以同样的200px在不同的设备下显示效果不一样
- 百分比:
- 也可以将属性值设置为相对于父元素属性的百分比
- 设置百分比可以是子元素跟随父元素的改变而改变
- em
- em相对于元素的字体大小来计算的
- 1em = 1font-size
- em会根据字体大小的改变