CSS 简介

CSS语法

CSS Id 和 Class选择器

    id 选择器

    class 选择器

CSS 创建

    外部样式表

    内部样式表

    内联样式

CSS多重样式和优先级

    示例1：外部样式

    示例2：内部样式（多重样式）

    示例3：外部链接样式和内部样式顺序对掉

CSS Backgrounds(背景)

    background-color背景颜色

    background-image背景图像

    background-repeat背景图像水平或垂直平铺

    background-attachment 属性

    background-position 背景图像定位

CSS Text(文本)

    文本颜色color 属性

    文本方向 direction属性

    字符间距 letter-spacing属性

    行高 line-height属性

    文本对齐 text-align属性

    文本修饰 text-decoration属性

    文本缩进 text-indent

    文本的大小写 text-transform

    文本是否被重写 unicode-bidi

    元素垂直对齐 vertical-align

    元素中空白的处理方式 white-space

    设置单词间距 word-spacing

CSS Fonts(字体)

    字体系列 font-family 属性

    字体样式 font-style属性

    字体大小 font-size 属性

    小型大写字体 font-variant属性

    字体粗细 font-weight

    所有的字体 font属性

CSS 链接 a标签样式

    示例：添加不同样式的超链接

    示例：高级 - 创建链接框

CSS 列表样式(ul)

    列表项标记图像 list-style-image 属性

    列表项目标记位置 list-style-position属性

    列表项标记的类型 list-style-type属性

    所有列表list-style属性

CSS Table(表格)

    表格边框

    折叠边框

    表格宽度和高度

    表格文字对齐

    表格填充

    表格颜色

CSS 盒子模型(Box Model)

CSS Border(边框)

    边框样式 border-style

    边框宽度 border-width

    边框颜色 border-color

    边框 border 简写属性

    下边框样式 border-bottom

    下边框颜色 border-bottom-color

    下边框样式 border-bottom-style

    下边框宽度 border-bottom-width

    其他几个边框样式

CSS 轮廓（outline）属性

    轮廓颜色outline-color

    轮廓样式 outline-style

    轮廓宽度 outline-width

    简写属性outline

CSS margin(外边距)

    元素下外边距 margin-bottom

    元素左外边距 margin-left

    外边距简写属性 margin

CSS padding（填充）

    元素底部填充 padding-bottom

    所有填充属性 padding

CSS 分组和嵌套

CSS 尺寸 (Dimension)

    Height和Width 属性

    line-height

    max-width和max-height 属性

    min-height 和min-width属性

CSS Display(显示)

    实例：把列表项显示为内联元素

    实例：把span元素作为块元素

CSS Position(定位)

    static 定位

    fixed 定位

    relative 定位

    absolute 定位

    sticky 定位

    重叠的元素

CSS Overflow

    实例：溢出

    实例：滚动

CSS Float（浮动）

    清除浮动 - clear

CSS 组合选择符

    后代选择器

    子元素选择器

    相邻兄弟选择器

    普通兄弟选择器

CSS 伪元素

元素居中对齐 margin: auto

文本居中对齐 text-align: center

图片居中对齐 margin: auto

左右对齐 - 使用定位方式position: absolute

左右对齐 - 使用 float 方式

垂直居中对齐 - 使用 padding

垂直居中 - 使用 line-height