# 征税范围
层叠:相同的样式名的不同值作用到同一元素的时候,会有样式被覆盖.
样式生效会有先后重要的顺序.根据样式优先级,如果优先级一样,后写会覆盖先写的.
样式表:元素视觉表现的集合,样式是依附HTML而存在的
注意:
网页实际上是一个多层的结构,通过css可以分别为网页的每一个层来设置样式,最终我们看到的也只是网页最上面的一层.
# 税率
# 像素px单位
屏幕(显示器),实际上是由一个个发光小圆格所显示.
并且这个发光原件要能显示这个世界上所有的颜色的话,这个发光原件要有三种颜色,即我们光学三原色红绿蓝.这三个颜色组合在一起,可以表现一个点的颜色,一个点就是一个像素大小.
分辨率1920✖1080的,这两个数字就代表屏幕横向1920个像素单位,纵向1080个像素单位.
不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰.
像素是一个相对单位,同样的300px在不同的显示设备效果不一样.
# 百分比单位
也可以将属性值设置为相对于父元素属性的百分比
设置百分比可以使里面子元素跟父元素的改变而改变
# 计算方式
注释里面的内容会自动被游览器忽略
/* 这是css注释 */
# 税收优惠
# 行内样式
在标签内部通过style属性来设置元素的样式
问题:
1.结构和样式未分离,会影响到代码结构的观察和维护.
2.样式只能对一个标签生效.不能统一去设置,当样式改变,必须一个个修改,不方便.
开发中绝对不要使用内联样式.
<div style="width: 500px; height: 500px; background-color:pink"></div>
/*现在我们设置style属性名,里面是我们的属性值.
里面样式代码的设置格式为:样式名称:样式值.*/
2
3
# 内联样式
将样式在head中的style标签里
然后通过css选择器来选中元素为其设置各种样式
好处:
同时可以为多个标签设置样式,并且修改时只需修改一处即可全部应用
小型项目或者写一些demo小案例的时候使用内联样式,
内联样式更方便对样式进行复用
mdn
问题:
我们内部样式表只能对一个网页起作用
它里面的样式不能跨页面进行复用
<style type="text/css">
div{
width:200px;/*元素宽度*/
height:200px;/*元素高度*/
padding:20px;/*内边距*/
margin:外边距;/*外边距*/
background-color:lightgreen;/*背景颜色*/
color:pink/*文字颜色*/
font-size:30px;/*文字大小*/
/*css基本语法:
选择器 + 声明块
选择器 通过选择器可以选中页面特定的元素
声明块 通过声明块为元素设置样式
声明块由一个个声明构成
声明是一个名值结构
一个样式名对应一个样式值,名值之间以:链接,以;结尾*/
}
</style>
<div>洪荒宇宙</div>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 外联样式
可以将css样式编写到一个外部的css文件中,然后通过link标签来引入外部的css文件.
保证了结构和样式的分离,让代码各司其职.让css在不同的页面之间对其进行复用.
引入式 link标签 开发中最佳的使用方式
语法
导入式 @import 必须写在行首 了解一下**
语法: @import url("./css/2.css");
将样式编写到外部的css文件中,可以利用到游览器的缓存机制
从而加快网页的加载速度,提升用户的体验
# 元素命名
命名是建立样式与标签的桥梁,
# id命名
唯一性(页面一个元素名字只能一个id名字,不能出现重复).
id命名主要用于大结构框架和js元素控制上.
<div id="yunmu"></div>
# class(类名命名)
可以有多个,重复使用,只是一个分类,只要具有相似的属性的物体都会分到同一个类中.
主要用于元素样式的设置.
<div class="box"></div>
2
# 命名规范
命名规范
1.必须以字母开头命名选择器,这样可保证在所有浏览器下都能兼容;
2.不允许单个字母的选择器出现;
3.不允许命名带有广告等英文的单词,例如ad,adv,adver,advertising,已防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。
4.下划线 ’ _ ’ 禁止出现在class命名中,全小写,统一使用’-‘连字符.
5.禁止驼峰命名 className
6.见名知意
# 选择器
# 常用选择器
# 1.元素选择器
作用: 根据标签名选中指定的元素
语法 : 标签名 {}
例子: p{} h1{} span{}
缺点 指向不明确 容易造成样式污染
# 2.id选择器
作用:根据一个元素的id属性去选中一个元素
语法:#id属性值{}
例子: #box #yunmu
# 3.class类选择器
作用:根据元素的class属性值选中一组元素
语法:.class属性值{}
# 4..通配符选择器
作用:选中页面所有标签
(比较多的作用消除默认样式)
语法 * {}
缺点:选中所有元素,性能浪费,不建议使用
# 复合选择器
# 1.交集选择器
作用:同时选中多个条件的元素
语法:选择器1选择器2选择器3选择器n{}
注意:
交集选择器如果有元素选择器,必须使用元素选择器开头
# 2.并集选择器
作用:同时选择多个元素对应的元素
语法:选择器1 , 选择器 2 , 选择器3 , 选择器n{}
# 元素关系选择器
就是当前元素根据与其他元素的关系选择元素的选择器
主要是为了减少命名
元素关系
父元素
---直接包含子元素的元素叫做父元素
子元素
---直接被父元素包含的元素是子元素
祖先元素
----直接或间接后代元素的元素叫祖先元素 一个元素的父元素也是它的祖先元素
后代元素
----直接或间接被祖先元素包含的元素叫做后代元素
----子元素也是后代元素
兄弟元素
----拥有相同父元素的元素是兄弟元素
# 1.子元素选择器
作用:选中指定父元素的指定子元素
语法: 父元素 > 子元素 用 > 表示
# 2.后代元素选择器
选中指定元素的所有后代元素
语法: 祖先 后代 用空格表示
# 3.相邻选择器
选中下一个兄弟
语法:前一个 + 下一个 用+连接
# 4.通用兄弟选择器
选择下边所有兄弟(除开自己)
语法 : 兄 ~ 弟
# 样式优先级
当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就有样式冲突
发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定
选择器的权重
行内样式 --- 1,0,0,0
id选择器 --- 0,1,0,0
类名选择器class --- 0,0,1,0
元素选择器div --- 0,0,0,1
通配符,关系选择器 --- 0,0,0,0
继承的样式 --- 没有优先级
(分组选择器的优先级单独计算)
注意:
选择器的累加不会超过他所在的层级
如果优先级计算后相同,则后面的样式生效
可以在某一个样式后面加!important,则此时该样式会获取到最高的优先级
注意:
在开发中慎用!