Home >Web Front-end >CSS Tutorial >Analyze CSS stylesheets, inheritance, cascading and property values
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 */'.
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>© 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).
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
## List
| 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 function | |
|---|---|
| is used to set what happens inside the element | The minimum number of lines that need to be retained at the bottom of the page when paginating |
| break-inside | is used to set elements Internal paging method|
| 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 |
Others
| Attribute function | |
|---|---|
| Mouse pointer | |
| is used to specify the quote style |
List some selectors: (arranged from low to high specificity)
| ## of the selector | |||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
... |
|
||||||||||||||||||||||||||||||||||||||||||||||||
{ ... }<a href="//m.sbmmt.com/wiki/164.html" target="_blank"></a>##<p class="someClass"> ...</p>
|
| #someID { ... }||||||||||||||||||||||||||||||||||||||||||||||||
<p id= "someID">...</p> |
... ... ... OrderWhen 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 The value of the attributeinherit For any attribute, if you want to display You can use the Length and percentage1. The value of many CSS properties is length. Some lengths are relative to other values. The length of an Pure numbers There are only a few CSS properties that accept numbers without units, the most common one is 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: CSS ColorSixteen basic color keywords
## |
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!