css3
css3编写的位置
1.内联样式(行内样式)
-
在标签内通过style属性来设置元素的样式
-
问题:
只能对一个标签生效,如果要影响到多个元素,每一个都要复制一遍
修改时要一个一个修改,不方便
注意:开发时绝对不能用内联样式
<p style="color: cadetblue; font-size: 60px;">你好呀!</p>
<p style="color: cadetblue; font-size: 60px;">我很好!</p>
2.内部样式表
-
将样式编写在head的style标签中
-
通过css的选择器来选中元素并为其设置样式
-
可以同时为多个标签设置样式,并且只用修改一个即可全部应用
<style>
p{
background: chocolate;
}
</style>
3.外部样式表
-
可以将css样式编写到一个外部的css文件中
-
然后通过link标签来引入外部的css文件
-
只要使用这个样式的网页都可以引用,可在不同网页复用
<link rel="stylesheet" href="./08_css语法.css">
css选择器
1.常用选择器
1.元素选择器
-
作用:根据标签名来选中指定的元素
-
语法:标签名{}
-
例子:p{} h1{} div{}
h1{ background: chocolate; }
2.id选择器
-
作用:根据元素的id属性值选中一个元素
-
语法:#id{}
-
例子:#box{} #red{}
#red{ color: red; }
3.类选择器
-
作用:根据元素的class属性选中一组元素
-
语法:class属性值
-
class是一个标签的属性,它可以重复使用
-
可以通过她给元素分组,也可以一个元素设置多个class
.abc{ height: 100px; }
2.复用选择器
1.交集选择器
-
作用:选中同时复用多个条件的元素
-
语法:选择器1.选择器2{}
-
注意:交集选择器中有元素选择器,必须使用元素选择器开头
div.red{ color: red; }
2.选择器分组(并集选择器)
-
作用:同时选择多个选择器对应的元素
-
语法:选择器1,选择器2{}
h2,span{ color: rosybrown; }
3.关系选择器
1.子元素选择器
-
作用:父元素>子元素{}
div>span{ color: royalblue; }
2.后代元素选择器
-
作用:选中指定元素内的指定后代元素
-
语法:祖先 后代
div span{
color: springgreen;
}
3.选择下一个兄弟
-
语法:前一个 + 下一个
p + span{ color: teal; }
4.伪类选择器
-
伪类用来描述元素的特殊状态(第一个,被点击,鼠标移入)
伪类一般情况下都是使用:开头
:first-child 第一个元素
:last-child 最后一个元素
:nth-child() 选择第n个元素
特殊值:
n n的范围0到正无穷
2n 表示选中偶数的位置
2n+1 表示选中奇数的位置
-
以上这些元素是根据所有元素进行排序
ul>li:first-child{ color: tomato; } ul>li:nth-child(2n){ color: turquoise; }
-
-
:first-of-type
:last-of-type
:nth-of-type()
-
这几个伪类的功能和上述的类似,不同点是它们在同类元素中进行排序
ul>li:first-of-type{ font-size: 50px; }
-
-
:not() 否伪元素
-
将符合条件的伪元素从选择器中去除
ul>li:not(:nth-child(3)){ font-weight: 900; }
-
5.选择器练习
超链接的伪类
-
:link 用来表示没访问过的链接(正常的链接)
a:link{ color: tomato; font-size: 20px; }
-
:visited 用来表示访问过的元素
-
由于隐私原因,visited这个伪类只能修改链接的颜色
a:visited{ color: yellow; }
-
-
:hover 表示鼠标移入的状态
a:hover{ color: crimson; }
-
:active 表示鼠标点击
a:active{
font-size: 50px;
}
伪元素
-
伪元素表示页面中一些特殊的并不存在的元素(特殊的位置)
-
伪元素使用::开头
-
::first-letter 表示第一个字母
-
::first-line 表示第一行
-
::selection 表示选中的内容
-
::before 元素的开始
-
::after 元素的结束
before和after必须接后content属性来使用
p::first-letter{ font-size: 50px; } p::first-line{ color: crimson; } p::selection{ background-color: cyan; } p::after{ content: 'I am OK!'; color: darkturquoise; }
-
样式的继承
- 我们为一个元素设置样式的同时也会应用到它的后代元素上
- 注意:并不是所有的样式都会被继承(背景相关的,布局相关的这些样式都不会被继承)
选择器的权重
-
我们通过不同的选择器,选中相同的元素为它设置样式时,此时会发生冲突
-
发生冲突时,应用那个样式又选择器的权重(优先级)决定
选择器的权重:
内联选择器 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
通配选择器 0
继承的样式 没有优先级
-
比较优先级的时候需要将所有优先级相加,最后优先级高先显示(分组优先级时单独计算的)
-
选择器的累加不会超过最大数量级
-
如果优先级计算相同时,使用靠下的样式
-
可以在某个样式的后边添加!important,则此时有最高优先级,甚至高于内联样式
注意:在开发中慎用
单位
-
像素:
- 屏幕实际又一个一个小点组成
- 不同屏幕的显示大小不一样,像素越小效果越清晰
- 同样200px在不同设备下显示效果也不一样
-
百分比:
- 可以将属性设置为相对其父元素属性的百分比
- 设置百分比可以使子元素随父元素的改变而改变
-
em:
- em是相当于父元素来计算的
- 1em=1font-size
- em会根据字体大小而改变
-
rem:
- rem是相对于根元素的字体大小来计算