CSS

CSS😀

1.CSS简介😶‍🌫️

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，是前端技术中十分重要的一环🐶。

通过使用 CSS 我们可以大大提升网页开发的工作效率！

---

2.CSS语法介绍😗

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。😏

---

3.声明🫥

CSS声明总是以分号;结束，声明总以大括号{}括起来:

p {color:red;text-align:center;}

为了让CSS可读性更强，你可以每行只描述一个属性:

p {
    color:red;
    text-align:center;
}

---

4.选择器🌟

CSS选择器用于选择你想要为其应用样式的HTML元素。以下是一些常见的CSS选择器及其描述：

1. 通用选择器 (*):
   选择页面上的所有元素。

   * {
     color: red;
   }

2. 类型选择器 (或元素选择器):
   选择所有给定的HTML元素类型。

   p {
     color: blue;
   }

3. 类选择器 (.):
   选择所有带有指定类属性的元素。

   .highlight {
     background-color: yellow;
   }

4. ID选择器 (#):
   选择带有指定ID属性的元素。

   #header {
     background-color: gray;
   }

5. 后代选择器 (空格):
   选择特定元素的后代。

   article p {
     font-size: 18px;
   }

6. 子元素选择器 (>):
   选择特定元素的直接子元素。

   ul > li {
     list-style-type: square;
   }

7. 相邻兄弟选择器 (+):
   选择紧接在另一个元素后的元素。

   h2 + p {
     font-weight: bold;
   }

8. 属性选择器:
   选择带有指定属性的元素。

   input[type="text"] {
     border: 1px solid black;
   }

9. 伪类选择器 (:):
   选择元素的特定状态。

   a:hover {
     color: green;
   }

10. 伪元素选择器 (::):
    选择元素的特定部分，如首行或首字母。

    p::first-line {
      font-weight: bold;
    }

11. 分组选择器:
    将多个选择器分组以应用相同的样式。

    h1, h2, h3 {
      font-family: Arial, sans-serif;
    }

这只是CSS选择器的基础。随着CSS的发展，还有许多其他的选择器和组合方法可以使用，以满足更复杂的选择需求。

---

5.选择器权重😍

在CSS中，选择器的权重（或优先级）决定了哪些样式规则将被应用到元素上，特别是当多个规则与同一个元素匹配时。选择器的权重是基于其类型和结构来计算的。

以下是选择器权重的基本规则：

1. 类型选择器和伪元素 (例如 h1, ::before):

   • 权重: 0-0-1 => 1

2. 类选择器、属性选择器和伪类 (例如 .classname, [type="text"], :hover):

   • 权重: 0-1-0 => 2

3. ID选择器 (例如 #idname):

   • 权重: 1-0-0 => 4

4. 内联样式 (直接在HTML元素上使用的style属性):

   • 权重: 1-0-0-0 => infinite

5. 通用选择器 (*), 组合符 (例如 +, >, ~, 空格) 和 否定伪类 (:not()) 对权重没有影响。

6. 重要性 (!important): 如果在样式声明后添加了!important，则该声明的权重会超过其他任何声明。但是，如果有多个!important声明，那么上述权重规则仍然适用于确定哪个声明最重要。

权重计算示例：

• #id: 1-0-0
• .class: 0-1-0
• h1: 0-0-1
• #id .class h1: 1-1-1 => 7

当多个选择器目标同一个元素并有冲突的样式时，权重较高的选择器的样式将被应用。如果权重相同，那么在CSS文件中最后出现的规则将被应用。

为了避免权重问题和复杂性，建议尽量使用简单的选择器，并避免过度使用!important。

---

6.基本属性

1. position : 定位 relative（默认） | absolute | fixed | sticky

2. display : 元素显示模式 inline | block | inline-block | flex | grid …

…

6.实操部分🤔