CSS3: overview
CSS (Cascading Style Sheet) is a standard for specifying the visual performance of HTML documents, it allows designers to precisely specify the font, color, margin, indent, border, and positioning of document elements.
Each rule of CSS construction block has two components: selector and declaration block ).
h1 {color: red;}H1 is the selector. The selector is used to find certain elements so that we can set styles for these elements using style elements or external style sheets;
{} Is the declaration block. The declaration block contains one or more Attribute-value pairs, specifying what to do;
Color is an attribute, red is a value, and color and red form a declaration together. When some properties are not stable, the browser uses the vendor prefix to implement a feature. The vendor prefix varies with the browser. Below are some common browser vendor prefixes:
Chrom, Safari:-webkit-
Opera:-o-
Firefox:-moz-
Internet Explorer: a basic concept in the-ms-box model CSS is the box model. It can be seen that elements occupy a rectangular area on the page, which includes: the element content, padding, border, and padding are as follows: the element content and border are visible, and the padding is the space between the content and the border, the outer margin is the space between the border and other elements on the page. Cascade when a given element corresponds to multiple style rules, multiple rules are effectively combined and applied to the element together. If multiple rules define the same attribute of an element, first, if the style you wrote conflicts with the default style of the browser, your style prevails. On this basis, CSS uses the stacked principle to consider specificity, order, and importance to determine which rule should take effect in conflicting rules. The specificity of a special rule specifies the specificity of a selector. The more special the selector is, the stronger the rule is. In case of conflict, rules with strong specificity are prioritized. The following selectors are arranged from low to high according to their particularity:
1) p {...}
2). someClass {...}
3). someClass. someOtherClass {...}
4) # someID {...}
We recommend that you use the class selector in the style sheet to avoid using the ID selector. When the particularity does not determine which rule should be used in conflicting rules, the order of the rule determines the priority of the rule that appears later. The importance is added at the end of the statement! Important, such as p {color: orange! Important;} indicates that this rule is more important than all other rules (this method is not recommended unless in special circumstances ). An operation style sheet consists of an external style sheet, an embedded style sheet, and an inline style. An external style sheet should be used first. An embedded style sheet is used only when the external style sheet cannot meet requirements, avoid inline styles. External Sample Table External sample table is an independent cssfile. If the external sample table is style.css, you can introduce the external style table in html as follows:
You can load the same external style sheet on each page of the website to unify the page style. Therefore, we recommend that you use an external style sheet.
Create a style element in the head of the HTML page to include the embedded style sheet.
Note that only when the style element appears after the link element, the style embedded in the style sheet will overwrite the style in the external style sheet.
Inline styles inline styles are usually used to set styles for elements in JavaScript Functions, so as to add dynamic behavior to a part of the page. Others are usually used to quickly test a certain style.
Note that you need to assign values to attributes using colons. Multiple Attributes are separated by semicolons. Inline styles have a higher priority than all other styles, Unless marked elsewhere! Important. You can use a media-related style sheet to specify a style sheet that is only used for specific output, and add media = "output" to the start label of the link or style element ", output can be print, screen, or all.
Another method is to use the @ media rule in the style sheet:
/* Style for all media */img {border: 4px solid red;} p {color: orange; font-style: italic ;} /* print the style sheet */@ media print {body {/* increase the font size */font-size: 25pt;} p {/* Black hexadecimal value */color: #000;} img {/* do not show image */display: none ;}}The style in @ media print {} will be used to print the style.
