（一）使用

<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方面：

    
     
      
       No1：
      
      
       文字1
      
     
     
      
       No2：
      
      
       文字2
      
     
    

 

 

css方面：