层叠样式表
简介
什么是CSS？
层叠样式表：Cascading Style Sheet
有什么作用？
HTML是页面的骨架，而CSS就是对网页骨架内容的修饰
为什么要使用？
样式和内容写在一起会显得非常臃肿，使用CSS可以将样式单独抽出来，可以提高开发效率。
CSS提供了很多HTML属性无法替代的显示效果。
单独抽离出来的CSS可以进行独立加载，能够实现多个页面共享，可以节约网络带宽，节约成本。
CSS引入方式
方式1：行内样式表
通过标签的style属性进行设置
方式2：内联样式表
通过style标签进行设置
方式3：外联样式表
通过link标签引用外部CSS文件
使用说明：
当设置的属性比较少，需要设置的地方也比较少，可以使用行内样式表
当样式只在一个页面内部使用，很多地方都需要相同的效果，可以使用内联样式表
当一个网站的多个页面需要相同的显示效果，可以使用外联样式表，哪里使用哪里引入即可。
CSS语法格式
样式要写在{}中
所有的样式都是以键值对的形式出现的
样式与值之间通过’:'进行连接
每个属性的结尾都要有一个分号，而且建议一行一个样式
注释：/* */
CSS文件中不要书写style标签
常用选择器
标签选择器：通过标签的名字进行选择
class选择器：通过class属性的值进行选择，语法：’.’
id选择器：通过id属性的值进行选择，语法：’#’
组合选择器：使用逗号隔开多个选择器选择的结果进行统一设置
层级选择器：通过一层一层的元素定位进行选择，多个层级之间使用空格隔开
属性选择器：根据元素的属性值进行选择
伪类选择器：通常用于标识标签的不同状态，如：a:link
通用选择器：使用’*'进行选择，会选中所有元素，尽量不用。
选择器的优先级
问题：当多种选择同时选择同一元素，并且设置同一属性时，请问以哪个为准？
答案：CSS中没有明确规定优先级，但是有一个大致的原则是定位越具体优先级越高。
参考：id > class > * > 默认属性
使用说明：
尽量避免使用多种方式同时修改样式
尽量避免多处同时修改同一标签的同一样式
优先级相同，后面的会覆盖前面的效果
如果还有优先级问题，可以使用chrome调试工具进行检查定位
尺寸及单位
说明：在HTML中可以不写单位，但是在CSS中必须书写。
单位：
px：像素，绝对单位
%：百分比，相对单位，相对于父级元素
em：相对于父级元素的倍数
rem：相对于HTML元素的倍数
width：宽度
height：高度
min-width：最小宽度
max-width：最大宽度
min-height：最小高度
max-height：最大高度
字体设置
font-style：normal(正常)、italic(斜体)
font-weight：normal(正常)、bold(加粗)
font-size：字体大小
font-family：字体族
font：简化的书写方案，可以进行一次性设置
顺序是固定的
font-size和font-family不能省略
如：font: italic bold 30px 宋体;
文本修饰
text-indent：缩进
overflow：超出容器的内容如何处理
text-decoration：文本横线的显示处理
text-align：水平对齐方式
line-height：行高，若设置为容器高度可以实现垂直居中
vertical-align：行级标签之间垂直对齐(top、bottom、middle)
背景设置
background-color：背景颜色
background-image：背景图片
background-repeat：背景图片的重复方式
background-position：背景图片的位置
background-attachement：附着方式
scroll：相对于元素固定
fixed：相对于窗体固定
local：相对于元素内容固定
background：简化书写
示例：background: url(bd_logo.png) no-repeat right top local;
列表设置
list-style-type：图标类型
list-style-position：图标位置
list-style-image：图标图片
list-style：简化书写方案
示例：list-style: circle outside url(qq.png);
定位相关
position：元素定位
static：静态，默认方式，四个偏移属性无效
relative：相对定位，相对于自身在文档流的位置
fixed：固定定位，相对于窗体定位
absolute：绝对定位，相对于最先定位的祖先元素进行定位，直到body
z-index：z方向的偏移，没有单位，值为一个数即可，值越大越靠上。
布局相关
float：浮动，left、right
clear：清除浮动，left、right、both
visibility：visible、hidden，隐藏时元素的位置会保留
display：
none，会隐藏元素，并且元素位置也没有了
block：块元素
inline：行元素
inline-block：行内块
盒子模型
尺寸：width、height
边框：border、border-radius
内边距：padding
外边距：margin，垂直方向会取较大值，水平方向会叠加
位置：
宽度 = width + 左右边框 + 左右内边距 + 左右外边距
高度 = height + 上下边框 + 上下内边距 + 上下外边距
—————————————
本帖为CSS概况分享，如有疑问请联系我。

层叠样式表
简介
什么是CSS？
层叠样式表：Cascading Style Sheet
有什么作用？
HTML是页面的骨架，而CSS就是对网页骨架内容的修饰
为什么要使用？
样式和内容写在一起会显得非常臃肿，使用CSS可以将样式单独抽出来，可以提高开发效率。
CSS提供了很多HTML属性无法替代的显示效果。
单独抽离出来的CSS可以进行独立加载，能够实现多个页面共享，可以节约网络带宽，节约成本。
CSS引入方式
方式1：行内样式表
通过标签的style属性进行设置
方式2：内联样式表
通过style标签进行设置
方式3：外联样式表
通过link标签引用外部CSS文件
使用说明：
当设置的属性比较少，需要设置的地方也比较少，可以使用行内样式表
当样式只在一个页面内部使用，很多地方都需要相同的效果，可以使用内联样式表
当一个网站的多个页面需要相同的显示效果，可以使用外联样式表，哪里使用哪里引入即可。
CSS语法格式
样式要写在{}中
所有的样式都是以键值对的形式出现的
样式与值之间通过’:'进行连接
每个属性的结尾都要有一个分号，而且建议一行一个样式
注释：/* */
CSS文件中不要书写style标签
常用选择器
标签选择器：通过标签的名字进行选择
class选择器：通过class属性的值进行选择，语法：’.’
id选择器：通过id属性的值进行选择，语法：’#’
组合选择器：使用逗号隔开多个选择器选择的结果进行统一设置
层级选择器：通过一层一层的元素定位进行选择，多个层级之间使用空格隔开
属性选择器：根据元素的属性值进行选择
伪类选择器：通常用于标识标签的不同状态，如：a:link
通用选择器：使用’*'进行选择，会选中所有元素，尽量不用。
选择器的优先级
问题：当多种选择同时选择同一元素，并且设置同一属性时，请问以哪个为准？
答案：CSS中没有明确规定优先级，但是有一个大致的原则是定位越具体优先级越高。
参考：id > class > * > 默认属性
使用说明：
尽量避免使用多种方式同时修改样式
尽量避免多处同时修改同一标签的同一样式
优先级相同，后面的会覆盖前面的效果
如果还有优先级问题，可以使用chrome调试工具进行检查定位
尺寸及单位
说明：在HTML中可以不写单位，但是在CSS中必须书写。
单位：
px：像素，绝对单位
%：百分比，相对单位，相对于父级元素
em：相对于父级元素的倍数
rem：相对于HTML元素的倍数
width：宽度
height：高度
min-width：最小宽度
max-width：最大宽度
min-height：最小高度
max-height：最大高度
字体设置
font-style：normal(正常)、italic(斜体)
font-weight：normal(正常)、bold(加粗)
font-size：字体大小
font-family：字体族
font：简化的书写方案，可以进行一次性设置
顺序是固定的
font-size和font-family不能省略
如：font: italic bold 30px 宋体;
文本修饰
text-indent：缩进
overflow：超出容器的内容如何处理
text-decoration：文本横线的显示处理
text-align：水平对齐方式
line-height：行高，若设置为容器高度可以实现垂直居中
vertical-align：行级标签之间垂直对齐(top、bottom、middle)
背景设置
background-color：背景颜色
background-image：背景图片
background-repeat：背景图片的重复方式
background-position：背景图片的位置
background-attachement：附着方式
scroll：相对于元素固定
fixed：相对于窗体固定
local：相对于元素内容固定
background：简化书写
示例：background: url(bd_logo.png) no-repeat right top local;
列表设置
list-style-type：图标类型
list-style-position：图标位置
list-style-image：图标图片
list-style：简化书写方案
示例：list-style: circle outside url(qq.png);
定位相关
position：元素定位
static：静态，默认方式，四个偏移属性无效
relative：相对定位，相对于自身在文档流的位置
fixed：固定定位，相对于窗体定位
absolute：绝对定位，相对于最先定位的祖先元素进行定位，直到body
z-index：z方向的偏移，没有单位，值为一个数即可，值越大越靠上。
布局相关
float：浮动，left、right
clear：清除浮动，left、right、both
visibility：visible、hidden，隐藏时元素的位置会保留
display：
none，会隐藏元素，并且元素位置也没有了
block：块元素
inline：行元素
inline-block：行内块
盒子模型
尺寸：width、height
边框：border、border-radius
内边距：padding
外边距：margin，垂直方向会取较大值，水平方向会叠加
位置：
宽度 = width + 左右边框 + 左右内边距 + 左右外边距
高度 = height + 上下边框 + 上下内边距 + 上下外边距
—————————————
本帖为CSS概况分享，如有疑问请联系我。