web前端3--css
注意（本文一切代码一律是在vscode中书写）
1、书写位置
1、行内样式
//<标签名 style="样式声明">
<p style="color: red;">666</p>2、内嵌样式
1、style标签 里面写css代码 css与html之间分离
2、css属性:值（控制书写显示的效果）
<style>
p{
color: red;
}
</style>3、外联样式表
新建css文件 通过link引用
<link rel="stylesheet" href="1.css">
解释：rel 引入文件资源类型 href 引入资源的路径
2、css选择器
1、标签选择器
通过具体的标签名称来匹配文档内所有同名的标签
<style>
p{
color: red;
}
</style>2、类选择器
根据标签class属性找到具体的html标签
类选择器的定义需要用到一个英文的句号. 后面跟着class属性的值
命名规范：
1. 类名应该反映元素的用途或内容，而不仅仅是样式。这有助于提高代码的可读性。
2. 推荐使用连字符而不是驼峰命名法来分隔单词，因为连字符在HTML和CSS中更为普遍。
3. 类名不应以数字开头。
一个标签可以同时有多个类名，类名之间以空格隔开。
使用场景：将一些标签相同的样式放在一个类里面，从而节省css代码的书写
```css
.text-bule{
color: aqua;
font-size: 30px;
}
.text-box{
font-size: 30px;
/* 字体大小 */
}
```
<div class="text-bule text-box">666</div>3、ID选择器
1、用来找到HTML文档中具有指定ID属性的标签
2、ID选择器的定义需要用到井号`#`，后面紧跟ID属性的值。
注：
1、 ID选择器的使用方式和类选择器的使用方式类似，但ID选择器的主要作用是结合js用于确定页面上的唯一元素。
2、单个标签不允许拥有多个id名，同页面中不存出现重复的id名(id重名会影响js代码获取标签)。
#text-red{
color: red;
}
<div id="text-red">red</div>4、通配符选择器
通配符选择器用星号`*`表示，不匹配某个特定的HTML元素，而是匹配 HTML文档中的每个元素。
<!-- 我们通常使用通用选择器来清除HTML元素中默认的内外边距。 -->
*{
color: red;
}
<p>这是p</p>
<a href="">这是a</a>
<div>这是div</div>5、组合选择器
组合选择器: 两个或两个以上的选择器配合使用
1、后代选择器
- 结构：`选择器1 选择器2 {css属性名:属性值;}`
- 在选择器1所找到标签的后代（后代包括：儿子、孙子、重孙子……）中，找到满足选择器2的标签，设置样式
```css
div p{
color: red;
/* 找到div里面的p标签 */
}
```2、子代选择器
- 结构：`选择器1 > 选择器2 {css属性名:属性值;}`
- 在选择器1所找到标签的子代（子代只包括：儿子）中，找到满足选择器2的标签，设置样式
```css
div > p{
color: red;
}
```3、相邻兄弟选择器
- 相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。
- 相邻兄弟选择器的定义需要用到加号`+`，加号两边为相邻的两个元素，选择器会!!!匹配加号后面的元素!!!
<style>
h1 + p{
color: red;
}
<style>4、通用兄弟选择器
- 通用兄弟选择器同样会匹配同一父级元素下的兄弟元素，但兄弟元素之间无需紧邻。
- 定义通用兄弟选择器需要用到波浪号`~`，波浪号两边为同一父级元素下的两个元素，选择器会匹配波浪号后面的元素
<style>
p ~ a{
color: aqua;
}
<style>5、分组选择器
- 结构：`选择器1,选择器2 {css属性名:属性值;} `
- 同时选择多组标签，设置相同的样式
- 通过 **,** 分隔
- 通常一行写一个，提高代码的可读性
默认样式是指浏览器为HTML元素自动应用的预定义样式，以确保页面在没有显式样式表的情况下具有基本的可读性和结构。不同的浏览器对于默认样式的实现可能存在差异，这可能导致在不同浏览器中显示的效果不同。为了确保页面的一致性，通常会使用CSS样式表来覆盖或重置默认样式，并以一致的方式定义页面的外观和布局。[初始化样式文件 ](https://meyerweb.com/eric/tools/css/reset/)。
```css
div,
p{
color: red;
}
```6、交集选择器
- 结构：`选择器1选择器2{css属性名:属性值;} `
- 找到页面中**既**能被选择器1选中，**又**能被选择器2选中的标签，设置样式
- 交集选择器中的选择器之间是紧挨着的，没有东西分隔
<style>
p.box{
color: red;
}
</style>