CSS的优势：
1、内容与表现分离
2、网页的表现统一，容易修改
3、丰富的样式，使页面布局更加灵活
4、减少网页的代码量，增加网页的浏览速度，节省网络带宽
5、运用独立于页面的CSS，有利于网页被搜索引擎收录
文本颜色的设置：color:red;
背景颜色：background-color:red;
引入方式：
（1）内联样式
给标签定义style属性，并赋值
<p style="CSS样式"></p>
(2)内部样式
<head>
<style type="text/css">
CSS样式
</style>
</head>
（3）外部样式
外面新建一个CSS文档，扩展名为.css
<head>
链接式：
<link rel="stylesheet" type="text/css" href="CSS文档路径">
</head>
导入式：
<style type="text/css">
@import url("001.css");
</style>
链接式与导入式的区别：
<link/>标签属于XHTML，@import是属于CSS2.1
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的。
CSS样式优先级:
内联样式>内部样式>外部样式
ID选择器>类选择器>标签选择器
CSS语法结构：
选择器名称｛
CSS语法
｝
选择器名称｛
属性名：属性值；
属性名：属性值；
属性名：属性值；
...
｝
简单的选择器:
（1）标签选择器（标签名）
使用标签名称作为选择器名称。
（2）ID选择器(#id名)
给标签添加一个id属性，并且给其赋值（起名字）。根据id属性的值找到对应的标签。为了区分，使用id选择器的时候，需要在选择器前面添加#。注意：id属性可以添加给每一个标签，但是id属性的值必须是唯一。ID选择器的唯一是因为HTML的标签只能有一个id
（3）类选择器(.类名)
给每一个标签添加一个class属性，然后给class属性赋值。为了区分，需要在类选择器前面添加. 类选择器在文档中不是唯一的。
复杂选择器：
（1）聚合选择器
把简单选择器聚集在一起使用。每一个选择器之间使用逗号分割。
（2）交集选择器
针对同一个标签，有任何两种简单选择器构成，但是一个选择器必须是标签选择器。选择器之间不同任何内容分割。
（3）派生选择器
后代选择器：使用空格分割父元素和后代元素
子元素选择器：使用>分割
相邻兄弟选择器：使用+分割；选择当前元素紧邻其后的哪个元素作为相邻兄弟选择器。
（4）属性选择器
直接使用属性名：
p[id]{
color: red;
}
p[id][class]{
color: red;
}
使用属性值：
p[id="p1"]{
color: blue;
}
p[id="p1"][class="s1"]{
color: blue;
}
使用部分属性值：
p[id~="p2"]{
color: orange;
}
超链接四种状态，伪类
a:link 正常状态，鼠标未放上之前的状态
a:hover 浮动状态，鼠标浮动到链接上的状态
a:active 激活状态，鼠标按下，未抬起时的状态
a:visited 访问过状态，鼠标按下，并抬起时的状态
a:hover必须放在a:link和a:visited之后
a:active必须放在a:hover之后
CSS设置鼠标形状：
cursor:default; 默认光标
pointer 指示链接的指针（一只手）wait 等待的效果 help 可用的帮助 text 指示文本 crosshair 鼠标呈现十字
CSS背景颜色:
background-color: red；#十六进制、rgb(0~255,0~255,0~255);
background:red; 一样的效果
背景图片:
background-image: url("图片路径");
平铺方式：background-repeat:repeat；（沿水平和垂直两个方向平铺）
background-repeat:no-repeat；（不平铺）
background-repeat:repeat-x；（沿水平方向平铺）
background-repeat:repeat-y；（沿垂直方向平铺）
背景图片的平铺方式在no-repeat的情况下：
background-position: center;（居中）
background-position:205px 10px; 背景图片出现的位置从左上角开始（x/y）
background-position:30% 50%; 背景图片出现的位置（垂直方向居中，水平方向偏移30%）
background-position:top right; （右上角）
background-position:top left;（左上角）
background-position:bottom right;（右下角）
background-position:bottom left;（左下角）
顺序写法：
background:red url("image/1.jpg") 205px 10px no-repeat;
background-size:数值(px,百分比)\cover(填充满)\contain(自动比例缩放)\auto(默认)
背景渐变:
background:linear-gradient(to top,orange,blue); 常规语法
background:-webkit-linear-gradient(to top,orange,blue); <!--要支持其他内核浏览器，把相应的前缀加上即可（-webkit）-->
to left <!--向左 渐变-->
to right <!--向右 渐变-->
to top <!--向上 渐变-->
to top left <!--向左上 渐变-->
to top right <!--向右上 渐变-->
to bottom <!--向下 渐变-->
to bottom left <!--向左下 渐变-->
to bottom right <!--向右下 渐变-->
background-attachment: fixed;设置背景图片的关联
文字设置:
字体的样式 font-family:“楷体”;
字体的大小 font-size: 数值;(px,%,em)1em=16px;
字体是否倾斜 font-style: italic\oblique\normal;
字体加粗 font-weight: bold; normal 默认 bold 粗体字体 bolder 更粗的字体 lighter 更细的字体
小写字母转换成小型大写字母：font-variant: small-caps;
字体的颜色 color:英文单词、#十六进制、rgb(0~255,0~255,0~255);
简写按照以下顺序设置：
font:style weight size family
font:italic bold small-caps 18px '仿宋';
文本样式：
首行缩进/字符间距：text-indent: 2em;
文本水平对齐方式：text-align: right\left\center;
word-spacing: 32px（2em）;字间距、单词之间的距离
letter-spacing: 32px;字母间距，
text-transform:uppercase\lowercase\capitalize字母转换
行间距
line-height: 数值（px、em、%）;
文本修饰：
text-decoration:none;（默认）
underline（下划线）
overline（上划线）
line-through;（删除线）
vertical-align （文本垂直对齐方式）
vertical-align:middle;
text-shadow （文本阴影）
text-shadow:blue 10px 10px 2px;
列表
list-style-type: circle\square\disc\lower-roman\upper-roman\lower-alpha\upper-alpha\lower-latin\upper-latin;
list-style-image: url('ad.jpg');
list-style-position: inside;
表格
table,tr,td{
border:1px solid red; //设置边框
}
table{
border-collapse: collapse;//去除单元格之间的空隙
width: 300px;//设置表格宽度
height: 300px;//设置表格高度
text-align: center;//文本水平剧中
}
display属性
行级元素：在同一行显示的元素就是行级元素。display:inline
块级元素：分行显示的元素。display:block
行内块级元素：在同一行显示的块级元素。display:inline-block
display:none; 隐藏元素，但在浏览器调试窗口能看见,改变了位置
visibility:hidden; 隐藏元素，但在浏览器调试窗口能看见，原先位置不变
盒子模型：
页面中的元素都可以称之为盒子。
盒子边框：(无序的)
border:边框的宽度 边框的样式 边框的颜色
border: 1px solid red;
solid（实线）
dotted（点线）
dashed（虚线）
double（双线）
边框宽度：
border-width:数值；
border-width: 2px；上下左右宽度
border-width: 2px 4px; 上下 2px 左右4px
border-width: 2px 4px 6px;上 2px 左右4px 下6px
border-width: 2px 4px 6px 8px;上 2px 右4px 下6px 左8px
border-top-width:数值;上边框的宽度
border-bottom-width: 6px;下边框的宽度
border-left-width: 4px;左边框的宽度
border-right-width: 1px;右边框的宽度
边框样式：
border-style:solid;上下左右样式
border-style: solid double;上下 实线 左右双直线
border-style: solid double dotted;上 实线 下点线 左右双直线
border-style: solid double dotted dashed;上 实线 下点线 右双直线 左边虚线
border-top-style: groove;上边框的样式 根据颜色值画3D凹槽
border-bottom-style: ridge;下边框的样式 根据颜色值画3D凸槽
border-left-style: inset;左边框的样式 根据颜色值画3D凹边
border-right-style: outset;右边框的样式 根据颜色值画3D凸边
边框颜色:
border-color:red;上下左右的颜色
border-color: red yellow;上下red 左右yellow
border-color: red yellow green;上red下green左右yellow
border-color: red yellow green blue;上 右 下 左
上边框颜色 border-top-color: #330099;
下边框颜色 border-bottom-color: rgb(203,23,14);
左边框颜色 border-left-color: pink;
右边框颜色 border-right-color: gray;
内边距：元素内容和边框之间的距离
padding: 2px;上下左右
padding: 2px 4px;上下 左右
padding: 2px 4px 6px;上 左右 下
padding: 2px 4px 6px 8px;上 右 下 左
padding-top:上内边距
padding-bottom:下内边距
padding-left:左内边距
padding-ringht:右内边距
外边距：不同元素之间的距离
margin-top: 2px;上外边距
margin-bottom: 2px;下外边距
margin-left: 4px;左外边距
margin-right: 8px;右外边距
margin:2px; 上下左右
margin:2px 4px; 上下 左右
margin:2px 4px 6px;上 左右 下
margin:2px 4px 6px 8px;上 右 下 左
圆角：
border-radius：10px 5px 15px 20px; 上 右 下 左
border-radius：50%；圆形
盒子阴影:
box-shadow:20px 10px 10px red; (外阴影向右偏移20像素，向下10像素，模糊半径(羽化)为10px)
box-shadow:inset 20px 10px 10px red; (内阴影向右偏移20像素，向下10像素，模糊半径(羽化)为10px)
浮动：
float:right； 向右浮动
left 向左浮动
清除浮动：
clear:left; 清除左浮动
clear:right; 清除右浮动
clear:both; 清除两边浮动
去除浮动方法1：加个空<div style="clear:both;"><div/>
去除浮动方法2：给父级加高度<div style="height：400px;"><div/>
去除浮动方法3：给父级加overflow:hidden; (内容被修剪，不可见) 或visible (默认) 或scroll (内容被修剪，滚动条)
或auto (没有横向滚动条，其余和scroll一样)
定位：
position:relative; 相对定位
position:absolute; 绝对定位
position:fixed; 固定定位
图层优先级：
z-index:1; 默认优先级为0
图层透明度：
opacity:x; x范围0-1 越小越透明
filter:alpha(opacity=x); x范围0-100 越小越透明
css注释
/* */
