1、基础语法结构
CSS规则集由两部分组成：选择器和声明块。
选择器 {
属性: 值;
属性: 值;
}1）选择器
用于指定哪些HTML元素应该应用规则中定义的样式。选择器的类型非常多样，包括元素选择器、类选择器、ID选择器、属性选择器等。
2）声明块
包含在花括号 {} 中，可以包含一个或多个声明。
3）声明
由一个属性和一个值组成，两者之间用冒号 : 分隔。
4）属性
属性是想要设置的样式特征（如 color, font-size, margin 等）。
5）值
值是想要应用到属性的具体指定（如 red, 12px, 20% 等）。
6）使用示例
p {
color: red;
font-size: 16px;
}说明：
p 是选择器，代表所有 <p> 标签的元素。
color 和 font-size 是属性。
red 和 16px 是对应的值。
这段样式将页面中所有 <p> 元素的文字颜色设置为红色，字体大小设置为16像素。
2、常见的CSS选择器
1）元素选择器（类型选择器）
直接使用元素标签名，例如 div, h1, p。
2）类选择器
点 . 后接类名，如 .menu，适用于所有带有 class="menu" 的HTML元素。
3）ID选择器
井号 # 后接ID名，如 #header，适用于带有 id="header" 的唯一元素。
4）属性选择器
根据元素的属性及其值进行选择，例如 [type="text"] 选择所有 type="text" 的 <input> 元素。
5）伪类选择器
用于定义元素的特定状态，例如 :hover，:first-child。
6）使用示例
/* 通配符选择器 */
* {
margin: 0;
padding: 0;
}
/* 元素选择器 */
p {
text-align: justify;
}
/* 类选择器 */
.menu {
color: blue;
}
/* ID选择器 */
#header {
background-color: gray;
}
/* 群组选择器 */
h1, h2, h3 {
font-family: Arial, sans-serif;
}
/* 后代选择器 */
div p {
color: red;
}
/* 子选择器 */
ul > li {
list-style-type: none;
}
/* 相邻兄弟选择器 */
h1 + p {
margin-top: 0;
}
/* 通用兄弟选择器 */
h1 ~ p {
color: green;
}
/* 存在属性选择器 */
[title] {
color: blue;
}
/* 具体值属性选择器 */
[type="text"] {
background-color: yellow;
}
/* 动态伪类选择器 */
a:hover {
color: red;
}
/* 结构伪类选择器 */
p:first-child {
font-weight: bold;
}
/* 否定伪类选择器 */
div:not(.class) {
color: blue;
}
3、组合选择器和继承
1）后代选择器
通过空格分隔，如 div p 选择所有位于任何 div 元素内部的 p 元素。
2）子选择器
通过大于号 > 分隔，如 div > p 只选择直接位于 div 元素内部的 p 元素。
3）相邻兄弟选择器
通过加号 + 分隔，如 h1 + p 选择所有紧跟在 h1 元素后的 p 元素。
4）通用兄弟选择器
通过波浪号 ~ 分隔，如 h1 ~ p 选择所有在同一父元素下，跟在 h1 后面的所有 p 元素。
5）使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
color: blue; /* 所有文本默认继承蓝色 */
}
div > p {
color: red; /* 只影响直接为div子元素的p元素 */
}
h1 + p {
font-weight: bold; /* 仅作用于紧跟h1后的第一个p元素 */
}
</style>
</head>
<body>
<div>
<p>这段文字是红色的。</p>
<span><p>这段文字也是红色的。</p></span>
</div>
<h1>标题</h1>
<p>这段文字是粗体的。</p>
<p>这段文字是蓝色的。</p>
</body>
</html>
4、优先级和层叠
当多个CSS规则应用于同一个元素时，浏览器需要决定使用哪些规则。这是通过优先级和层叠来解决的：
1）优先级
由选择器的类型决定（ID选择器的优先级高于类选择器，类选择器的优先级高于元素选择器）。
2）层叠
当多个规则具有相同的优先级时，最后声明的样式将被应用。
通过掌握这些基础的CSS语法和原则，可以开始创建具有吸引力和功能性的网页。随着经验的积累，可以进一步学习更高级的技术，如Flexbox、Grid布局和CSS动画。