CSS练习（二）

时间：2024-01-24 17:11:46

一、CSS选择器

1. 标签选择器：

　　标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。

　　举例：

*{margin:0;padding:0}
div{color:red}   


<div>....</div>　　　　　　　　　<!-- 对应以上两条样式 -->
<div class="box">....</div>　　<!-- 对应以上两条样式 -->

 　　练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>

    <style type="text/css">
        *{                       /* 给所有标签设置样式 */
            font-size: 20px;
        }

        div{                    /* 给div标签设置样式 */
            color: red;
        }

    </style>

</head>
<body>
    
    <div>这是第一个div</div>
    <div>这是第二个div</div>
    <div>这是第三个div</div>

    <p>这是一个p标签</p>

</body>
</html>

　　预览效果：

2. id 选择器：

 　　通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为

　　选择器。

　　举例：

#box{color:red} 

<div id="box">....</div>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

　　练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>

    <style type="text/css">
        *{                        /* 给所有标签设置样式 */
            font-size: 20px;
        }

        div{                    /* 给div标签设置样式 */
            color: red;
        }

        /* 层叠样式表，下面的样式覆盖上面的样式 */
        #div1{                    /* 使用id选择器 */
            color: blue;
        }

    </style>

</head>
<body>
    
    <div id="div1">这是第一个div</div>
    <div>这是第二个div</div>
    <div>这是第三个div</div>

    <p>这是一个p标签</p>

</body>
</html>

　　预览效果：

’

3. 类选择器：

　　通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
　　举例：

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

　　练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>

    <style type="text/css">
        *{                        /* 给所有标签设置样式 */
            font-size: 20px;
        }

        div{                    /* 给div标签设置样式 */
            color: red;
        }

        /* 层叠样式表，下面的样式覆盖上面的样式 */
        #div1{                    /* 使用id选择器 */
            color: blue;
        }

        .green{                    /* 类选择器 */
            color: green;
        }

        .big{
            font-size: 40px;
        }


    </style>

</head>
<body>
    
    <div id="div1" class="big green">这是第一个div</div>    <!-- id的权重要高于class，id起作用 -->
    <div class="green big">这是第二个div</div>
    <div>这是第三个div</div>

    <p class="green">这是一个p标签</p>

</body>
</html>

　　预览效果：

4. 层级选择器：

　　主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
　　举例：

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>

　　练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>

    <style type="text/css">
        
        .box{
            font-size: 20px;
            line-height: 40px;
        }

        .box span{        /* 层级选择器，.box下面的span */
            color: red;
            font-weight: bold;
        }

    </style>

</head>
<body>
    
    <div class="box">
        主要应用在选择父元素下的子元素，或者子元素下面的<span>子元素</span>，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
    </div>

    <div class="box2">
        主要应用在选择父元素下的子元素，或者子元素下面的<span>子元素</span>，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
    </div>

</body>
</html>

　　预览效果：

 

5. 组选择器：

　　多个选择器，如果有同样的样式设置，可以使用组选择器。
　　举例：

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

　　练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组选择器</title>
    <style type="text/css">
        
        /* 法一：分别描述 */
        /* 
        .box01{
            font-size: 20px;
            text-indent: 40px;
            color: red;
        }
        .box02{
            font-size: 20px;
            text-indent: 40px;
            color: pink;
        }
        .box03{
            font-size: 20px;
            text-indent: 40px;
            color: gold;
        }
         */

        /* 法二：将相同的描述抽离出来，合并到一起 */
        .box01,.box02,.box03{        /* 层级选择器是空格隔开，组选择器是逗号隔开 */
            font-size: 20px;         /* 组选择器：将公共的部分合并到一起 */
            text-indent: 40px;
        }

        .box01{
            color: red;
        }
        .box02{
            color: pink;
        }
        .box03{
            color: gold;
        }

    </style>

</head>
<body>

    <div class="box01">这是第一个div</div>
    <div class="box02">这是第二个div</div>
    <div class="box03">这是第三个div</div>

</body>
</html>

　　预览效果：

 

6. 伪类及伪元素选择器：

　　常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
　　举例：

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}


<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

　　练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类及伪元素选择器</title>
    
    <style type="text/css">
        
        .link{
            font-size: 30px;
            text-decoration: none;        /* 去掉下划线 */
            color: green;
        }

        /* 伪类选择器： */
        .link:hover{    /* 鼠标放上去之后的悬浮状态 */
            color: gold;
            font-weight: bold;    /* 加粗 */
        }

        /* 伪元素选择器： 通常解决bug时使用*/
        .box01,.box02{
            font-size: 20px;
        }

        .box01:before{        /* 前面塞入东西，塞的东西在网页中鼠标是选不中的 */
            content: "前面的文字";    
            color: red;
        }

        .box02:after{        
            content: "后面的内容";    
            color: red;
        }

    </style>

</head>
<body>
    
    <a href="http://www.baidu.com" class="link">百度一下</a>
    
    <div class="box01">这是第一个div</div>
    <div class="box02">这是第二个div</div>

</body>
</html>

　　预览效果：

 

 

相关文章