CSS3笔记
1. CSS 引入方式
- 行内式：直接写在标签
style=""内（优先级高，不推荐大量使用） - 嵌入式：在 HTML 的
<head>里写<style>...</style> - 外部式：通过
<link rel="stylesheet" href="...">引入（推荐）
1.1 样式优先级（同权重冲突时）
行内式 > 嵌入式 > 外部式
另外还受选择器权重（specificity）和
!important影响（见下文）。
2. link 标签补充：rel/type
rel：当前文档与外部资源的关系- 常见：
stylesheet（引入样式表） - 其他（了解即可）：
icon、preload、prefetch、nofollow、canonical等
- 常见：
type：外部资源 MIME 类型，例如text/css
3. 选择器（Selectors）
统一格式：
选择器{属性名:属性值;}3.1 基础选择器
3.1.1 元素（标签）选择器
- 用于修改某类标签的共有样式
p{color:red;}3.1.2id选择器
#id，一个页面中同名 id 不应重复
<divid="one">id选择器</div>#one{color:red;}3.1.3 class（类）选择器
.类名，可复用，可给多个元素设置同一类样式
<divclass="one">类选择器</div>.one{color:red;}3.2 高级选择器
3.2.1 后代选择器（空格）
- 选择“某元素内部的所有某类后代”
div a{/* div 里面所有 a */}3.2.2 子代选择器（>）
- 只选择“亲儿子”，不包含更深层后代
.wrap > a{/* 只选 wrap 的直接子元素 a */}3.2.3 组合选择器（分组选择器）
- 多个选择器用逗号分隔，共用一套样式
h3, span{color:red;}3.2.4 交集选择器（同时满足）
- 写法：
选择器1选择器2（中间不加空格） - 若包含标签选择器：标签要写在最前面
div.one{/* 同时满足：div 且 class=one */}3.2.5 并集选择器
- 与“组合选择器/分组选择器”含义一致：
选择器1, 选择器2 {}
3.3 伪类选择器（Pseudo-classes）
3.3.1 a 标签常用：爱恨准则 LoVe HAte
a:link{color:orange;/* 未访问 */}a:visited{color:green;/* 已访问 */}a:hover{color:black;/* 悬停 */}a:active{color:purple;/* 按下 */}3.3.2 组合用法示例
div:hover span{/* 悬停 div 时，改变 div 内 span */}4. CSS 特性
4.1 继承性
- 子元素会继承部分父元素的样式（如
color、font-*） - 但有些不会继承（例如
border）
4.2 权重（Specificity）
从高到低：
- 行内样式：
1000 #id：100.class/:伪类：10- 元素（标签）：
1
!important：强行提升优先级（不建议滥用，会破坏维护性）
5. 字体与文本属性
5.1 字体
font-family：字体（建议写备用字体）font-size：字号（常用px，也可em/rem）
body{font-family:"Microsoft YaHei",Arial,sans-serif;font-size:16px;}5.2 颜色 color
- 关键字：
red rgb(r,g,b)：0~255rgba(r,g,b,a)：a 为透明度- 十六进制：
#FF5459
5.3 字体样式
font-style: normal | italicfont-weight: 100~900（400常视为 normal）
你原文写的
text-weight应为font-weight。
5.4 文本装饰
text-decoration: none | underline | overline | line-through
你原文里
line-throngh应为line-through。
5.5 缩进、行高、间距
text-indent：首行缩进（1em通常约等于一个字宽）line-height：行高（一般行高 > 字号）letter-spacing：字间距（中文常用）word-spacing：词间距（英文常用）
5.6 对齐
text-align: left | center | right
text-align处理的是“行内内容在容器中的水平对齐”。
6. 元素显示类型
- 块级元素：
div/ul/ol/p/h1~h6/table/form ...- 独占一行，可设置宽高（默认宽度常为 100%）
- 行内元素：
a/span/em/label/strong ...- 同行显示，通常不能直接设置宽高（由内容撑开）
- 行内块：
input/img ...- 同行显示，也可以设置宽高
7. 盒模型（Box Model）
组成（由内到外）：
- 内容区：
width / height - 内边距：
padding - 边框：
border - 外边距：
margin
7.1 padding（内边距）
- 单独方向：
padding-top/right/bottom/left - 简写：
- 2 个值：
padding: 上下 左右; - 3 个值：
padding: 上 左右 下; - 4 个值：
padding: 上 右 下 左;
- 2 个值：
7.2 margin（外边距）
- 水平方向：相邻盒子左右 margin 相加
- 垂直方向：可能出现外边距塌陷/合并（尽量只设置一个方向的 margin 或用 padding/边框等方式隔开）
7.3 border（边框）
border:1px solid red;三要素：
border-widthborder-style：solid | dotted | double | dashedborder-color
8. 清除默认样式（Reset 思路）
body, p, ul, ol, dl, dt{margin:0;padding:0;}ul, ol{list-style:none;}input{border:none;outline:none;}a{text-decoration:none;}9. 盒子水平居中
- 常用：
margin: 0 auto;（需要元素是块级且有明确宽度更直观）
.box{width:300px;margin:0 auto;}10. 浮动 float（早期布局方式）
10.1 取值
float: none;（默认）float: left;float: right;float: inherit;
10.2 常见用途
- 文字环绕：例如图片左浮动后，文字围绕图片排版
- 多列布局：多个盒子一起浮动实现并排
10.3 浮动现象/副作用
- 脱离标准文档流
- 浮动元素相互贴靠
- 可能出现“父元素高度塌陷”等问题（需要清除浮动）
你这份笔记目前到“浮动现象”结束；如果你后面还有“清除浮动”的内容，也可以继续补进来，我再一起整理。