zoukankan      html  css  js  c++  java
  • CSS层叠样式表的层叠是什么意思

    层叠的意思就是“继承”、“权重”、“覆盖”,通过良好的层级命名更好的实现效果,更少的代码,更多的功能,下面为大家详细介绍下,感兴趣的朋友不要错过
     
    解答一:
    层叠指的是样式的优先级,当产生冲突时以优先级高的为准。
    1. 开发者样式>读者样式>浏览器样式(除非使用!important标记 )
    2. id选择符>(伪)类选择符>元素选择符
    3. 权重相同时取后面定义的样式
    以下是一段经典的html,三个类名分别为模块、标题和正文。
    <div class="mod">
    <div class="hd"></div>
    <div class="bd"></div>
    </div>
    大部分html页面都可以由这种结构嵌套或者累加而成。
    解答二:
    CSS层叠是指CSS样式在针对同一元素配置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描 述为权重高的覆盖权重低的,因此也称作层叠。每个CSS选择器都会有一个权重(行内1000,id100,class10,tag1、可以这样认为),当 两个选择器同时配置同一元素的同一属性时(比如一个设置color:red,另一个color:black),就会产生冲突,而解决冲突的方案就是CSS 选择器的权重,权重高的来覆盖权重低的。
    另外,继承的属性是权重重最轻的,会被上面的四个定义方式覆盖。
    CSS语义化其实更多地是指HTML的语义化。 比如下面的一个代码我们这样写:
     

    复制代码
    代码如下:

    <div class="box">
    <div class="h2">这是区块标题</div>
    <div class="bd">这是区块内容</div>
    <div>

    但是语义化的写法更能使得 robot识别网页的结构,下面是语义化的写法:

    复制代码
    代码如下:

    <section>
    <h2>这是区块标题</h2>
    <p>这是区块内容</p>
    </section>

    对 于robot来说,它能够识别section(区块)、h2(二级标题)、p(文字段落),但是不能识别出div所包含的内容,因为div这个标记本身是 无语义的(必要时通过class或id属性来赋予语义,但是这是次优选择)。 而HTML5新增的article、header、footer、nav、section等标签就是丰富了HTML原生的语义标签,在很大程度上满足了 HTML编写的需要。
    解答三:
    我的理解是,层叠指的是上级标签的样式会自动继承到其所有下级标签,如针对<body>设置的标签选择器所设的字体样式会自动应用到<body>下的<p>中,除非<p>重写了相关样式将其覆盖。
    CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名,如对于页面上方的<div>,可将其id设为header;页面下方的<div>设为footer,可以增强CSS的可维护性。
    基本上层叠的意思就是“继承”、“权重”、“覆盖”,通过良好的层级命名更好的实现效果,更少的代码,更多的功能
  • 相关阅读:
    js --- for in 和 for of
    vue -- config index.js 配置文件详解
    vue -- 脚手架之webpack.dev.conf.js
    vue --- 解读vue的中webpack.base.config.js
    vue 引入第三方字体包
    js call 和 apply
    vue2.0中的$router 和 $route的区别
    懒加载js实现和优化
    vue的指令在webstrom下报错
    BFC的布局规则和触发条件
  • 原文地址:https://www.cnblogs.com/yuer20180726/p/11150282.html
Copyright © 2011-2022 走看看