税枝®税典

# 征税范围

层叠:相同的样式名的不同值作用到同一元素的时候,会有样式被覆盖.

样式生效会有先后重要的顺序.根据样式优先级,如果优先级一样,后写会覆盖先写的.

样式表:元素视觉表现的集合,样式是依附HTML而存在的

注意:

​ 网页实际上是一个多层的结构,通过css可以分别为网页的每一个层来设置样式,最终我们看到的也只是网页最上面的一层.

# 税率

# 像素px单位

屏幕(显示器),实际上是由一个个发光小圆格所显示.

并且这个发光原件要能显示这个世界上所有的颜色的话,这个发光原件要有三种颜色,即我们光学三原色红绿蓝.这三个颜色组合在一起,可以表现一个点的颜色,一个点就是一个像素大小.

分辨率1920✖1080的,这两个数字就代表屏幕横向1920个像素单位,纵向1080个像素单位.

不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰.

像素是一个相对单位,同样的300px在不同的显示设备效果不一样.

# 百分比单位

也可以将属性值设置为相对于父元素属性的百分比

设置百分比可以使里面子元素跟父元素的改变而改变

# 计算方式

注释里面的内容会自动被游览器忽略

/* 这是css注释 */

# 税收优惠

# 行内样式

在标签内部通过style属性来设置元素的样式

问题:

​ 1.结构和样式未分离,会影响到代码结构的观察和维护.

​ 2.样式只能对一个标签生效.不能统一去设置,当样式改变,必须一个个修改,不方便.

​ 开发中绝对不要使用内联样式.

<div style="width: 500px; height: 500px; background-color:pink"></div>
/*现在我们设置style属性名,里面是我们的属性值.
 里面样式代码的设置格式为：样式名称:样式值.*/
1
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>
1
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在不同的页面之间对其进行复用.

  1. 引入式 link标签 开发中最佳的使用方式

    ​ 语法

  2. 导入式 @import 必须写在行首 了解一下**

    ​ 语法: @import url("./css/2.css");

将样式编写到外部的css文件中,可以利用到游览器的缓存机制

从而加快网页的加载速度,提升用户的体验

# 元素命名

命名是建立样式与标签的桥梁,

# id命名

唯一性(页面一个元素名字只能一个id名字,不能出现重复).

id命名主要用于大结构框架和js元素控制上.

<div id="yunmu"></div>
1

# class(类名命名)

可以有多个,重复使用,只是一个分类,只要具有相似的属性的物体都会分到同一个类中.

主要用于元素样式的设置.

<div class="box"></div>
1
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，则此时该样式会获取到最高的优先级

注意:

​ 在开发中慎用！

​

← 房产税 →