CSS

三种 CSS 引用方式

• 内联 CSS
• 内部 CSS
• 外部 CSS

CSS 语法

h1 {
	color:blue;
	text-align: center;
	font-size: 20px;
}

h1 是选择器部分，后续大括号内是声明块。其中分为三条样式，每条样式又是属性:值格式。

选择器

• 逗号列表选择器
• 后代选择器
• ID选择器
• 类选择器
• 伪类选择器
• 伪元素选择器
• 兄弟选择器 我们通常会用类选择器替代掉ID选择器，因为不确定未来会不会有需要同样样式的，而ID的唯一性导致以后需要大幅修改。

选择器优先级

定位模式

• 默认流动定位
• 绝对定位

常用 CSS 属性

文字属性

• 字体大小 font-size
• 字体 font-family
• 字体显示样式 font-style
• 转换文本为大写等 text-transform
• 颜色 color

段落属性

• 行高 line-height
• 对齐 text-align

格式化显示属性

列表

• 列表样式 list-style

盒子

盒子模型

• 背景颜色 background-color
• 边框 border
• 圆角边框 border-radius
• 填充 padding
• 边距 margin
• 更改盒子类型 display
• 更改盒子模型 box-sizing

图片

• filter 滤镜
• opacity 透明度

SVG图标

• SVG颜色 stroke

阴影

• 盒子阴影 box-shadow
• 文字阴影 text-shadow

常用 CSS 函数

• CSS函数 repeat

界面设计

CSS让整个网页内容居中 利用transform让绝对定位的元素居中

布局

• 浮动布局 FloatLayouts
• 弹性布局 FlexBox
• 网格布局 CSS-GRID

组件

一些成熟的组件和布局