CSS基础
CSS 简介
HTML 的局限性
HTML 作为标记语言，其核心关注点是内容语义而非视觉呈现：
html
<h1>这是标题</h1>
<p>这是段落文本</p>
<img src="image.jpg" alt="示例图片">
<a href="#">这是链接</a>早期W
- 仅使用HTML会导致页面样式单一
- 样式与结构混杂，代码臃肿难维护
- 布局实现困难，需要大量嵌套表格
CSS - 网页的美容师
CSS (Cascading Style Sheets) 的核心价值：
| 功能维度 | 具体能力 |
|---|---|
| 文本样式 | 字体、大小、颜色、间距、对齐等 |
| 元素外观 | 边框、背景、阴影、圆角等 |
| 页面布局 | 定位、浮动、Flexbox、Grid等 |
| 响应式设计 | 媒体查询适配不同设备 |
设计哲学： 实现结构与样式分离，让HTML专注内容，CSS负责表现。
CSS 语法规范
基础语法结构
css
selector {
property: value;
/* 注释 */
}
代码示例解析
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS基础示例</title>
<style>
/* 段落样式 */
p {
color: #ff0000;/* 十六进制红色 */
font-size: 16px;/* 字体大小 */
line-height: 1.5;/* 行高 */
}
/* 标题样式 */
h1 {
color: darkblue;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>欢迎学习CSS</h1>
<p>这是一个样式化段落示例</p>
</body>
</html>
代码风格规范
格式书写规范
推荐展开格式：
css
.navbar {
display: flex;
justify-content: space-between;
padding: 1rem 2rem;
background-color: #333;
}开发建议
- 开发时使用展开格式便于维护
- 上线前通过构建工具自动压缩：
css
.navbar{display:flex;justify-content:space-between;...}样式大小写
强制规范：
- 选择器全小写：
.header而非.HEADER - 属性名全小写：
background-color而非BACKGROUND-COLOR - 属性值建议小写，颜色值除外：
#FFF可接受
空格与缩进
标准写法：
css
.selector {
margin: 0 auto;/* 属性值前空格 */
padding: 20px;/* 冒号后空格 */
}嵌套规则：
css
/* 推荐4空格缩进 */
.container {
width: 100%;
.item {/* SCSS/Less嵌套语法 */
float: left;
}
}绝对单位
单位换算表
| 单位 | 名称 | 换算关系 | 使用场景 |
|---|---|---|---|
| px | 像素 | 设备相关 | 最常用的基础单位 |
| in | 英寸 | 1in = 2.54cm = 96px | 打印样式 |
| cm | 厘米 | 1cm = 37.8px | 打印样式 |
| mm | 毫米 | 1mm = 0.1cm | 打印样式 |
| pt | 点/磅 | 1pt = 1/72in ≈ 1.33px | 字体大小(印刷) |
| pc | 派卡 | 1pc = 12pt | 印刷排版 |
注意事项
- 屏幕显示场景慎用物理单位(in/cm/mm)
- 打印媒体查询中可使用物理单位
- 1px在不同DPI设备上物理尺寸不同
相对单位
核心相对单位
1. 百分比 %
css
.container {
width: 80%; /* 相对于父元素宽度 */
line-height: 150%; /* 相对于当前字体大小 */
}2. em 单位
css
.text {
font-size: 1.2em; /* 相对于父元素字体大小 */
padding: 2em; /* 相对于当前元素字体大小 */
}3. rem 单位 (Root em)
css
html {
font-size: 16px; /* 基准值 */
}
.title {
font-size: 2rem; /* 始终=32px */
}相对单位对比
| 特性 | % | em | rem |
|---|---|---|---|
| 参照基准 | 父元素属性 | 父元素字号 | 根元素字号 |
| 计算方式 | 百分比 | 倍数 | 倍数 |
| 级联影响 | 是 | 是 | 否 |
| 适用场景 | 布局尺寸 | 局部调整 | 全局一致 |
视口单位 (Viewport Units)
视口单位类型
| 单位 | 描述 | 示例 |
|---|---|---|
| vw | 视口宽度的1% | width: 50vw → 视口50%宽 |
| vh | 视口高度的1% | height: 100vh → 满屏高 |
| vmin | vw和vh中较小的值 | font-size: 4vmin |
| vmax | vw和vh中较大的值 | padding: 2vmax |
css
.hero-section {
height: 100vh; /* 全屏高度 */
width: 80vw;/* 80%视口宽度 */
font-size: calc(1rem + 1vw); /* 响应式字体 */
}最佳实践补充
样式表引入方式
| 方式 | 示例 | 使用场景 |
|---|---|---|
| 行内样式 | <p style="color:red;"> | 极特殊情况 |
| 内部样式表 | <style>p{color:red;}</style> | 小型项目 |
| 外部样式表 | <link href="style.css"> | 推荐的主流方式 |