CSS基础（二）

一、后代选择器

用空格连接标签选择器，代表找到后代元素，如div span指找到div标签下的span标签

注意：后代可以是儿子、儿子的儿子...

<html>
    <head>
        <style type="text/css">
            /*div p span{ color:blue;}*/ /*这条表示仅将div下的p下的span改为蓝色*/
            div span{ color:red;} /*将div下的所有span改为红色*/
        </style>
    </head>
    <body>
        <div> <!--父标签-->
            <p> <!--子标签-->
                <span>我是p家的span</span> <!--子子标签-->
            </p>
            <span> <!--子标签-->
                <span>我是span家的span</span> <!--子子标签-->
            </span>
        </div>
    </body>
</html>

二、并列选择器

用逗号连接选择器，代表这些标签同时被选中，如div,p,.c,#d表示标签选择器div，p，class选择器c和id选择器d同时被选中

<html>
    <head>
        <style type="text/css">
            div,p,.c,#d{ color:blue;}
        </style>
    </head>
    <body>
        <div>我是div</div>
        <p>我是p</p>
        <h1 class="c">我是h1</h1>
        <h2 id="d">我是h2</h2>
    </body>
</html>

三、标签指定式

div.div1表示仅仅选择所有div标签中带有class选择器值为div1的标签

p#p1表示仅选择所有p标签中带有id选择器值为p1的标签

<html>
    <head>
        <style type="text/css">
            div.div1{color:red;}
            p#p1{color:blue;}
        </style>
    </head>
    <body>
        <div class="div1">我是div1</div>
        <div>我是div2</div>
        <p id="p1">我是p1</p>
        <p>我是p2</p>
    </body>
</html>

四、高级权重对比

1、引入方式权重对比

权重：行内式>外链式=内嵌式，先写的会被后写的覆盖

行内式权重最大，如果想覆盖它，只能给样式中添加!important把权重提高

html代码：

<html>
    <head>
        <!--外链式与内嵌式权重相同，先写的会被后写的覆盖-->
        <link rel="stylesheet" type="text/css" href="new7.css"/>
        <style>
            p{ color:red!important;} /*如果想要覆盖行内css，可以使用!important强行修改权重为最大*/
        </style>
    </head>
    <body>
        <!--行内css权重大于外链式和内嵌式-->
        <p style="color:green;">像风一样自由</p>
    </body>
</html>

css代码：

p{color:blue;}

2、复合选择器权重对比

为了方便记忆，标签选择器权重为1，class为10，id为1

谁的权重最大就显示谁定义的样式，如果权重

<html>
    <head>
        <style>
            /*标签选择器权重为1;class为10;id为100*/
            #span2{color:orange;} /*权重为100*/
            .div1 span{color:yellow;} /*权重为11*/
            span.span1{color:green;} /*权重为11。权重相同时后面的会覆盖前面的*/
            .span1{color:pink;} /*权重为10*/
            p span{color:blue;} /*权重为2*/
            span{color:red;} /*权重为1*/
        </style>
    </head>
    <body>
        <div class="div1">
            <p>
                <span class="span1" id="span2">像风一样自由</span>
            </p>
        </div>
    </body>
</html>

五、CSS常用文字属性

六、行间距

line-height 单位是像素(px)

<html>
    <head>
        <style type="text/css">
            p{width:200px;height:500px;background:pink;line-height:50px}
        </style>
    </head>
    <body>
        <p>路况极佳护航海拔超过v新北市的肌肤恢复路况极佳护航海拔超过v新北市的肌肤恢复路况极佳护航海拔超过v新北市的肌肤恢复路况极佳护航海拔超过v新北市的肌肤恢复路况极佳护航海拔超过v新北市的肌肤恢复路况极佳护航海拔超过</p>
    </body>
</html>

七、html5新标签

以下标签可以使用div、p、span等代替，但是使用这些新标签可以增强网站语义化，提升搜索排名

注意：以下新标签老版本的ie不支持，因此只能用于手机网站

posted on 2021-03-31 12:10 vorn 阅读(78) 评论(0) 收藏举报

刷新页面返回顶部

vorn