CSS样式

1.内链样式表

　　格式：

<body style="background-color:green margin:0; padding:0;"></body>

2.嵌入式样式表

　　需要将样式放在<head></head>中

　　格式：

<head>
    <style type="text/css">
        body{
            background-color:green;
            color:red;
        }
        p{
            color:#fff;
        }
　　</style>
</head>
<body>
       <p>学习CSS</p>
</body>

3.引入式样式表

原html文件中格式：

<hesd>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

新建一个名为style.css的文件，内容格式为：

body{
  background-color:red;
  color:#fff;    
}

4.标记选择器

　　一个选择器可以控制若干个样式属性，他们之间用分号隔开，最后一个分号可以不加

<head>
    <style type="text/css">
        p{
            color:#fff; font-size:18px;
        }
    </style>
</head>
<body>
       <p>学习CSS</p>
</body>

5.class选择器

　　定义以.开始

　　可以重复使用

　　可以控制div容器

<head>
    <style type="text/css">
           .p { color:#fff; font-size:18px;}
    </style>
</head>
<body>
       <p class="p">学习CSS</p>
</body>

6.子类选择器

<head>
    <style type="text/css">
           .p { color:#fff; font-size:18px;} /* 整个div*/
            .p p{color:red;} /* 学习css*/
    </style>
</head>
<body>
    <div class="p">
       <p>学习CSS</p>
        学习学习学习
    </div>
</body>

7.ID选择器

　　唯一选择器

　　定义以#开始

<head>
    <style type="text/css">
           #p { color:#fff; font-size:18px;}
    </style>
</head>
<body>
       <p id="p">学习CSS</p>
</body>

8.优先级问题

　　1）id>class>html

　　2）同级时选择离元素最近的一个

9.组合选择器（同时控制多个元素）

h1,h2,div {font-size:14px;color:red;}

10.伪元素选择器（控制超链接样式）

　　1）a:link 正常连接的样式

　　2）a:hover 鼠标放上去的样式

　　3）a:active 选择链接时的样式

　　4）a:visited 已经访问过的链接的样式

11.CSS注释方式 /*......*/

html注释方式

posted @ 2016-09-05 11:30 farmerspring 阅读(137) 评论(0) 编辑收藏举报

farmerspring

CSS样式

公告