基础概念
- 定义：CSS 是用于描述 HTML 或 XML（包括 SVG、XHTML 等）文档的呈现，即如何将网页元素显示在屏幕、纸张或其他媒体上。
- 作用：实现内容（HTML）与表现（CSS）分离，使网页的设计和维护更加方便，同时能提高网页加载速度。
- 引入方式
-
内联样式 ：直接在 HTML 标签的
style属性中添加 CSS 代码，如<p style="color: red;">这是一个段落</p>。 -
内部样式表 ：在 HTML 文件的
<head> <style> p { color: blue; } </style> </head><head>标签内使用<style>标签定义 CSS 代码，如- 外部样式表：将 CSS 代码保存为一个独立的
.css文件，然后在 HTML 文件的<head>标签中使用<link>标签引入，如<link rel="stylesheet" href="styles.css">。
- 外部样式表：将 CSS 代码保存为一个独立的
-
选择器
- 元素选择器 ：通过 HTML 元素名称来选择元素，如
p { color: green; }会选择所有的<p>标签。 - 类选择器 ：使用
.符号开头，通过元素的class属性来选择元素，如.highlight { background-color: yellow; }，HTML 中<span class="highlight">高亮文本</span>会应用该样式。 - ID 选择器 ：使用
#符号开头，通过元素的id属性来选择元素，如#header { font-size: 24px; }，HTML 中<div id="header">页面头部</div>会应用该样式。 - 属性选择器 ：根据元素的属性或属性值来选择元素，如
input[type="text"] { border: 1px solid gray; }会选择所有type属性为text的<input>元素。 - 组合选择器
- 后代选择器 ：使用空格分隔，如
div p { color: purple; }会选择<div>元素内的所有<p>元素。 - 子选择器 ：使用
>符号分隔，如div > p { color: orange; }会选择<div>元素的直接子元素<p>。 - 相邻兄弟选择器 ：使用
+符号分隔，如h1 + p { margin-top: 10px; }会选择紧接在<h1>元素之后的<p>元素。 - 通用兄弟选择器 ：使用
~符号分隔，如h2 ~ p { color: brown; }会选择与<h2>元素同属一个父元素的所有后续<p>元素。
- 后代选择器 ：使用空格分隔，如
盒模型
- 内容区（content）：元素实际显示的内容，如文本、图像等。
- 内边距（padding） ：内容区与边框之间的距离，可以使用
padding-top、padding-right、padding-bottom、padding-left分别设置四个方向的内边距，也可以使用padding一次性设置，如padding: 10px;表示四个方向都是 10px。 - 边框（border） ：围绕内容区和内边距的线条，可以使用
border-width、border-style、border-color分别设置边框的宽度、样式和颜色，也可以使用border一次性设置，如border: 1px solid black;。 - 外边距（margin） ：元素与其他元素之间的距离，使用方法与内边距类似，如
margin: 20px;表示四个方向的外边距都是 20px。
布局
- 浮动（float） ：使元素脱离正常文档流，向左或向右浮动，其他元素会围绕它排列。常用值有
left、right和none，如img { float: left; }会使图片向左浮动。 - 清除浮动（clear） ：用于解决浮动元素导致的父元素高度塌陷问题，常用值有
left、right、both和none，如<div style="clear: both;"></div>可以清除左右两侧的浮动。 - 定位（position）
- 静态定位（static）：元素的默认定位方式，按照正常文档流进行布局。
- 相对定位（relative） ：元素相对于其正常位置进行定位，使用
top、right、bottom、left属性来设置偏移量，如div { position: relative; top: 20px; left: 30px; }。 - 绝对定位（absolute） ：元素相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于
<html>元素，同样使用top、right、bottom、left属性。 - 固定定位（fixed）：元素相对于浏览器窗口进行定位，即使页面滚动，元素的位置也不会改变。
- 粘性定位（sticky） ：元素在正常文档流中滚动，当滚动到某个位置时固定在页面上，如
nav { position: sticky; top: 0; }会使导航栏在滚动到顶部时固定。
- 弹性布局（Flexbox） ：用于为盒状模型提供最大的灵活性，通过
display: flex或display: inline-flex将元素设置为弹性容器，然后使用一系列属性来控制子元素的布局，如justify-content控制主轴上的对齐方式，align-items控制交叉轴上的对齐方式。 - 网格布局（Grid） ：将网页划分为多个列和行，通过
display: grid或display: inline-grid将元素设置为网格容器，使用grid-template-columns和grid-template-rows定义网格的列和行，使用grid-column和grid-row来定位子元素。
文本和字体
- 字体属性
font-family：指定文本的字体，如font-family: Arial, sans-serif;。font-size：指定文本的大小，如font-size: 16px;。font-weight：指定文本的粗细，如font-weight: bold;。font-style：指定文本的样式，如font-style: italic;。
- 文本属性
color：指定文本的颜色，如color: #333;。text-align：指定文本的对齐方式，如text-align: center;。text-decoration：指定文本的装饰线，如text-decoration: underline;。line-height：指定文本的行高，如line-height: 1.5;。
背景和边框
- 背景属性
background-color：指定元素的背景颜色，如background-color: lightblue;。background-image：指定元素的背景图像，如background-image: url('bg.jpg');。background-repeat：指定背景图像的重复方式，如background-repeat: no-repeat;。background-position：指定背景图像的位置，如background-position: center top;。
- 边框属性
- 除了前面提到的
border属性，还可以使用border-radius来设置边框的圆角，如border-radius: 5px;。
- 除了前面提到的
响应式设计
-
媒体查询（Media Queries）：根据设备的屏幕尺寸、分辨率等条件来应用不同的 CSS 样式，如
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
} -
弹性布局和网格布局：它们本身就具有一定的响应式特性，能够根据容器的大小自动调整子元素的布局。
-
百分比和相对单位 ：使用百分比、
em、rem等相对单位来设置元素的尺寸，使页面在不同设备上能够自适应。
动画和过渡
-
过渡（transition） ：用于在元素的两个状态之间平滑过渡，通过
transition属性指定过渡的属性、过渡时间、过渡延迟等，如button {
background-color: blue;
transition: background-color 0.3s ease;
}
button:hover {
background-color: red;
} -
动画（animation） ：通过
@keyframes规则定义动画，然后使用animation属性将动画应用到元素上，如@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
div {
animation: slide 2s infinite;
}
总结
CSS 是网页设计中不可或缺的一部分，它提供了丰富的功能来控制网页的外观和布局。通过选择器可以精确地选择要应用样式的元素，盒模型、布局和定位属性可以实现各种复杂的页面布局，文本和字体属性可以美化文本内容，背景和边框属性可以增强元素的视觉效果。响应式设计可以使网页在不同设备上都能提供良好的用户体验，而动画和过渡则可以为网页增添交互性和趣味性。掌握这些知识点，并不断实践和探索，才能更好地运用 CSS 来创建出美观、实用的网页。