CSS3基础_html css3怎么引入-优快云博客

文章目录

CSS3基础

CSS3基础

CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML页面外观的语言，而CSS3是CSS的第三个版本，在传统CSS基础上新增了圆角、阴影、渐变、动画等强大功能，让网页设计更灵活、视觉效果更丰富。本文从零基础角度，详解CSS3的核心概念、语法规则、常用样式及实战技巧，帮你快速掌握“给网页化妆”的秘诀。

一、CSS3是什么？为什么需要它？

CSS3是用于描述HTML文档呈现方式的样式表语言，核心作用是：

美化页面：控制文字颜色、字体、大小，背景图片、颜色，元素边框等视觉效果；
布局排版：定义元素的位置、尺寸、间距，实现多列布局、响应式设计等；
动态效果：通过过渡、动画让元素产生交互反馈（如鼠标悬停时的变化）。

没有CSS的网页是“素颜”的（只有HTML结构），而CSS3能让网页“化妆”成各种风格——从简约到华丽，从静态到动态，全靠CSS3实现。

二、CSS3的基本语法

CSS3的语法由“选择器”和“声明块”组成，核心逻辑是：“选中元素，定义样式”。

基本格式：

选择器 {
  属性1: 值1;  /* 声明1：控制元素的某个样式 */
  属性2: 值2;  /* 声明2：多个声明用分号分隔 */
}

选择器：指定要设置样式的HTML元素（如<p>、<div>，或带类/ID的元素）；
声明块：用{}包裹，包含一个或多个“属性:值”对，每个声明以分号;结尾；
注释：用/* 注释内容 */表示，不影响代码执行，用于解释逻辑。

示例：给所有<p>标签设置文字颜色和大小

p {
  color: blue;  /* 文字颜色为蓝色 */
  font-size: 16px;  /* 文字大小为16像素 */
}

三、如何在HTML中引入CSS3？

CSS3需要与HTML结合才能生效，有3种引入方式，各有适用场景：

1. 内联样式（不推荐）

直接在HTML标签的style属性中写CSS，仅作用于当前标签。

<p style="color: red; font-size: 20px;">这段文字是红色20px</p>

缺点：样式与结构混合，不利于维护（修改需逐个改标签），仅临时调试时使用。

2. 内部样式表（适合单页面）

在HTML的<head>标签内用<style>包裹CSS，作用于当前整个页面。

<head>
  <style>
    h1 { color: green; }  /* 所有h1标签生效 */
    .intro { font-weight: bold; }  /* 类为intro的元素生效 */
  </style>
</head>
<body>
  <h1>标题</h1>
  <p class="intro">引言</p>
</body>

优点：样式集中在页面头部，适合单个页面的样式定义。

3. 外部样式表（推荐）

将CSS代码单独写在.css文件中，再在HTML中通过<link>引入，可作用于多个页面。

步骤：

创建style.css文件，写入CSS代码：

/* style.css */
body { background-color: #f0f0f0; }  /* 页面背景色 */
a { text-decoration: none; }  /* 去除链接下划线 */

在HTML中引入：

<head>
  <link rel="stylesheet" href="style.css">  /* href为.css文件路径 */
</head>

优点：样式与结构完全分离，一次修改，所有引入该文件的页面同步生效，是企业开发的标准方式。

四、核心选择器：如何精准选中元素？

选择器是CSS的“瞄准镜”，决定了哪些元素会应用样式。CSS3提供了丰富的选择器，按功能可分为基础选择器和高级选择器。

1. 基础选择器（必学）

选择器类型	语法	作用	示例
元素选择器	标签名	选中所有该标签的元素	`p { color: red; }`（所有`<p>`变红）
类选择器	.类名	选中所有class为该类名的元素	`.active { background: yellow; }`（class="active"的元素背景黄）
ID选择器	#ID名	选中ID为该名称的唯一元素（ID需唯一）	`#logo { width: 200px; }`（id="logo"的元素宽200px）
通配符选择器	*	选中页面所有元素（慎用，性能影响）	`* { margin: 0; padding: 0; }`（清除所有元素的默认边距）

示例：组合使用基础选择器

<style>
  /* 元素选择器：所有h2变蓝色 */
  h2 { color: blue; }
  
  /* 类选择器：class为"highlight"的元素加黄色背景 */
  .highlight { background-color: yellow; }
  
  /* ID选择器：id为"intro"的元素字体加粗 */
  #intro { font-weight: bold; }
</style>

<body>
  <h2>标题</h2>
  <p class="highlight">这段有黄色背景</p>
  <p id="intro">这段字体加粗</p>
</body>

2. 组合选择器（选中特定关系的元素）

选择器类型	语法	作用	示例
后代选择器	A B	选中A元素内所有后代B元素（包括子、孙等）	`div p { color: gray; }`（div内所有p变灰色）
子元素选择器	A > B	仅选中A元素的直接子元素B（不包括孙元素）	`ul > li { list-style: none; }`（ul的直接子li去除列表样式）
相邻兄弟选择器	A + B	选中A元素后紧接的第一个同级B元素	`h3 + p { margin-top: 0; }`（h3后面第一个p的上边距为0）
并集选择器	A, B	同时选中A和B元素（逗号分隔）	`h1, h2 { font-family: "SimHei"; }`（h1和h2用黑体）

示例：后代与子元素选择器的区别

<style>
  /* 后代选择器：div内所有p（包括子、孙）变红色 */
  div p { color: red; }
  
  /* 子元素选择器：div的直接子p（仅第一层）变蓝色 */
  div > p { color: blue; }
</style>

<div>
  <p>直接子p（蓝色，覆盖红色）</p>
  <div>
    <p>孙p（红色，仅被后代选择器选中）</p>
  </div>
</div>

3. CSS3新增高级选择器（提升效率）

选择器类型	语法	作用	示例
属性选择器	[属性=值]	选中具有指定属性且值匹配的元素	`input[type="text"] { border: 1px solid #ccc; }`（type为text的input加边框）
伪类选择器	:hover	鼠标悬停时的元素	`a:hover { color: red; }`（链接 hover 变红）
伪类选择器	:nth-child(n)	选中父元素的第n个子元素（n从1开始）	`ul li:nth-child(2) { color: green; }`（ul的第2个li变绿色）
伪元素选择器	::before	在元素内容前插入内容（需配合content）	`p::before { content: "→"; }`（p前加箭头）

示例：常用高级选择器效果

<style>
  /* 属性选择器：选中所有带href属性的a标签 */
  a[href] { text-decoration: underline; }
  
  /* 伪类：鼠标悬停在按钮上时变色 */
  button:hover { background-color: #4CAF50; color: white; }
  
  /* 伪类：表格奇数行变灰色（隔行变色） */
  table tr:nth-child(odd) { background-color: #f2f2f2; }
  
  /* 伪元素：在段落末尾加省略号 */
  p::after { content: "..."; }
</style>

五、核心样式规则：控制元素外观与布局

CSS3通过大量属性控制元素的样式，以下是最常用的核心类别及属性：

1. 文本样式（控制文字外观）

属性	作用	常用值示例
`color`	文字颜色	`red`（颜色名）、`#ff0000`（十六进制）、`rgb(255,0,0)`（RGB值）
`font-size`	文字大小	`16px`（像素）、`1.2em`（相对父元素）、`120%`（相对父元素百分比）
`font-family`	字体	`"SimHei", "Microsoft YaHei", sans-serif`（优先用黑体，无则用微软雅黑，最后用默认无衬线字体）
`font-weight`	字体粗细	`normal`（正常）、`bold`（加粗）、`700`（数值，700=bold）
`text-align`	文本对齐	`left`（左对齐）、`center`（居中）、`right`（右对齐）
`text-decoration`	文本装饰	`none`（无，常用于去除链接下划线）、`underline`（下划线）、`line-through`（删除线）

示例：美化文章文本

.article {
  color: #333;  /* 深灰色文字，不伤眼 */
  font-size: 16px;  /* 标准文字大小 */
  font-family: "SimSun", serif;  /* 宋体，衬线字体适合长文本阅读 */
  line-height: 1.6;  /* 行高（1.6倍文字大小），提升可读性 */
  text-align: justify;  /* 两端对齐 */
}

.article h3 {
  color: #2c3e50;  /* 标题深色 */
  font-weight: bold;
  text-decoration: underline;  /* 标题下划线 */
}

2. 背景样式（控制元素背景）

属性	作用	常用值示例
`background-color`	背景颜色	`#f5f5f5`（浅灰）、`transparent`（透明）
`background-image`	背景图片	`url("bg.jpg")`（图片路径）
`background-repeat`	背景图片重复方式	`no-repeat`（不重复）、`repeat-x`（水平重复）、`repeat-y`（垂直重复）
`background-size`	背景图片大小	`cover`（覆盖元素，可能裁剪）、`contain`（完整显示，可能留空白）、`100% 100%`（拉伸填充）
`background-position`	背景图片位置	`center`（居中）、`top right`（右上）、`50% 50%`（百分比定位）

示例：设置网页背景

body {
  background-color: #e9ecef;  /* 浅灰背景色 */
  background-image: url("pattern.png");  /* 叠加背景图案 */
  background-repeat: repeat-x;  /* 图案仅水平重复 */
  background-position: top;  /* 图案靠顶部 */
}

.banner {
  width: 100%;
  height: 300px;
  background-image: url("banner.jpg");  /* 横幅图片 */
  background-size: cover;  /* 图片覆盖整个横幅 */
  background-position: center;  /* 图片居中显示 */
}

3. 盒模型（控制元素尺寸与间距）

所有HTML元素都可视为一个“盒子”，CSS盒模型定义了盒子的组成：

content（内容区）：元素的实际内容（文字、图片等），由width和height控制；
padding（内边距）：内容区与边框的距离（内边距会扩大盒子的实际大小）；
border（边框）：盒子的边框，由border-width、border-style、border-color控制；
margin（外边距）：盒子与其他元素的距离（不会影响盒子自身大小）。

![盒模型示意图]（可想象为：内容区是礼物，padding是礼物与盒子内壁的距离，border是盒子的厚度，margin是盒子与其他盒子的间隙）

常用盒模型属性：

.box {
  width: 200px;  /* 内容区宽度 */
  height: 100px;  /* 内容区高度 */
  
  /* 内边距：上 右 下 左（顺时针），单值表示四边相同 */
  padding: 10px 20px;  /* 上下10px，左右20px */
  
  /* 边框：宽度 样式 颜色（可合并写） */
  border: 2px solid #333;  /* 2px宽、实线、深灰色边框 */
  
  /* 外边距：同上，单值表示四边相同 */
  margin: 20px auto;  /* 上下20px，左右自动（水平居中） */
  
  /* 盒模型计算方式：border-box表示width和height包含padding和border（推荐） */
  box-sizing: border-box;
}

关键说明：

默认box-sizing: content-box：盒子实际宽度 = width + padding-left + padding-right + border-left + border-right（可能导致布局错位）；
推荐box-sizing: border-box：盒子实际宽度 = width（padding和border包含在width内），更易控制尺寸。

4. 布局控制（元素的位置与排列）

CSS3提供多种布局方式，从基础到现代，满足不同场景需求：

（1）浮动（float）：让元素“飘起来”

传统布局中用于实现文字环绕或多列布局，元素浮动后会脱离正常文档流（不占据原来的位置）。

/* 左浮动：图片向左飘，文字环绕 */
img {
  float: left;  /* 可选left/right/none */
  margin-right: 10px;  /* 与文字保持距离 */
}

/* 多列布局：两个div并排 */
.col {
  float: left;
  width: 50%;  /* 各占一半宽度 */
  box-sizing: border-box;  /* 确保padding和border不超宽 */
}

/* 清除浮动：父元素添加，避免高度塌陷 */
.parent::after {
  content: "";
  display: block;
  clear: both;
}

（2）定位（position）：精准控制元素位置

通过position属性定义元素的定位方式，配合top/right/bottom/left控制偏移：

position值	作用	适用场景
`static`	默认值，正常文档流（不定位）	无特殊定位需求
`relative`	相对自身原位置偏移（仍占原位置）	微调元素位置
`absolute`	相对最近的非static定位父元素偏移（脱离文档流）	弹窗、图标定位等
`fixed`	相对浏览器窗口偏移（固定在屏幕上）	导航栏、回到顶部按钮

示例：固定导航栏与弹窗定位

/* 固定导航栏（顶部） */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: white;
  box-shadow: 0 2px 5px #ccc;  /* 底部阴影 */
}

/* 弹窗（居中显示） */
.modal {
  position: absolute;  /* 相对父元素（需设置position: relative） */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* 居中对齐（基于自身尺寸） */
  width: 300px;
  height: 200px;
  background-color: white;
  border: 1px solid #999;
}

（3）弹性布局（flexbox）：现代布局首选

CSS3新增的flex布局（弹性盒子），通过定义容器和项目的属性，轻松实现对齐、分布、排序等，是响应式设计的核心。

基本用法：

给父容器设置display: flex，使其成为flex容器；
容器内的直接子元素自动成为flex项目；
通过容器属性（如justify-content、align-items）控制项目排列。

示例：水平居中+垂直居中的flex布局

/* flex容器 */
.container {
  display: flex;  /* 开启flex布局 */
  width: 500px;
  height: 300px;
  background-color: #f0f0f0;
  
  /* 水平方向对齐：居中 */
  justify-content: center;
  
  /* 垂直方向对齐：居中 */
  align-items: center;
}

/* flex项目 */
.item {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  margin: 0 10px;  /* 项目间间距 */
}

效果：3个绿色方块在灰色容器中水平和垂直都居中，且自动排列。

六、CSS3新增炫酷特性（让页面“动”起来）

CSS3相比传统CSS，新增了大量视觉和动态效果，无需JavaScript即可实现：

1. 圆角（border-radius）

让元素边角变圆润，告别直角。

.rounded {
  width: 100px;
  height: 100px;
  background-color: #2196F3;
  border-radius: 10px;  /* 四角圆角半径10px */
  /* 圆形：宽高相等，border-radius: 50% */
  /* border-radius: 10px 20px 30px 40px;  左上 右上 右下 左下（顺时针） */
}

2. 阴影（box-shadow/text-shadow）

box-shadow：给元素添加阴影（容器阴影）；
text-shadow：给文字添加阴影（文本阴影）。

.card {
  width: 200px;
  height: 150px;
  background-color: white;
  /* 水平偏移 垂直偏移 模糊半径 阴影大小 颜色（可选：inset内阴影） */
  box-shadow: 3px 3px 10px rgba(0,0,0,0.2);  /* 淡灰色外阴影 */
}

.title {
  font-size: 24px;
  /* 水平偏移 垂直偏移 模糊半径 颜色 */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);  /* 文字阴影 */
}

3. 渐变（gradient）

用background-image实现颜色渐变（线性/径向）。

线性渐变：沿直线过渡

.linear-gradient {
  height: 100px;
  background-image: linear-gradient(to right, red, yellow);  /* 从左到右：红→黄 */
  /* 其他方向：to left/top/bottom/45deg（45度角） */
}

径向渐变：从中心向外过渡

.radial-gradient {
  height: 100px;
  background-image: radial-gradient(circle, blue, green);  /* 圆形：蓝→绿 */
}

4. 过渡（transition）

让样式变化更平滑（如鼠标悬停时的颜色/尺寸变化）。

.button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  /* 过渡：属性 时长 速度曲线（all表示所有属性变化都过渡） */
  transition: all 0.3s ease;  /* 0.3秒平滑过渡 */
}

/* 鼠标悬停时变化 */
.button:hover {
  background-color: #45a049;
  transform: scale(1.05);  /* 放大1.05倍 */
}

5. 动画（animation）

实现更复杂的自定义动画（如旋转、闪烁），需定义@keyframes关键帧。

/* 定义动画关键帧（从0%到100%的状态） */
@keyframes rotate {
  0% { transform: rotate(0deg); }  /* 开始：0度 */
  100% { transform: rotate(360deg); }  /* 结束：360度 */
}

/* 应用动画 */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;  /* 圆形 */
  /* 动画：名称 时长 匀速 无限循环 */
  animation: rotate 1s linear infinite;
}

效果：一个旋转的加载动画（类似浏览器加载时的圆圈）。

七、最佳实践与注意事项

样式优先级：当多个选择器作用于同一元素时，优先级规则决定哪个样式生效（从高到低）：
- 内联样式（style属性） > ID选择器 > 类/属性/伪类选择器 > 元素选择器 > 通配符
- 可在属性值后加!important强制优先（如color: red !important），但慎用（破坏优先级逻辑）。

响应式设计基础：通过@media查询适配不同屏幕尺寸（如手机、平板、电脑）。

/* 屏幕宽度≤768px时（手机）生效 */
@media (max-width: 768px) {
  .col { width: 100%; }  /* 单列布局 */
  font-size: 14px;  /* 文字变小 */
}

浏览器兼容性：不同浏览器对CSS3特性的支持可能不同，需加前缀兼容旧版本：
- Chrome/Safari：-webkit-（如-webkit-border-radius）
- Firefox：-moz-（如-moz-box-shadow）
  （现代浏览器多数已支持标准语法，可通过caniuse.com查询兼容性）
命名规范：类名/ID名用小写字母，多个单词用连字符（如nav-bar），语义化命名（如header、footer），便于维护。
性能优化：避免过度使用通配符*；减少嵌套选择器层级（如div ul li a层级太深，效率低）；合并重复样式。