定义：cascading Style sheet 层叠样式表、级联样式表、样式表
使用css的好处
将内容与表现分离
提高了代码的可重用性与可维护性
css与HTML的关系
html主要用于构建网页结构与内容
css用于构建网页的样式
html属性与css的使用
能使用css修改的样式就不要使用html属性，html特有的属性只能使用html 属性；例如：colspan..
css样式表的分类
内联样式
在html标签中使用的css样式
内部样式表
将样式表定义在html文件的head中
外部样式表
将样式表定义在外部css文件中，在html页面进行引入
css样式表的使用
内联样式
使用方法：将样式定义在标签的style属性中
css语法：
允许出现一个或多个 属性：值
<div style="color：red;</div>
内部样式表
使用方法：
在html页面的head中，添加一对<style></style>标签
在style中书写以选择器{样式声明（属性：值）}的格式进行定义css样式
外部样式表
使用方法：
创建.css文件
在html页面的head中进行引入
<link rel="stylesheet" type="text/css" href="样式表文件的路径">
css注释
/注释的内容/
语法规范
样式语法总结
内联：样式声明
样式表（内外）：多个样式规则组成
css样式表的特征
1.继承性
大多数样式规则可以被继承
2.层叠性
为一个元素定义多个样式，样式属性不冲突时，多个样式可以层叠为一个
优先级
样式定义冲突时，按照不同的样式规则的优先级来应用样式
内联样式优先级最高，相同样式以最后一次为主
外部样式表或内部样式表优先级中等
就近原则：就近优先
！important:调整样式规则的优先级，优先级最高，在值的后面添加（color：“red” !important）
选择器
作用：规范了页面中哪些元素能够使用定义好的样式
分类
通用选择器：
作用：匹配页面上的所有元素
语法：*{}
元素（标签、标记）选择器
作用：匹配页面上指定的元素
语法：元素名称{}
类选择器
作用：通过元素的clss属性值，对类选择器进行引用
语法：.类名{}#类名不能以数字开头
分类选择器
作用：将类选择器和元素选择器结合使用，实现对某种元素中不同样式的细分控制
语法：元素选择器.类选择器{}
id选择器
作用：主要配合元素的id属性一起来使用，为指定id值的元素去定义样式
语法：#idvalue{}
后代选择器
作用：根据元素所在的上下级的关系来定义元素的样式，通常用在选择某个元素的后 代元素时使用
语法：选择器1 选择器2{}
群组选择器
作用：选择器的声明以逗号隔开的选择器列表
语法：h1,h2,p,span,#footer{}
子代选择器
作用：根据元素所在的上下级的关系来定义元素的样式，要求选择器之间只能存在父 子关系，即只有一层上下级关系。目的是缩小范围
语法：选择器1>选择器2
伪类选择器
作用：匹配元素的不同的状态
分类：
链接伪类
语法：
：link，定义尚未访问的链接的样式
：visited，定义访问过的链接的样式
示例：a:link{} a:visited{}
动态伪类
语法：
：hover,定义鼠标悬停在html元素上时的样式
：active，定义元素被激活时的状态
：focus，定义html元素获取焦点时的样式（多用在文本框、密码框）
目标伪类
元素状态伪类
结构伪类
否定伪类
尺寸
用于设置元素的宽度和高度
单位一般为 px 或 %
属性
宽度width
max-width:最大宽度
min-width：最小宽度
max-width和min-width与width相冲突。块级元素宽度默认为100%，如果一旦设置，以设置的为主
高度height
max-height 最大高度
min-height 最小高度
max-height，min-height 以 height 相冲突。块级元素默认没有高度，自适应,行内元素高度，以当前元素 字体大小高度为主
注意：如果使用 width 或 height 去限制元素大小的话，如果元素中的内容的宽 或 高 大于了元素本身的宽和高的话，那么就会导致内容溢出
溢出处理
属性：overflow
overflow-x : 横向溢出处理方式 overflow-y : 纵向溢出处理方式
取值
visible : 默认值，溢出正常显示 hidden : 溢出隐藏 scroll : 滚动，让元素显示滚动条，溢出时，滚动条可用 auto : 自动处理，元素溢出则显示滚动条，否则则不显示滚动条
注意
页面中所有的行内元素，默认情况下是不允许修改尺寸的
边框
简写方式（四个边框同一风格）
border：width style color
width:边框宽度，px为单位的数值 style:边框样式，solid 实线 ， dotted 虚线，dashed 虚线 color:颜色 ， rgb() , #rrggbb
单边定义
border-left/right/top/bottom:width style color;
定义边框宽度
四个边框宽度: border-width : width; 单边框宽度: border-left/right/top/bottom-width
定义边框样式
border-style: border-left/right/top/bottom-style:
颜色
border-color: border-left/right/top/bottom-color
颜色取值可以为 transparent，用于创建有宽度的不可见边框
边框倒角
将边框的直角倒成圆角
属性：border-radius
取值：数量 1个值或4个值 单位为具体数值或百分比
单独定义：
border-top-left-radius:左上角 border-top-right-radius:右上角 border-bottom-left-radius:左下角 border-bottom-right-radius:右下角
边框阴影
属性：box-shadow
取值：由多个属性值组成的值列表
h-shadow : 必须，阴影的水平位置,值为正，向右偏移，值为负，向左偏移 v-shadow : 必须，阴影的垂直位置,值为正，向下偏移，值为负，向上偏移 blur : 可选 ，模糊距离 spread : 可选，阴影的尺寸 color : 可选，颜色 inset : 可选，将默认的外部阴影，改为内阴影 常用操作： box-shadow:h-shadow v-shadow blur color;
box-shadow:0px 0px 1px #ddd;#模拟边框发光的效果
轮廓
绘制于元素周围的一条线，位于边框之外 语法：
outline:width style color;
outline-width: outline-style: outline-color:
框模型
框即页面上所有的元素
框模型（Box Model）,又称为盒子模型，定义框，处理元素内容、内边距、外边距、边框的样式
元素的实际的宽：左右的内外边距+左右边框+宽度
外边距margin
属性：margin margin-left margin-right margin-top margin-bottom
取值：px % 负值 auto
margin取值：
margin：value；四个方向的外边距
margin：value1 value2 ;上下 左右
margin：v1 v2 v3 ; 上 左右 下
margin：v1 v2 v3 v4;上 右 下 左
margin：0 auto #当前块级元素水平居中显示
注意：
1.一些块级元素（body，p,h1~h6），默认存在外边距，不想要的时候，设置为margin：0px就可以了
2. 当两个垂直外边距相遇时，将会合成一个外边距，最终外边距的值取两者中最大的那个
3.给子元素设置margin-top，默认会被识别成父元素的margin-top
解决方案：
1.给父元素加边框（border：1px solid transparent）
2.给父元素设置上内边距（padding-top）,同时整体高度减去padding-top的值
内边距 padding
内容区域与边框之间的空白，内边距会扩大元素边框所占用的区域
属性：padding padding-left/right/top/bottom
取值：
px %
padding取值：
padding：value；上下左右的内边距
padding：value1 value2 ;上下 左右
padding：v1 v2 v3 ; 上 左右 下
padding：v1 v2 v3 v4;上 右 下 左
背景颜色
属性：background-color
取值：
合法颜色值
transparent 透明色
背景图片
属性：
background-image
取值：
url(图像的路径)
background-image：url()
背景重复
默认情况，背景图会在水平和垂直两个方向都出现重复的效果（平铺）
属性：background-repeat
取值：
repeat：默认值 水平垂直平铺
repeat-x:水平平铺
repeat-y:垂直平铺
repeat：no-repeat
背景图片尺寸
属性：background-size
取值：
value1 value2 宽度 高度
value1% value2%
cover： 把背景图片扩展至足够大，以便背景图像完全覆盖背景区域，图片的某些部分也许无法显示
contain:把背景图像扩展至最大尺寸，以便其宽度和高度完全适应内容区域
背景图片的固定
属性：background-attachment
取值：
scroll 滚动 默认值
fixed 背景图片固定
背景定位
改变背景图像在元素中的位置
属性：background-position
取值：
x y:
x表示水平方向移动的距离 +向右 - 向左
y表示垂直方向移动的距离 +向下 - 向上
x% y%：
0% 0%：显示在元素的左上方
100% 100%：显示在元素的右下方
50% 50% ：居中
left：靠左
center：水平或垂直方向的中间
top：靠上
bottom：靠下
背景属性
属性：background
取值：color url() repeat attachment position
常用方式：url（） repeat position
示例：background：url（） no-repeat -243px -122px
什么是渐变
两种或多种颜色之间的平滑过渡的效果，任何使用背景图片的地方都可以使用渐变
渐变分类
线性渐变、径向渐变、重复渐变
渐变的语法
属性：background-image
取值：
url() : 显示背景图 linear-gradient() : 线性渐变 radial-gradient() : 径向渐变 repeating-linear-gradient() : 重复线性渐变 repeating-radial-gradient() : 重复径向渐变
渐变的具体实现
线性渐变 background-image:linear-gradient(angle,color-point1,color-point2,color-point3 ... ); angle : 角度 或 方向。 取值： to top / (0deg) : 从下向上显示 to bottom / (180deg) : 从上向下显示 to left / (270deg) : 从右向左显示 to right / (90deg) : 从左向右显示 color-point : 颜色点，表示颜色的起始点、中间点以及结束点 取值：颜色值 位置; ed 0%
background-image:linear-gradient(to top,red 0%,green 50%,blue 100%);
径向渐变 radial-gradient([size at position],color-point1,color-point2,....);
size at position : 可以不写的。 size : 径向的圆的半径 position ：圆心所在位置，默认为元素的中间位置处 取值： x y ： 以元素的左上角为 0 0 x% y% ：以元素的宽和高的占比设置圆心位置 top left bottom right center
重复渐变 repeating-linear-gradient() repeating-radial-gradient()
浏览器兼容性
大部分浏览器的主流版本 均支持渐变属性
对于不支持的版本: Firefox : 添加前缀 -moz- Chrome 和 Safari : 添加前缀 -webkit- Opera : 添加前缀 -o- IE : 添加前缀 -ms-
background-image:linear-gradient(); background-image:-moz-linear-gradient();/火狐/ background-image:-webkit-linear-gradient();/Chrome Safari/ background-image:-o-linear-gradient();/Opera/
字体属性
指定字体
font-family：value
字体大小
font-size:value;
当字体设置为一定数值时，则每个字符在页面的宽度和高度都是设置的值
字体加粗
font-weight:normal / bold / value;
字体样式
font-style:normal / italic（倾斜）;
小型大写字母
font-variant : normal / small-caps;
字体属性
font:style variant weight size family; font:bold 12px "微软雅黑";
文本格式
文本颜色
color：value
水平对齐
text-align：left/right/center
文字修饰
text-decoration：none\underline\line-through
行高
line-height：value 一行数据的高度
若行高比文本的大小大的话，文本将在此空间中垂直居中显示
首行文本缩进
text-indent：value
文本阴影
text-shadow：h-shadow v-shadow blor
表格的常用样式属性
边距属性：padding
尺寸属性：width、height 设置表格和单元格的尺寸
border：设置表格的边框
垂直对齐方式：vertical-align：top\middle\bottom(用于td内的内容)
表格中特有的属性
边框合并（将table和td的边框合并在一起）
属性：border-collapse
取值：
separate 默认值 分离边框
collapse 合并
边框的边距
属性：border-spacing 设置相邻单元格之间的边框距离
注意：仅在border-collapse：separate时有效
取值：一个值，表示水平和垂直相同的间距
两个值，一个表示水平，一个表示垂直
显示的规则（自动表格布局）
定义表格布局方式
属性：table-layout
取值：
auto 列宽度由内容决定，默认值
fixed 列宽度由设置的值来决定
定位的概述
定义：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
分类
普通流定位 、浮动定位、相对定位、绝对定位
浮动的具体解析
普通流定位，又称文档流定位
块级元素从上到下一个一个的排列
行内元素一行内从左到右的排列
浮动定位
定义：将元素排除在普通流之外，即脱离文档流
特点：
浮动的元素不占据页面的空间；
浮动元素会放置在包含框（父级元素）的左边或右边；
浮动后依然在包含框内
非块级元素浮动的话，会变成块级元素，允许修改宽和高
块级元素浮动后，宽度将变成自适应
浮动元素可以向左或向右浮动，直到碰见包含框的边缘或另一个已浮动的元素框为止
浮动元素边缘不会超过其父元素的边缘
浮动元素不会重叠
处理的问题：
让块级元素在同一行内显示
修改行内元素的宽和高
浮动的属性
属性：float
取值：none left right
清除浮动所带来的影响
属性：clear
取值：left right both
子元素浮动给父元素带来的影响：
问题：父元素内的所有子元素都浮动的话，父元素的高度则会变成0
解决方案：
1.给父元素设置高度
2.设置父元素为：overflow：hidden
3.在父元素内添加一个空的元素，给空元素添加clear：both；
定位常见类型
定位的属性
position 规定元素的定位类型
取值：static/relative/absolute/fixed
偏移属性 定义元素框的偏移属性
定义：top/bottom/left/right
取值：value
z-index 设置元素的堆叠顺序
取值：z-index:values
float/clear 浮动定位属性
相对定位
定义：元素框相对于它原来的位置，偏移某个距离
设置：
position：relative
通过top/bottom/left/right定位 出现的位置
使用场合：配合着绝对定位一起使用
绝对定位
特点：从文档流移出，不占据页面空间，即脱离文档流
绝对定位的初始位置：相对于最近的已定位（固定、相对、绝对定位）的祖先元素
如果元素没有已定位的祖先元素，那么它的位置就相对于body进行定位
设置：
position：absolute
通过top/bottom/left/right定位 出现的位置
使用场合：弹出菜单
固定定位
特点：让元素永远固定的显示在页面的某一位置处，不会随着滚动条的滚动而移动
设置：
position：fixed
通过top/bottom/left/right定位 出现的位置
堆叠顺序
属性：z-index
取值：负数、0、整数
只有已定位（relative、absolute、fixed）的元素才具备z-index
显示方式
默认
显示方式
块级元素：div、h1、p......
行内元素：span、a.......
行内块：img
dispaly属性
作用：修改元素的默认显示方式
属性：display
取值：
none：让元素隐藏，且不占据页面空间
block：使行内元素变成块级元素
inline:使块级元素变成行内元素
inline-block:行内块，具备行内元素和块级元素的特点（成一行显示、允许修改宽和高）
使用场合：控制元素的显示和隐藏；将行内元素变成块级元素或行内块元素
显示效果
visibility：修饰元素的可见性
取值：
visible 默认值，可见的
hidden:元素不可见，占据页面空间
collapse：用于表格，了解
visibility:hidden与disply:none的区别
1.visibility:hidden是指页面的显示效果；disply:none是指页面的显示方式
2.visibility:hidden隐藏，使元素不可见，但仍占据页面的空间；disply:none，隐藏元素且不占据页面空间
opacity 透明度
取值：0-1 值越大，不透明度越高
vertical-aline 垂直方向对齐
使用：td、img
取值：
baseline 默认 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
放置在img中，控制的是img左右两端文本的垂直对齐方式
光标
作用：改变鼠标的显示效果
属性：cursor
取值
deault 默认的
pointer 手
crosshair +
text :I
wait:等待
help：？
列表的样式
list-style-type 控制列表中列表项标志的样式
取值：
none：无标记
decimal：数字，默认值
lower-roman:小写罗马数字
upper-roman ：大写罗马数字
list-style-image 使用图像来替换列表的标记
取值：url()
list-style-position 控制列表项标识的位置
取值：
outside 标记位于文本的左侧，且放置在文本以外 默认值
inside 标记放置在文本以内
综合
list-style：type url() position
原文：https://www.cnblogs.com/cuixiaoying/p/11508857.html