CSS中的选择器、引入方式和样式属性
目录
一、选择器：精准定位网页元素
1. 基础选择器
2. 复合选择器
二、引入方式：多样的样式加载途径
1. 内联样式
2. 内部样式表
3. 外部样式表
三、样式属性：打造丰富视觉效果
1. 字体相关
2. 颜色与背景
3. 盒模型与布局
总结
CSS（层叠样式表）是前端开发中让网页 “颜值飙升” 的关键技术。今天，我们就从选择器、引入方式、样式属性这几个核心方面，一起走进 CSS 的奇妙世界。
一、选择器：精准定位网页元素
选择器就像一把 “精准的手术刀”，能帮我们准确找到要美化的网页元素。
1. 基础选择器
元素选择器：直接通过 HTML 标签名来选中元素。比如要设置所有 <p> 标签的文字颜色为蓝色，代码如下：
p {color: blue;
}
类选择器：用类名来选中元素，类名前加 .。如果有多个元素都想应用同一套样式，类选择器就很方便。例如，给类为 title 的元素设置字体大小：
.title {font-size: 24px;
}
ID 选择器：通过元素的 id 属性选中元素，id 名前加 #。id 具有唯一性，一般用于选中页面中唯一的元素。像选中 id 为 header 的元素并设置背景色：
#header {background-color: #f0f0f0;
}
2. 复合选择器
后代选择器：用空格分隔两个选择器，表示选中第一个选择器元素内的所有后代元素。比如选中 <div> 里的 <a> 标签：
div a {text-decoration: none;
}
并集选择器：用逗号分隔多个选择器，表示同时选中这些选择器对应的元素。如下，同时设置 h1 和 h2 标签的文字加粗：
h1, h2 {font-weight: bold;
}
二、引入方式：多样的样式加载途径
CSS 有三种主要的引入方式，不同场景下各有优势。
1. 内联样式
直接在 HTML 元素的 style 属性中写 CSS 样式。这种方式比较灵活，适合对单个元素进行快速样式设置，但不利于代码复用和维护。例如：
<p style="color: red; font-size: 16px;">这是一段内联样式的文字</p>
2. 内部样式表
在 HTML 文件的 <head> 标签内，用 <style> 标签包裹 CSS 代码。适合单页面的样式编写，样式只作用于当前页面。示例：
<head><style>.content {width: 800px;margin: 0 auto;}</style>
</head>
3. 外部样式表
把 CSS 代码写在单独的 .css 文件中，然后在 HTML 文件中用 <link> 标签引入。这是最常用的方式，便于样式的复用和维护，多个页面可以共享同一份样式文件。比如有一个 style.css 文件，内容如下：
body {background-color: #eaeaea;
}
在 HTML 中引入：
<head><link rel="stylesheet" href="style.css">
</head>
三、样式属性：打造丰富视觉效果
CSS 提供了海量的样式属性，能从字体、颜色、布局等多方面美化网页。
1. 字体相关
font-family：设置字体类型，可指定多个字体，浏览器会依次尝试。
p {font-family: "Microsoft Yahei", sans-serif;
}
font-size：设置字体大小。
h3 {font-size: 20px;
}
font-weight：设置字体粗细，可选 normal（正常）、bold（加粗）等。
.bold-text {font-weight: bold;
}
2. 颜色与背景
color：设置文字颜色。
a {color: #337ab7;
}
background-color：设置背景颜色。
.header {background-color: #333;
}
background-image：设置背景图片。
.banner {background-image: url("banner.jpg");background-size: cover;
}
3. 盒模型与布局
盒模型是 CSS 布局的基础，每个元素都可以看作一个盒子，包含内容（content）、内边距（padding）、边框（border）、外边距（margin）。
width、height：设置内容的宽度和高度。
.box {width: 200px;height: 150px;
}
padding：设置内边距，控制内容与边框的距离。
.card {padding: 10px;
}
margin：设置外边距，控制元素与其他元素的距离。
.container {margin: 20px auto;
}
border：设置边框，可指定边框的宽度、样式、颜色。
.border-example {border: 1px solid #ccc;
}总结
选择器：像精准 “手术刀”，能定位网页元素。基础选择器有元素（通过 HTML 标签名，如 p）、类（类名前加 .，如 .title）、ID（id 名前加 #，如 #header）选择器；复合选择器有后代（空格分隔，如 div a）、并集（逗号分隔，如 h1, h2）选择器。
引入方式：有内联（在 HTML 元素 style 属性写样式，灵活但不利于维护）、内部（HTML 文件 <head> 内用 <style> 包裹，适合单页面）、外部（CSS 写在单独 .css 文件，用 <link> 引入，利于复用维护）三种。
样式属性：可从多方面美化网页。字体相关有 font-family（字体类型）、font-size（字体大小）、font-weight（字体粗细）；颜色与背景有 color（文字颜色）、background-color（背景颜色）、background-image（背景图片）；盒模型与布局有 width/height（内容宽高）、padding（内边距）、margin（外边距）、border（边框）等属性，是布局基础。