css基础篇CSS (Cascading Style Sheets) 也叫层叠样式表，是一种样式表语言，用于描述HTML

CSS (Cascading Style Sheets) 也叫层叠样式表，是一种样式表语言，用于描述HTML文档的呈现。它可以帮助开发者控制网页布局、字体、颜色以及其他视觉方面的设计。

相信以下图片可以快速的帮你理解css的作用。没有css的html相当于裸奔，这时的html文档只是一个框架、不好看，添加了css后，才能实现页面美化的功能。

为了使这些样式规则能够应用于网页上，CSS文件需要被HTML文档或其他支持CSS的文档引用。这意味着CSS不能独立于这些文档之外工作；它必须与HTML或其他标记语言配合使用，以实现对页面元素样式的控制，以下是三种主要的CSS引入方式：

内联样式：直接在HTML元素上使用style属性来定义样式，style属性一般放在head头部的title属性下。
- 这样做一方面语义更清晰，另一方面浏览器在解析HTML时，会先处理<head>部分的内容，然后再渲染<body>部分。这意味着当浏览器开始解析页面主体内容时，它已经知道了如何应用样式规则，从而可以更有效地进行渲染。如果将<style>标签放在<body>中，可能会导致页面内容先显示出来，然后才应用样式，造成视觉上的闪烁或布局重排。
内部样式表：将CSS代码放在HTML文件内的<style>标签中。
外部样式表：通过<link>标签引用一个独立的.css文件。

CSS优先级是根据选择器类型来决定样式的应用顺序。当多个规则同时作用于同一元素时，优先级较高的规则会被应用。

优先级从低到高大致如下：

基础选择器是最简单也是最常用的CSS选择器类型。它们直接针对HTML元素、类或ID进行样式定义。

标签选择器：基于HTML标签名来选择元素。

p {
   color: blue !important
   /*超级重要 无穷大*/
   ;
}

类选择器：通过.classname来选择带有特定类名的所有元素。
```
.container p {
    color: red;
}
```
ID选择器：通过#idname来选择具有唯一ID的单个元素。
```
#main p {
    color: green;
}
```
通配符选择器：使用*来选择页面上的所有元素。虽然强大，但性能较低，不建议频繁使用。
```
* {
  margin: 0;
  padding: 0;
}
```

组合选择器允许你基于元素之间的关系来选择元素。

后代选择器（空格分隔）：选择指定元素内的所有后代元素。
```
.container p {
    text-decoration: underline;
}
```
子选择器（>符号）：仅选择直接子元素。
```
.container > p {
  font-weight: bold;
}
```
相邻兄弟选择器（+符号）：选择紧接在另一个元素之后的兄弟元素。
```
h1 + p {
  color: red;
}
```
普通兄弟选择器（~符号）：选择前面有相同父元素的兄弟元素。
```
h1 ~ p {
  color: blue;
}
```

伪类选择器用于选择处于特定状态的元素，如鼠标悬停、访问过的链接等。

:hover：当用户将鼠标悬停在元素上时。
```
a:hover {
  text-decoration: underline;
}
```
:active：当元素被激活时（例如点击按钮）。
```
button:active {
  background-color: red;
}
```
:first-child：选择作为其父元素的第一个子元素的每个元素。
```
li:first-child {
  font-weight: bold;
}
```

伪元素选择器用于选择元素的某些部分，而不是整个元素。

::before 和 ::after：在元素的内容之前或之后插入生成的内容。
```
.tooltip::before {
  content: "提示：";
  color: green;
}
```

::first-line：选择元素的第一行文本。

p::first-line {
  font-variant: small-caps;
}

属性选择器基于元素的属性及其值来选择元素。

[attribute] ：选择具有给定属性的元素。

input[type] {
  border: 1px solid #ccc;
}

[attribute=value] ：选择具有给定属性且值等于指定值的元素。
```
input[type="text"] {
  width: 200px;
}
```
[attribute^=value] ：选择具有给定属性且值以指定值开头的元素。
```
a[href^="http"] {
  color: purple;
}
```
[attribute$=value] ：选择具有给定属性且值以指定值结尾的元素。
```
a[href$=".pdf"] {
  color: red;
}
```
[attribute*=value] ：选择具有给定属性且值包含指定值的元素。
```
a[href*="example"] {
  font-style: italic;
}
```

掌握这些CSS选择器不仅能够帮助你更精准地控制网页布局和样式，还能让你的代码更加简洁和高效，了解这些基础知识后，你可以开始探索更多高级特性，如CSS Grid、Flexbox等现代布局技术，以及动画效果、响应式设计等，以进一步提升你的网页设计技能。