css inherit the priority and

2010-11-08  来源:本站原创  分类:Web  人气:96 

Causes:

I had heard bad wildcard selector, it is best not to use, it seems to use only the simplest scenario CSS reset :

* {
   margin:0;
   padding:0;
}

Until when I see this article on the specification of simple terms it seems to understand.

Specifications :

First, from the cascade (cascade) begins,

There are typically three sources of css:

1. Own browser user agent

2. Programmer (author) specified

3. User (user) you set in your browser

Because you can specify! import ( this is also best not used ) over the level of force, w3 balance the rights of users and programmers, in fact, the priority levels are:

1. Own browser user agent

2. User (user) you set in your browser

3. Programmer (author) specified

4. Programmer (author) specified! Import

5. User (user) specified in your browser! Important.

Then is specificity (specificity) provides:

As each level is the same element may occur multiple css rules are affected, then the final rules adopted will depend on which rule to which the most special, the highest priority. The priority of each rule based on their css selectors to specify, from high in the end were compared as follows (the total for any one high high)

1. Line up in style

2. Selector id number, and more preferred

3. Selector classes, properties, pseudo-class (last-child) number, and more preferred

4. Selector elements, the number of pseudo-elements, plus more

5. Rules the order in which they appear in the document, which give priority to

Finally is the inheritance (inheritance) the role of the

If an element does not have a rule (the programmer or user) can be directly matched to their own, then according to the definition of the corresponding decision css property can be inherited,

1. To inherit, inherit its parent element in the corresponding calculated values (computed value).

2. Not inherited, then the application of the browser (user agent) the default value.

Where particular attention is the calculated value is inherited (computed value) rather than the user or programmer of the specified value (specified value). In regard to the specified value and the conversion between the calculated values, each attribute has a corresponding css definition of .

Example:

1. To explain the issues raised at the beginning, why should not use *

The main reason is to use the *, inheritance of this mechanism is completely ineffective, because * matches any element, then there is no need to inherit the css property, while very often comes naturally inherited, is appropriate, for example:

* {font-size:12px;}

p {font-size:18px;}

<p>
    i am
    <strong>strong</strong>
    !
</p>

Intention is to set overall by * the font size, but if you want a paragraph in the application of large font, and focus on a word which strong, as strong and be * matches, you can not inherit the parent element's font size p, cause strange effects, which is prohibited so the use of reason.

The reason

* {
margin:0;
padding:0;
}

Not forbidden, the main reason is their margin, padding is defined as non-inherited , and inherited their margins are also meaningless.

2. Inherited line-height

Have been discussed previously: two details of the minor problems,

Line-height of which explains a bit vague, really for two reasons

1. line-height property is inheritable, and font attributes such as similar, in order to ensure a harmonious whole area, inheritance is necessary.

2. Inherited a calculated value (computed value), line-height four specified values:

2.1: normal (keyword), the browser specified as the number 1.0 - 1.2 between the same effect with the number

2.2: number (number), the calculated value is equal to the specified value

2.3: length (with a unit value), the computer is equal to the absolute value (absolute value), the value of the px unit

2.4: percentage (percentage), calculated value is equal to the value of the specified font size *

Since inheritance is calculated, then the parent element, specify em, ex,% value of the natural units will not be inherited.

Summary:

For the development of common components, the component needs to be embedded into any page can be normal operation, and more or less affected by the introduction of page styles, then the inheritance and in-depth understanding of the priority becomes essential.

相关文章
  • css inherit the priority and 2010-11-08

    Causes: I had heard bad wildcard selector, it is best not to use, it seems to use only the simplest scenario CSS reset : * { margin:0; padding:0; } Until when I see this article on the specification of simple terms it seems to understand. Specificati

  • CSS style skills that 2 2010-04-23

    CSS is short for Cascading style Sheets, Chinese translated as "cascading style sheets", I call it "Cascading Style Sheets," I am so easy to read a Point, no other meaning. In fact, it is a set of styles. You may be more familiar with

  • Common sense to understand html 2010-08-03

    web: In the application of Internet, maintenance workload and so on, B / S ratio of C / S to be much stronger and more; but in speed, data security, Human-computer interaction and so on, B / S is much less C / S. Together we can see that all C / S's

  • And pictures on the web link address problem 2010-07-23

    First of all, make it clear that all hyperlinks, images, css address, js address must be in full address. This is most used. Internet connection problem that many documents have said, to see a lot of documents are <% = request.getContextPath ()%> as

  • linux thread-sysconf system variables 2010-09-03

    Use sysconf () Limited understanding of the system thread is to make the application of resources to properly manage their key. As already discussed examples of the use of system resources. When setting the thread stack size, the minimum is PTHREAD_M

  • [Transfer] linux thread-sysconf system variables 2010-11-13

    Original Address: http://deepfuture.javaeye.com/blog/754933 Use sysconf () Understanding of the system resource constraints is to make the thread an application properly manage their key. As already discussed the example of the use of system resource

  • In eclipse, use log4j logger log (zhuan) 2011-07-27

    1 download software eclipse and log4j 2 In eclipse create a java project, such as HelloEclipse, in the process add external jar log4j.jar file 3. Using eclipse import feature of the introduction of the log4j.properties file, and modify, log4j log4j p

  • CSS selectors priority weight 2010-06-11

    <style> a ( border-bottom: 0px; color: # 5DB0E6; ) a: focus ( outline: 1px dotted # eee; ) a: active ( outline: 0px; ) a: hover ( color: # 7bc4f4; ) body # jq-interior ( background-image: url (http://static.jquery.com/files/rocker/images/bg-interior

  • [Change] CSS feature priority Specificity 2009-01-12

    If the same element there are two or more conflicting CSS rules, the browser there are some basic rules to decide which one is very special to win. It may not be as other less important, the majority of cases you do not need to worry about conflict,

  • Inheritance inherit the CSS properties with aggregate 2010-09-02

    What is the successor inherit? Means that some elements you add the following css properties, then all of the following sub-elements of elements will inherit the css property. The most typical is the color of this property. Summary of what is now, af

  • CSS的inherit与auto使用分析 2013-10-20

    一个很显浅的寓言,千年老树,电打雷劈,屹立不倒,却毁于蝼蚁的侵袭之下.自以为精通CSS的人,常常被一些小问题搞到头晕脑胀. 通常是一个很小的数值,经过层层放大歪曲后,整个布局就走形了.CSS是一门很简单的语言,易学易用,但也最容易出垃圾代码.这是没有深入研究这门语言所致.本人认为,CSS是由以下三大块构成的:默认值,继承系统与加权系统.默认值,也就是浏览器在用户没有设置属性的情况下,默认指定的属性.CSS框架基本都有一个叫reset.css 的文件,就是对其进行重设,消除各浏览器的差异的.继承系

  • CSS priority determination 2010-05-11

    A selector's specificity is calculated as follows: count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These ru

  • Basic knowledge of CSS 2009-03-13

    In this paper, the source for the original http://www.blueidea.com/tech/site/2006/3358.asp Near the time for the preparation of CSS Reference Manual First, with regard to CSS style sheets 1. In the study before css What you should master the basic kn

  • CSS selectors in the Xiang Jie 2009-06-21

    Original Source: http://mydioxide.com/?p=132 Translated from: Taming Advanced CSS Selectors CSS is a web designer, one of the most powerful tools. We can use it in a few minutes to change a site's interface, without changing the page label. In fact,

  • IE and Firefox compatibility issues belongs css 2010-04-19

    Do people in this website is not a person for this DIV + CSS cut diagram "IE and Firefox compatibility difficult" problem is not a headache. Why? Why so hard to do the following: IE and Firefox compatibility issues belongs css CSS browser compat

  • Behavior on the CSS float property. Overview of the use and support 2010-07-21

    Quote CSS float property (float) is a Web designer toolbox used for page layout of a common tool, but your browser inconsistencies often result in realization of the property can not be well understood and used. This article focuses on the float prop

  • Css and html email template design 2010-09-03

    by dp corp. E-mail message template specification template, please strictly follow the rules of implementation. E-mail client and Web pages have different requirements, in writing code, think not the same direction. Any students have any questions, y

  • css of the eighth to move skills (a) 2010-10-13

    Recently, a friend asked me a number of frequently encountered in the work of the CSS problem. They are not always well controlled CSS, CSS affect the efficiency of play. I have to analyze the sum is a mistake to help you more easy to use CSS. This p

  • css class selectors. ID selectors 2010-12-03

    CSS syntax: CSS is defined by three components: Selector (selector), attributes (properties) and values of the property (value). Syntax: selector {property: value} (selector {property: value}) Description: * Selectors can be in various forms, usually

  • Summary of commonly used CSS tips 2011-04-17

    One. Using css abbreviations Abbreviations can help reduce your CSS file size, easier to read. The main rule css abbreviations see "common abbreviation syntax summary css" described here is not to start. II. Clearly defined units, unless the val