CSS——选择器

最新推荐文章于 2023-04-16 15:35:19 发布

weixin_30823227

最新推荐文章于 2023-04-16 15:35:19 发布

阅读量64

点赞数

原文链接：http://www.cnblogs.com/zhai1997/p/11413437.html

版权

CSS：（Cascading Style Sheets）层叠样式表，实现了样式的定义与html文件相分离，并且便于后续的代码维护。

1、标签选择器

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <style type="text/css">
        p{font-family:"微软黑雅";font-size:15px;color:black;}
        </style>
    </head>

    <body bgcolor="aquamarine">
        <center>
        <p>举头望明月，低头思故乡</p>
        </center>
    </body>

</html>

定义标签<p>后，只要是用到了它，就会附带里面定义的属性显示出来。所以在网页中，只要是段落，都是使用定义了的统一的格式。

（2）id选择器

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <style type="text/css">
            #style1 {
                font-family: "微软黑雅";
                font-size: 20px;
                color: black;
            }
            
            #style2 {
                font-family: "微软黑雅";
                font-size: 13px;
                color: red;
            }
            
            #style3 {
                font-family: "微软黑雅";
                font-size: 15px;
                color: blueviolet;
            }
        </style>
    </head>

    <body bgcolor="aquamarine">
        <center>
            <div id="style1">
                <p align="middle">将进酒</p>
            </div>

            <div id="style2">
                <p align="middle">唐.李白</p>
            </div>
        </center>
        
        <div id="style3">
            <p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。
            </p>
            <p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 与君歌一曲，请君为我倾耳听。 钟鼓馔玉不足贵，但愿长醉不复醒。 古来圣贤皆寂寞，惟有饮者留其名。 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
            </p>
        </div>

    </body>

</html>

id选择器，以#开头后面跟id的名称，调用时 <div id="id名称">。

（3）类选择器

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <style type="text/css">
            .class1 {
                font-family: "微软黑雅";
                font-size: 20px;
                color: black;
            }
            
            .class2 {
                font-family: "微软黑雅";
                font-size: 13px;
                color: red;
            }
            
            .class3 {
                font-family: "微软黑雅";
                font-size: 15px;
                color: blueviolet;
            }
        </style>
    </head>

    <body bgcolor="aquamarine">
        <center>
            <div id="style1">
                <p class=class1 ;align="middle">将进酒</p>

                <p class=class2 ;align="middle">唐.李白</p>

        </center>

        <p class=class3>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。
        </p>
        <p class=class3>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 与君歌一曲，请君为我倾耳听。 钟鼓馔玉不足贵，但愿长醉不复醒。 古来圣贤皆寂寞，惟有饮者留其名。 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
        </p>

    </body>

</html>