Like HTML, CSS is also a markup language with simple code. It is interpreted and executed through a browser. It is a style table language used to define the layout for HTML documents.
Purpose:HTML is used for structured content; CSS is used to format structured content
The emergence of CSS makes up for the lack of HTML Tag attribute control. For example, "Duplicate background image" can only be implemented with "background-repeat" of CSS.
CSS separates the content and style of the webpage and achieves "decoupling and", so that the style content can be reused, this greatly improves the efficiency and maintenance of website developers.
Features:
The label inside the pack will have the style nature of the external label.
Example:
Cascade:When multiple selectors act on the same element, that is, the ranges of multiple selectors overlap. What should I do with CSS?
(1) If the styles defined by multiple selectors do not conflict, the elements apply the styles defined by all selectors.
Example:
(2) If the styles defined by multiple selectors conflict (for example, the font color attribute is defined at the same time), CSS applies the selector style with a higher priority to the element.
The CSS-defined priority ranges from high to low:Intra-row style> ID style> category style> markup style
Test:
<HTML>Set the color attribute of "Hello World" with four styles, and the final display style is red of "intra-row style. As follows:
Note:We can! Important"The attribute is forced to change the selector priority. Add! Important has the highest selector priority.
Example:Change the label style statement in the previous example to "P {color: yellow! Important} ", so the running result turns yellow! Important: change the "label style" with the lowest priority to the highest priority.
Three methods of CSS in HTML:
(1) inline style sheet:The style attribute of the HTML element is used to change the style of the element. The style attribute can be applied to any body element (including the body itself)
Example:
<HTML> Style = "color: Red"> Here the CSS inline style sheet is applied, which is a red font </P> </body>Running result:
(2) Internal style sheets:
The style attribute of the HTML element is used to define the style sheet content in the
<HTML> <Style type = "text/CSS">. csstest {color: Blue} </style></Head> <body> <P class = "csstest"> the CSS internal style sheet is used as the blue font. </P> </body>Running result:
(3) external style sheets:
A sample table file (a text file with an extension name of .css) can be used to apply a file to multiple HTML pages so thatReusable stylesTo greatly improve the website development efficiency.
There are two ways to reference a style sheet: (1) link to an external style sheet (2) import an external style sheet
(3.1) link to the external style sheet:
Use the <link> flag to link the HTML file in the
<LINK rel = "stylesheet" type = "text/CSS" href = "url"/>
The URL is the address of the style sheet file, which can be a relative address or an absolute address.
<HTML> <LINK rel = "stylesheet" type = "text/CSS" href = "style/style.css"/></Head> <body> <P class = "csstest"> here, the CSS external style sheet is used as the red font. </P> </body>Principle: <LINK rel = "stylesheet" type = "text/CSS" href = "url"/> tells the browser that when an HTML file is executed, the CSS file under the corresponding URL should be used for layout and formatting. (File style.css is placed in the style directory and the code is. csstest {color: Red })
(3.2) import an external style sheet:
Reference an external style table file in the <style> area of an HTML file. The syntax is as follows:
<Style type = "text/CSS"> @ import URL (style table directory address )... </Style>The @ import declaration can be put out of the
<HTML> @ Import URL (style/style.css );</Style>The principle is as follows: "link to external style sheets ";
Note: ";" after @ import declaration cannot be omitted. In addition, some browsers may not support the @ import declaration for importing external style sheets. It is best to use this method unless you know it.
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
