CSS语法
声明总是以（分号） ；结束、以{}（花括号）括起来。
选择器
id和class选择器
id选择器 为标有特定 id 的 HTML 元素指定特定的样式，以 # 开头
class 选择器 用于描述一组元素的样式，以.开头
两种选择器都不能以数字开头
CSS的三种形式
外部样式表
使用 标签链接到样式表，浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
它能在任何文本编辑器中进行编辑，不能包含任何的 html 标签，样式表应该以 .css 扩展名进行保存。
html 引入 icon 图标
1.将需要的图标加入购物车，放入一个你的项目中。
2.打开下该项目，生成链接，选中 font class ，将生成的链接(XXXXXXXX)引入html头部，
<link rel="stylesheet" href="http:XXXXXXXX"
3.在body中使用i标签引入图标名
图标名在你创建的项目中获取
<i class="iconfont XXX"></i>
内部样式表
在文档头部使用style 标签来定义。
内联样式表
在相关的标签内使用样式（style）属性。
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来
优先级
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
几种重要属性
背景
background-color
简写 background
其值的表达方式如下
十六进制 - 如：“#ff0000”
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”
背景颜色半透明 rgba（0，0，0，0.x）最后一个参数是alpha透明度，取值范围在0~1之间，习惯把0.x的0省掉，记为（0，0，0，.x）
opacity 让盒子里面的内容都透明
background-image
背景图像
background-image: url('')
默认情况下背景图像将平铺重复显示覆盖整个页面
background-repeat
背景平铺方式
background-repeat: - no-repeat - repeat-x - repeat-y
background-attachment
定义图像是否固定或随页面滚动
值
- scroll 背景图片随着页面的滚动而滚动，这是默认的。
- fixed 背景图片不会随着页面的滚动而滚动。
background-position
背景图象位置
值
——，—— left，right，bottom，top 先水平，在竖直
——，—— 百分比的形式 坐上（0%，0%），右下（100%，100%）
——，—— 以像素为单位 (同上)
且不论何种形式，只有一值未填，默认为中间状态。
当使用简写属性时，属性值的顺序为上面排列顺序
background-size
值
contain 背景图片将按比例自适应内容区域。图片保持其比例不变
eg:
如果 background-size 属性设置为 "100% 100%" ，背景图片将延展覆盖整个区域：
会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中。
文本
属性
color
text-align (文本的对齐方式)
- center
- right /left
- justify(每一行被展开为宽度相等，左，右外边距是对齐)
text-decoration（文本修饰）
值
- none
- overline
- line-through
- underline
text-transform(文本转换)
值
- uppercase （全部大写）
- lowercase （全部小写）
- capitalize （首字母大写）~~
text-indent（文本缩进)
值
length %(基于父元素)
letter-spacing （字符间距）
值
normal length inherit
line-height（行高）
direction
ltr（正） rtl（反）
text-shadow（文本阴影）
unicode-bidi(设置或返回文本是否被重写)
vertical-align（垂直对齐）
white-space（空白的处理方式）
word-spacing (字间距)
字体
font-family(字体系列)
可设置多个做“后备”，多个字体系列用逗号隔开，且名称超过一个字须用引号。
font-style（字体样式)
normal tialic(斜体)
font-size
font-weight(字体粗细)
- normal
- bold(粗)
- bloder（更粗）
- lighter（更细）
font-variant
链接
1）a:link 未访问
2）a:visited 已访问
3）a:hover 鼠标移动到链接上
4）a:active 鼠标点击时
text-decoration:none
用于删除链接中的下划线(默认有线)
列表
list-style-type（列表项图标）
circle（⚪）square （方块）upper-roman（罗马数字）lower-alpha（英文）
list-style-image: url('sqpurple.gif');（作为列表项标记的图像）
表格
border: 1px solid black；
边框的粗细+边框的样式+边框的颜色
border-collapse：collapse
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
值为 collapse 相邻边被合并
separate（单一）
text-align（水平对齐方式）vertical-align（垂直对齐方式）
边框
border-style
dotted(点线)dashed(虚线solid(实线)
double(两个边框,宽度和 border-width 的值相同)
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
border-width
- 指定长度
- thick，medium，thin，
border-color
(border-color单独使用不起作用，得先使用border-style设置边框样式)
指定不同的侧边的边框即 border-top-…border-right-…
outline（轮廓）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
margin（外边距）
值
- auto（浏览器设置的外边距）
- length
- % 基于块
盒子模型
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
padding (填充)
Display(显示) 与 Visibility（可见性）
隐藏元素 - display:none（隐藏的元素不会占用空间）或visibility:hidden（隐藏的元素占用空间）
块和行内元素
元素显示模式的转换
转换为块级元素 display: block
转换为行内元素 display: inline
转换为行内块元素 diasplay: inline-block
position (定位)
定位=定位模式（元素在文档中的定位方式）+边偏移（决定了该元素的最终位置）。
值
- static(默认值)相对定位元素的定位是相对其正常位置
- relative 相对定位
特点：他是相对于它原来的位置移动的；原来的标准流的位置继续占有，后面的盒子仍然以标准流的形式对待他。 - fixed 元素的位置相对于浏览器窗口是固定位置，窗口是滚动的它也不会移动
- absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
不在占有原来的位置 - sticky 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
子绝父相
z-index
指定了一个元素的堆叠顺序，它的值可正可负，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
clip（剪辑一个绝对定位的元素）
cursor（显示光标移动到指定位置的类型）
Overflow
用于控制内容溢出元素框时显示的方式，只作用于指定高度的块元素上。
- visible（默认值，内容溢出元素框）
- scroll（内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容）
- hidden（内容会被修剪，并且其余内容是不可见的）
- auto （如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容）
- inherit
float
用于创建浮动框，将其移动到一边，直至左边缘或右边缘触及包含块或另一个浮动框的边缘。
clear 属性指定元素两侧不能出现浮动元素
值 both
元素的居中对齐
文本居中对齐 text-align: center
图片居中对齐 margin：auto，并将它放入块元素中。
左右对齐-使用定位方式
当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding ，避免出现差错
设置容器上下 padding 相同实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文本有效，当文本行数超过单行时：
1）padding：文本仍然处于容器垂直居中的位置，但是容器的 height 会随着文本行数的增加而增大；
2）line-height=height：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示；
多行文本可使用 vertical-align: middle; 来实现元素的垂直居中,但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。
清除内外边距
* { padding：0； margin：0； }
行内元素为了照顾兼容性，尽量只设置左右外边距，不要设置上下内外边距，但是转换为块级元素和行内块元素就可以了。
