Author: Loncer more learning resources available at: wwww.loncer.cn
What is CSS?
CSS is the abbreviation of Cascading Style Sheet. in addition to setting the display position and format of webpage elements, it also produces gradient effects such as filters, image fading, and webpage fading. in short. CSS controls the Display Effect of webpages in the same way as that of Word.
For example, the following code:
<Body style = "FONT-SIZE: 20px; COLOR: bule; FONT-FAMILY:; BACKGROUND-COLOR: gray; TEXT-DECORATION: underline"> </body>
A css style is set.
We can see from the above: the style attribute of an HTML element can specify multiple style styles. The names of each style and its setting values are separated by colons, use semicolons to separate different styles. various "style names" are called "CSS attributes", and "set values" of style are called "CSS attribute values ". CSS is used to set the Display Effect of webpage elements.
CSS settings
The method for directly setting the style attribute of HTML square labels is called inline style sheet.
For example:<Body style = "FONT-SIZE: 20px; COLOR: bule; FONT-FAMILY:; BACKGROUND-COLOR: gray; TEXT-DECORATION: underline"> </body>
When using inline style sheets, we recommend that you add a <meta> tag between <Meta http-equiv = "Content-Style-Type" content = "text/css">
There are two disadvantages to using this method:
1. If you want to set the same style to all paragraphs, you must repeat each <P> label.
2. A webpage can be output on multiple media sets. The style set using the inline style sheet will take effect when output on all media sets, you cannot specify different style sheets for different media sets.
<Head>
<Style type = "text/css" media = "screen, projection">
<! --
P {"FONT-SIZE: 20px; COLOR: bule; FONT-FAMILY:; BACKGROUND-COLOR: gray; TEXT-DECORATION: underline "}
-->
</Style>
</Head>
Media indicates the media on which the style is displayed.
<! --> Is written for browsers that do not support CSS.
Property:
Specify the style names to be modified, that is, CSS attributes, such as color, font-size ......
Value:
The value assigned to property, that is, the attribute value of CSS.
If you want to use the same style in a few webpages, you need to add CSS definitions to the HEAD of each webpage. This is the disadvantage of embedding a style sheet.
Embed <style> </style> into the style sheet. An external style sheet file can be connected to an HTML document through the HTTP <link> tag.
Example:
| Create a test.css file with the following code: P { "FONT-SIZE: 20px; COLOR: bule; FONT-FAMILY:; BACKGROUND-COLOR: gray; TEXT-DECORATION: underline" } |
| Write another file to use the style sheet and set them to the same folder: <Head> <Link rel = "StyleSheet" href = "test.css" type = "text/css" media = "screen"> </Head> Type and media are optional, and rel and href are required. |
Using an external style sheet, a Web Builder can change the appearance of the entire network by changing a file. Most browsers store external style sheet files in the buffer, which speeds up website browsing.
You can use @ import of CSS to input a CSS file to another CSS file. The entered CSS style rule Definition Statement becomes part of the input CSS style rule Definition Statement. You can also use @ inport to input a CSS file to the <style> </style> label pair. The entered CSS style rule Definition Statement becomes the Definition Statement in the <style> </style> label pair.
Example:
| <Style type = "text/css" media = "screen"> <br/> <! -- <Br> <br/> @ import url (http ://..................); <Br> <br/> @ import url (/XXXX ...............); <Br> <br/> p {background: yellow; color: black} <br> <br/> --> <br/> </style> <br> Note: All @ import parts should be placed in front |
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
