（一）使用
<style type=”text/css”>
具体css语句
</style>
（二）语法
<style type="text/css">
mm {background-color:red}; /*这行表示标签为mm的，背景色为红色，如果mm替换为p，则所有<p></p>标签覆盖内的变为红色*/
</style>
①包含在<style>之中；
②格式为：标签名 { 具体样式 }
③使用花括号来包含；
④有时候需要使用双引号来包含值
大概如下图
（三）颜色
mm {background-color:red} /*这行表示标签为mm的，背景色为红色，如果mm替换为p，则所有<p></p>标签覆盖内的变为红色*/
mm {color:rgb(50%,50%,0%)} /*可以和上一行写一起，也可以分开写*/
nn{color:rgb(50,55,155)} /*另外一种颜色表示方法*/
nn{background-color:#0F0} /*第三种颜色表示方法*/
（四）多重声明：
即把上面的第1、2行合并
mm {background-color:red;
color:rgb(50%,50%,0%)}
效果是一样的
（五）大小写
一般来说，CSS对大小写不敏感，但如果名称涉及HTML等，则需要注意大小写（如class=”样式”）
（六）同一种标签里，通过添加新的标签，以使其和一般的标签不一样
nn{color:rgb(50,55,155)} /*另外一种颜色表示方法*/
nn{background-color:#0F0;
font-size:30px;
} /*第三种颜色表示方法*/
nn different { /*虽然在nn里，但背景颜色和普通的nn不同，不过字体依然使用nn的大小（其他的也是）*/
background-color:rgb(10%,10%,10%)}
}
（七）id选择器和类选择器
在html可以在标签里加id，然后css可以对id相符的进行样式操作。
有标签：<mm id="nn">pppp</mm>
有操作：
#nn {
background-color:red;
position:absolute;
left:500px;
top:500px;
color:rgb(50%,50%,0%);
font-size:45px;
}
即可
（八）绝对定位
丢一个盒子的样式：
.box {
position: absolute;
height: 200px;
width: 200px;
background-color: #ddd;
border: 1px #eee;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: rgb(238, 238, 238);
border-right-color: rgb(238, 238, 238);
border-bottom-color: rgb(238, 238, 238);
border-left-color: rgb(238, 238, 238);
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image-source: none;
border-image-slice: 100% 100% 100% 100%;
border-image-width: 1 1 1 1;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
padding: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
（8）CSS的position
语法为：
position:fixed
| 值 |
描述 |
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static |
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit |
规定应该从父元素继承 position 属性的值。 |
（9）div里面套用div
html方面：
<div id="box"> <div class="smallbox"> <div class="smallerbox1"> No1： </div> <div id="no1" class="smallerbox2"> 文字1 </div> </div> <div class="smallbox"> <div class="smallerbox1"> No2： </div> <div id="no1" class="smallerbox2"> 文字2 </div> </div> </div>
css方面：
<style type="text/css">
#box{
position:absolute;
width:400px;
height:500px;
background-color:#ddd;
}
.smallbox{
position:abbr;
width: 400px;
height:100px;
left:20px;
top:20px;
background-color:#aaa;
}
.smallerbox1{
position:relative;
left:20px;
top:10px;
background-color:#777;
width:60px;
}
.smallerbox2{
position:relative;
left:80px;
top:-12px;
background-color:#333;
width:200px;
}
</style>
