【重识 HTML + CSS(1)-CFANZ编程社区

标签语义化

[](()基本 CSS 属性

----------------- 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源徽信搜索公众号【编程进阶路】 -----------------------------------------------------------

[【重识 HTML + CSS】基本 CSS 属性](()

CSS 简介

内联样式、文档样式表、外部样式表
@charset、@import
注释
HTML 和 CSS 的编写准则
设置网页的图标

常用 CSS 属性

初识 CSS
background-color、color、span 元素
div 元素
【练习】div、span
颜色

CSS 属性 - 文本

text-decoration 设置文字的装饰线
letter-spacing、word-spacing 设置间距
text-transform 设置大小写转换
text-indent 设置第一行的缩进
text-align 设置水平对齐方式

CSS 属性 - 字体

font-size 设置文字大小
font-family 设置文字的字体名称
@font-face 让网页支持网络字体
font-weight 设置文字的粗细
font-style 设置文字的常规、斜体显示
font-variant 设置小写字母的显示形式

[](()CSS 选择器

[【重识 HTML + CSS】CSS 选择器（1）](()

元素选择器 (type selectors)：div {}
通用选择器 (universal selector)：* {}
id 选择器 (id selectors)：#xxx {}
类选择器 (class selectors)：.xxx {}
【练习】类选择器实现多种按钮样式
属性选择器 (attribute selectors)
[att]
[[att=val]
[[attr~=val]
[[attr|=val]
[[attr^=val]
[[attr$=val]
[[attr*=val]
后代选择器 (descendant combinator)：div span {}
子选择器 (child combinators)：div>span {}
相邻兄弟选择器 (adjacent sibling combinator)：div+p
全体兄弟选择器 (general sibling combinator)：div~p
选择器组
交集选择器：div.one {}
并集选择器：div, .one, [title="test"] {}
【练习】让所有文本输入框的文字颜色都为红色
【练习】找到内容为 em2、em3、em4 的 em 元素

[【重识 HTML + CSS】CSS 选择器（2）](()

动态伪类：

a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上
a:active 激活的链接（鼠标在链接上长按住未松开）
a:focus 指当前拥有输入焦点的元素（能接收键盘输入）

目标伪类 :target 当元素被锚点链接当作目标跳转之后起作用

语言伪类 :lang

元素状态伪类：

:enabled 启用状态
:disabled 禁用状态
:checked 被选中状态

结构伪类：

:nth-child(an + b)
:nth-last-child(an + b)
:nth-of-type(an + b)
:nth-last-of-type(an + b)
:empty 代表里面完全空白的元素

否定伪类：:not(x)，x 为简单选择器

伪元素：

::first-line 可以针对首行文本设置属性
::first-letter 对首字母设置属性
::before 在元素内容之前插入其他内容
::after 在元素内容之后插入其他内容

[](()CSS 特性

[【重识 HTML + CSS】CSS 特性](()

CSS 属性的继承
CSS 属性的层叠
CSS 属性的优先级

!important > 内联样式 > id > class、属性、伪类 > 标签（元素）、伪元素 > 通用（*）

CSS 属性使用总结

[](()HTML 列表、表格、表单

[【重识 HTML + CSS】列表、表格、表单](()

列表

有序列表 ol、li
无序列表 ul、li
定义列表 dl、dt、dd
列表相关的 CSS 属性：list-style-type、list-style-image、list-style-position、list-style

表格

table 的常用属性
tr 的常用属性
th、td 的常用属性
细线表格的实现 border-collapse
表格的其他元素 tbody、caption、thead、tfoot、th
单元格的合并
CSS 属性 - border-spacing

表单

input 常用属性

布尔属性的概念

按钮 - input 和 button
label 绑定 input
radio
checkbox
隐藏域 (type=hidden)
select 和 option
fieldset 和 legend
form 的常用属性
get 和 post
表单练习 - 集成各种搜索引擎

[](()HTML 元素类型

[【重识 HTML + CSS】元素类型、display、visibility、overflow](()

元素类型

块级、行内级元素
替换、非替换元素
元素的分类总结

CSS 属性 - display

inline-block
练习 - 邮箱显示与选择
练习 - 分页跳转栏
display 的其他取值

CSS 属性 - visibility

CSS 属性 - overflow

细节：元素之间的空格

[](()盒子模型相关知识点

[【重识 HTML + CSS】盒子模型相关知识点](()

盒子模型 (Box Model)

宽度、高度相关 CSS 属性 - width、height

内边距相关 CSS 属性 - padding

外边距相关 CSS 属性 - margin

【常见问题】上下 margin 传递
【常见问题】上下 margin 折叠

border 边框

CSS 属性 - border-width、border-color、border-style
CSS 属性 - border-top、border-right、border-bottom、border-left、border
边框的形状 - 三角形、双色平分
行内级非替换元素的注意点
CSS 属性 - border-radius圆角

CSS 属性 - outline

CSS 属性 - box-shadow

CSS 属性 - text-shadow

CSS 属性 - box-sizing

元素的水平居中显示（行内级、块级、inline-block）

[](()Photoshop 简单使用

[【重识 HTML + CSS】Photoshop 简单使用](()

Photoshop 简介

常用功能、面板、设置
常用快捷键
矩形选框工具 (D)
裁剪工具、切片工具 ©
吸管工具 (I)
参考线
文字工具 (T)
移动工具 (V)

Photoshop 操作 - 切图

规则图形：矩形选择框工具
规则图形：切片工具
不规则图形：利用魔棒工具 + 矩形选择框

Photoshop 操作 - 测量

盒子模型属性：矩形选框工具
盒子模型属性：切片工具
文字测量：参考线 + 矩形选框工具

Photoshop 文件格式 - psd

[](()背景相关知识点

[【重识 HTML + CSS】背景相关知识点](()

CSS 属性 - background-image 设置元素背景图片
CSS 属性 - background-repeat 设置背景图片是否平铺
CSS 属性 - background-size 设置背景图片大小
CSS 属性 - background-position 设置背景图片具体位置
练习 - 滑动门技术
练习 - 大图适配
CSS Sprite（精灵图）
CSS 属性 - background-attachment
CSS 属性 - background

background-image 元素和 img 标签的选择

[](()定位相关知识点

[【重识 HTML + CSS】定位](()

标准流 (Normal Flow)

CSS 属性 - position

relative - 相对定位
static - 静态定位
fixed - 固定定位

画布 (Canvas) 和视口 (Viewport)

脱标元素的特点

absolute - 绝对定位
子绝父相
练习 - 蒙版
绝对定位技巧

元素的层叠

CSS属性 - z-index

[](()浮动相关知识点

[【重识 HTML + CSS】浮动](()

CSS 属性 - float