请选择 进入手机版 | 继续访问电脑版
查看: 82610|回复: 1578

CSS样式优先权,样式控制的三种方式

[复制链接]
  • TA的每日心情
    开心
    2017-8-14 09:44
  • 签到天数: 229 天

    [LV.7]常住居民III

    发表于 2016-1-7 00:39:53 | 显示全部楼层 |阅读模式
    本帖最后由 xiaoye 于 2016-1-7 11:12 编辑

    三种使用css样式的方式:

    @import导入

    链接

    内嵌



    第一步创建一个demo.hml,ys1.css

    demo.html内容为:

    <body>
    <h1>饮酒·其五</h1>
    <p>结庐在人境,而无车马喧。<br />
    问君何能尔?心远地自偏。<br />
    采菊东篱下,悠然见南山。<br />
    山气日夕佳,飞鸟相与还。<br />
    此中有真意,欲辨已忘言。
    </p>
    </body>


    ys1.css内容为:

    body{
            font-size:20px;
            color:blue;
            background-color:pink;
            }


    ys2.css内容为

    body{
            font-size:25px;
            color:blue;
            background-color:#ccc;
            }



    ===========================================

    将demo改为:

    <style type="text/css">
    @import url("ys1.css");
    </style>
    <body>
    <h1>饮酒·其五</h1>
    <p>结庐在人境,而无车马喧。<br />
    问君何能尔?心远地自偏。<br />
    采菊东篱下,悠然见南山。<br />
    山气日夕佳,飞鸟相与还。<br />
    此中有真意,欲辨已忘言。
    </p>
    </body>


    此时打开网页,背景颜色为粉红色,字体颜色为红色。

    将ys2.css改为:

    body{
            font-size:25px;
            color:blue;
            background-color:#ccc;
            }
    @import url("ys1.css");

    demo.html中将

    <style type="text/css">@import url("ys1.css");</style>

    修改为:

    <link href="ys2.css" rel="stylesheet" type="text/css" />

    这是刷新网页:背景颜色为灰色,字体颜色为蓝色。


    现在可以确定:链接式比导入式的权限高。

    继续。。。。。。


    接下来用上内嵌式:

    <link href="ys2.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body{
            background-color:#FFFF00;
            color:#00FF00;
            }
    </style>

    </head>
    <body>


    此时显示的是黄色的背景,绿色的文字。



    样式优先权为:

    @import导入<链接<内嵌
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2019-4-14 17:44
  • 签到天数: 5 天

    [LV.2]偶尔看看I

    发表于 2016-1-7 07:23:43 | 显示全部楼层
    支持中国红客联盟(ihonker.org)
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    发表于 2016-1-7 08:32:20 | 显示全部楼层
    感谢楼主的分享~
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    发表于 2016-1-7 09:06:32 | 显示全部楼层
    支持中国红客联盟(ihonker.org)
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2021-10-8 07:37
  • 签到天数: 6 天

    [LV.2]偶尔看看I

    发表于 2016-1-7 12:18:42 | 显示全部楼层
    支持中国红客联盟(ihonker.org)
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    发表于 2016-1-7 13:42:30 | 显示全部楼层
    支持中国红客联盟(ihonker.org)
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    发表于 2016-1-8 05:03:52 | 显示全部楼层
    还是不错的哦,顶了
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    发表于 2016-1-8 06:19:02 | 显示全部楼层
    还是不错的哦,顶了
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    发表于 2016-1-8 09:00:15 | 显示全部楼层
    还是不错的哦,顶了
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    发表于 2016-1-8 14:19:18 | 显示全部楼层
    支持中国红客联盟(ihonker.org)
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    快速回复 返回顶部 返回列表