HTML 管"有什么",CSS 管"长什么样"。颜色、字体、间距、圆角、阴影都靠它。这一关学完,你能把一页素净的文字改成好看的卡片样式。
3.1 CSS 是什么
CSS 的规则长这样:先说"改谁"(选择器),再说"改成什么样"(属性 : 值)。
h1 { /* 选择器:改谁 */
color: royalblue; /* 属性:值 —— 字变蓝 */
font-size: 32px; /* 字号 32 像素 */
}读法:让所有 h1 的文字变成皇家蓝、字号 32 像素。花括号里可以写多条"属性:值;",每条以分号结尾。
3.2 三种引入方式
把 CSS 挂到 HTML 上有三种办法,实际项目几乎都用第一种:
| 方式 | 怎么写 | 什么时候用 |
|---|---|---|
| 外链(推荐) | <link rel="stylesheet" href="style.css"> 放在 head 里 | 正式项目,样式集中、可复用 |
| 内部样式 | head 里写 <style> ... </style> | 单页小 demo、临时测试 |
| 行内样式 | 标签里 style="color:red" | 偶尔改一个元素,不推荐大量用 |
养成"结构与样式分离"的习惯:HTML 文件管内容,单独的 style.css 管长相。下面的在线练习帮你把 <style> 内联好了,你在 CSS 区写就行。
3.3 选择器:精准选中要改的元素
三个最常用的选择器,优先级从低到高:
标签选择器
p { }
直接写标签名,选中页面上所有该标签。
类选择器(最常用)
.card { }
前面加圆点。给标签加 class="card" 就被选中,可复用。
ID 选择器
#header { }
前面加井号。对应 id="header",一页里一个 id 只能用一个。
<p class="note">这段会变灰</p> <!-- HTML -->
.note { color: gray; } /* CSS:. 代表 class */当一个元素被多条规则同时命中,更"具体"的赢:#id > .class > 标签。这叫优先级(权重)。
3.4 颜色与字体
颜色有三种常见写法,效果一样:
color: red; /* 1. 英文颜色名 */
color: #ff0000; /* 2. 十六进制(最常用) */
color: rgb(255,0,0); /* 3. 红绿蓝数值 */
background: aliceblue; /* 背景色 */字体相关最常用这几个属性:
font-family:字体,"PingFang SC", "Microsoft YaHei", sans-serif是中文网页常见组合。font-size:字号;font-weight:粗细(bold或700)。line-height:行高,数字越大行间距越松;text-align:center居中等。
3.5 盒模型:内容 + 内边距 + 边框 + 外边距
CSS 里每个元素都被想象成一个"盒子",从内到外四层:
.card {
padding: 16px; /* 内边距:内容与边框的距离 */
border: 2px solid #ddd; /* 边框:粗细 样式 颜色 */
margin: 20px; /* 外边距:盒子与外面元素的距离 */
}📦 一图记住
想加"内容到框里的距离"用 padding,想加"这个盒子离别的盒子的距离"用 margin。
padding 和 border 会把盒子"撑大"。加上 box-sizing: border-box; 后,设的宽度就包含了内边距和边框,排版更省心——这是现代写法。
3.6 圆角与阴影:高级感两步到位
让方块变卡片,靠的就是这两招:
.card {
border-radius: 12px; /* 圆角 */
box-shadow: 0 4px 12px rgba(0,0,0,.1); /* 右移 下移 模糊 颜色 */
}border-radius:数字越大角越圆;给正方形设50%就变圆。box-shadow:四个值依次是 水平偏移 垂直偏移 模糊半径 颜色。rgba(...,.1)里的.1是透明度,阴影淡淡的更好看。
3.7 常用单位:px、%、rem、em、vw/vh
| 单位 | 含义 | 典型用途 |
|---|---|---|
px | 固定像素 | 边框、精确尺寸 |
% | 相对父元素的百分比 | 宽度自适应 |
rem | 相对根字号(通常 16px) | 字号、间距,便于整体缩放 |
vw / vh | 视口宽/高的 1% | 整屏高度用 100vh |
新手先用 px 练手,做响应式时会转向 %、rem、vh。
✏️ 动手练一练
左边有 HTML 和 CSS 两个标签页,右边是实时预览。改 CSS 里的数值,看卡片立刻变样。
- 给
.card的background换成你喜欢的颜色。 - 把
padding改成28px,让内容不那么挤。 - 把
border-radius改成20px,box-shadow试着调大模糊值。 - 把
h2的color换个颜色,再给.card加text-align: center;。
border-radius 改成 50px 会怎样?📝 随堂小测
Q1 想选中 class="box" 的元素,CSS 选择器应该怎么写?
类选择器前面加圆点 .;# 是给 id 用的,不带符号是标签选择器。
Q2 想让"内容和边框之间"留出距离,应该用哪个属性?
padding 是内边距(内容到边框),margin 是外边距(盒子到外面元素)。
Q3 把方方正正的盒子变成圆角,用哪个属性?
border-radius 数值越大越圆;设 50% 可变圆形。
Q4 正式项目里,把样式集中管理、推荐用的引入方式是?
外链 <link rel="stylesheet"> 让结构与样式分离,可复用、好维护。