【CSS】CSS 总结 ① ( CSS 引入方式 | CSS 选择器 | 基础选择器 | 复合选择器 ) ★
CSS 概述：
CSS 是一种用来描述网页样式并且给网页添加布局的语言。
CSS 引入方式：
- 内联样式：直接在 HTML 元素的
style属性中书写 CSS。
<p style="color: red;">这是一个红色的段落。</p>- 内部样式表：在 HTML 文档的
<head>部分，使用<style>标签包含 CSS 代码。
<head>
<style>
p { color: blue; }
</style>
</head>- 外部样式表：创建一个 CSS 文件（比如
styles.css），然后在 HTML 文档的<head>部分，使用<link>标签链接到这个 CSS 文件。
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>CSS 选择器：
基础选择器：
- 标签选择器：直接使用标签名作为选择器。
- 类选择器：以
.开头，可以应用于任何元素。 - ID 选择器：以
#开头，每个 ID 在文档中必须是唯一的。
p { color: green; }
.center { text-align: center; }
#title { font-weight: bold; }复合选择器：
- 后代选择器：以空格分隔，选择特定父元素的子元素。
- 子选择器：以
>分隔，选择直接子元素。 - 并集选择器：以
,分隔，选中所有指定元素。
/* 选择所有 p 标签内的 span 标签 */
p span { color: purple; }
/* 选择所有直接子元素 div 中的 p 标签 */
div > p { font-size: 14px; }
/* 选择所有 class 为 "button" 的元素和所有 id 为 "save" 的元素 */
.button, #save { cursor: pointer; }CSS 选择器优先级：
内联样式 > 内部样式表和外部样式表。当样式来源相同时，按照选择器的复杂度和特异性排序：
- 特异性：ID 选择器 > 类选择器 > 标签选择器
- 复杂度：依次增加，如：
.nav > li优于.nav
注意：为了提高样式优先级，可以使用 !important，但应谨慎使用，以免破坏样式表的可维护性。
评论已关闭