<link rel="stylesheet" type="text/css" href="xxxxxxx.css">
media="only screen and (max-width:640px)" rel="x.css">
1 <style type="text/css">
2 /*标签样式，元素选择器*/
3 span{
4 border: 9px dotted green;
5 }
6 id索引样式，id选择器 7 #dong_id p{
8 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 green;
21 }
22 </style>
1 @media screen and (max-width:640px){
2 body{
3 background-color:4 }
5 div{
6 }
7 }
div style="width: 150px;height: 50px;">dongxiaodong</div>
1 颜色 2 color: red;
3
4 文字位置 值有：left right center 5 text-align:center;
6
7 文字大小 8 font-size: 30px;
9
10 文字缩进或突出的字符（汉字也为1）,参数可为正负值text-indent: 2em;
12
13 单词样式，每个首字母大写：capitalize，全部大写：uppercase,全部小写：lowercase14 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 dongfont,"宋体","楷体";多个字体设置33
34 }
35 字体样式，斜体（italic）36 font-style:italic;
37
38 加粗39 font-weight:bold;
背景颜色background-color: red;
背景图片background-image:url(img/0.jpg) ;
设置背景图片是否可重复 8 repeat-x 纵向重复， repeat-x 横向重复，no-repeat 不重复 9 background-repeat:repeat;
10
11 固定背景图片，不链接滚动条12 background-attachment:fixed;
13
14 宽高自适应，100%填充*/
background-size:100% 100%;
16
17 设置图片位置，整体居左，图片居中18 background-position: right center;
19
20 背景移动background-position-x:0px;
background-position-y:-10px;
未被点击span:link{
3 font-size: 20px;
4 }
5 已被点击 6 span:visited{
7 50px;
color: 9 }
鼠标放至在其上span:hover{
5px;
13 }
正在被点击span:active{
100px;
17 }
text-decoration: none;设置无下划线*/
ul li{
2 各种有序或者无序的字符 list-style:lower-greek;
4
5 设置图片 6 list-style-image: url("img/kkfei.png");
7
8 }
li{
10 设置列表在一行显示11 display:inline;
12
13 }
table,td,th{
2
3 设置边框，参数（大小，样式，颜色） 4 其中样式有 直线（solid) 虚线（dashed） 5 1px dashed #00FDE9;
6 }
table{
8 合并两个挨着的边框线 9 border-collapse: collapse;
11 设置表格整体宽高 width: 500px; height: 500px;
14 表格内容居中15 text-align: center;
16 }
1 2 3 border: 1px dashed #00FDE9;
4
border-bottom: 1px dotted red;//只显示底部边框
虚线（dashed）,实线（solid）,双实线（double）,立体（ridge）等等2 outline-style:double;
3 4 outline-color: red;
5 大小,宽度6 outline-width: 10px;
上下左右整体设计border-style: dotted;
3
4 单独设置一边（上）border-top-style: double;
border-top-color: red;
border-top-width: 10px;
参数：（背景居左距离， 居上距离，透明度，颜色）*/
box-shadow: 5px 1px 100px #FF0000;
relative：相对布局，内容嵌与页面中absolute:绝对布局，内容浮于页面顶层fixed:基于绝对布局的，不绑定滚动条position:fixed;
向左偏移,向上偏移left: 300px; top: 20px;
7 排序，如果重合时，该值大则较顶端显示8 z-index: 10;
position: fixed; 浮动right: 10px;右偏移bottom: 20px;左偏移*/
="position: relative">
span ="position: absolute;right: -10px;bottom:10px">我是文字span>
>
移动，参数（x,y)transform: translate(200px,200px);
3
旋转，参数（角度）transform:rotate(50deg);
缩放，参数（宽倍数，高倍数）transform:scale(5,0.5);
9
倾斜，参数（x轴，y轴）transform: skew(5deg,0deg);
3D旋转transform:rotateX(20deg);
transform:rotateY(30deg);
16 transform:rotateZ(10deg);
img{
2 width: 200px;
height: 4 需要使用动画效果的效果属性定义 5 当定义的效果属性应外部因素改变原值时，将自动进入执行动画 transition-property: width,height,transform;
7 动画时长 transition-duration: 2s,10s,6s;
9 动画时间曲线10 transition-timing-function:ease-in-out;
11 开始时间延时 transition-delay: 0.5s;
13
14 }
15 效果属性值改变 img:hover{
17 18 height:19 transform:rotate(360deg)
20
21 }
div
2 {
width:100px;
height:background:red;
position:relative;
7
规定需要绑定到选择器的 keyframe 名称animation-name: dongan;
规定完成动画所花费的时间，以秒或毫秒计animation-duration: 5s;
12 规定动画的速度曲线13 animation-timing-function:规定在动画开始之前的延迟animation-delay: 1s;
规定动画应该播放的次数,参数可为具体的次数或者一直执行（infinite）animation-iteration-count:infinite;
18 规定是否应该轮流反向播放动画animation-direction: alternate;
20 }
21
@keyframes dongan
23 {
颜色和大小的改变，有渐变效果25 0% {left:0px;}
26 50% {left:700px; 50px;}
27 80% {200px;green;}
28 100% {29
}
分栏的数量column-count: 4;
分栏线与下一栏的间距column-gap: 10px;
分栏线的样式，参数（大小，线样式，颜色column-rule: 1px dashed #FF00FF;
服务热线 19970861797
