2022/7/8 10:31
「学习笔记」CSS基础
https://mp.weixin.qq.com/s/zhi3cSU0k4DlHLerta9XXQ
1/54
「学习笔记」CSS基础
收录于合集
#前端入门 4 #CSS基础 2
「学习笔记」CSS基础
前言
拖 延 了 一 周 的 C S S 学 习 笔 记 终 于 利 用 周 末 去 补 齐 了 ， 本 篇 文 章 着 重 梳 理 之 前 所 学 的 C S S 知 识
点 ， 查 漏 补 缺 。 同 时 ， 试 着 用 g i t 将 重 点 案 例 存 放 到 远 程 仓 库 中 ， 更 近 一 步 贴 近 公 司 流 程 。
💪
💪
CSS构造块
「 1 . HTML的局限性」
H T M L 满 足 不 了 设 计 者 的 需 求 ， 可 以 将 网 页 结 构 与 样 式 相 分 离 ， 这 样 就 可 以 在 不 更 改 网 页 结
构 的 前 提 下 ， 更 换 网 站 的 样 式 。
操 作 h t m l 属 性 不 方 便
H T M L 里 面 添 加 样 式 带 来 的 是 无 尽 的 臃 肿 和 繁 琐
「 2 . CSS网页的美容师」
饭老板 2020-09-14 16:30
原创
数据fan
2022/7/8 10:31
「学习笔记」CSS基础
https://mp.weixin.qq.com/s/zhi3cSU0k4DlHLerta9XXQ
2/54
让 我 们 的 网 页 更 加 丰 富 多 彩 ， 布 局 更 加 灵 活 自 如 。
C S S 最 大 的 贡 献 ： 让 H T M L 从 样 式 中 脱 离 ， 实 现 了 H T M L 专 注 去 做 结 构 呈 现 ， 样 式 交 给
C S S
「 3 . CSS」CSS(Cascading St y l e Sheets)通常称为CSS样式表或层叠样式表(级联样式
表 ) 。
作 用
主 要 用 于 设 置 H T M L 页 面 中 的 文 本 内 容 ( 字 体 、 大 小 、 对 齐 方 式 等 ) \ 图 片 的 外 形 ( 宽 高 、
边 框 样 式 、 边 距 等 ) 以 及 版 面 的 布 局 和 外 观 显 示 样 式 。
C S S 以 H T M L 为 基 础 ， 提 供 了 丰 富 的 功 能 ， 如 字 体 、 样 式 、 背 景 的 控 制 及 整 体 排 版
等 ， 而 且 可 以 针 对 不 同 的 浏 览 器 设 置 不 同 的 样 式 。
「 4 . CSS注释」
/ * 这 是 注 释 * /
引入CSS样式表
「 1 . 行 内 式 ( 内 联 样 式 ) 」
通 过 标 签 的 s t y l e 属 性 来 设 置 元 素 的 样 式
s t y l e 其 实 就 是 标 签 的 属 性
样 式 属 性 和 值 中 间 是 :
多 组 属 性 值 直 接 用 ; 隔 开
只 能 控 制 当 前 的 标 签 和 以 及 嵌 套 在 其 中 的 字 标 签 ， 造 成 代 码 冗 余 。
缺 点 : 没 有 实 现 样 式 和 结 构 相 分 离 。
< 标 签 名 s t y l e = " 属 性 1 : 属 性 值 1 ; 属 性 2 : 属 性 值 2 ; 属 性 3 : 属 性 值 3 ; " > 内 容 < / 标 签 名 >
例 如 ：
< d i v s t y l e = " c o l o r : r e d ; f o n t - s i z e : 1 2 p x ; " > 青 春 不 常 在 ， 抓 紧 谈 恋 爱 < / d i v >
「 2 . 内 部 样 式 表 ( 内 嵌 样 式 表 ) 」
也 称 为 内 嵌 式 ， 将 C S S 代 码 集 中 写 在 H T M L 文 档 的 h e a d 头 部 标 签 中 ， 并 且 用 s t y l e 标 签 定
义 。
2022/7/8 10:31
「学习笔记」CSS基础
https://mp.weixin.qq.com/s/zhi3cSU0k4DlHLerta9XXQ
3/54
s t y l e 标 签 一 般 位 于 h e a d 标 签 中 ， 当 然 理 论 上 他 可 以 放 在 H T M L 文 档 的 任 何 地 方 。
t y p e = " text/css" 在html5中可以省略。
只 能 控 制 当 前 的 页 面
缺 点 : 没 有 彻 底 分 离 结 构 与 样 式
< h e a d >
< s t y l e t y p e = " t e x t / C S S " >
选 择 器 （ 选 择 的 标 签 ） {
属 性 1 : 属 性 值 1 ;
属 性 2 : 属 性 值 2 ;
属 性 3 : 属 性 值 3 ;
}
< / s t y l e >
< / h e a d >
「 3 . 外 部 样 式 表 ( 外 链 式 ) 」
也 称 链 入 式 ， 是 将 所 有 的 样 式 放 在 一 个 或 多 个 以 . c s s 为 扩 展 名 的 外 部 样 式 表 文 件 中 ， 通 过 l i n k
标 签 将 外 部 样 式 表 文 件 链 接 到 H T M L 文 档 中 。
r e l : 定 义 当 前 文 档 与 被 链 接 文 档 之 间 的 关 系 ， 在 这 里 需 要 指 定 为 “stylesheet”，表示
被 链 接 的 文 档 是 一 个 样 式 表 文 件 。
h r e f : 定 义 所 链 接 外 部 样 式 表 文 件 的 U R L ， 可 以 是 相 对 路 径 ， 也 可 以 是 绝 对 路 径 。
< l i n k r e l = " s t y l e s h e e t " h r e f = " i n d e x . c s s " >
「 4 . 团 队 约 定 - 代 码 风 格 」
/ * 1 . 紧 凑 格 式 ( C o m p a c t ) * /
h 3 { c o l o r : d e e p p i n k ; f o n t - s i z e : 2 0 p x ; }
/ / 2 . 一 种 是 展 开 格 式 （ 推 荐 ）
h 3 {
c o l o r : d e e p p i n k ;
f o n t - s i z e : 2 0 p x ;
}
/ * 团 队 约 定 - 代 码 大 小 写 * /
/ * 样 式 选 择 器 ， 属 性 名 ， 属 性 值 关 键 字 全 部 使 用 小 写 字 母 书 写 ， 属 性 字 符 串 允 许 使 用 大 小 写 。 * /
/ * 推 荐 * /
h 3 {
2022/7/8 10:31
「学习笔记」CSS基础
https://mp.weixin.qq.com/s/zhi3cSU0k4DlHLerta9XXQ
4/54
h 3 {
c o l o r : p i n k ;
}
/ * 不 推 荐 * /
H 3 {
C O L O R : P I N K ;
}
CSS基础选择器
CSS选择器作用
找 到 指 定 的 H T M L 页 面 元 素 ， 选 择 标 签 。
CSS基础选择器
「 1 . 标签选择器」
标 签 选 择 器 （ 元 素 选 择 器 ） 是 指 用 H T M L 标 签 名 称 作 为 选 择 器 ， 按 标 签 名 称 分 类 ， 为 页 面
中 某 一 类 标 签 指 定 统 一 的 C S S 样 式 。
作 用 ： 可 以 把 某 一 类 标 签 全 部 选 择 出 来 。
优 点 ： 快 速 为 网 页 中 同 类 型 的 标 签 统 一 样 式
缺 点 ： 不 能 设 计 差 异 化 样 式 。
标 签 名 { 属 性 1 : 属 性 值 1 ; 属 性 2 : 属 性 值 2 ; 属 性 3 : 属 性 值 3 ; }
「 2 . 类选择器」
类 选 择 器 使 用 " . " ( 英 文 点 号 ) 进 行 标 识 ， 后 面 紧 跟 类 名 。
语 法 ： 类 名 选 择 器
. 类 名 {
属 性 1 : 属 性 值 1 ;
属 性 2 : 属 性 值 2 ;
属 性 3 : 属 性 值 3 ;
}
< l ' 类 名 ' > < / >
2022/7/8 10:31
「学习笔记」CSS基础
https://mp.weixin.qq.com/s/zhi3cSU0k4DlHLerta9XXQ
5/54
< p c l a s s = ' 类 名 ' > < / p >
优 点 ： 可 以 为 元 素 对 象 定 义 单 独 或 相 同 的 样 式 。 可 以 选 择 一 个 或 者 多 个 标 签 。
注 意 ： 类 选 择 器 使 用 “.” （ 英 文 点 号 ） 进 行 标 识 ， 后 面 紧 跟 类 名 ( 自 定 义 ， 我 们 自 己 命 名
的 )
长 名 称 或 词 组 可 以 使 用 中 横 线 来 为 选 择 器 命 名 。
不 要 纯 数 字 、 中 文 等 命 名 ， 尽 量 使 用 英 文 字 母 来 表 示 。
多 类 名 选 择 器 ： 各 个 类 名 中 间 用 空 格 隔 开 。
「 3 . id选择器」id选择器使用 # 进 行 标 识 ， 后 面 紧 跟 i d 名
元 素 的 i d 值 是 唯 一 的 ， 只 能 对 应 于 文 档 中 某 一 个 具 体 的 元 素 。
# i d 名 { 属 性 1 : 属 性 值 1 ; 属 性 2 : 属 性 值 2 ; 属 性 3 : 属 性 值 3 ; }
< p i d = " i d 名 " > < / p >
「 4 . 通配符选择器」
通 配 符 选 择 器 用 * 号 表 示 ， * 就 是 选 择 所 有 的 标 签 。 它 是 所 有 选 择 器 中 作 用 范 围 最 广 的 ， 能
匹 配 页 面 中 所 有 的 元 素 。
注 意 ： 会 匹 配 页 面 所 有 的 元 素 ， 降 低 页 面 响 应 速 度 ， 不 建 议 随 便 使 用
* { 属 性 1 : 属 性 值 1 ; 属 性 2 : 属 性 值 2 ; 属 性 3 : 属 性 值 3 ; }
例 如 下 面 代 码 ， 使 用 通 配 符 选 择 器 定 义 C S S 样 式 ， 清 除 所 有 H T M L 标 记 的 默 认 边 距 。
* {
m a r g i n : 0 ; / * 定 义 外 边 距 * /
p a d d i n g : 0 ; / * 定 义 内 边 距 * /
}
「 5 . 基础选择器总结」
选 择 器 作 用 缺 点 使 用 情 况 用 法
评论0