css｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 2 天 1.简介层叠样式表 css用来设置网页中

这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

1.简介

层叠样式表
css用来设置网页中元素的样式
注释 ctrl+/

2.规则集（基本语法）

p:选中页面中的所有p元素

选择器（Selector）

HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。

声明（Declaration）

一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

属性（Properties）

改变 HTML 元素样式的途径。（本例中 color 就是 `` 元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。

属性的值（Property value）

在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

tips:
- 每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
- 在每个声明里要用冒号（:）将属性与属性值分隔开。
- 在每个规则集里要用分号（;）将各个声明分隔开。

3.修改元素的样式

1.（内联样式，行内样式）

标签内部通过==style属性==来设置元素的样式
- 使用内联样式，只能对一个标签生效。
  
  开发的时候绝对不要用内联样式

2.内部样式表

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

-通过css的选则器

方便复用
缺点：不能跨页面使用

3.外部样式表（开发中最适用）

将css编写到外部css文件中
使用==link 标签==，引入，可跨页面引用
可以使用到浏览的缓存机制，加快网页的加载速度，提高用户体验

4.选择器

作用：根据标签名来选中指定的元素
优先级公式：
- 继承<通配符选择器<标签选择器<类选择器<id选择器<行内选择器<!important

4.1常用选择器

元素选择器

语法：标签名{}

	html {color: red;}
	h1 {color:red;}
	a {color:red;}

id选择器

作用：选中一个元素
语法：#id属性值{}

class选择器

作用：选中一组
语法：.class属性值

通配选择器

作用：选中所有元素
语法：*
注意：开发中使用极少，只会在极特殊情况下才会用到在基础班小页面中可能会用于去除标签默认的margini和padding

选择器名称	选择的内容	示例
元素选择器（也称作标签或类型选择器）	所有指定 (该) 类型的 HTML 元素	`p` 选择 `<p>`
ID 选择器	具有特定 ID 的元素（单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）	`#my-id` 选择 `<p id="my-id">` 或 `<a id="my-id">`
类选择器	具有特定类的元素（单一页面中，一个类可以有多个实例）	`.my-class` 选择 `<p class="my-class">` 和 `<a class="my-class">`
属性选择器	拥有特定属性的元素	`img[src]` 选择 `<img src="myimage.png">` 而不是 `<img>`
伪（Pseudo）类选择器	特定状态下的特定元素（比如鼠标指针悬停）	`a:hover` 仅在鼠标指针悬停在链接上时选择 `<a>`。

4.2 复合选择器

交集选择器

作用：选中同时符合多个条件的元素
如果有元素选择器，则必须使用元素选择器开头
语法：直接放在一起

并集选择器

作用：同时选择多个选择器对应的元素

语法：选择器1，选择器2{}

	p,li,h1{
    	color:red;
	}

tips：

并集选择器中的每组选择器之间通过 , 分隔
并集选择器中的每组选择器可以是基础选择器或者复合选择器
并集选择器中的每组选择器通常一行写一个，提高代码的可读性

4.3关系选择器

父元素
- 直接包含子元素的元素
子元素
- 被父元素包含
祖先元素
- 直接或间接包含后代元素的元素
后代元素
- 被祖先
兄弟元素（A+B)
- 拥有相同父元素的元素

子代选择器

作用：根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素

选择器语法：选择器1 > 选择器2 { css }

结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

tips：

子代只包括：儿子
子代选择器中，选择器与选择器之前通过 > 隔开

后代选择器

作用：根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素

选择器语法：选择器1 选择器2 { css }

结果：在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式

tips：

后代包括：儿子、孙子、重孙子……
后代选择器中，选择器与选择器之前通过空格隔开

样式的继承

我们为一个元素设置的样式同时也会应用到它的后代元素上,继承是发生在祖先后后代之间的
- tips:
  - 并不是所有的样式都会被继承：
    
    比如背景相关的，布局相关等的这些样式都不会被继承。

4.4属性选择器

语法：[属性名] 选择含有指定属性的元素
[属性名=属性值] 指定属性和属性值
[属性名^=属性值] 指定值开头
[属性名$=属性值] 指定值结尾
[属性名*=属性值] 含有指定值

4.5伪类选择器

伪类：用来描述一个元素的特殊状态

场景：常用于查找某父级选择器中的子元素

选择器	说明
E:first-child{}	匹配父元素中的第一个子元素，并且是E元素
E:last-child{}	匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n){}	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n){}	匹配父元素中倒数第n个子元素，并且是E元素

特殊值：

n 第n个 n的范围0到正无穷

2n 或 even 表示选中偶数位的元素

2n+1 或 odd 表示选中奇数位的元素

- 以上这些伪类都是根据所有的子元素进行排序
同类型的

:first-of-type
:last-of-type
:nth-of-type()

超链接的伪类

a:link
- 用来表示没访问过的链接（正常的链接）
- 超链接独有

a:link{
            color: red;
            
        }

a:visited
- 用来表示访问过的链接
- 超链接独有

 a:visited{
            color: orange; 
}

:hover
- 用来表示鼠标移入的状态

a:hover{
             color: aqua;
             font-size: 50px;
         }

==a后面不要有空格！==

:active
- 用来表示鼠标点击

a:active{
             color: yellowgreen;
             
         }

4.6 伪元素选择器

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用 :: 开头

1. ::first-letter 表示第一个字母

2. ::first-line 表示第一行

3. ::selection 表示选中的内容

4. ::before 元素的开始

5. ::after 元素的最后

- before 和 after 必须结合content属性来使用

开发中用得也最多

::placeholder placeholder选择器

css｜ 青训营笔记

1.简介

2.规则集（基本语法）

3.修改元素的样式

1.（内联样式，行内样式）

2.内部样式表

3.外部样式表（开发中最适用）

4.选择器

4.1常用选择器

元素选择器

id选择器

class选择器

通配选择器

4.2 复合选择器

交集选择器

并集选择器

4.3关系选择器

子代选择器

后代选择器

样式的继承

4.4属性选择器

4.5伪类选择器

超链接的伪类

4.6 伪元素选择器

css｜青训营笔记