CSS学习笔记
一、CSS选择器
0.通配符
通配符是全局的设定的CSS样式,也就是设置了之后整个界面都会采用的样式。
我是div标签
这就是一个典型的标签选择器,在style中设置div的标签的CSS样式。
2.类选择器
类选择器就是设置一个类名,然后通过.类名来进行设置。
我是div标签2
class里面输入的是类名,使用类选择器,要使用.跟上类名来定义这个类CSS。
3.id选择器
id选择器就是使用id=""来定义,但是设置CSS那边,要使用#来进行标记。
id选择器只能有一个,如果设置多个,就会无法使用
我是div标签2
4.并联选择器
并联选择器顾名思义就是或选择器,中间用,号进行隔开,表示只要满足相关的,都采用下面的CSS的样式。
我是div标签1
我是div标签2
我是段落标签
这边代码意思是只要是div标签或者是high类的都会执行相应的css样式。
5.复合选择器
复合选择相当于与运算,只有同时满足这2个条件,才会添加CSS样式。
我是div标签1
我是div标签2
我是段落标签
这段代码意思就是满足是div标签,同时满足class为high才会添加背景颜色这个CSS样式。
6.后台选择器
后代选择器的意思就是一个标签里面包含的其他标签就会采用这种CSS样式。用空格来划分。
我是div标签里面的p标签1
我是div标签里面的span标签里面的P标签
这段代码的意思是div标签里面的p标签就要采用CSS的样式。
7.直接继承标签
所谓的直接继承就是父与子的关系, 比方说div标签里面有一个p标签,那这个p标签就是div标签的直接继承标签,如果div标签里面有一个span标签,span标签里面有一个p标签,那么就不符合直接继承的关系。直接继承标签用>来连接
注意:如果div标签里面包含一个div标签,里面的div标签包含一个p标签,那么也满足直接继承关系
我是div标签里面的p标签1
我是div标签里面的span标签里面的P标签
我是div标签2
我是p标签2
8.相邻兄弟选择器
所谓的相邻兄弟选择器XX+YY,用+号来表示,表示与XX相邻的YY所使用的CSS样式。
注意点:如果XX里面包含YY则不会触发,YY无论是在XX上面还是XX下面都是相邻
我是div的兄弟span
我是div
我是div的兄弟span
我是span的兄弟p
9.属性选择器
所谓的属性选择器,就是在标签中添加属性,通过属性来定位到该标签设置CSS的样式。
我是属性选择器的span1
我是属性选择器span2
我是属性选择span3
10.伪类和伪元素
伪类和伪元素就是指在特定的事件触发的时候,调用的CSS的样式,用:号来表示。
伪元素和伪类一样:
11.importtant
important的在任何选择器中使用!important进行标记,然后强制使用该css样式。
你好,世界
本来采用的CSS样式应该是div的css,但是因为上面color被important修饰了,因此颜色是红色。
二、CSS选择器的优先级
==选择器的针对性越强,优先级越高==
有关CSS选择器的优先级,这里需要知道权值这个概念,权值越高,优先级越高。
==选择器的权值进行相加,越大的越优先,如果权值相同,则使用就近原则。==
==优先级排序:
important > 行内css > id > 类 | 伪类 | 属性选择 | 伪元素 > 通配符 > 继承==
三、HTML标签的类型
HTML的标签分为3种类型:
- 块级标签:
- 独占一行;
- 可以改变宽度和高度;
- 行内标签
- 多个标签能同时显示在同一行,不能改变宽度和高度;
- 行内-块级标签
- 多个标签能同时显示在同一行;
- 可以改变宽度和高度
为了满足开发需要,提供了一个属性来随时更改标签的类型->display,这个属性有3个值:block -> 块级标签,inline -> 行内标签,inline-block -> 行内-块级标签,none -> 隐藏标签。
通过设置display的值,可以随时改变标签类型,满足开发的需要。
四、CSS属性
1.CSS属性可继承和不可继承
CSS的属性分为可以继承和不可继承。继承就是父类标签的属性传递给子类属性,通常文字控制类的属性可以传递,区块控制的属性不可传递。
- 可继承属性:
我是div标签
我是p标签
设置body的CSS样式,div和p都是继承自body,因此颜色和文字大小都得到了改变。
- 不可继承属性:
我是内部的div标签
main里面的属性因为属于块控制的属性,因此没法继承给下面div标签。