What is CSS? Translate Chinese into style sheets! Simply put, it enables you to use different hyperlink styles on the same page.
What's more amazing is that with CSS, you can change the appearance of hundreds of webpages by changing only one file ...... personalized performance without losing visitors ...... all of these are due to the powerful and flexible features of WEB style sheets.
Let's get started!
CSS quick cut
Basic Introduction to Cascading Style Sheets.
CSS structure and rules
Various Selection Characters, pseudo classes, pseudo elements, and cascade order.
CSS attributes
Description of valid attribute at the level of each Cascading Style Sheet.
Add a style sheet to HTML
Various methods to add a style sheet to HTML text.
Dependency style sheet
How can we abuse style sheets and make it difficult for your webpage to handle.
CSS Reference
Connect to articles about CSS specifications and other aspects.
------------------------------------------------------------------------------
CSS quick cut
A style sheet consists of style rules to show the browser how to present a document. there are many ways to add style rules to your HTML document, but the simplest way to start is to use the HTML style component. this element is placed in the head part of the document and contains the style rules of the webpage.
Note that although the style element is a good way to test the style sheet, it has some disadvantages that should be considered before you use this method. the advantages and disadvantages of different methods are discussed in adding a style sheet to HTML.
The composition of each rule includes a selector-usually an HTML element, such as body, P, or em-and the style accepted by the selector.
There are many attributes that can be used to define an element. Each attribute has a value to describe how to present the selector.
Style rules are composed of the following:
Selector {property: Value}
The compound style declaration of a single selector should be separated by semicolons:
Selector {attribute 1: value 1; Attribute 2: Value 2}
The following section defines the color and font size attributes of H1 and H2 elements:
<Head>
<Title> CSS example </title>
<Style type = "text/CSS">
H1 {font-size: X-large; color: Red}
H2 {font-size: Large; color: Blue}
</Style>
</Head>
The style sheet above tells the browser to display level-1 titles in red and in large and blue. css1 formally defines all valid attributes and values. attributes and values are also given in the CSS attribute section of this website.
This tutorial introduces the basic knowledge of CSS to provide enough information for you to experiment with your own styles. To learn more about CSS, read the following sections:
CSS structure and rules
CSS attributes
Add a style sheet to HTML
Basic syntax
Rules
Selector
Any HTML element can be a css1 selector. The selector is only an element pointing to a special style. For example:
P {text-indent: 3em}
The selection character is P.
Class Selector
A single selector can have different classes, so the same element can have different styles. For example, a Web Builder may want to display the code in different colors depending on the language:
Code.html {color: #191970}
Code.css {color: #4b0082}
The preceding example creates two classes, CSS and HTML, which are used by HTML code elements. The class attribute is a class used to specify elements in HTML. For example:
<P class = warning> only one class is allowed for each selector.
For example, code.html. Proprietary is invalid. </P>
Class declaration can also be unnecessary with related elements:
. Note {font-size: Small}
In this example, a class named note can be used for any element.
A good habit is to name classes according to their functions rather than their appearance. In the preceding example, the note class can also be named small. However, if the webpage maker decides to change the style of the class so that it is no longer a small font, the name becomes meaningless.
Id Selector
The ID selector individually defines the components of each element. This option should be used as few as possible, because it has certain limitations. The specified ID must have an indicator "#" before the name. For example, the ID selector can specify the following:
# Svp94o {text-indent: 3em}
For details, refer to the ID attribute in HTML:
<P id = svp94o> text indent 3em </P>
Association Selector
An association selector is a string consisting of two or more single separators separated by spaces. These delimiters can specify general attributes, and their priority is higher than that of a single delimiters due to cascade order rules. For example, the following context Selector
P em {Background: yellow}
Is P em. This value indicates that the highlighted text in a paragraph will be a yellow background, while the highlighted text in the title will not be affected.
Statement
Attribute
An attribute is specified with a selector to use its style. Examples of attributes include color, boundary, and font.
Value
The declared value is a parameter accepted by the attribute. For example, the property color can accept the value red.
Combination
To reduce repeated declaration of style sheets, the combination selector declaration is allowed. For example, all titles in the document can be combined to give the same statement:
H1, H2, H3, H4, H5, H6 {
Color: red;
Font-family: sans-serif}
Inheritance
In fact, all the delimiters nested in the selector inherit the attribute value specified by the outer selector, unless otherwise changed. For example, the color value defined by a body is also applied to the text of a paragraph.
In some cases, the internal selector does not inherit the values of the surrounding selector, but theoretically these are all special. For example, the upper boundary attribute does not inherit; intuitively, a paragraph does not have the same upper boundary value as the document body.
Annotation
The annotations in the style sheet are specified using the same conventions in C programming. Examples of css1 annotation are shown in the following format:
/* Comments cannot be nested */
Pseudo class and pseudo element
Pseudo classes and pseudo elements are special classes and elements that can be automatically recognized by browsers that support CSS. Pseudo-classes differentiate different types of elements (for example, visited links (accessed connections) and active links (activable connections) that describe the types of two anchors ). A pseudo element is a part of an element, such as the first letter of a paragraph.
The format of pseudo-class or pseudo-element rules is as follows:
Selector: pseudo class {property: Value}
Or
Selector: pseudo element {attribute: Value}
Pseudo classes and pseudo elements are not specified by the class attribute of HTML. Common classes can be used with pseudo classes and pseudo elements, as shown below:
Selector. Class: pseudo class {property: Value}
Or
Selector. Class: pseudo element {attribute: Value}
Locating the pseudo-anchor
A pseudo-class can specify a element to display connections, accessed connections, and active connections in different ways ). The positioning anchor element can be pseudo-link, visited, or active. An accessed connection can be defined as a display of different colors, or even different font sizes and styles.
An interesting effect is to make the current (or "activable") connections display in different colors and larger fonts. Then, when the accessed connection of the webpage is reselected, it is displayed in different colors and smaller fonts. An example of this style sheet is as follows:
A: link {color: Red}
A: active {color: Blue; font-size: 125%}
A: visited {color: green; font-size: 85%}
Pseudo element of the first line
Generally, the first line of text in a newspaper article, such as Wall Street Journal, is displayed in bold and in uppercase. Css1 includes this function and uses it as a pseudo element. The first line of pseudo elements can be used for any block-level elements (such as P and H1 ). The following is an example of a pseudo-element in the first line:
P: first-line {
Font-variant: Small-caps;
Font-weight: bold}
First letter pseudo element
The first letter pseudo element is used to increase (drop caps) and other effects. The first letter of the text containing the selected value is displayed according to the specified value. A pseudo-element with the first letter can be used for any block-level element. For example:
P: First-letter {font-size: 300%; float: Left}
It is three times larger than normal fonts.
Cascade order
When multiple style sheets are used, the style sheet needs to compete for control of a specific selector. In these cases, there will always be rules for style sheets to gain control. The following features determine the result of a different style sheet.
! Important
The rule can be specified! Important is especially important. An important style prevails over other styles with the same weight as it is. Similarly, when both the web page producer and the reader specify important rules, the rules of the web page producer will surpass those of the reader. Below is! Example of important declaration:
Body {Background: url(bar.gif) white;
Background-repeat: Repeat-X! Important}
Origin of rules (author's vs. Reader's)
As previously mentioned, both web page makers and readers have the ability to specify style sheets. When the rules of the two conflict, the rules of the web page maker will prevail over other rules with the same weight of the reader. The style sheets of Web Page makers and readers go beyond the built-in style sheets of browsers.
Web page makers should be careful when using it! Impant ant rules, because they will surpass any of the user's! Impant ant rules. For example, a user may require a large font or a specified color due to the visual relationship, and such a user may declare a definite style rule! Important, because these styles are extremely important for users to read webpages. Any! Impant ant rules go beyond general rules. Therefore, it is recommended that web page makers use general rules to ensure that users with special style requirements can read the web page.
Selection Rule: Computing Features
Based on their feature levels, a style sheet can also go beyond the conflicting style sheet. A high-characteristic style always prevails over a style with a low feature. This is just a statistical game that calculates the specified number of selector.
Counts the number of ID attributes in the selector.
Count the number of class attributes in the selector.
The HTML Tag Name format in the statistics selector.
Finally, write three numbers in the correct order. Do not add spaces or commas to get a three-digit number. (Note: You need to convert the number into a larger number ending with three digits .) The final number list corresponding to the selector can easily determine that a higher number is superior to a lower number. The following is a list of feature-specific delimiters:
# Id1 {XXX}/* A = 1 B = 0 C = 0 --> feature = 100 */
Ul ul Li. Red {XXX}/* A = 0 B = 1 c = 3 --> feature = 013 */
Li. Red {XXX}/* A = 0 B = 1 c = 1 --> feature = 011 */
Li {XXX}/* A = 0 B = 0 C = 1 --> feature = 001 */
Order of features
For ease of use, when the two rules have the same weight, take the latter one.
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
