zoukankan      html  css  js  c++  java
  • Css inheritance继承详解

    Css inheritance

    以下的css属性是继承的。

    Yikes(哎呀,可恶),that is a lot of properties

    to simply things >让我们来看一看重要属性组。

    Text-related properties 与文本有关的属性

    font-family, font-size,font-style ,font-variant, font-weight;

    font , letter-spacing,line-height;

    text-align,text-indent,text-transform.word-spacing;

    List-related properties

    list-style-image;

    list-style-position;

    list-style-type;

    list-style;

    and,importantly,the color property is inherited;

    color;

    is font-size inherited?

    Yes,however ,在许多属性里以不同的方式来继承(in differernt way)

    Rather than the actual value being inherited,the calculated value is inherited;

    在解释font-size怎样继承是。我们必须看看font-size为什么不直接继承呢?

    let’s start with the same sample of html cod we used earlier;

    <p>

    Lorem <em>ipsum </em> dolor sit amet6 consec etuer

    </p>

    <em> sits inside the <p>

    现在我们仅仅指定<p>

    p { font-size:80%; }

    照道理来说文档应该会是这样

    Lorem ipsum dolor sit amet6 consec etuer

    但是事实是<em>is the same size as the <p>

    还来看看三个例子:

    <p>

    Lorem <em>ipsum </em> dolor sit amet6 consec etuer

    </p>

    EXAMPLE 1; Pixels

    p{ font-size:14px; }

    请注意 pixels are not recmmended for sizing fonts due to accessiblity issues associiated

    older browsers such as ie5 and ie6

    pixel value(14PX)OVERRIDES THE BROWSERS 默认的font-size(approx 16px) this new

    value is inherited by descendants.

    so,the <em> inherit the 14px value

    element value calculate value
    default font size approx 16px  
    <body> unspecified approx 16px
    <p> 14px 14px
    <em> unspecified inherited value=14
         

    EXAPLE 2: %

    <p>has been given 85%

    p { font-size :85%; }

    so ,the <em>inherited the 13.6 calculated value

    element value calculated value
    defaut font size approx 16px  
    <body> unspecified approx 16
    <p> 85% 16*85%=13.6
    <em> unspecified inherited 13.6

    EXAMPLE 3: EMS

    P{ font –size: .85 ;}

    element value calculated value
    default font size approx 16px  
    <body> unspecified approx 16px
    <p> .85em 16px*.85em=13.6px
    <em> unspecified inheirt value 13.6

    这些例子太简单了,使用不同的元素的更复杂的例子呢?

    EXAMPLE 4:

    all using percentage values ;

    body { font-size ;85%; }

    h1 {font –size :200%;}

    h2 {font –size :150%: }

    element value calculated
    default font size approx 16px  
    <body> 85% 16*85%=13.6px
    <h1> 200% 13.6*200%=27.2px
    <h2> 150% 13.6*150%=20.4
    <p> unspecified inherited value=13.6
    <em> unspecified inherited 13.6px

    using inheritance for efficieny

    利用继承写出高效的css

  • 相关阅读:
    感触
    儿子会走了
    OLB(outlook bar)控件开发计划
    又要上班了
    OLB(outlook bar)控件开发计划
    将Vim打造成完美的IDE神器
    简明 Vim 练级攻略
    Java , C , C++ ,PHP, python 运算符优先级对照表
    史上最强的vimrc文件
    vim学习资料汇总
  • 原文地址:https://www.cnblogs.com/youxin/p/2228952.html
Copyright © 2011-2022 走看看