前端Web开发HTML5+CSS3+移动web课程（95/198）

关于CSS

CSS 的全称是 Cascading Style Sheets，中文译为 “层叠样式表”。它是控制网页样式表现与布局结构的核心语言，能将 HTML 骨架转化为视觉美观、交互友好的页面，是前端开发三大基石之一。

CSS的引入方式

内联样式

要使用内联样式，你需要在相关的标签内使用样式（style）属性。其内部可以包含任何css属性

缺乏整体性和规划性，不利于维护，维护成本高

举例

<p style="background: orange: font-size: 24px;">css<p>

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style>标签在文档头部定义内部样式表

单个页面内的 CSS 代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

举例

<head>
	<style>
		h1 {
			background: red;
			}
	</style>
</head>

外部样式

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。

举例

<link rel =" stylesheet " type =" text/css " href =" xxx.css ">

选择器

基础选择器（最常用，直接匹配元素）

元素选择器（标签选择器）

  • 语法：直接使用 HTML 标签名（如 div、p、a）
  • 作用：匹配页面中所有该标签的元素
  • 场景：统一设置某类标签的基础样式（如全局字体、重置默认样式）。

示例：

/* 匹配所有 <p> 标签，设置文字颜色为灰色 */
p {
  color: #666;
  font-size: 14px;
}

/* 匹配所有 <button> 标签，设置背景色 */
button {
  background: #007bff;
  color: white;
}

类选择器（. + 类名）

  • 语法：.类名（类名由字母、数字、-、_ 组成，不能以数字开头）
  • 作用：匹配所有带有该 class 属性的元素（一个元素可多个类，类可复用）
  • 场景：复用样式（如按钮状态、卡片样式），是开发中最常用的选择器。

示例：

<!-- HTML：元素添加 class -->
<div class="box">盒子1</div>
<div class="box highlight">盒子2</div> <!-- 多个类用空格分隔 -->

/* 匹配所有 class="box" 的元素 */
.box {
  width: 200px;
  height: 200px;
  border: 1px solid #eee;
}

/* 匹配所有 class="highlight" 的元素（可复用） */
.highlight {
  background: #fff3cd;
}

ID 选择器（# + ID）

  • 语法：#ID名（ID 全局唯一，一个页面中不能重复）
  • 作用：精准匹配单个带有该 id 属性的元素
  • 场景：定位页面中唯一的元素（如头部、底部、登录弹窗），不建议复用（ID 不可重复）

示例：

<div id="header">网站头部</div>

/* 匹配 id="header" 的唯一元素 */
#header {
  height: 80px;
  background: #333;
  color: white;
}

通配符选择器（*）

  • 语法：*（星号）
  • 作用：匹配页面中所有元素（包括 <html>、<body>）
  • 注意：性能较低（遍历所有元素），避免单独用于复杂页面，仅推荐用于全局初始化。

示例：

/* 重置所有元素的默认内外边距（常用初始化样式） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 统一盒模型 */
}

组合选择器（关联多个选择器，精准定位层级 / 关系）

后代选择器（空格分隔）

  • 语法：选择器1 选择器2（选择器 1 的所有后代中匹配选择器 2 的元素，包括子、孙、曾孙等)

示例：

<ul class="menu">
  <li>首页</li>
  <li>产品
    <ul>
      <li>手机</li> <!-- 后代元素 -->
    </ul>
  </li>
</ul>

/* 匹配 .menu 下所有的 <li>（包括子级和孙级） */
.menu li {
  list-style: none;
  padding: 8px 0;
}

子元素选择器（> 分隔）

  • 语法：选择器1 > 选择器2（仅匹配选择器 1 的直接子元素，不包含孙级及以下）

示例：

/* 仅匹配 .menu 的直接子级 <li>（不包含孙级 <li>） */
.menu > li {
  font-weight: bold; /* 子级 li 加粗 */
}

区别：后代选择器（空格）包含所有层级，子选择器（>）仅直接子级。

相邻兄弟选择器（+ 分隔）

  • 语法：选择器1 + 选择器2（匹配选择器 1紧接其后的第一个兄弟元素，且两者同属一个父级）

示例：

<div class="title">标题</div>
<p>第一段文字</p> <!-- 紧接 .title 的兄弟 -->
<p>第二段文字</p>

/* 仅匹配 .title 后面的第一个 <p> */
.title + p {
  color: #f00;
  margin-top: 5px;
}

通用兄弟选择器（~ 分隔）

  • 语法：选择器1 ~ 选择器2（匹配选择器 1后面所有的兄弟元素，且两者同属一个父级）

示例：

/* 匹配 .title 后面所有的 <p>（第一段和第二段都生效） */
.title ~ p {
  line-height: 1.8;
}

属性选择器（根据元素属性 / 属性值匹配）

基础属性选择器

  • 语法 1：[属性名]（匹配包含该属性的元素，无论属性值是什么）
  • 语法 2：[属性名=“属性值”]（精确匹配属性值完全相等的元素）

示例：

<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<a href="https://baidu.com" target="_blank">百度</a>

/* 匹配所有有 placeholder 属性的元素 */
[placeholder] {
  padding: 8px 12px;
  border: 1px solid #ddd;
}

/* 精确匹配 type="password" 的 input */
input[type="password"] {
  border-color: #f00; /* 密码框红色边框 */
}

/* 精确匹配 target="_blank" 的 a 标签 */
a[target="_blank"] {
  color: #007bff;
  text-decoration: none;
}

模糊匹配属性选择器

语法作用示例
[属性名^="值"]属性值以某个字符串开头a[href^="https"]（https 链接）
[属性名$="值"]属性值以某个字符串结尾img[src$=".png"]（PNG 图片）
[属性名*="值"]属性值包含某个字符串a[href*="baidu"]（含 baidu 的链接）
[属性名~="值"]属性值是空格分隔的列表，包含该值div[class~="box"]（class 含 box）

伪类选择器（:xxx，匹配元素的状态 / 位置）

状态伪类（最常用）

伪类作用示例
:hover鼠标悬停在元素上时button:hover { background: #0056b3; }
:active元素被点击（按下未松开）时button:active { transform: scale(0.98); }
:focus元素获得焦点（如输入框、按钮）时input:focus { outline: none; border-color: #007bff; }
:visited已访问过的链接（仅支持颜色相关样式）a:visited { color: #666; }
:link未访问过的链接（需放在 :visited 前面）a:link { color: #007bff; }
:checked单选 / 复选框被选中时input:checked + span { color: #f00; }
:disabled元素被禁用时（如 disabled 输入框）input:disabled { background: #f5f5f5; }
  • 注意：链接伪类的顺序必须是 :link → :visited → :hover → :active（LVHA 规则），否则样式可能失效。

结构伪类（匹配元素位置）

伪类作用示例
:first-child父元素的第一个子元素ul li:first-child { margin-top: 0; }
:last-child父元素的最后一个子元素ul li:last-child { margin-bottom: 0; }
:nth-child(n)父元素的第 n 个子元素（n 为数字 / 公式）ul li:nth-child(2) { color: #f00; }（第 2 个 li）
:nth-child(2n)父元素的偶数个子元素（2n=even）ul li:nth-child(even) { background: #f8f9fa; }
:nth-child(2n+1)父元素的奇数个子元素（2n+1=odd）ul li:nth-child(odd) { background: #fff; }
:only-child父元素的唯一子元素div:only-child { width: 100%; }
:first-of-type父元素中该类型的第一个元素div p:first-of-type { font-weight: bold; }（第一个 p）
:last-of-type父元素中该类型的最后一个元素div p:last-of-type { margin-bottom: 0; }
  • 区别：:nth-child(n) 匹配父元素的第 n 个子元素（不区分类型），:nth-of-type(n) 匹配父元素中该类型的第 n 个元素（区分类型）。

伪元素选择器（::xxx，创建虚拟元）

伪元素用于在元素的前后插入虚拟内容（不实际存在于 HTML 中），或选中元素的部分内容，语法是 ::xxx（CSS3 规范，兼容旧写法 :xxx，但推荐双冒号）。

常用伪元素

伪元素作用示例
::before在元素内容前插入虚拟元素.title::before { content: "【"; color: #f00; }
::after在元素内容后插入虚拟元素.title::after { content: "】"; color: #f00; }
::first-letter选中元素的第一个字符p::first-letter { font-size: 24px; float: left; }
::first-line选中元素的第一行文本p::first-line { color: #007bff; font-weight: bold; }
::selection选中元素被鼠标选中的文本（仅支持部分样式）::selection { background: #fff3cd; color: #dc3545; }

选择器优先级

优先级等级选择器类型示例
1!important（强制优先级）color: #f00 !important;
2内联样式（style 属性）<div style="color: red">
3ID 选择器#header
4类选择器 / 属性选择器 / 伪类.box、[type="text"]、:hover
5元素选择器 / 伪元素div、::before
6通配符选择器*

选择器组合示例

/* 1. 表单样式：聚焦时高亮，禁用时灰色 */
input[type="text"]:focus {
  border: 2px solid #007bff;
  outline: none;
}
input:disabled {
  background: #f5f5f5;
  cursor: not-allowed;
}

/* 2. 列表样式：奇数行灰色背景，hover时高亮 */
ul li:nth-child(odd) {
  background: #f8f9fa;
}
ul li:hover {
  background: #e9ecef;
  cursor: pointer;
}

/* 3. 卡片装饰：添加顶部图标和底部分隔线 */
.card::before {
  content: "📌";
  margin-right: 8px;
}
.card::after {
  content: "";
  display: block;
  height: 1px;
  background: #eee;
  margin-top: 16px;
}

/* 4. 排除特定元素：所有按钮除了禁用的都有阴影 */
button:not(:disabled) {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

基础样式控制

文本样式

控制字体font-family：Microsoft YaHei（微软雅黑）、宋体、sans-serif（多字体回退）……
大小font-size：13px（像素）、1.2rem、150%……
颜色color：#333（十六进制）、rgb(0,0,0)、red……
粗细font-weight：normal（400）、bold（700）、lighter、bolder、（具体数值）……
行高line-height：1.5（倍数）、34px……

背景样式

设置背景色background-color：#f5f5f5、rgb(0,0,0)……
背景图background-image：url(“img.jpg”)
背景重复background-repeat：repeat、no-repeat
背景位置background-position：center（居中）……

表格属性

表格边框：指定 CSS 表格边框，使用border属性

table , td {
	border:1px solid black ;
	}

折叠边框：border - collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

table { border - collapse : collapse ;}
table , td { border :1px solid black ;}

表格宽度和高度：width 和 height 属性定义表格的宽度和高度

table { width :100%;}
td { height :50px;}

表格文字对齐：
text - align 属性设置水平对齐方式，向左，右，或中心
垂直对齐属性设置垂直对齐

/*向右对齐*/
td { text - align : right ;}

/*高度50，底部对齐*/
td { height :50px; vertical - align : bottom ;}

表格填充：如果在表的内容中控制空格之间的边框，应使用 td 和 th 元素的填充属性

td { padding :15px;}

表格颜色：下面的例子指定边框的颜色，和 th 元素的文本和背景颜色

table , td , th { border :1px solid green ;}2 td { background - color : green ; color : white ;}

CSS 盒子模型（Box Model）

CSS 盒子模型是网页布局的基础 ——所有 HTML 元素都可以被看作一个 “盒子”，页面布局本质就是对这些盒子的尺寸、位置、间距进行控制。理解盒子模型是掌握 CSS 布局（静态布局、Flex、Grid 等）的关键。

盒子模型的核心组成（从内到外）

  • 内容区（Content）
    盒子的核心，显示文本、图片等实际内容。由 width（宽度）和 height（高度）控制尺寸。
  • 内边距（Padding）
    内容区与边框之间的空白区域，会扩大盒子的实际尺寸，且受 background 背景色影响（和内容区同背景）。
  • 边框（Border）
    包裹内边距和内容区的线条，会进一步扩大盒子尺寸，可控制样式（实线 / 虚线）、宽度、颜色。
  • 外边距（Margin）
    盒子与其他盒子之间的空白区域，不会影响盒子自身尺寸，仅控制盒子与外部元素的间距（透明，不受背景影响）。
    CSS 盒子模型（Box Model）

核心属性

内容区（Content）

  • 控制属性：width（宽度）、height（高度）
  • 取值：
    • 固定值：px（像素，如 width: 300px）
    • 相对值：%（相对于父元素的宽度 / 高度，如 width: 50%）、em（相对于字体大小）、rem（相对于根元素字体大小）
    • 特殊值：auto（默认，自动适应内容或父元素）、max-width（最大宽度，防止溢出）、min-width（最小宽度，防止过小）

示例：

.box {
  width: 80%; /* 相对于父元素宽度的80% */
  max-width: 1200px; /* 最大不超过1200px，适配大屏幕 */
  min-width: 320px; /* 最小不小于320px，适配手机 */
  height: auto; /* 高度自动适应内容 */
}

内边距（Padding）

  • 控制属性：padding（简写）、padding-top/padding-right/padding-bottom/padding-left（单方向）
  • 取值：px、%（相对于父元素宽度）、em 等，不能为负数

示例（简写）：

/*上->右->下->左*/
padding: 10px; /* 上下左右均为10px */
padding: 10px 20px; /* 上下10px，左右20px */
padding: 10px 20px 30px; /* 上10px，左右20px，下30px */
padding: 10px 20px 30px 40px; /* 上10、右20、下30、左40（顺时针） */

边框（Border）

  • 核心属性：border-width（宽度）、border-style（样式）、border-color（颜色）
  • 简写：border: 宽度 样式 颜色（必须包含 border-style，否则边框不显示）
  • 常用样式：solid：实线（最常用）、dashed：虚线、dotted：点线、double：双线、none：隐藏边框

示例：

.box {
  border: 2px solid #f00; /* 2px 红色实线边框 */
  border-top: 3px dashed #00f; /* 上边框单独设置：3px 蓝色虚线 */
  border-radius: 8px; /* 圆角（可选，让边框变圆润） */
  border-top-left-radius: 10px; /* 左上角单独圆角 */
}

外边距（Margin）

  • 控制属性：margin（简写）、margin-top/margin-right/margin-bottom/margin-left（单方向）
  • 取值：px、%、em，可以为负数（让盒子重叠或偏移）
  • 简写规则：与 padding 完全一致
  • 关键特性：
    • 水平居中：给块级元素设置 margin: 0 auto，可实现水平居中（需指定宽度，否则宽度 100% 无法居中）：
.box {
  width: 500px;
  margin: 0 auto; /* 上下边距0，左右自动（水平居中） */
}
  • 外边距折叠（Margin Collapse）：
    相邻两个块级元素的垂直外边距（margin-bottom 和 margin-top）会 “合并”，取较大值（不是相加）。
    • 示例：上方盒子 margin-bottom: 20px，下方盒子 margin-top: 30px，最终间距是 30px（不是 50px）。
    • 解决方法：避免同时设置相邻元素的垂直外边距，或用 padding/border 分隔，或使用 Flex/Grid 布局（会取消折叠）。

CSS Flex 布局（弹性布局）：

Flex 布局是 CSS 中最强大、最常用的布局方案之一 ——专门用于解决 “元素在容器中如何灵活排列、对齐、分配空间” 的问题，替代了传统的浮动（float）、定位（position）等复杂布局方式，适配性极强（从移动端到桌面端通用）。
核心特点： 容器可指定方向（水平 / 垂直），子元素（弹性项）能自动填充剩余空间、收缩适应，且不脱离文档流。

Flex 布局的核心结构

Flex 布局由【容器（Flex Container）】和【子元素（Flex Item）】组成，需先给容器设置display: flex或display: inline-flex激活 Flex 模式：

  • display: flex：容器是块级元素（独占一行，宽度默认 100%）
  • display: inline-flex：容器是行内块元素（宽度由子元素决定，与其他元素同行排列）

容器的核心属性（控制整体布局）

容器属性决定子元素的排列方向、换行规则、主轴对齐、交叉轴对齐等，共 6 个核心属性：

1. flex-direction：指定主轴方向（子元素排列方向）

默认值：row（水平从左到右），决定主轴是 “水平” 还是 “垂直”：

属性值主轴方向子元素排列方式适用场景
row（默认）水平（左->右）从左到右横向排列导航栏、卡片横向布局
row-reverse水平（右->左）从右到左横向排列反向导航、特殊排版
column垂直（上->下）从上到下纵向排列移动端列表、垂直导航
column-reverse垂直（下->上）从下到上纵向排列反向列表、特殊布局

示例：

/*垂直排列子元素*/
.container {
  display: flex;
  flex-direction: column; /* 主轴垂直，子元素从上到下排 */
  height: 300px; /* 给容器固定高度，方便看垂直对齐 */
}

2. flex-wrap：控制子元素是否换行

默认值：nowrap（不换行），当子元素总宽度 / 高度超过容器时，是否允许换行：

属性值效果注意点
nowrap（默认）不换行，子元素自动收缩可能导致子元素内容溢出
wrap换行，新行在下方（水平主轴）/ 右侧（垂直主轴）换行后会形成多 “行”
wrap-reverse换行，新行在上方（水平主轴）/ 左侧（垂直主轴）反向换行，较少用

示例：

/*子元素超出容器时自动换行*/
.container {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  width: 500px; /* 容器固定宽度 */
}
.item {
  width: 200px; /* 每个子元素200px，3个会超出500px，自动换行 */
}

3. flex-flow：flex-direction + flex-wrap 简写

简化代码，默认值：row nowrap（水平不换行）：

.container {
  flex-flow: column wrap; /* 垂直方向 + 自动换行 */
  /* 等价于：flex-direction: column; flex-wrap: wrap; */
}

4. justify-content：主轴对齐方式

默认值：flex-start（靠主轴起点对齐），控制子元素在主轴方向的间距和对齐：

属性值效果（主轴为水平时）适用场景
flex-start靠左对齐（默认）普通列表、导航栏
flex-end靠右对齐右侧操作按钮组
center水平居中弹窗内容、卡片居中
space-between两端对齐，子元素间距相等导航栏（左右各一个元素）
space-around子元素两侧间距相等（首尾间距是中间的 1/2）均匀分布的卡片
space-evenly子元素间距相等（首尾间距 = 中间间距）严格均匀分布的布局

示例：

/*导航栏两端对齐*/
.nav {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  padding: 0 20px;
  background: #f5f5f5;
}
.nav .logo { /* 左侧Logo */ }
.nav .menu { /* 右侧菜单 */ }

5. align-items：交叉轴对齐方式（子元素在交叉轴上的对齐）

默认值：stretch（拉伸填充交叉轴），控制子元素在交叉轴方向的对齐（需容器有交叉轴尺寸，如高度 / 宽度）：

属性值效果（交叉轴为垂直时）适用场景
stretch（默认）子元素高度拉伸至与容器一致卡片等高布局、列表项等高
flex-start靠交叉轴起点对齐（顶部对齐）顶部对齐的卡片组
flex-end靠交叉轴终点对齐（底部对齐）底部对齐的操作栏
center交叉轴居中（垂直居中）文字 + 图标垂直居中、弹窗内容垂直居中
baseline按子元素基线对齐（文字底部对齐）文字与图标 / 输入框对齐

6. align-content：多行走对齐（仅当子元素换行时生效）

默认值：stretch（拉伸填充交叉轴），控制 “多行子元素” 在交叉轴上的整体分布（单行时无效）：

属性值效果（交叉轴为垂直时）适用场景
stretch（默认）多行高度平分容器交叉轴空间多行卡片等高布局
flex-start多行靠交叉轴起点（顶部）对齐多行内容顶部紧凑排列
flex-end多行靠交叉轴终点（底部）对齐多行内容底部紧凑排列
center多行在交叉轴中间对齐多行内容整体居中
space-between多行两端对齐，行间距相等多行均匀分布
space-around多行两侧间距相等多行宽松分布

子元素的核心属性（控制单个子元素）

用于调整单个元素的尺寸、排序、对齐，覆盖容器的默认设置：

1. flex：子元素的弹性空间分配（核心属性）

默认值：0 1 auto（不放大、可收缩、宽度自动），是 flex-grow、flex-shrink、flex-basis 的简写，控制子元素如何分配容器剩余空间或收缩适应。

子属性作用说明取值
flex-grow子元素的 “放大比例”，容器有剩余空间时是否放大（默认 0：不放大）数字（0/1/2…，越大占比越多）
flex-shrink子元素的 “收缩比例”，容器空间不足时是否收缩（默认 1：可收缩）数字（0：不收缩，1/2…：收缩优先级）
flex-basis子元素的 “基准尺寸”（主轴方向的初始尺寸），默认 auto（按内容 / 自身尺寸）px/%/auto（如 200px）

示例：

.container { display: flex; }
.sidebar { flex: none; width: 200px; } /* 左侧固定200px，不伸缩 */
.main { flex: 1; } /* 右侧占满剩余空间，自适应宽度 */

2. order：子元素的排列顺序

默认值：0，控制子元素在主轴上的排列顺序（无需修改 HTML 结构）：

  • 取值：整数（正数 / 负数 / 0），数值越小，排列越靠前
  • 示例：交换第二个和第三个子元素的位置
.item2 { order: 1; } /* 原来的第二个元素排到后面 */
.item3 { order: 0; } /* 原来的第三个元素排到前面 */

3. align-self：单个子元素的交叉轴对齐（覆盖容器 align-items）

默认值：auto（继承容器的 align-items），给单个子元素设置独立的交叉轴对齐方式：

.container {
  display: flex;
  align-items: center; /* 所有子元素默认垂直居中 */
}
.item-special {
  align-self: flex-end; /* 这个子元素单独底部对齐 */
}

4. margin: auto：子元素自动填充剩余空间（万能技巧）

Flex 布局中，给子元素设置 margin: auto，会自动将剩余空间分配给该方向的外边距，实现 “推挤” 效果：

  • 水平靠右：margin-left: auto
  • 水平靠左：margin-right: auto
  • 垂直靠下：margin-top: auto
  • 整体居中：margin: auto（无需容器设置 justify-content 和 align-items

示例：

.nav { display: flex; }
.logo { /* 左侧元素 */ }
.menu { margin-left: auto; } /* 右侧元素，左边自动填充剩余空间 */

总结

如果说HTML是一个网页的body，那么CSS就是这个网页的clothes。
网页不应该只有单调的功能，美化让人赏心悦目，兼具功能与美观才能称为好的作品。

# 前端 # html5 # css3
Logo
亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

avatar 亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

avatar 亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责

avatar 亚马逊云科技技术品牌专区