CSS（层叠样式表，Cascading Style Sheets）是用来描述HTML或XML（包括各种XML：SVG, MathML 或 XHTML）等文档的外观和格式的语言。以下是CSS的基本语法：
1.选择器
1.元素选择器
元素选择器是基于HTML标签名称来选择元素的。当你使用元素选择器时，你是在告诉浏览器对页面中所有该类型的HTML元素应用特定的样式。以下是两个使用元素选择器的CSS示例：
示例 1: 修改所有段落的字体颜色和大小
假设你想改变网页上所有段落（<p> 标签）的文本颜色为蓝色，并且设置字体大小为16像素，你可以这样写：
p {
color: blue;
font-size: 16px;
}
这段CSS代码将应用于HTML文档中的每一个<p>元素，使得它们的文本颜色变为蓝色，字体大小变为16px。
示例 2: 设置所有链接的样式
如果你想更改所有超链接（<a> 标签）的默认样式，比如去掉下划线并且当鼠标悬停在链接上时改变背景颜色，你可以这样做：
a {
text-decoration: none; /* 去掉下划线 */
}
a:hover {
background-color: yellow; /* 当鼠标悬停时背景变黄 */
}
在这个例子中，第一个规则去掉了所有链接的下划线，第二个规则设置了当用户将鼠标悬停在链接上时，链接的背景颜色会变成黄色。请注意，:hover 是一个伪类，它允许你定义当特定事件发生时元素的样式，在这个情况下，是指当用户的鼠标指针悬停在链接上方时。
这两个示例展示了如何使用元素选择器来快速地为同类型的所有HTML元素应用统一的样式。
2.类选择器
类选择器是通过在HTML元素中定义的class属性来选择元素，并为其应用特定样式的。使用类选择器可以让你更加灵活地控制页面上的样式，因为同一个类可以在多个元素上使用，而且不会像ID选择器那样限制为文档中的唯一实例。以下是两个使用类选择器的CSS示例：
示例 1: 使用类选择器设置文本对齐方式
假设你有一个网页，其中某些段落需要居中文本，而其他的则不需要。你可以创建一个名为.center-text的类，然后将这个类应用到需要居中显示的段落上。
<p class="center-text">这段文字将会居中。</p>
<p>这段文字保持默认对齐。</p>
对应的CSS代码如下：
.center-text {
text-align: center;
}
这样，所有带有.center-text类的段落都会以居中的方式显示其文本内容。
示例 2: 使用类选择器更改按钮样式
如果你想为网页上的按钮添加自定义样式，比如改变背景颜色、字体颜色和边框圆角等，你可以定义一个类（例如.custom-button），并将其应用于各个按钮元素。
<button class="custom-button">点击我</button>
<button>普通的按钮</button>
对应的CSS代码如下：
.custom-button {
background-color: #4CAF50; /* 绿色背景 */
color: white; /* 白色文字 */
padding: 10px 20px; /* 内边距 */
border: none; /* 无边框 */
border-radius: 8px; /* 圆角 */
cursor: pointer; /* 鼠标指针变为手型 */
}
.custom-button:hover {
background-color: #45a049; /* 当鼠标悬停时稍微深一点的绿色 */
}
在这个例子中，.custom-button类设置了按钮的外观，包括背景颜色、文字颜色、内边距、边框样式、圆角以及鼠标悬停效果。当用户将鼠标移到按钮上时，背景颜色会稍微变深，提供视觉反馈。
这两个示例展示了如何利用类选择器来有效地管理和重用样式规则，从而简化CSS代码的维护和扩展。
3.ID选择器
ID选择器用于根据元素的id属性来选择特定的HTML元素。每个页面中的id应该是唯一的，这意味着一个ID只能在一个页面中使用一次。因此，ID选择器非常适合用来为页面上的唯一元素定义样式。以下是两个使用ID选择器的CSS示例：
示例 1: 设置页面标题样式
假设你的网页有一个唯一的主标题，并且你想要为这个标题设置特别的样式，比如较大的字体、不同的颜色和一些下边距。你可以给这个标题分配一个唯一的ID（例如#main-title），然后在CSS中针对这个ID定义样式。
<h1 id="main-title">欢迎来到我的网站</h1>
对应的CSS代码如下：
#main-title {
font-size: 2.5em;
color: #333;
margin-bottom: 20px;
}
这段代码将使得带有id="main-title"的<h1>元素拥有指定的字体大小、颜色以及底部外边距。
示例 2: 创建一个固定的导航栏
如果你希望创建一个固定在页面顶部的导航栏，它不会随着页面滚动而消失，并且有特定的高度、背景颜色和内边距，你可以为导航栏赋予一个唯一的ID（例如#navbar）。
<nav id="navbar">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
对应的CSS代码如下：
#navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
padding: 10px 0;
z-index: 1000; /* 确保导航栏位于其他内容之上 */
}
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
#navbar ul li {
display: inline;
margin-right: 10px;
}
#navbar ul li a {
color: white;
text-decoration: none;
padding: 5px 10px;
}
#navbar ul li a:hover {
background-color: #575757;
border-radius: 4px;
}
在这个例子中，#navbar ID选择器确保了样式仅应用于具有该ID的单个导航元素。通过设置position: fixed;，导航栏将固定在浏览器窗口的顶部，并且随着页面滚动保持可见。同时，还设置了链接的颜色、悬停效果等，以增强用户体验。
这两个示例展示了如何利用ID选择器为目标元素提供独特的样式规则，这有助于创建更加定制化的用户界面。
4.属性选择器
CSS 属性选择器允许你根据元素的属性或属性值来选择 HTML 元素。以下是两个使用 CSS 属性选择器的示例：
示例 1: 根据属性存在选择元素
如果你想选择所有带有 title 属性的元素，不论其值是什么，你可以使用以下选择器：
[title] {
color: blue;
}
这段代码会将所有带有 title 属性的文本颜色设置为蓝色。例如，它会影响如下 HTML 元素：
<p title="这是一个段落">这段文字将会是蓝色。</p>
<a href="http://example.com" title="Example Domain">这个链接也会受影响。</a>
示例 2: 根据属性和特定值选择元素
如果你想要更具体一点，可以选择具有特定属性值的元素。比如，选择所有 input 元素，其中 type 属性的值为 text：
input[type="text"] {
background-color: yellow;
}
这段 CSS 代码会将所有 type 为 text 的 input 元素的背景色设置为黄色。这会影响到如下的 HTML 输入框：
<input type="text" name="username" />
但不会影响到其他类型的输入框，比如 submit 或 checkbox。
这些只是属性选择器的基础用法。实际上，CSS 属性选择器支持更多复杂的匹配模式，包括部分匹配、精确匹配等，可以满足更精细的选择需求。
5.伪类和伪元素
CSS 伪类和伪元素用于向选择的元素添加特殊效果。它们允许你选择特定状态下的元素或元素的特定部分，而无需修改HTML。以下是两个分别使用伪类和伪元素的示例：
示例 1: 使用伪类 :hover
伪类用于选择元素的特定状态。:hover 是一个常见的伪类，当用户将鼠标悬停在元素上时应用样式。
button:hover {
background-color: lightblue;
cursor: pointer;
}
这段代码会改变所有 <button> 元素在用户鼠标悬停其上的时候的背景颜色为浅蓝色，并且将鼠标指针改为手型（pointer），以提示用户这是一个可交互的元素。
示例 2: 使用伪元素 ::before
伪元素用于在选定元素的内容之前或之后添加生成内容。::before 伪元素可以在元素内容之前插入内容。
blockquote::before {
content: "“"; /* 引号 */
color: gray;
font-size: 2em;
margin-right: 0.5em;
}
此段 CSS 代码会在所有的 <blockquote> 元素内容前添加一个大的灰色引号符号。这可以用来美化引用文本，使得页面更加美观和易读。
这两个例子展示了如何利用伪类和伪元素来增强网页设计，提供更好的用户体验，同时保持HTML结构的简洁性。
2.声明和属性
在 CSS 中，声明是由一个属性和该属性的值组成的。每个 CSS 规则由一个选择器和一组声明构成，而这些声明被包含在大括号 {} 内。以下是两个具体的 CSS 声明示例：
示例 1: 设置文本颜色和字体大小
p {
color: darkblue; /* 设置段落文本的颜色为深蓝色 */
font-size: 16px; /* 设置段落文本的字体大小为16像素 */
}
在这个例子中，我们选择了所有的 <p>（段落）元素，并对它们应用了两个声明：color 和 font-size。这将使得所有段落中的文本显示为深蓝色，且字体大小为16像素。
示例 2: 使用边框和圆角
.box {
border: 2px solid red; /* 设置边框宽度为2像素，样式为实线，颜色为红色 */
border-radius: 10px; /* 设置圆角半径为10像素，使边框有圆角效果 */
}
这里我们定义了一个名为 .box 的类选择器，并对其应用了两个声明：border 和 border-radius。任何带有 class="box" 的 HTML 元素都将有一个2像素宽的红色实线边框，并且四个角都是10像素的圆角。
这两个例子展示了如何通过CSS声明来控制网页上元素的外观。你可以根据需要组合不同的属性和值，以实现所需的样式效果。
3.注释
在 CSS 中，注释用于解释代码中的某些部分，帮助开发者理解代码的功能或结构。CSS 注释不会被浏览器解析，因此它们只对阅读代码的人可见。CSS 支持单行注释和多行注释，但需要注意的是，CSS 中并没有官方的单行注释语法（如在一些编程语言中使用的 //），所有注释都使用相同的语法。
示例 1: 单行注释
尽管 CSS 没有特定的单行注释语法，但你可以使用多行注释的语法来创建单行注释：
/* 设置页面标题的颜色为深蓝色 */
h1 {
color: darkblue;
}
在这个例子中，注释解释了接下来的声明将要做什么：它会设置 <h1> 元素文本颜色为深蓝色。
示例 2: 多行注释
当你需要写一段较长的解释时，可以使用多行注释。多行注释以 /* 开始，并以 */ 结束，中间可以包含多行文字：
/*
以下规则应用于所有的段落元素，
设置了字体大小、行高和文本颜色。
这样做是为了确保所有正文内容具有一致的外观。
*/
p {
font-size: 16px;
line-height: 1.5;
color: #333;
}
这段代码包含了关于样式规则目的的详细说明，指出了这些样式是应用到所有 <p>（段落）元素上的，并且具体描述了每个属性的作用。
请注意，虽然在实际开发中使用注释是非常好的实践，但应该避免过度使用注释。代码应当尽可能地自我解释，只有在必要时才添加注释，比如当代码逻辑复杂或不直观时。
4.优先级和继承
CSS 优先级（specificity）和继承是理解 CSS 样式如何应用到 HTML 元素上的两个重要概念。下面我将通过具体的例子来解释这两个概念。
示例 1: CSS 优先级
CSS 优先级决定了当多个样式规则应用于同一个元素时，哪一个规则会生效。优先级是由选择器的类型和组合决定的，具体来说，内联样式 > ID 选择器 > 类选择器、属性选择器和伪类 > 元素选择器和伪元素。
示例代码：
<div id="special" class="box">Hello World</div>
/* 规则1 */
.box {
color: blue;
}
/* 规则2 */
#special {
color: red;
}
在这个例子中，尽管 .box 类选择器设置了文本颜色为蓝色，但 #special ID 选择器设置了红色，并且由于 ID 选择器的优先级高于类选择器，所以最终文本颜色将是红色。
示例 2: CSS 继承
某些 CSS 属性是可以继承的，这意味着子元素可以从父元素那里继承这些属性的值。例如，字体相关的属性（如 font-family 和 color）通常会被子元素继承。
示例代码：
<div style="color: green;">
Parent text
<p>Child paragraph text</p>
</div>
/* 父元素的样式 */
div {
font-family: Arial, sans-serif;
}
/* 子元素不会显式设置颜色，因此会继承父元素的颜色 */
p {
font-weight: bold;
}
在这个例子中，<p> 标签内的文本不仅会使用粗体（因为我们在 p 选择器中定义了 font-weight: bold;），还会继承来自其父 <div> 的绿色文本颜色和 Arial 字体，即使我们没有在 p 中明确地指定这些属性。
这两个例子展示了 CSS 优先级和继承的基本原理。理解和正确利用这两者可以帮助你更有效地控制网页的设计和布局。
