CSS01

CSS01

CSS的语法

css语法的声明块

        标签/其他选择器{
            属性名：属性值;
            属性名：属性值;
        }

css的语法：

            属性名和属性值之间使用：隔开
            多对属性之间使用；隔开
            最后一对属性可以不加；

例如：

 <style>
        div{
            font-size: 28px;
            background-color: antiquewhite;
                }
    </style>

css的注释 快捷键为crtl+/ ;
主要注释不可以嵌套使用

CSS的引入方式

1、 内联样式引入

<div style="background-color: skyblue;">我是一个div</div>

2、- 内联样式(行内样式)

缺点：样式的复用率较低

优点：样式与结构分离

将样式表编写到head中的style标签中

  <style>
        div{
            background-color: skyblue;
        }
    </style>

3、- 外部样式表

优点：样式与结构分离，解耦；样式的复用率高（框架:例如bootstrap）， 共用，定义好的css文件可以应用到多个页面中。

1.将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入

<link rel="stylesheet" type="text/css" href="文件的路径"/>

引入方式的优先级

行内样式>内部样式/外部引入

就近原则：哪一种设置方式距离元素最近，谁的优先级更高；

CSS选择器

标签选择器

作用：给所有指定的同一个标签设置属性
格式：

标签名称{
​                属性:值;
​            }

例如：

/* 标签选择器 */
        div{
            color: aquamarine;
            background-color: skyblue;
            font-size: 28px;
        }

注意点：
1、标签选择器是给所有的相同标签内设置属性样式，而不是只给一个标签设置。
2、标签选择器无论标签嵌套了多少层都可以被找到
3、只要是html中的标签就都可以作为标签选择器。

类选择器和id选择器

类选择器

作用：根据给标签起的类名找到相应的标签，然后设置属性
格式：

.类名称{
	属性:值；
}

例如：

 .div3{
            background-color: blanchedalmond;
        }

注意点：
1、每个html标签都有一个属性叫做class，也就是说每个标签都可以设置类名
2、在同一个界面中class选择器的名称是可以重复的
3、在编写class选择器时一定要在类名前面加上 . 号
4、类名是专门用来给css设置样式的
5、在html中可以给一个标签起多个类名
格式：

	   <p class="para1 para2">

错误写法：

	   <p class="para1" class="para2">

id选择器

作用：根据id的名称找到相应的元素，然后设置属性
格式：

#id名称{
​            	属性:值;
​        	}

例如：

 #div1{
            background-color: red;
        }

注意点：
1、每个html标签都有id属性
2、在同一个界面中id的名称是不可以重复的
3、在编写id选择器时一定要在id名称前面加上#
4、id的名称是有一定的规范的
4.1 id的名称只能由字母/数字/下划线
4.2 id的名称不能以数字开头
4.3 id的名称不能是html标签的名称
5、在企业开发中，设置样式一般选用类选择器来，而id是留给js使用的
6.id和class的区别?
​ 6.1 id相当于人的身份证不可以重复
​ class相当于人的名称可以重复
6.2 一个HTML标签只能绑定一个id名称
​ 一个HTML标签可以绑定多个class名称
7.id选择器和class选择器区别?
​ id选择器是以#开头
​ class选择器是以.开头

后代选择器和子元素选择器

后代选择器

作用：找到指定标签的所有特定的后代标签，设置属性
格式：

标签名称1 标签名称2{
		属性:值;
}

先找到所有名称叫做“标签名称1”的标签，然后在这个标签下面去查找所有叫“标签名称2”的标签，然后给它们设置属性
例如：

 div p{
            color: rgb(44, 42, 42);
        }

注意点：
1、后代选择器必须用空格隔开
2、后代不仅仅包括儿子，孙子，重孙子都可以设置
3、后代选择器不仅仅可以使用标签名称，还可以选择其他选择器
4、后代选择器可以通过空格一直延续下去

子元素选择器

作用: 找到指定标签中所有特定的直接子元素, 然后设置属性
​

格式:
​        	标签名称1>标签名称2{
​           	 属性:值;
​        	}

例如：

.div1>p{
            color: red;
        }

注意：
1、子元素选择器只会查找儿子，不会查找其他被嵌套的标签
2、子元素选择器之间需要用>符号连接，并且不能有空格
3、子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器
4、子元素可以一直通过>符号一直延续下去

交集和并集选择器

交集选择器

作用：给所有选择器选中的标签中，相交的那部分标签设置属性
格式：

选择器1 选择器2{
	属性:值; 
}

例如：

  p.p1{
            color: red;
        } 

并集选择器

作用：给所有选择器选中的标签设置属性
格式：

选择器1，选择器2{
	属性:值;
}

例如：

 .p1,#p2{
            color: blueviolet;
        }

兄弟选择器

相邻兄弟选择器

作用：给指定选择器后面紧跟的那个选择器中的标签设置属性
格式：

选择器1+选择器2{
​           	 属性:值;
​        	}

例如：

 .p1+p{
			color: yellow;
		} 

通用兄弟选择器

作用：给指定选择器后面的所有选择器选中的所有标签设置属性
格式：

选择器1~选择器2{
​            		属性:值;
​       		}

例如：

.p1~p{
			color: pink;
		}

结构伪类选择器

1、同级别中的第几个

:first-child 选中同级别中的第一个标签
​ :last-child 选中同级别中的最后一个标签
​ :nth-child(n) 选中同级别中的第n个标签
​ :nth-child(odd) 选中同级别中的所有奇数
​ :nth-child(even) 选中同级别中的所有偶数
​ :nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增

​ 例如(3n+1)分别对应1,4,7…
​ :nth-last-child(n) 选中同级别中的倒数第n个标签
​ :only-child 选中父元素仅有的一个子元素E。

2.同级别同类型中的第几个
​ :first-of-type 选中同级别中同类型的第一个标签
​ :last-of-type 选中同级别中同类型的最后一个标签
​ :nth-of-type(n) 选中同级别中同类型的第n个标签
​ :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
​ :only-of-type 选中父元素的特定类型的唯一子元素

动态伪类选择器

E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接 描点上

​ E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于 链接描点上

​ E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

​ E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持 a:hover

否定选择器

作用：可以从已选中的元素中剔除出某些元素
​ 语法：
​ :not(选择器)
​ 例如:
​

p:not(.hello){
​           	 background-color: yellow;
​        	}

伪元素选择器

使用伪元素来表示元素中的一些特殊的位置
​ ::after
​

表示元素的最后边的部分
​一般需要结合content这个样式一起使用，
​通过content可以向after的位置添加一些内容

::before

​

表示元素最前边的部分
​ 一般需要结合content这个样式一起使用，
 通过content可以向before的位置添加一些内容     

​ ::first-letter
​

为第一个字符来设置一个样式

​ ::first-line
​

为第一行设置一个样式

属性选择器

作用: 根据指定的属性名称找到对应的标签, 然后设置属性

​	[attribute]
    [attribute=value]

作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
​ 最常见的应用场景, 就是用于区分input属性

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

通配符选择器

作用: 给当前界面上所有的标签设置属性

​ 格式:
​

       *{
​           属性:值;
​        	}

组合选择器

多个选择器组合使用。例如 “div.one” 表示class为one的div元素

CSS的三大特性

继承性

作用：当给父元素设置一些属性时，子元素也使用到了，这个我们就称之为继承性
注意点：
1、并不是所有的属性都可以继承，只有以 color/font-/text-/line-开头的才可以被继承
2、在CSS的继承中不仅仅是儿子可以继承，只有是后代都可以继承
3、继承性中的特殊性
 3.1a标签的文字颜色和下划线是不能继承的，当做子元素
 3.2h标签的文字大小是不能继承的，在做子元素时

应用场景:
​    一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容

层叠性

作用：层叠性就是CSS处理冲突的一些能力
注意点：
    层叠性只有在多个选择器选中“同一个标签”，然后又设置相同的属性时，如何层叠由优先级来决定。

优先级

作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
常用选择器的优先级及特征值（权重）

 <!-- 
        1、！important 优先级级别最高
        2、style属性 特征值1000
        3、id选择器 特征值100
        4、class类选择器/伪类 特征值10
        5、标签选择器 特征值1
        6、通配符选择器 特征值0
     -->