02CSS继承，层叠和优先级07

最新推荐文章于 2024-08-21 15:02:34 发布

weixin_38170853

最新推荐文章于 2024-08-21 15:02:34 发布

阅读量44

点赞数

原文链接：http://www.cnblogs.com/shink1117/p/8414108.html

版权

day07

CSS继承和层叠

CSS继承
好处：
　　1.父元素设置样式，子元素可以继承部分属性
　　2.减少代码

CSS层叠
　　可以定义多个样式
　　不冲突时，多个样式可层叠为一个
　　冲突时，按不同样式规则优先级来应用样式

CSS优先级

CSS使用优先级

CSS选择器优先级
　　id选择器>class选择器>标签选择器>通配符选择器
　　同类样式多次引用，样式表中后定义的优先级高

CSS优先级规则

同一样式表中：
　　1.权值相同
　　　　就近原则
　　2.权值不同
　　　　CSS样式权值高，就使用哪种样式

选择器权值
　　标签选择器：权值为1
　　类选择器和伪类：权值为10
　　ID选择器：权值为100
　　通配符选择器：权值为0
　　行内样式：权值为1000

!important规则
　　可调整样式规则的优先级
　　添加在样式规则之后，中间用空格隔开

CSS样式命名

常用的CSS样式命名
1）页面结构
　　页头：header 导航:nav
　　页面主体：main 侧栏：sidebar
　　页尾：footer 栏目：column
　　内容：content/container 页面外围控制：wrapper
　　容器：container 左右中：left right center
2）导航
　　导航：nav 左导航：leftsidebar
　　主导航：mainnav 右导航：rightsidebar
　　子导航：subnav 菜单：menu
　　顶导航：topnav 子菜单：submenu
　　边导航：sidebar 标题：title
　　摘要：summary
3）功能
　　标志：logo 注册：register
　　广告：banner 搜索：search
　　登录：login 功能区：shop
　　登陆条：loginbar 标题：title

案例：

css_jc.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS继承和层叠</title>
    <style type="text/css">
        p{font-size: 23px}
        div{color: red;border: 1px solid blue;}
        div div{color: green;}
        div div{color: orange;}
        div{font-size: 24px}
    </style>
</head>
<body>
    <div>
        <p>CSS<span>继承</span></p>
        <div>CSS层叠</div>
    </div>
    <p>CSS继承和层叠</p>
</body>
</html>

css_priority.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器优先级</title>
    <style type="text/css">
        div{color: red;}
        #idgreen{color: green;}
        /*.classblue{color: blue;}
        .classyellow{color: yellow;}*/
        div{color: gray;}
        *{color: black;}
        b{color: purple;} /*1*/
        p b{color: yellow !important;} /*2*/
        .classblue{color: blue;} /*10*/
        div #test2 b{color: gray;} /*102*/
        #test1 p b{color: orange;} /*102*/
        div p .classblue{color: red;} /*12*/
    </style>
</head>
<body>
    <p>单独使用</p>
    <div>使用标签选择器样式</div>
    <div id="idgreen">使用ID样式</div>
    <div class="classblue">使用class样式</div>
    <!--id选择器>标签选择器 class选择器>标签选择器 -->
    <p>同一个元素引用标签,id,class定义的样式</p>
    <div class="classblue" id="idgreen">CSS样式，同时引用标签,id,class定义的样式</div>
    <div id="idgreen" class="classblue">CSS样式，同时引用标签,id,class定义的样式</div>
    <!-- id选择器>class选择器>标签选择器 -->
    <p></p>
    <div class="classblue classyellow">CSS优先级，蓝色在前，黄色在后</div>
    <div class="classyellow classblue">CSS优先级，蓝色在后，黄色在前</div>
    <div>CSS优先级</div>
    <!-- 优先级结果：同类样式多次引用，样式表中后定义的优先级高 -->
    <p>派生选择器优先级</p>
    <div id="test1">
        <h1>CSS样式优先级</h1>
        <p id="test2">所谓<b class="classblue" style="color: red;">CSS优先级</b>，指CSS样式在浏览器中被解析的先后顺序</p>
        <div><b>权值相同</b>，就近原则；<b>权值不同</b>，哪个权值高，使用哪个。</div>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/shink1117/p/8414108.html

weixin_38170853

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02CSS继承，层叠和优先级07

day07 CSS继承和层叠 CSS继承好处：　　1.父元素设置样式，子元素可以继承部分属性　　2.减少代码 CSS层叠　　可以定义多个样式　　不冲突时，多个样式可层叠为一个　　冲突时，按不同样式规则优先级来应用样式 CSS优先级 CSS使用优先级 CSS选择器优先级　　id选择器>class选择器>标签选择器>通配符选择器　　同...
复制链接

扫一扫