Home > Article > Web Front-end > Analyze CSS stylesheets, inheritance, cascading and property values

Analyze CSS stylesheets, inheritance, cascading and property values

高洛峰Original: 2017-03-13 14:57:001485browse

This article analyzes CSS style sheets, inheritance, cascading and propertyvalues

Construct the style sheet and add Comments

1. There are properties in CSS that control the basic format (such as font-size and color, etc.), and there are properties that control the layout (such as position and float, etc.), as well as print control elements that determine where the visitor will change pages when printing. In addition, there are many other attributes.
2. The style sheet contains rules that definethe appearance of the web page. Each rule has two main parts: selector (selection) and declaration block (declaration). Selectors determine which elements are affected, and declaration blocks consist of one or more attribute-value pairs that specify what should be done.
3. Comments are surrounded by '/* and */'.

Understanding inheritance

1. Inheritance can be understood as when applying CSS properties to an element , these properties will not only affect this element, but also the branch elements below it.

Program 1

<body>
<p>
    <h1>The Ephemeral Blue Flax</h1>

    <img src="img/blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" />

    <p>I am continually <em>amazed</em> at the beautiful, delicate Blue Flax that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p>

    <p><small>&copy; Blue Flax Society.</small></p>
</p>
</body>

As in Program 1, all content elements are descendants of the body element, using a p encloses all content. Further, the em and small elements are contained within a p element, so they are # Descendants of ##p (also descendants of p and body).

Program 2

body {
    font-family: Verdana, Geneva, sans-serif;
}

p {
    border: 1px solid black;
    overflow: hidden;
    padding: 0 1em .25em;
}

p {
    color: #36c; /* a blue color */
    font-weight: bold;
}

img {
    float: left;
    margin-right: 1em;
}

Program 2 is CSS style setting. This style sheet is used to set the style for the HTML in Program 1. When setting Reflects the characteristics of inheritance. You can see that in Program 2 there are only style rules for the

body, p and p elements, but not h1 and Rules for em and small elements. Then when the page is displayed, the inheritance characteristics will be reflected in the h1, em and small elements.

2. The following are the CSS properties that will be inherited, listed here systematically:

Text

Attribute nameAttribute functioncolorColor, except a elementDirectionfontFontfont-familyFont familyfont-sizeFont size##font-stylefont-variantfont-weightletter-spacingline-heighttext-aligntext-indenttext-transformvisibility white-spaceword-spacing



direction



is used to set italic
is used to set small Uppercase letters
is used to set bold
Letter spacing
Line-height
is used to set the alignment
is used to set the first line Indent
is used to modify case
Visibility
is used to specify how to handle spaces
Word-spacing

## List

Attribute nameAttribute function list-stylelist-style-imagelist-style-positionlist-style-type

Table


List-style
is used to create customized images for lists Tag
is used to determine the position of the list tag
Tag used to set the list

##Attribute nameAttribute function Used to control whether the borders of adjacent cells in the table are merged into a single borderUsed to specify the gap size between table borders is used to set the position of the table title is used to set whether Show empty cells in table


border-collapse
border-spacing
caption-side
empty-cells

Page Setup (for print)

Attribute nameAttribute functionorphans is used to set what happens inside the element page- is used to set elements Internal paging methodwidows is used to set the minimum number of rows that need to be retained at the top of the page when pagination occurs inside the element


	The minimum number of lines that need to be retained at the bottom of the page when paginating
break-inside

Others

Attribute nameAttribute functioncursorMouse pointerquotes is used to specify the quote style

Cascading: When rules conflict

If the written style is inconsistent with the browser's If the default style conflicts, the style you wrote shall prevail. On this basis, CSS uses the principle of cascading to consider specificity, order, and importance to determine which rule among conflicting rules should take effect.

Specificity

　Specificity rules specify how specific a selector is. The more specific the selector, the stronger the rule. When a conflict occurs, the more specific rules are applied first.

List some selectors: (arranged from low to high specificity)

The corresponding HTMLp { ... }.someClass#someID { ... }

## of the selector

...

{ ... }<a href="http://www.php.cn/wiki/164.html" target="_blank"></a>##<p class="someClass"> ...</p>

<p id= "someID">...</p>

...

Order

When the specificity is insufficient to determine which of the conflicting rules should take precedence. At this time, the order rule takes effect, that is, the that appears later has a higher priority .

Importance

If the above rules are not enough, you can declare a special rule to cover the rules in the entire system . You can also add at the end of a statement! important, such as p{ color: o<a href="http://www.php.cn/wiki/1078.html" target="_blank">range</a> !important; } (This method is not recommended unless there are special circumstances).

The value of the attribute

inherit

For any attribute, if you want to display You can use the inherit value to explicitly indicate that the value of this attribute is the same as the value set for the attribute by the corresponding element's parent element. For example, suppose there is an article element that contains several paragraphs. articleThe element sets a border, and usually the border is not inherited, so p { border: inherit; }This rule allows these paragraphs to get the same border style.

Length and percentage

1. The value of many CSS properties is length. Some lengths are relative to other values. The length of an em is approximately equal to the font size of the corresponding element. For example, setting <a href="http://www.php.cn/wiki/937.html" target="_blank">margin-left</a>: 2em to an element means setting the left margin of the element to twice the font size of the element. When em is used to set the font-size property itself, its value is inherited from the font size of the corresponding element's parent element. This relativity of em is crucial to today’s website building efforts, especially those that need to adapt to different screen sizes (a practice known as responsive web design ).
2. Percentages work much like em, percentages are usually relative to the parent element.

Pure numbers

There are only a few CSS properties that accept numbers without units, the most common one is line -height, <a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a> and opacity, eg:line-height: 1.5;The values in this example will Multiply the font size to the line height.

URL

There are CSS properties that allow developers to specify the URL of another file (especially an image), background-image is such an attribute. In this case, use url(file.ext), where file.ext is the path and file name of the target resource. Note that the specification states that relative URLs should be relative to the position of the style sheet and not to the position of the HTML document, eg:background: url(bg-pattern.png). Note: URLs in CSS properties do not need to be surrounded by quotes.

CSS Color

Sixteen basic color keywords

##gray(grey)#808080green（Green）#008000lime（Light Green）#00FF00maroon(brown)#800000navy(dark blue)#000080olive(olive)#808000##purple(purple)red (red) silver (silver) teal (dark green )white（白）yellow（黄）

RGB

You can build your own color by specifying the amount of red, green, and blue. You can use percentages and values between 0 and 255. Numbers to specify the values of these three colors, eg:color: rgb(89, 0, 127); or color: rgb(35%, 0%, 50%);, because 89 is 35% of 255.

Hex

This is the most common way to define colors in CSS, eg:color: #59007F . If #FF3344, it can be abbreviated to #F34.

More CSS3 color specification methods

RGBA, HSLA and HSL.
CSS3 introduced a way to specify colors in HSL and the ability to set alpha transparency via RGBA and HSLA.
RGBA adds an alpha transparency (A) to RGB. Transparency can be specified by adding a decimal from 0 to 1 after RGB. eg:<a href="http://www.php.cn/wiki/894.html" target="_blank">background-color</a>: rgba(89,0,127,0.75).
HSL and HSLA are new in CSS3. HSLA is another way to specify transparency for colors besides RGBA. The method of specifying transparency using HSLA is consistent with RGBA, eg:color: hsla(282,100%,25%,0.75).
HSL represents hue, saturation and lightness. The value range of hue is 0~360, and the values of saturation and brightness are percentages, ranging from 0~100%. 0 and 360 merge at the top, that is, 0 and 360 represent the same color: red, eg:color: hsl(282,100%,25%).
Consider HSL, choose a hue between 0 and 360, set the saturation to 100% and the brightness to 50%, and you will get the purest form of this color. Reduce saturation and the color changes toward gray. Increase the brightness and the color will change to a color-preserving color; decrease the brightness and the color will change to black.

For example, some of the more important colors are:

Color	Keyword
aqua (aqua)	#00FFFF
black（黑）	#000000
blue（blue）	#0000FF
fuchsia(purple)	#FF00FF






#8000080
#FF0000
#C0C0C0
#008080
#FFFFFF
#FFFF00

##Redhsl(0,100%,50%);Yellowhsl(60,100%,50%); Greenhsl(120,100%,50%);Cyanhsl(180,100 %,50%);bluehsl(240,100%,50%);purplehsl(300,100%,50%);

Color	hsl data

The above is the detailed content of Analyze CSS stylesheets, inheritance, cascading and property values. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use css3 to implement circular progress barNext article：Use css3 to implement circular progress bar

See more