1、CSS概述

  • CSS(Cascading Style Sheet)：层叠样式表语言。
  • CSS的作用是：
    • 修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
    • CSS好比是HTML的化妆品一样。
  • HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是 xx.html 文件。

2、要求

  • CSS我们要求掌握到什么程度？
    • 常见的CSS样式要求会写
    • 别人写的CSS样式要能看懂

3、嵌套使用CSS的三种方式

  • 第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。

    • 语法格式：

      • <标签 style=”样式名:样式值;样式名:样式值;样式名:样式值;…”></标签> ```html <!doctype html>



      ```

  • 第二种方式：在head标签中使用style块，这种方式被称为样式块方式。

    • 语法格式：

      1. <head>
      2. <style type="text/css">
      3.    选择器 {
      4.  样式名 : 样式值;
      5.  样式名 : 样式值;
      6.  .....
      7.    }
      8.    选择器 {
      9.  样式名 : 样式值;
      10.  样式名 : 样式值;
      11.  .....
      12.    }
      13. </style>
      14. </head>
      <!doctype html>
<html>
<head>
   <title>HTML中引入CSS样式的第二种方式：样式块</title>

   <style type="text/css">
       /*
           这是CSS的注释。
       */

       /*
           1、id选择器
           语法格式：
               #id{
                   样式名 : 样式值;
                   样式名 : 样式值;
                   样式名 : 样式值;
                   ....
               }
       */
       #usernameErrorMsg {
           color : red;
           font-size : 12px;
       }

       /*
           2、标签选择器
           语法格式：
               标签名 {
                   样式名 : 样式值;
                   样式名 : 样式值;
                   样式名 : 样式值;
                   ....
               }
           标签选择器作用的范围比id选择器广。
       */
       div {
           background-color : black;
           border : 1px solid red;
           width : 100px;
           height : 100px;
       }

       /*
           3、类选择器
           语法格式：
               .类名{
                   样式名 : 样式值;
                   样式名 : 样式值;
                   样式名 : 样式值;
                   ....
               }
       */
       .student {
           border : 1px solid red;
           width : 400px;
           height : 30px;
       }

   </style>
</head>
<body>

   <!--
       设置样式字体大小12px，颜色为红色！
   -->
   <span id="usernameErrorMsg">对不起，用户名不能为空！</span>

   <div></div>
   <div></div>
   <div></div>

   <!--class相同的标签可以认为是同一类标签。-->
   <br><br><br>
   <input type="text" class="student"/>

   <br><br><br>

   <select class="student">
       <option>专科</option>
       <option>本科</option>
   </select>

</body>
</html>

  • 第三种方式：链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了，这种方式易维护，维护成本较低）

    • 语法格式：

      • ```html <!DOCTYPE html>

      百度

      点击我链接到百度哦！ css a { text-decoration : none; }

/ cursor : 鼠标样式，pointer是小手，hand也是，但是hand有浏览器兼容问题。建议使用pointer /

baiduSpan {

text-decoration: underline;
cursor: pointer;

}


<a name="z4xm2"></a>
### 4、列表样式

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>列表样式</title>

        <style type="text/css">
            ul{
                /*list-style-type: none;*/
                /*list-style-type: circle ;*/
                list-style-type: square ;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>中国
                <ul>
                    <li>北京</li>
                    <li>上海</li>
                    <li>重庆</li>
                </ul>
            </li>
            <li>美国</li>
            <li>俄国</li>
        </ul>
    </body>
</html>

5、CSS样式的绝对定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS样式的绝对定位</title>
        <style type="text/css">
            #div1{
                background-color: red;
                border: 1px black solid;
                width: 300px;
                height: 300px;
                position : absolute; /*绝对定位*/
                left: 100px;
                top: 100px;
            }
        </style>
    </head>
    <body>

        <div id="div1"></div>

    </body>
</html>