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的标签，设置样式

```cssdiv p{color: red;/* 找到div里面的p标签 */}
```

2、子代选择器

- 结构：`选择器1 > 选择器2 {css属性名:属性值;}`
- 在选择器1所找到标签的子代（子代只包括：儿子）中，找到满足选择器2的标签，设置样式

```cssdiv > 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>

7、层叠性与优先级

1、层叠性：所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖。多个选择器给同一个标签设置不同的样式，会共同作用在标签上。

2、优先级：如果同一个标签被多个选择器赋予了相同的属性且值不一样时，会按照选择器的优先级来决定以哪个样式为准，比如：

        - !important > 行内 > id选择器 > 类选择器 > 标签  > 继承

组合选择器权重叠加
两个选择器权重一样 以最后出现的为准