CSS

CSS

CSS-->层叠样式表 就是给HTML标签修改样式

一、语法结构：

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

二、注释语法

/*注释内容*/

三、引入样式

1、style内部直接编写css内容-->平时学习，练习的时候推荐使用
2、link标签外引入外部css文件-->正式工作，实际生产环境推荐使用
3、标签内直接书写-->一般情况下不推荐使用
⚠️：单独开设的css文件内代码也是非常多的，可以借助于注释管理
/导航条样式/或者是/侧边栏样式/

四、基本选择器

1、标签选择器-->通过标签名直接查找
/*查找所有的p标签*/
p {
color：red；
}
2、类选择器（关键符号为句点符.）-->通过class值查找标签
/*查找所有含有c1样式类的标签*/
.c1 {
color：red；
}
3、id选择器（关键符号为井号#）-->通过id值查找标签
/*查找所有id为d1标签*/
#d1 {
color：red；
}
4、通用选择器（关键符号为*）
/*选择器内所有的标签*/
* {
color：red；
}

五、组合选择器

1、后代选择器（符号为空格）
/*查找div内所有的后代span*/
div span {
color：red；
}
2、儿子选择器（符号为>）
/*查找div内部所有儿子span*/
div>span {
color：green；
}
3、毗邻选择器（符号为+）
/*查找同级别下面紧挨着的第一个span*/
div + span {
color：pink；
}
4、弟弟选择器（符号为～）
/*查找同一级别下所有的span（不需要紧挨着）*/
div ～ span {
color：pink；
}

六、属性选择器-->标签可以有默认的属性也可以有自定义属性

（符号为[]）

id="d1" class="c1" name="judy" pwd="123

1、/*查找含有的pwd属性的标签*/
[pwd] {
color：pink;
}
2、/*查找含有的pwd属性并且值为judy的标签*/
[pwd="123"] {
color：red；
}
3、/*查找含有的pwd属性并且值为judy的p标签*/
p[pwd="123"] {
color：red；
}

七、分组和嵌套

1、多个相同的选择器并列使用
div，span，p {
/*查找div或span或p标签*/
}
2、多个不同选择器并列使用
div，#d1，.c1 {
/*标签查找div，id查找d1，类查找c1*/
}
3、不并列同样可以使用组合选择器
.c1 p{
/*查找class为c1的后代标签p标签*/
}
4、直接筛选
div#d1 {
/*查找id为d1的div标签*/
}

八、伪类选择器

1、/*鼠标悬浮在上面*/
a：hover {
color:orange;
}
a标签默认颜色是会发生变化的，第一次是蓝色，后面是紫色
2、/*input框foucs状态的颜色*/
input：foucs{
background-color:red;
}
-->我们将input狂被用户点击的即将录入数据的过程看成是foucs状态。

九、伪元素选择器

1、首字调整-->也是一种文档布局的方式

这是一个很厉害的网页

2、在文本的前面通过css动态渲染文本-->特殊文本

3、在文本的后面通过css动态添加，上面代码before改成after就可以了

十、选择器的优先级

1、相同选择器不同倒入方式：选择器遵循就近原则 从上往下谁离标签更近就采用哪个选择器
2、不同选择器的优先级是根据精确度而来的：
行内选择器>id选择器>类选择器>标签选择器

十一、字体相关

1、宽和高
只有块儿级标签可以设置，行内标签无法设置

2、字体大小

3、字体粗细

4、文本颜色

5、文字对齐

p{
text-align: center; /居中展示/
}

6、文字装饰

这是一个很厉害的网页

我是百度

7、首行缩进

十二、背景属性

⚠️ 如何实时修改图片的位置
-->浏览器找到标签的css代码，然后方向键上下按住即可动态调整

十三 边框属性

十三、display属性

display属性属于定义建立布局时元素生成的现实狂类型，inline是行内元素，block是块元素，display属性可以定义显示狂是行内元素还是块元素
🌼 第一个例子 块元素显示成行内元素

本例子是把块元素变成行内元素

我本来应该在下一行显示但是我在上一行显示了

🌹 结果

🌼 第二个例子-->把行内元素变成块状元素

本例子是把行内元素变成块状元素

我在第一行
本来我应该在第一行，我却在第二行


🌹 结果

🌼 第三个例子-->隐藏标签：页面上看不见也不再占用页面位置，但是通过浏览器查找标签是可以看到的

🌼 第四个例子-->行内块状元素

-->

<!--
🌹 结果

十四、盒子模型

亿快递盒为例
1、快递盒与快递盒之间的苦力-->外边距（标签之间的距离）
2、快递盒的厚度-->边框
3、内部物品到盒子的距离-->内边距（文本到边框的距离）
4、物品本身的大小->文本大小

⚠️ body比奥秋安默认自带8px的外边距，在编写的时候应该提前距掉