CSS百宝箱
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
样式插入引用
外部样式表：
<link rel="stylesheet" type="text/css" href="xxxxxxx.css">
添加条件（浏览器屏幕最大宽度没有超过640像素时使用）
<link media="only screen and (max-width:640px)" rel="stylesheet" type="text/css" href="x.css">
内容样式表：
>| 去掉style标签，可以将其内容保存成css文件，然后使用上面的外部样式表方式进行引用
>| 确定深度：使用空格分隔，可以实现层级关系
>| 确定广度：使用逗号分隔，可以实现多个共用样式
1 <style type="text/css">
2 /*标签样式，元素选择器*/
3 span{
4 border: 9px dotted green;
5 }
6 /*id索引样式，id选择器*/
7 #dong_id p{
8 border: 1px solid red;
9 }
10 /*class索引样式，类选择器*/
11 .dong_cl1,.dong_cl2{
12 font-size: 9px;
13 }
14 /*属性选择器 如：<p dong="" >zz</p>*/
15 [dong]{
16 color: red;
17 }
18 /*属性和值选择器 如：<span dong="dongxiaodong">xx</span>*/
19 [dong=dongxiaodong]{
20 color: green;
21 }
22 </style>
添加条件（浏览器屏幕最大宽度没有超过640像素时使用）对应有min-width,多个条件合并可以使用and进行连接
1 @media screen and (max-width:640px){
2 body{
3 background-color: red;
4 }
5 div{
6 }
7 }
内联样式表：
直接在标签中添加style属性
<div style="width: 150px;height: 50px;">dongxiaodong</div>
样式显示规则：
就近原则，越离得近的优先级越高，如内联样式的优先级是最高的,但是如果使用【!important;】表示最高优先级，如：【】
样式集合：
【width:80%;height:50px;】宽高设置
【min-height: 50px;min-height: 50px;】最小宽高，对应有最大宽高(max)
【padding: 10px;】内边距设置，有对应的上、下、左、右各值设置
【margin:100px】外边距设置，上下左右外边距，也有单独的上下左右设置，如：margin-left
【float:left】浮动在左边，另外值有right
【clear: both】清除浮动，因为一经浮动，接下来的标签会自动跟随，所以可以在接下来标签中清除浮动，值有分左、右、左右都。在父级div包裹不了浮动的子内容时可以在最后使用【<div style="clear: both;"></div>】
【border: 1px dashed #00FDE9;】设置边框，参数（大小，样式，颜色），其中样式有 直线（solid) 虚线（dashed）
【border-radius: 50%;】圆角效果，可以使背景、边框、图片圆角化
【text-align:center;】水平居中
【line-height: 100px;】垂直居中，参数为整个高度,解释：其是设置行高
【margin: 0px auto;】布局居中，适用于<body>及其一级子标签，解释：上下为外边距为零，左右外边距自适应。
【opacity: 0.2;】透明度设置，1为原图
【cursor: grab;】鼠标放至时显示的鼠标样式，有多值
【visibility: hidden;】设置为占位隐藏，其他值：可见（visible）
【display: inline;】将块级标签(div)变成内联标签（span）
【display: block;】与上效果相反
【display: none;】不占位隐藏
【display:inline-block】使标签占据整行（高度），可以设置宽高
【overflow: auto;】div标签中非浮动内容超出大小则出现滚动条
【overflow: hidden;】div标签中非浮动内容超出大小则隐藏超出内容
文本相关：
1 /*颜色*/
2 color: red;
3
4 /*文字位置 值有：left right center */
5 text-align:center;
6
7 /*文字大小*/
8 font-size: 30px;
9
10 /*文字缩进或突出的字符（汉字也为1）,参数可为正负值*/
11 text-indent: 2em;
12
13 /*单词样式，每个首字母大写：capitalize，全部大写：uppercase ,全部小写：lowercase*/
14 text-transform:inherit;
15
16 /*阴影效果 参数：（背景居左距离， 居上距离，清晰度，颜色）*/
17 text-shadow: 5px 5px 2px #0000FF;
18
19 /*自动换行实现，更加宽度进行自动换行*/
20 width: 10px;
21 text-wrap:normal;
22
23 /*设置字体*/
24 /*定义字体，设置字体*/
25 @font-face{
26 font-family:dongfont; /*字体名字*/
27 src: url(font/邯郸-韩鹏毛遂体.TTF);
28 }
29 /*使用字体*/
30 .pp1{
31
32 font-family:dongfont,"宋体","楷体";/*多个字体设置*/
33
34 }
35 /*字体样式，斜体（italic）*/
36 font-style:italic;
37
38 /*加粗*/
39 font-weight:bold;
背景相关：
1 /*背景颜色*/ 2 background-color: red; 3 4 /*背景图片*/ 5 background-image:url(img/0.jpg) ; 6 7 /*设置背景图片是否可重复*/ 8 /*repeat-x 纵向重复， repeat-x 横向重复，no-repeat 不重复*/ 9 background-repeat:repeat; 10 11 /*固定背景图片，不链接滚动条*/ 12 background-attachment:fixed; 13 14 /*宽高自适应，100%填充*/ 15 background-size:100% 100%; 16 17 /*设置图片位置，整体居左，图片居中*/ 18 background-position: right center; 19 20 /*背景移动*/ 21 background-position-x:0px; 22 background-position-y:-10px;
鼠标操控：
1 /*未被点击*/
2 span:link{
3 font-size: 20px;
4 }
5 /*已被点击*/
6 span:visited{
7 font-size: 50px;
8 color: red;
9 }
10 /*鼠标放至在其上*/
11 span:hover{
12 font-size: 5px;
13 }
14 /*正在被点击*/
15 span:active{
16 font-size: 100px;
17 }
<a>标签：
text-decoration: none;/*设置无下划线*/
列表项标签相关：
1 ul li{
2 /*各种有序或者无序的字符*/
3 list-style:lower-greek;
4
5 /*设置图片*/
6 list-style-image: url("img/kkfei.png");
7
8 }
9 li{
10 /*设置列表在一行显示*/
11 display:inline;
12
13 }
表格标签相关：
1 table,td,th{
2
3 /*设置边框，参数（大小，样式，颜色）*/
4 /*其中样式有 直线（solid) 虚线（dashed）*/
5 border: 1px dashed #00FDE9;
6 }
7 table{
8 /*合并两个挨着的边框线*/
9 border-collapse: collapse;
10
11 /*设置表格整体宽高*/
12 width: 500px; height: 500px;
13
14 /*表格内容居中*/
15 text-align: center;
16 }
边框轮廓相关：
方法一：
1 /*设置边框，参数（大小，样式，颜色）*/ 2 /*其中样式有 直线（solid) 虚线（dashed）*/ 3 border: 1px dashed #00FDE9; 4 5 border-bottom: 1px dotted red;//只显示底部边框
方法二：
1 /*虚线（dashed）,实线（solid）,双实线（double）,立体（ridge）等等*/ 2 outline-style:double; 3 /*颜色*/ 4 outline-color: red; 5 /*大小,宽度*/ 6 outline-width: 10px;
方法三：
1 /*上下左右整体设计*/ 2 border-style: dotted; 3 4 /*单独设置一边（上）*/ 5 border-top-style: double; 6 border-top-color: red; 7 border-top-width: 10px;
边框阴影：
/*参数：（背景居左距离， 居上距离，透明度，颜色）*/ box-shadow: 5px 1px 100px #FF0000;
布局及偏移量：
1 /*relative：相对布局，内容嵌与页面中*/ 2 /*absolute:绝对布局，内容浮于页面顶层*/ 3 /*fixed:基于绝对布局的，不绑定滚动条*/ 4 position:fixed; 5 /*向左偏移,向上偏移*/ 6 left: 300px; top: 20px; 7 /*排序，如果重合时，该值大则较顶端显示*/ 8 z-index: 10;
例：实现内容浮动固定在浏览器窗口的右下方
1 position: fixed; /*浮动*/ 2 right: 10px;/*右偏移*/ 3 bottom: 20px;/*左偏移*/
例：实现内部定位
<div style="position: relative">
<span style="position: absolute;right: -10px;bottom:10px">我是文字</span>
</div>
效果样式
效果：
1 /*移动，参数（x,y)*/ 2 transform: translate(200px,200px); 3 4 /*旋转，参数（角度）*/ 5 transform:rotate(50deg); 6 7 /*缩放，参数（宽倍数，高倍数）*/ 8 transform:scale(5,0.5); 9 10 /*倾斜，参数（x轴，y轴）*/ 11 transform: skew(5deg,0deg); 12 13 /*3D旋转*/ 14 transform:rotateX(20deg); 15 transform:rotateY(30deg); 16 transform:rotateZ(10deg);
过渡效果：
1 img{
2 width: 200px;
3 height: 200px;
4 /*需要使用动画效果的效果属性定义*/
5 /*当定义的效果属性应外部因素改变原值时，将自动进入执行动画*/
6 transition-property: width,height,transform;
7 /*动画时长*/
8 transition-duration: 2s,10s,6s;
9 /*动画时间曲线*/
10 transition-timing-function:ease-in-out;
11 /*开始时间延时*/
12 transition-delay: 0.5s;
13
14 }
15 /*效果属性值改变*/
16 img:hover{
17 width: 500px;
18 height: 500px;
19 transform:rotate(360deg)
20
21 }
动画：
1 div
2 {
3 width:100px;
4 height:100px;
5 background:red;
6 position:relative;
7
8 /*规定需要绑定到选择器的 keyframe 名称*/
9 animation-name: dongan;
10 /* 规定完成动画所花费的时间，以秒或毫秒计*/
11 animation-duration: 5s;
12 /* 规定动画的速度曲线*/
13 animation-timing-function:ease-in-out;
14 /*规定在动画开始之前的延迟*/
15 animation-delay: 1s;
16 /*规定动画应该播放的次数,参数可为具体的次数或者一直执行（infinite）*/
17 animation-iteration-count:infinite;
18 /*规定是否应该轮流反向播放动画*/
19 animation-direction: alternate;
20 }
21
22 @keyframes dongan
23 {
24 /*颜色和大小的改变，有渐变效果*/
25 0% {left:0px;}
26 50% {left:700px;width: 50px;}
27 80% {left:200px;background:green;}
28 100% {left:0px;}
29
30 }
分栏显示
1 /*分栏的数量*/ 2 column-count: 4; 3 /*分栏线与下一栏的间距*/ 4 column-gap: 10px; 5 /*分栏线的样式，参数（大小，线样式，颜色*/ 6 column-rule: 1px dashed #FF00FF;
