层叠的意思就是“继承”、“权重”、“覆盖”,通过良好的层级命名更好的实现效果,更少的代码,更多的功能,下面为大家详细介绍下,感兴趣的朋友不要错过
 
解答一:
层叠指的是样式的优先级,当产生冲突时以优先级高的为准。
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的可维护性。
基本上层叠的意思就是“继承”、“权重”、“覆盖”,通过良好的层级命名更好的实现效果,更少的代码,更多的功能

CSS层叠样式表的层叠是什么意思的更多相关文章

  1. CSS层叠样式表的层叠是什么意思(转自知乎)

    转自知乎上的回答:http://www.zhihu.com/question/20077745 解答一: 层叠指的是样式的优先级,当产生冲突时以优先级高的为准.1. 开发者样式>读者样式> ...

  2. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  3. css优先级和层叠

    css优先级和层叠 1.优先级    计算方法:        a.行内样式        b.id选择器的数量        c.类,伪类和属性选择器的数量        d.标签选择器和伪元素选择 ...

  4. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  5. CSS层叠样式表(Cascading Style sheets)

    CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...

  6. [转]深入理解CSS中的层叠上下文和层叠顺序

    http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

  7. 《精通CSS层叠样式表》

    书名 <精通CSS层叠样式表> 图片 时间 2017-7月 学习 感觉和ps一样对我都不友好 3天撸完

  8. CSS:CSS层叠样式表的概述

    CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...

  9. css:层叠样式表-网页布局基础

    css:层叠样式表:一.写法分类: 1.内联(行内,写在标签里面,以属性的形式表现,属性名是style) 例:<table style="background-color: aqua& ...

随机推荐

  1. 英语是学习Java编程的基础吗

    就当前市场行情需求来看,Java人才需求依旧火爆,在如今互联网时代,手机移动端的软件开发是非常重要的,如今无论是大中小企业都是需要进行软件的开发的,又因为Java是开源的使用起来可以节约一大批的成本, ...

  2. 01_日志采集框架Flume简介及其运行机制

    离线辅助系统概览: 1.概述: 在一个完整的大数据处理系统中,除了hdfs+mapreduce+hive组成分析系统的核心之外,还需要数据采集.结果数据导出. 任务调度等不可或缺的辅助系统,而这些辅助 ...

  3. Centos使用光盘yum源

    yum查看所有源 yum repolist all 方法一:本机使用光盘源安装软件的设置 mkdir /media/cdrom mount /dev/cdrom  /media/cdrom vim / ...

  4. macOS 终端常用命令

    macOS 常用命令 基本命令 1.列出文件 ls 参数 目录名 例:看看驱动目录下有什么:ls /System/Library/Extensions 参数 -w 显示中文,-l 详细信息,-a 包括 ...

  5. BCB 如何拦截TAB键消息

    最近项目中一个需求,按下Tab键,按照指定的顺序进行跳转. 在实现的过程中发现,Tab按下的时候,会让当前控件失去焦点.并跳转到其他可焦点控件 例如 TEdit,TButton 等. 究其原理,是因为 ...

  6. inferiors

    inferiors 英[ɪnˈfɪərɪəz] 美[ɪnˈfɪriərz] n. 不如别人的人; 级别(或地位)低的人; [词典] inferior的复数; info inferiors

  7. Shell脚本快速查看网段内ip占用情况和可用ip

    思想就是整个网段ping一遍,对于ping不通的,解析其失败的字符来判定 #!/bin/bash head_add=${} address=${head_add%.*} echo address=$a ...

  8. tsung压力测试环境部署详细步骤(内附安装包)

    操作系统: Redhat 6.3.Redhat6.5 .centos7.4(这些版本已验证过) tsung版本: tsung-1.6.0 下载地址: 链接: https://pan.baidu.com ...

  9. setTimeout设置为0 为啥不能立马执行

    setTimeout(function(){}, timer) 是指延时执行.第一个参数是回调函数,第二个参数是指延时多久执行回调函数. setTimeout(function(){console.l ...

  10. BZOJ 3658: Jabberwocky (双向链表+BIT)

    题意 平面上有n个点,每个点有k种颜色中的一个.你可以选择一条水平的线段获得在其上方或其下方的所有点,请求出你最多能够得到多少点,使得获得的点并不包含所有的颜色. 分析 线段可以向上向下,那么我们只考 ...