The 3rd is about CSS
- What is CSS
- Several ways to set up CSS
- Style Rule Selector
- Comments and valid ranges for style rules
- Style attributes detailed
What is the way CSS and CSS are set up
Author: loncer More resources to learn: wwww.loncer.cn
What is CSS
CSS is: Cascading style Sheets The abbreviations of these English words: Cascading style sheets. In addition to being able to easily set the location and format of the page elements, it can also produce filters, image fade, The gradient effect of the fade in the page. In short. CSS is to achieve the display of Web pages with the same layout control as word.
For example, the following code:
<body style= "font-size:20px; Color:bule; Font-family: Song body; Background-color:gray; Text-decoration:underline "> </body>
That is, a CSS style is set.
From the top know: An HTML element's style property can specify a variety of style styles, the name of each style style is separated from its set value by a colon, separated by semicolons. Various "style style names" are called "CSS Properties" and style "set values" are called " CSS property value ". The way that you set the page element to appear is CSS.
How CSS is set up
- Inline style sheet (inline style sheets)
The method for directly setting the style property of an HTML square label is called an 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, the HTML4.01 standard recommends that users add a <meta> tag between the As follows: <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 style to all paragraphs, repeat each <P> label settings.
2. A Web page can be printed on a variety of media or media, and styles formatted with inline style sheets will work when output is available on all media, and you cannot specify different style sheets for different media.
- Embed style sheet (Embedded style sheets)
<style type= "Text/css" media= "Screen,projection" >
<!--
p{"font-size:20px; Color:bule; Font-family: Song body; Background-color:gray; Text-decoration:underline "}
-->
</style>
Media explains what media this style is displayed on
<!----> is written for browsers that do not support CSS The basic format for each style rule defined in the <style><style> label pair is as follows:
Selector{property:value;property:value ...}
selector:
When you define a style rule, you must specify a page element that is affected by the style, and the page element defined in a style rule is the selector (selector), which means that the style is selected to act on the page element.
There are three types of style selectors:
- HTML tags, such as: P, body, A ...
- CLASS
- Id
Property :
Specify the style style names that will be modified, namely: CSS properties, such as color, font-size ...
Value:
The value assigned to the property, that is, the attribute value of the CSS.
If you want to use the same style in more than one page, add a CSS definition to the head of each page, which is the disadvantage of embedding the style sheet
- External style sheet (linked style sheets)
Place the style rule definition statement between the <style></style> in the embedded style sheet in a separate external file, which is an external style sheet file with an extension of this. css. An external style sheet file can be connected to an HTML document through an HTTP <link> tag.
Cases:
First build a test.css file, the code is as follows:
p{
"font-size:20px; Color:bule; Font-family: Song body; Background-color:gray; Text-decoration:underline "
}
|
Write another file to use the style sheet, and set them in the same folder:
<link rel= "StyleSheet" href= "Test.css" type= "text/css" media= "screen" >
type and media are optional, rel and href are required |
With an external style sheet, web page makers can change the appearance of the entire network by changing a file. Most browsers store external style sheet files in a buffer, which speeds up browsing of your Web site.
- Enter style sheet (imported sytle sheets)
You can use CSS @import to enter a CSS file into another CSS file, and the input CSS style rule definition statement becomes part of the input CSS style rule definition statement. You can also use @inport to enter a CSS file into the <style></style> label pair. The input CSS style rule definition statement becomes the definition statement in the <style></style> label pair.
Cases:
| <style type= "text/css" media= "screen" ><br> <!--<br> @import url (http://...) ............); <br> @import url (/xxxx ...);..... <br> p{background:yellow;color:black}<br>--><br> </styl E><br> Note: All @import parts should be placed in front. |
