（一）使用

<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>