This article analyzes the values of CSS style sheets, inheritance, cascading, and properties
Construct a style sheet and add comments
1. CSS has attributes that control the basic formatting (such as font-size and color, etc.), have properties that control the layout (such as position and float, etc.), and print control elements that determine where the visitor prints when the page is changed. There are many other attributes as well.
2. The style sheet contains rules that define the appearance of the Web page, each of which has two main parts: the selector (selection) and the Declaration block (declaration). The selector determines which elements are affected, and the declaration block has one or more attribute-value pairs that make up what should be done.
3. Comment with ' /*和*/ surround '.
Understanding Inheritance
1. Inheritance can be understood as when applying CSS properties to an element, these properties affect not only the element, but also the branching elements below it.
Program One
<body><p>As in program one, all content elements are
bodydescendants of elements, with onepwrapped up in all content, further,emandsmallelements are contained within anpelement, so they arepdescendants (pand alsobodydescendants).
Program Two
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 Two is the CSS style settings, this style sheet for the HTML in program one style settings, set up to reflect the characteristics of inheritance. As you can see, program two only body , p and p elements of the style rules, without h1 , em and small elements of the rules. Then in the page display when the h1 , em and small elements will reflect the inheritance characteristics.
2. The following are the CSS properties that will be inherited, listed in this system:
Text
| Property name | attribute Action |
|---|---|
| Color | color, except for element a |
| Direction | Direction |
| Font | Font |
| Font-family | Font family |
| Font-size | Font size |
| Font-style | Used to set italic |
| Font-variant | Use to set small caps |
| Font-weight | Used to set the bold body |
| Letter-spacing | Letter Spacing |
| Line-height | Row height |
| Text-align | Used to set the alignment |
| Text-indent | Used to set the first line indent |
| Text-transform | Used to modify case |
| Visibility | Visibility of |
| White-space | Used to specify how spaces are handled |
| Word-spacing | Word spacing |
List
| Property name | attribute Action |
|---|---|
| List-style | List Style |
| List-style-image | Used to develop custom tags for the list |
| List-style-position | Used to determine the location of the list marker |
| List-style-type | tags used to set the list |
Form
| Property name | attribute Action |
|---|---|
| Border-collapse | Controls whether the borders of adjacent cells in a table are merged into a single border |
| Border-spacing | Lets you specify the size of the gap between table borders |
| Caption-side | Where to set the table header |
| Empty-cells | Use to set whether empty cells in a table are displayed |
Page Setup (for printed matter)
| Property name | attribute Action |
|---|---|
| Orphans | Used to set the minimum number of rows to keep at the bottom of the page when pagination occurs inside the element |
| Page-break-inside | Used to set the paging method inside the element |
| Widows | Used to set the minimum number of rows to keep at the top of the page when pagination occurs inside the element |
Other
| Property name | attribute Action |
|---|---|
| Cursor | Mouse pointer |
| Quotes | Used to specify the quotation mark style |
Cascade: When rules are released into conflict
If you write a style that conflicts with the browser's default style, the style you write will prevail. On this basis, CSS uses cascading principles to consider particularity (specificity), order, and importance (importance) to determine which rule in conflicting rules should work.
Particularity
The specificity rule specifies how specific the selector is. The more special The selector, the stronger the rule. In the case of conflict, it is preferable to apply the rule with strong specificity.
List some selectors: (from low to high in order of specificity)
| Selector | Selectorthe corresponding HTML |
|---|---|
p { ... } |
<p>...</p> |
.someClass { ... } |
<p class="someClass">...</p> |
#someID { ... } |
<p id="someID">...</p><p id="someID" class="someClass">...</p><p id="someID" class="someOtherClass">...</p><p id="someID" class="someClass someOtherClass">...</p> |
Order
When the particularity is not enough to judge in the conflicting rules, it is preferable to choose which one to apply. At this point the order rules work, that is, the high priority of the late appearance.
Importance
If the above rules are not enough, then you can declare a special rule that overrides the rules in the entire system. It can also be added at the end of a declaration ！important , for example p{ color: orange !important; } (this method is not recommended unless it is a special case).
The value of the property
Inherit
For any property, you can use a value if you want to indicate that the value of the property is the same as the value set by the parent element of the corresponding element on the property inherit . For example, suppose you have an article element that includes several paragraphs. articleelement sets a border, usually the border is not inherited, so p { border: inherit; } this rule allows the paragraphs to have the same border style.
Length and percentage
1. The value of many CSS properties is length. Some lengths are relative to other values. emthe length of the one is approximately equal to the font size of the corresponding element. For example, setting an element means that the left margin of an element is set margin-left: 2em to twice times the font size of the element. When em used to set the property of an element font-size itself, its value inherits from the font size of the parent element of the corresponding element. emThis relativity is critical to today's Web site construction efforts, especially for sites that need to adapt to different screen sizes (this approach is called Responsive web design).
2. Percentages work much like a em percentage, which is usually relative to the parent element.
Pure Digital
Only a handful of CSS properties accept numbers without units, the most common being, line-height z-index and opacity , eg: the line-height: 1.5; values in this example are multiplied by the font size, to the line height.
Url
There are CSS properties that allow the developer to specify another file (especially an image) that url,background-image is such a property. In this case, the URL (file.ext) is used, where file.ext is the path and file name of the target resource. Note that the specification indicates that the relative URL should be relative to the location of the style sheet rather than to the location of the HTML document, eg: background: url(bg-pattern.png) . Note: URLs in CSS properties do not need to be surrounded by quotation marks.
CSS Colors
16 Basic Color Keywords
| Color | Key Words |
|---|---|
| Aqua (Aqua) | #00FFFF |
| Black (Dark) | #000000 |
| Blue (BLU) | #0000FF |
| Fuchsia (Fuchsia) | #FF00FF |
| Gray (Gray) | #808080 |
| Green (Greens) | #008000 |
| Lime (light green) | #00FF00 |
| Maroon (Brown) | #800000 |
| Navy (Navy) | #000080 |
| Olive (Olive) | #808000 |
| Purple (violet) | #8000080 |
| Red (Hong) | #FF0000 |
| Silver (AG) | #C0C0C0 |
| Teal (Dark Turquoise) | #008080 |
| White (BAI) | #FFFFFF |
| Yellow (yellow) | #FFFF00 |
Rgb
You can build your own colors by specifying the amount of red, green, and blue, and you can use numbers between percentages and 0~255 to specify values for these three colors, eg: color: rgb(89, 0, 127); or color: rgb(35%, 0%, 50%); , because 89 is 255 of 35%.
Hexadecimal
This is the most common way to define colors in CSS, eg: color: #59007F . If #FF3344 it can be abbreviated as #F34 .
More CSS3 Specify color mode
RGBA, Hsla, and HSL.
CSS3 introduces the way the specified color is HSL and the ability to set alpha transparency through RGBA and Hsla.
Rgba adds an alpha transparency (alpha transparency) on the basis of RGB. You can specify the transparency by adding a decimal number to the 0~1 after RGB. Eg: background-color: rgba(89,0,127,0.75) .
HSL and Hsla are new in CSS3. Hsla is another way to specify transparency for a color other than RGBA. The method of specifying transparency with HSLA is consistent with RGBA, eg: color: hsla(282,100%,25%,0.75) .
HSL represents Hue (hue), saturation (saturation), and luminance (lightness), with a range of hues of 0~360, and a percentage of saturation and luminance, with a range of 0~100%. 0 and 360 converge at the top i.e. 0 and 360 represent the same color: red, eg: color: hsl(282,100%,25%) .
Conceive HSL, choose a hue between the 0~360 and set the saturation to 100% and the brightness to 50% to get the purest form of this color. When the saturation is lowered, the color changes to gray. Increases the brightness, the color changes to the retention color, reduces the brightness, the color will be like the black change.
For example, here are some of the more important colors:
| color | HSL data |
|---|---|
| Red | HSL (0,100%,50%); |
| Yellow | HSL (60,100%,50%); |
| Green | HSL (120,100%,50%); |
| Cyan | HSL (180,100%,50%); |
| Blue | HSL (240,100%,50%); |
| Purple | HSL (300,100%,50%); |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
