一、CSS语法
1.外部样式 <style type="text/css"></style> 2.内部样式 <link rel="stylesheet" type="text/css" href=""> 3.内联样式 <p style="color: red"></p>
优先级： （内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
二、选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器
</title>
<style type="text/css">
p{}
#pid1{}
.pid{}
.fontcolor{}
div p{}
div>p{}
#pid2 ~p{
}
#pid2 +p{}
[id*="pid"]{
}
[id^="_pid"]{
}
[id$="_"]{
}
p:nth-of-type(2n-1){
}
p:nth-child(2n){
}
</style>
</head>
<body>
<p id="pid1" class="pid fontcolor">段落一
</p>
<p id="pid2" class="pid">段落二
</p>
<div><p id="_pid3">段落三
</p><p id="pid">段落temp
</p></div>
<p id="_pid4">段落四
</p>
<p id="pid5_">段落五
</p>
<div><p id="pid6_">段落六
</p></div>
<p id="_pid7">段落七
</p>
<p id="pid8_">段落八
</p>
<p id="_pid9">段落九
</p>
<p id="pid10_">段落十
</p>
</body>
</html>
三、背景/图片
body{
background-color: ;
background-image: url();
background-repeat: no-repeat|repeat-x|repeat-y|repeat;
background-position: 0 0;
background-attachment: fixed|scroll;
background-size: ;
}
四、文本 / 字体
p{
color: hsla(100,25%,75%,1);
font-family:;
font-size: ;
font-style: italic;
font-weight: bold;
word-spacing: 3em;
letter-spacing: 2em;
text-shadow: 5px 5px 5px #FF0000;
text-indent: 2em;
text-transform: uppercase;
text-decoration: line-through;
text-align: left;
line-height: 50px;
vertical-align: ;
}
hsla指的是色调(Hue)、饱和度(Saturation)、亮度(Lightness)、透明度（Alpha） H - 取值为0-360，0(或360)表示红色，120表示绿色，240表示蓝色。 S - 0%是灰色，100%是全彩。 L - 0% 是黑色，100% 是白色。 A - 0是透明，1是不透明。
五、表格 / 列表
ul{
list-style-type:none;
list-style-image:url();
}
table,
tr,
td{
border: 1px solid #000000;
border-collapse: collapse;
}
六、大小单位（px/em/rem）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式表测试
</title>
<style type="text/css">
div{
border: 1px solid #000000;
}
</style>
</head>
<body>
<div style="width: 200px;font-size: 28px;">
<div style="width: 5em;">这是DIV1
</div>
<div style="width: 50%;">这是DIV2
</div>
<div style="width: 150px;">这是DIV3
</div>
<div style="width: 5rem;">这是DIV4
</div>
</div>
</body>
</html>
七、盒子模型 / 位置
div{
padding: ;
margin: ;
display: inline-block;
display: inline;
display: block;
box-sizing: border-box;
box-shadow: ;
border: ;
border-width: ;
border-style: ;
border-radius: ;
float: left|right;
clear: left|right|both;
position: absolute|relative|fixed;
}
input{
background-clip: padding-box|content-box|border-box;
}
#div1{
z-index: 3;
}
八、动画 / 响应式布局
body{
perspective: 300px;
}
div{
transition: ;
transition-property: ;
transition-duration: ;
transition-timing-function: ;
transition-delay: ;
}
#div1:hover{
transform: translate(50%, 20%);
transform: skew(20deg, -20deg);
transform-origin: 100% 0;
transition: 1s;
}
#div2:hover{
animation: 2s colorful forwards 100000;
}
@keyframes colorful{
0%
{
background-color: #fae;
}
20%
{
background-color: #ade;
}
50%
{
background-color: #dbe;
}
100%
{
background-color: #fee;
}
}
@media screen and (min-width: 800px) and (max-width: 1024px){
div{
width: 0px;
}
}
