精华内容
下载资源
问答
  • css 高度继承父类_CSS继承

    千次阅读 2020-08-29 06:01:39
    css 高度继承父类When you set some properties on a selector in CSS, they are inherited by all the children of that selector. 在CSS中的选择器上设置某些属性时,该属性将由该选择器的所有子级继承。 I ...

    css 高度继承父类

    When you set some properties on a selector in CSS, they are inherited by all the children of that selector.

    在CSS中的选择器上设置某些属性时,该属性将由该选择器的所有子级继承。

    I said some, because not all properties show this behaviour.

    我说了一些 ,因为并非所有属性都显示此行为。

    This happens because some properties make sense to be inherited. This helps us write CSS much more concisely, since we don’t have to explicitly set that property again on every single children.

    发生这种情况是因为可以继承某些属性。 这有助于我们更加简洁地编写CSS,因为我们不必在每个子节点上都再次显式设置该属性。

    Some other properties make more sense to not be inherited.

    其他一些属性更有意义,那就是被继承。

    Think about fonts: you don’t need to apply the font-family to every single tag of your page. You set the body tag font, and every children inherits it, along with other properties.

    考虑一下字体:您无需将font-family应用于页面的每个标签。 设置body标记字体,每个子代都会继承它,以及其他属性。

    The background-color property, on the other hand, makes little sense to be inherited.

    另一方面, background-color属性几乎没有意义。

    继承的属性 (Properties that inherit)

    Here is a list of the properties that do inherit. The list is non-comprehensive, but those rules are just the most popular ones you’ll likely use:

    这是确实继承的属性的列表。 该列表并不全面,但是这些规则只是您可能会使用的最受欢迎的规则:

    • border-collapse

      border-collapse

    • border-spacing

      border-spacing

    • caption-side

      caption-side

    • color

      color

    • cursor

      cursor

    • direction

      direction

    • empty-cells

      empty-cells

    • font-family

      font-family

    • font-size

      font-size

    • font-style

      font-style

    • font-variant

      font-variant

    • font-weight

      font-weight

    • font-size-adjust

      font-size-adjust

    • font-stretch

      font-stretch

    • font

      font

    • letter-spacing

      letter-spacing

    • line-height

      line-height

    • list-style-image

      list-style-image

    • list-style-position

      list-style-position

    • list-style-type

      list-style-type

    • list-style

      list-style

    • orphans

      orphans

    • quotes

      quotes

    • tab-size

      tab-size

    • text-align

      text-align

    • text-align-last

      text-align-last

    • text-decoration-color

      text-decoration-color

    • text-indent

      text-indent

    • text-justify

      text-justify

    • text-shadow

      text-shadow

    • text-transform

      text-transform

    • visibility

      visibility

    • white-space

      white-space

    • widows

      widows

    • word-break

      word-break

    • word-spacing

      word-spacing

    I got it from this nice Sitepoint article on CSS inheritance.

    我从有关CSS继承的这篇不错的Sitepoint文章中获得了它。

    强制属性继承 (Forcing properties to inherit)

    What if you have a property that’s not inherited by default, and you want it to, in a children?

    如果您有一个默认情况下未继承的属性,并且希望在子级中继承该属性,该怎么办?

    In the children, you set the property value to the special keyword inherit.

    在子级中,将属性值设置为特殊关键字inherit

    Example:

    例:

    body {
    	background-color: yellow;
    }
    
    p {
      background-color: inherit;
    }

    强制属性不继承 (Forcing properties to NOT inherit)

    On the contrary, you might have a property inherited and you want to avoid so.

    相反,您可能继承了一个属性,但要避免这种情况。

    You can use the revert keyword to revert it. In this case, the value is reverted to the original value the browser gave it in its default stylesheet.

    您可以使用revert关键字将其还原。 在这种情况下,该值将还原为浏览器在其默认样式表中为其提供的原始值。

    In practice this is rarely used, and most of the times you’ll just set another value for the property to overwrite that inherited value.

    实际上,这很少使用,大多数情况下,您将为属性设置另一个值以覆盖该继承的值。

    其他特殊值 (Other special values)

    In addition to the inherit and revert special keywords we just saw, you can also set any property to:

    除了我们刚刚看到的inheritrevert特殊关键字之外,您还可以将任何属性设置为:

    • initial: use the default browser stylesheet if available. If not, and if the property inherits by default, inherit the value. Otherwise do nothing.

      initial :使用默认的浏览器样式表(如果有)。 如果不是,并且该属性默认继承,则继承该值。 否则什么都不做。

    • unset: if the property inherits by default, inherit. Otherwise do nothing.

      unset :如果属性默认继承,则继承。 否则什么都不做。

    翻译自: https://flaviocopes.com/css-inheritance/

    css 高度继承父类

    展开全文
  • css继承

    2018-04-20 16:50:56
    css继承:子元素可以使用父元素的样式css继承的局限性:border, margin, padding可以继承的css属性:font, color, font-family, font-size, font-style, font-weight,letter-spacing, text-indent,cursor, line-...

    css继承:子元素可以使用父元素的样式

    css继承的局限性:

    border, margin, padding

    可以继承的css属性:

    font, color, font-family, font-size, font-style, font-weight,

    letter-spacing, text-indent,

    cursor, line-height, text-align

    list-style

    展开全文
  • 这是一个十分新的 CSS 属性,使用起来十分简单,可以从各个方向反射我们内容。不过兼容性过于惨淡: 基本上是只有 -webkit- 内核的浏览器才支持。 不过使用起来真的是方便,解题如下: 不过使用起来真的是方便,...
  • CSS继承的重要性 如果您曾经设置过网页内容的样式,则很有可能没有为每个必须显示文本的元素编写字体样式。 您可能仅将字体样式添加到了body元素,例如: A h2 element A paragraph Another paragraph A h3 element...

    取消继承css

    HTML中存在关系,而这些关系使我们可以选择和设置网页元素的样式。 当一个HTML元素嵌套在另一个元素中时,外部元素称为元素,而内部元素是child元素。

    <div>
        <h>Heading</h>
        <span>I am a span</span>
        <p>This is a paragraph</p>
    </div>

    子元素本身可以成为另一个元素的父元素。

    为什么所有这些序言和背景故事? 因为很重要!

    在为父元素设置样式时,在某些情况下,样式将由其子元素继承。 我说一些情况是因为这种继承并不总是成立。

    CSS继承的重要性

    如果您曾经设置过网页内容的样式,则很有可能没有为每个必须显示文本的元素编写字体样式。 您可能仅将字体样式添加到了body元素,例如:

    <body>
        <div>
        <h2>A h2 element</h2>
        <p>A paragraph</p>
        <div>
          <p>Another paragraph</p>  
        </div>
      </div>
      <div>
        <h3>A h3 element</h3>
      </div>
    </body>

    如果您想为所有这些内容提供统一的字体样式,则只需设置body元素的样式即可:

    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    这是可能的,因为跨HTML元素的继承。 这很有用,因为我们不必为div和标题重复相同的font样式。 同样适用于color样式,除非将不同的color样式应用于子元素,否则将其应用于父元素时将应用于该父元素的子元素。

    虽然继承使我们很轻松,但是如果所有CSS属性都以这种方式运行,事情就不会那么容易了。

    这是另一个示例:

    <ul class="main-list">
      <li>Dairy</li>
      <li>Vegetable</li>
      <li class="sub-list">
        Fruit
        <ul>
          <li>
            Drupe
            <ul>
              <li>Peach</li>
              <li>Coconut</li>
              <li>Olive
            </ul>
          </li>
          <li>
            Berry
            <ul>
              <li>Tomato</li>
              <li>Cucumber</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

    谁知道Cucumber是浆果? 我们将对父级列表实现一些样式,并查看沿线继承的内容:

    应用于无序列表的fontcolor样式由其子元素甚至其子元素继承。 但是, border样式不是这种情况。

    那么还有哪些其他属性可以继承?

    继承属性的完整列表

    根据W3C,这是可以继承的属性。

    1. azimuth
    2. border-collapse
    3. border-spacing
    4. caption-side
    5. color
    6. cursor
    7. direction
    8. elevation
    9. empty-cells
    10. font-family
    11. font-size
    12. font-style
    13. font-variant
    14. font-weight
    15. font
    16. letter-spacing
    17. line-height
    18. list-style-image
    19. list-style-position
    20. list-style-type
    21. list-style
    22. orphans
    23. pitch-range
    24. pitch
    25. quotes
    26. richness
    27. speak-header
    28. speak-numeral
    29. speak-punctuation
    30. speak
    31. speech-rate
    32. stress
    33. text-align
    34. text-indent
    35. text-transform
    36. visibility
    37. voice-family
    38. volume
    39. white-space
    40. widows
    41. word-spacing

    您可以在W3C的网站上找到有关此列表的更多信息(您绝对不需要记住所有这些信息!)。

    如何强制属性继承

    由于某些属性无法继承,因此您可能会认为解决办法是也将它们应用于子元素。 我们上面使用的样式可能如下所示:

    .main-list {
      border: 1rem solid #000;
      color: red;
      font-family: Verdana
    }
    
    .sub-list {
      border: 1rem solid #000;
    }

    我们仍然在父级列表和第一个子列表上只有边框样式。 但是问题是我们不得不重复自己。 一遍又一遍地复制相同样式的痛苦变得显而易见。

    一个好的解决方案是只需要对样式应用一次,最好是对父样式应用一次,并对子项进行一些调整以继承。 这样可以使所有物品保持干燥和清洁。

    继承关键字

    根据MDN文件:

    Inherit CSS关键字使指定的元素从其父元素获取属性的计算属性。” – MDN

    换句话说,这是一种声明应从元素的父级获取特定属性值的方式。 此关键字可以在任何 CSS属性上使用。

    回到我们的示例,这是样式的显示方式:

    .main-list {
      border: 1rem solid #000;
      color: red;
      font-family: Verdana;
    }
    
    .sub-list {
      border: inherit;
    }

    这样,结果将如下所示:

    因此,如果需要更改边框样式,我们只需要在一个地方进行更改即可。

    如何强制继承属性

    尽管可以对默认情况下不可继承的属性强制执行继承,但在某些情况下,最好不要这样做。 另一种选择是利用属性的初始值。

    初始关键字

    您可以使用initial CSS关键字设置CSS属性的默认值或初始值。 这将导致该属性的继承值回到其初始值。

    在此示例中,发生了几件事。 我们有两个div元素,其红色属性由嵌套在其中的h1p元素继承。 但是,我们还应用了全局h1样式(蓝色),但是我们确保第二个h1不会以以下方式继承这两种样式:

    h1 {
      color: blue;
    }
    
    div {
      border: 1rem solid #000;
      color: red;
      font-family: Verdana;
      margin-bottom: 10px;
    }
    
    .berries h1 {
      color: initial;
    }

    我们在.berries块中的h1返回到浏览器最初应用的任何颜色。 看起来像这样:


    其他CSS继承关键字

    除了inheritinitial关键字之外,我们还可以使用revertunset 。 实际上,实际上建议使用这些替代方法,因为initial会产生一些意外的结果。

    未设定的关键字

    unset关键字稍有不同。 它将元素的值重置为继承的值(如果已继承),如果没有则重置为其初始值。 再次是我们的示例:

    h1 {
      color: blue;
    }
    
    div {
      border: 1rem solid #000;
      color: red;
      font-family: Verdana;
      margin-bottom: 10px;
    }
    
    .berries h1 {
      color: unset;
    }

    在这种情况下,第二个h1color属性将恢复为其继承的值(红色),而不是其初始值(黑色):

    还原关键字

    最后,我们有revert关键字,在大多数情况下,它的作用与unset相似。 它将属性重置为其继承的值(如果它是从其父项继承的),或者重置为由用户自己的样式表(如果存在)建立的默认值,或者重置为浏览器的样式。

    结论

    当在样式表中声明样式规则时,会有很多地方可以使用该属性的

    从哪里获取样式取决于属性在继承方面的工作方式。 如果该属性是可继承的,则其值将来自其父对象,该父对象将在网络作者创建的样式表中声明。 否则它将来自第二或第三来源。

    CSS中的继承可能会有些混乱! 希望本教程对您有所帮助。

    翻译自: https://webdesign.tutsplus.com/tutorials/understanding-css-inheritance-inherit-initial-unset-and-revert-keywords--cms-34233

    取消继承css

    展开全文
  • NULL 博文链接:https://edison87915.iteye.com/blog/1837058
  • css继承和权重

    2019-08-26 16:13:06
    CSS继承和权重 知识点1.CSS继承性 就像父亲的财产可能会遗传给儿子一样,在CSS中祖先元素的样式同样也会被子元素继承。 继承是指应用在一个标签上的那些CSS属性被传到其内嵌标签上的过程。 比如为父元素设置了字体...

    CSS继承和权重

    知识点1.CSS继承性

    就像父亲的财产可能会遗传给儿子一样,在CSS中祖先元素的样式同样也会被子元素继承。
    继承是指应用在一个标签上的那些CSS属性被传到其内嵌标签上的过程。
    比如为父元素设置了字体颜色,子元素也会应用上相同的颜色。
    当然并不是所有的样式都会被继承,
    
           哪些属性能继承?
    	color、 text-开头的、line-开头的、font-开头的。
    	这些关于文字样式的,都能够继承; 所有关于盒子的、定位的、布局的属性都不能继承。
    
    

    1

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>继承</title>
    <style>
    #box{
    	color:#f9f;
    	font-size:20px;
    	line-height:100px;
    	font-weight:700;
    	
    	font-style:italic;
    	text-align:center;
    	background:#ff0;
    	width:500px;
    	height:100px;
    	border:2px solid #000;
    	margin:0 auto;
    }/* 100 */
    li{}/* 1 */
    
    </style>
    </head>
    <body>
    <div id="box">
        <ul>
            <li>猜猜我的颜色</li>
        </ul>
    </div>
    </body>
    </html>
    子类会继承父类的css样式
    

    知识点2.CSS权重

    在页面中使用CSS选择器选中元素时,经常都是一个元素同时被多个选择器选中。
    比如:
    body h1
    h1
    上边的两个选择器都会选择h1元素,如果两个选择器设置的样式不一致那还好不会产生冲突,但是如果两个选择器设置的是同一个样式,这样h1到底要应用那个样式呢?CSS中会默认使用权重较大的样式,权重又是如何计算的呢?
    
    
    不同的选择器有不同的权重值:
    内联样式:权重是 1000
    id选择器:权重是 100
    类、属性、伪类选择器:权重是 10
    元素选择器:权重是 1
    通配符:权重是 0
    计算权重需要将一个样式的全部选择器相加,比如上边的body h1的权重是2,h1的权重是1,所以第一个选择器设置的样式会优先显示。
    
    
    !important作用是提高指定CSS样式规则的应用优先权。
    	color: blue!important;
    优先级为:
      !important >行内样式表>  id > class > 标签   >全局 
    
    

    内联样式表的优先级最高
    内部样式表与外部样式表的优先级和书写顺序有关,后书写的优先级别高;

    选择符的优先级:
    定义:选择符的优先级即选择符的权重 针对同一个元素或同一群元素 进行选择时起的冲突进行的优先选择的处理。
    
    内联样式的权重为      	1000
    id选择符的权重为       	0100
    class选择符的权重为 	0010
    伪类选择符的权重为 	0010
    元素选择符的权重为 	0001
    继承样式的权重为 		0000
    后代选择符的权重:为后代选择符的权中之和
    

    代码

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>选择符权重2</title>
    <style>
    html body div#box ul.list li.lix.lix.lix.lix.lix{background:#0FF;}/* 165 */
    html body div#box ul.list li.lix{background:white;}/* 125 */
    html body div#box .list .lix{background:skyblue;}/* 123 */
    html body #box .list .lix{background:pink;}/* 122 */
    #box .list .lix{background:green;}/* 120 */
    #box li{background:black;}/* 101 */
    ul .lix{background:orange;}/* 11 */
    .lix{background:gray;}/* 10 */
    div ul li{background:blue;}/* 3 */
    ul li{background:yellow;}/* 2 */
    li{background:red;}/* 1 */
    
    </style>
    </head>
    <body>
    
    <div id="box">
    	<ul class="list">
        	<li class="lix">继续猜猜我的背景颜色</li>
        </ul>
    </div>
    
    </body>
    </html>
    官大一级压死人
    #box ul li{background:yellow;}
    #box ul li.two{background:red;}
    
    展开全文
  • CSS继承属性

    千次阅读 2019-06-24 20:20:34
    继承性的属性: 1、字体系列属性 font:组合字体 font-family:规定元素的字体系列 font-weight:设置字体的粗细 font-size:设置字体的尺寸 font-style:定义字体的风格 font-variant:设置小型大写字母的字体...
  • postcss-atcss继承 AtCSS继承其他规则的模块 安装 $ npm install postcss-atcss-inherit 执照 MIT许可证(MIT) 版权所有(c)2015 Masaaki Morishita
  • 微信小程序css继承

    千次阅读 2019-04-09 17:54:00
    在微信小程序里写的全局样式,pages里的组件是可以继承的,但是components里只能继承font和color属性。 转载于:https://www.cnblogs.com/lanshu123/p/10678601.html
  • CSS继承

    2018-11-17 20:54:16
    CSS继承 记录一下,css的继承特性。 CSS继承特性主要是指文本方面的继承,而关于与盒模型相关的不带继承。比如 font-size:12px;会继承,而margin-left:10px;则不会继承。 ...
  • CSS继承性就是CSS允许结构的外围样式不仅可以应用于某个特定的元素,还可以应用于它包含的、可匹配的标签。 通俗说就是在HTML文档结构中,包含在内部的标签将拥有外部标签的某些样式。 就像java语言的继承一样。子类...
  • CSS继承—深入剖析

    2017-10-21 11:16:55
    CSS继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设,即整体布局声明。
  • td .大红{ color: #c37; background-color:transparent; //继承时用这句,变成透明的了 }
  • CSS继承-深入剖析.rar

    2019-07-09 22:54:00
    CSS继承—深入剖析
  • CSS继承

    2020-03-05 10:14:10
    1. 什么是css继承 继承是css中非常重要的一个概念。当你为HTML中的某个元素赋予CSS样式时,这些样式不仅仅会影响当前元素,有的样式还会影响该元素的子元素。这些下层子元素继承上层祖先元素样式属性的特点,就称为...
  • CSS样式继承和层叠

    2021-01-19 20:45:33
    一:基本选择器 标签选择:根据页面当中标签名字进行选择,直接把样式应用到指定的标签上。 特点: 1.标签选择器会对当年页面当中所有的指定标签进行选择; 2.标签选择器对代码的当前标签层次结构没有任何关联,只要...
  • CSS属性继承

    千次阅读 2019-06-19 14:16:13
    CSS 继承 MDN 的教程:https://developer.mozilla.org/zh-CN/docs/Web/CSS/inheritance 什么是继承呢? 一个子元素可以从祖先元素继承“可继承属性”的计算值。 可以对比Java的继承来理解,子类的实例调用某方法...
  • css 继承

    2012-04-25 17:03:50
     有时候继承也会带来些错误,比如说下面这条CSS定义:  Body{color:blue}  在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说,这是不正确的,但是它确实存在。所以我们经常需要借助于某些...
  • CSS样式的继承性和优先级

    千次阅读 2018-10-30 22:34:13
    本文主要内容 ...1.CSS继承性 &amp;amp;amp;amp;lt;!doctype html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&amp;amp;
  • CSS继承性与层叠性

    2018-07-23 11:42:26
    继小编上一篇对CSS的介绍,在学到继承性与层叠性时小编觉得有必要对其单独进行说明一下。 一、继承性 这边先举一个例子来说(只取了关键部分): &lt;style type="text/css"&gt; div{ ...
  • 所谓CSS继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间...
  • 4.5继承 在本书的[3.3.2继承与层叠]一节曾经简要介绍过继承:(X)HTML元素可以从其父元素... 4.5.1值的继承 继承也是基于文档树的,文档树中元素的某些属性可以被其子元素继承,每一个CSS属性都定义了它能否被继承。例
  • 1.css的加载方式 CSS的引入样式总共有三种:行内样式(内联样式表)、内部样式表、外部样式表。下面分别来介绍这三种样式。 1.内联式(行内样式) 内联式就是直接在标签里写样式。行内样式只对应用了此样式的标签...
  • 所谓CSS继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间...
  • CSS继承

    2014-07-04 21:30:50
    一、CSS继承性 CSS的一个主要特征就是继承,它是依赖于祖先-后代的关系的。CSS继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本...
  • CSS——继承

    千次阅读 2018-05-07 13:40:32
    CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于 某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜 色设置不仅应用p标签,还应用于p...
  • css继承

    2015-05-09 14:59:09
    继承性:在CSS中当在某个元素中定义了某个属性值时,其包含的各种元素都会使用这个值,不是所有的CSS 属性都会具有继承性,合理的使用CSS的各种继承性,可以更方便的对各种效果进行控制。   [html] ...
  • CSS 继承与层叠

    2018-01-03 13:38:35
    CSS 继承 即,从父元素那继承部分CSS属性 好处: 1. 父元素设置样式,子元素可以继承部分属性 2. 减少CSS代码 注意:当元素本身的样式与继承而来的样式有冲突时,将忽略继承来的样式,如下: - Chrom...
  • css 自定义样式 继承写法

    千次阅读 2017-11-24 11:51:05
    最近弄css,中间有些样式需要单独定义,但是又继承于其他的样式,弄过一次,没有记录,重新弄耽误了点时间,这里算是记录下吧 方便以后的修改。 当需要自定义样式的时候,但是又是一个基于其他样式修改的时候: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 152,189
精华内容 60,875
关键字:

css继承