前端三大件---CSS
目录
一、CSS 概述
二、引入 CSS 的三种方式
2.1 内联样式
2.2 内部样式表
2.3 外部样式表
三、CSS 选择器
3.1 ID 选择器
3.2 class 选择器
3.3 标签选择器
3.4 通配选择器
3.5 分组选择器
3.6 层级选择器
3.7 属性选择器
3.8 伪类选择器
3.9 同辈选择器
四、CSS 字体设置
五、CSS 布局
5.1 盒子模型
5.2 行块元素
5.3 定位
在网页开发领域，HTML 负责搭建网页结构，而 CSS 则是赋予网页美观样式的关键技术，它能让静态的网页变得丰富多彩、布局合理。下面将从多个维度深入剖析 CSS 的核心知识。
一、CSS 概述
CSS 即层叠样式表（Cascading Style Sheets） ，用于定义 HTML 或 XML 等文件的样式。随着 HTML 功能不断增加导致代码臃肿，CSS 应运而生，它不仅能静态修饰网页，还可配合脚本语言实现动态样式效果，极大提升了网页开发的效率与质量。
二、引入 CSS 的三种方式
2.1 内联样式
在 HTML 元素中直接使用style属性设置样式，适用于单独修改某一个标签的样式。
<p style="color:red; font-size: 16px;">这是一段红色16px字体的文字</p>
2.2 内部样式表
在<head>标签中通过<style>标签定义样式，对当前页面内元素进行样式设置。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>内部样式表示例</title><style>div {width: 100px;height: 100px;background-color: lightblue;}</style>
</head>
<body><div></div>
</body>
</html>
2.3 外部样式表
将 CSS 代码保存为单独的.css文件，通过<link>标签引入到 HTML 页面，适合多个页面共用样式。
styles.css文件内容：
body {font-family: Arial, sans-serif;
}
h1 {color: #333;
}
HTML 页面引入代码：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>外部样式表示例</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>这是一个标题</h1>
</body>
</html>
三、CSS 选择器
3.1 ID 选择器
通过元素的id属性选取唯一元素，在 CSS 中用#加id名定义，如：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>ID选择器示例</title><style>#specialDiv {border: 2px solid green;}</style>
</head>
<body><div id="specialDiv">具有特殊样式的div</div>
</body>
</html>
3.2 class 选择器
根据class属性选取一类元素，CSS 中用.加class名定义，支持一个元素多个类名：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>class选择器示例</title><style>.highlight {background-color: yellow;}</style>
</head>
<body><p class="highlight">高亮段落1</p><span class="highlight">高亮文本</span>
</body>
</html>
3.3 标签选择器
直接通过 HTML 标签名称选取所有同类元素，如：
p {text-align: justify;line-height: 1.6;
}
3.4 通配选择器
*可选取页面所有元素，常用于初始化样式：
* {margin: 0;padding: 0;box-sizing: border-box;
}
3.5 分组选择器
用逗号分隔多个选择器，对不同元素设置相同样式：
h1, h2, h3 {color: purple;
}
3.6 层级选择器
后代选择器（空格）选取某元素的所有后代，子元素选择器（>）只选直接子元素：
/* 后代选择器 */
nav ul li {list-style: none;
}
/* 子元素选择器 */
.container > p {font-weight: bold;
}
3.7 属性选择器
根据元素属性及属性值选取元素：
a[target="_blank"] {text-decoration: underline;
}
input[type="text"] {border: 1px solid #ccc;
}
3.8 伪类选择器
用于选取特定状态元素，如链接的不同状态：
a:link {color: blue;
}
a:visited {color: purple;
}
a:hover {color: red;
}
a:active {color: orange;
}
3.9 同辈选择器
+选取相邻同辈元素，如：
h2 + p {font-style: italic;
}
四、CSS 字体设置
p {font-family: "微软雅黑", sans-serif; /* 字体类型 */font-size: 14px; /* 字体大小 */font-style: italic; /* 字体风格 */text-align: center; /* 水平居中 */line-height: 24px; /* 垂直居中 */text-decoration: underline; /* 下划线 */
}
五、CSS 布局
5.1 盒子模型
.box {width: 200px;height: 150px;padding: 10px;border: 2px solid black;margin: 20px auto;background-color: lightgray;
}
5.2 行块元素
行内元素如<span>，块级元素如<div>，可通过display转换：
span {display: block; /* 行内转块级 */
}
div {display: inline; /* 块级转行内 */
}
5.3 定位
/* 绝对定位 */
.absolute {position: absolute;top: 50px;left: 100px;
}
/* 相对定位 */
.relative {position: relative;left: 20px;top: 10px;
}
CSS 作为网页样式设计的核心技术，掌握这些基础与核心要点，能够帮助开发者打造出美观、实用且具有良好用户体验的网页。