css| Web page You can use the following 3 ways to add CSS-specific styling to your Web page:
1. Add a hyperlink to the HTML file and connect to the external CSS file
This method is the easiest way to manage the Web page style of the entire website. It separates the text content of the page from the layout design. You only need to be in a CSS file (the file name is. CSS) to define the style of the Web page, all references linked to this CSS file page, will follow the instructions to reflect the definition of a good style.
It is written in: <HTML>
<HEAD>
<TITLE>
Title of this page
</TITLE>
<link rel= "stylesheet"
href= "Http://www.xyz.com/xyz.css"
Type= "Text/css" >
</HEAD>
This method of Navigator4 support is still very buggy, please use it carefully.
2. In the HTML file <HEAD>.......</HEAD> tags, add a section of CSS narrative
This method is suitable for specifying a Web page, in addition to the external CSS file to define the style of the page, but also to show the HTML file with a raise in the CSS.
If the inner-raised CSS narrative conflicts with the externally linked CSS narrative, the page will be presented with a built-in annotated CSS narrative.
It is written in: <HTML>
<HEAD>
<TITLE>
Title of this page
</TITLE>
<style type= "Text/css" >
<!--
Body {font:12pt}
H1 {font:16pt}
P {font-weight:bold;
Color:green}
-->
</STYLE>
</HEAD>
<BODY>
Start the content of this page ...
</BODY>
</HTML>
It is particularly noteworthy that in order to prevent browsers that do not support CSS to mistake the CSS style narration between <STYLE> </STYLE> tags as ordinary strings, and on the Web page, you'd better insert CSS narrative text into <!----> label Between
3. In the HTML file between the lines, at any time need to add a small section of the description of the CSS specified
This method applies to the rendering style of a small piece of text within a specified page.
In addition to exhibiting the external CSS file and the CSS style (if any) defined in this HTML file <HEAD>, the Navigator also displays the CSS style of the lines.
If the CSS narration between the lines is in conflict with the CSS or external links defined in <HEAD>, the display of the navigator will be mainly based on the CSS narration between the lines.
It is written in: <HTML>
<HEAD>
<TITLE>
Title of this page
</TITLE>
</HEAD>
<BODY>
<p style= "color:red" >
Start the content of this page ...
</P>
</BODY>
</HTML>
The above 3 kinds of CSS, can be used at the same time, you can choose your good, single or dual use. If the narrative between the CSS conflict, then the inherent definition of CSS will cover the external link of the CSS, the lines of CSS will cover the <HEAD> inherent definition of CSS.
Such a layer of promotion, to add down, so that "hierarchical style control" clear and efficient to help web designers, on the one hand, the central co-ordination of the entire site's web page style, on the other hand, with the various pages, the special needs of various paragraphs, and the different style of each deployment. Very methodical, very convenient management, so called "class" style control.
Basic syntax for CSS languages
CSS Language and Web page typesetting language HTML, in the content of a little bit like repeating, but the syntax is very different. Its basic grammar is: H1 {font-size:16pt;
Font-weight:bolder;
Color:red}
In the example above, H1 indicates that the tags you want to define are h1,font-size, font-weight, color, and these extended properties indicate that you want to specify what the H1 should look like. In the above example, I define my H1 should show a font size of 16 points, especially bold black, red appearance.
Simplification of
So, along with this basic notation, we can continue to define other label components: H1 {font-size:16pt;
Font-weight:bolder;
Color:red}
H2 {font-size:16pt;
Font-weight:bolder;
Color:red}
H3 {font-size:16pt;
Font-weight:bolder;
Color:red}
In the example above, H1, H2, H3 label elements are identical, so we can simplify them: H1, H2, H3 {font-size:16pt;
Font-weight:bolder;
Color:red}
And if you want to let your H1, H2, H3 each have their own different styles, then you must be a piece of the list of clearly stated: H1 {font-size:16pt;
Font-weight:bolder;
Font-family:times, serif;
Color:red}
H2 {font-size:14pt;
Font-weight:bold;
Font-family:georgia, serif;
Color:green}
H3 {font-size:12pt;
Font-weight:bold;
font-family: "New York", serif;
Color:gray}
Another way to simplify
Although in the above example, H1, H2, H3 each have their own different styles, so you must make a note of the clear. But you'll notice that when we specify H1, H2, H3 different styles, most of them are in the designation H1, H2, H3 font performance (font size, font weight, font shape). Therefore, we can put all the words beginning with the font word, integrated in a font big item: H1 {font:16pt bolder times, serif;
Color:red}
H2 {font:14pt bold Georgia, serif;
Color:green}
H3 {font:12pt bold "New York", serif;
Color:gray}
Notably, in the above example, the H3 font uses the "New York" font, "New York" is two words, so it must be "parentheses." And H1, H2, H3 color regulation, and can not be merged into the font large items, but must be marked separately.
By the way, CSS, like HTML, has a "note" symbol. HTML uses <!----> do "annotations" while CSS uses/* Here is the annotation * *.
Extended properties of Font in CSS
Objective:
1. css-cascading style Sheet can only be displayed in browsers with support Style Sheet, for example: Netscape's Navigator4 and Microsoft's IE3, IE4. The new browser does not show the style that the style sheet provides.
2. This series of articles only describes the CSS1 extension properties that are supported by Navigator4 and IE3, IE4 browsers. For the full CSS1 documents detailed by the consortium, or the CSS extensions that are supported by Netscape and Microsoft, please see the Style Sheet Department of their website.
3. CSS can be written in either uppercase or lowercase.
{Font-family:times}
This property is used to specify the shape of the font. The bottom line can be replaced with a wide variety of fonts. You can specify a variety of fonts at the same time, in case the user side does not have the first font, you can continue to follow your instructions to choose the second and third fonts.
Reference Example:
P {font-family:times, "New York"}
LI {font-family: "Medium Bold"}
BLOCKQUOTE {Font-family:monospace}
Notably, in the above example, the font "New York", "Medium blackbody" because it is two words (above), so they must be "brackets." In addition, the monospace in the third example is used to specify the isometric font to use when writing code.
{Font-weight:bold}
Use this property to specify the thickness of the font. The bottom line section can be replaced with the following 2 sets of representations:
* Normal, bold, bolder, lighter
* 100, 200, 300..........900
The default value for this property is normal.
Reference Example:
H1 {Font-weight:bolder}
BLOCKQUOTE {font-weight:200}
{Font-size:medium}
This property is used to specify the size of the font. The bottom line section can be replaced with the following 4 sets of representations:
* Absolute Size:xx-small, X-small, Small,medium, Large, X-large, Xx-large
* Relative Size:larger, smaller (relative to parent label)
* Number of points in font: 12PT,16PT, 20pt ....
* Percent: 80%, 120% ..... (relative to the parent label)
The default value for this property is medium.
Reference Example:
Body {Font-size:medium}
H1 {font-size:18pt}
H2 {font-size:90%}
{Font-style:normal}
This property is used to specify the Roman or italic of the font. The bottom line can be replaced with normal, italic, oblique (IE4 support oblique only).
The default value for this property is normal.
Reference Example:
H4 {Font-style:italic}
P {Font-style:oblique}
{font:12pt/14pt}
This property is used to specify the size of the font and the height of the spacing per line. In the example above, 12pt refers to the size of the font, and 14pt refers to the height of the line spacing.
In fact, {font: ...} can assemble all the extended attributes associated with the font in this tab, so you can add all the above described attributes in addition to the font size and spacing height in {font: ...}.
Reference Example:
P {font:italic Bold 12pt/14pt}
Strong {font:14pt/18pt Bolder italic times, serif}
Extended properties of Color in CSS
{color:red}
This property is used to specify the color of the font. The bottom line can be replaced with a variety of colors. You can use a 16-digit color code representation (such as: #00ff77) or use a browser-established English word to represent colors (e.g. gray, blue ...). For more information, see the extended properties of Table.
If you specify a color that is like a #00ff77, a two-digit, two-digit ff,77 (8f,7e), you can use #0f7简化表示之 directly.
Reference Example:
BLOCKQUOTE {Color:navy}
LI {color: #eedd44}
LI {color: #ed4}
P {color: #007f3a}
{background-color:red}
This property is used to specify the background color of the entire Web page, or a paragraph, or the background color of a block. The bottom line can be replaced with a variety of colors. You can use a 16-digit color code representation (such as: #00ff77) or use a browser-established English word to represent colors (e.g. gray, blue ...). For more information, see the extended properties of Table.
If you specify a color that is like a #00ff77, a two-digit, two-digit ff,77 (8f,7e), you can use #0f7简化表示之 directly.
Reference Example:
Body {background-color: #ed4}
BLOCKQUOTE {Background-color:navy}
H2 {background-color: #007f3a}
{Background-image:url (/images/xyz.gif)}
This property is used to specify the background pattern for a Web page or a block. The bottom section can be represented by the absolute position or relative position of the drawing.
When using this label, it is best to specify a similar color for the background color.
Reference Example:
Body {
Background-image:url (/images/2t_logo.gif);
Background-color: #ededff
}
LI {
Background-image:url (/news/uploadfiles_5180/200509/20050921204030949.gif);
Background-color: #cef
}
{background: (...)}
This tag allows you to assemble all of the extended attributes associated with background in this tab, so you can add all the background attributes described above together.
Reference Example:
Body {background:white URL (/images/2t_logo.gif) repeat-y}
LI {background: #cc88ff URL (/news/uploadfiles_5180/200509/20050921204030949.gif) no-repeat}
Extended properties of Text in CSS
{Text-decoration:none}
This property is used to specify whether the text is drawn with a bottom line or is dropped by a line (for example, by a line bar). The bottom section can be replaced with none, underline, and Line-through.
The default value for this property is none.
Reference Example:
P
Color:navy;
Text-decoration:none
}
A:link, a:visited, a:active {
Text-decoration:underline
}
{Text-align:left}
This property is used to specify whether text is aligned to the left, to the middle, or to the right. The bottom section can be replaced with left, right, center, and justify.
Reference Example:
P {Text-align:left}
H1 {Text-align:center}
{text-indent:2cm}
This property is used to specify how many centimeters, centimeters, inches, points (point), eliminating banding (pixel), or how many% of the text is recessed to the right. The unit of measurement can be represented by cm, MM, in, PT, PX,%. % is compared with the parent label.
Reference Example:
P {text-indent:3cm}
LI {text-indent:60px}
BLOCKQUOTE {text-indent:20%}
{line-height:14pt}
This property is used to specify the height of line spacing per row. Line-height are often combined with font size font-size, written as 12pt/14pt (12pt refers to the size of the font, 14pt refers to the height of the line spacing). Line-height can also be expressed in%. % is compared with the parent label.
Reference Example:
Body {
font-size:12pt;
line-height:14pt
}
H1 {
font-size:150%;
line-height:200%
}
H4 {font:16pt/20pt Bold Italic}
Margin in CSS, Padding extended attributes
{margin:3cm}
This property is used to specify how many centimeters, centimeters, inches, points (point), eliminating banding (pixel), or how many% of the page's top and bottom edges should be left. The unit of measurement can be represented by cm, MM, in, PT, PX,%. % is compared with the parent label.
Margin can be replaced with Margin-top, Margin-bottom, Margin-left, and Margin-right.
The default value for this property is 0.
Reference Example:
Body {
margin-top:44px;
margin-bottom:2cm;
margin-left:66px;
margin-right:1.5in
}
P {margin:15pt}
{PADDING:14PX}
This property is used to specify how many centimeters, centimeters, inches, points (point), eliminating banding (pixel), or how many% of each paragraph or block should be left and right at the top and bottom edges. The unit of measurement can be represented by cm, MM, in, PT, PX,%. % is compared with the parent label.
Padding can be replaced with Padding-top, Padding-bottom, Padding-left, and Padding-right.
The default value for this property is 0. IE3 does not support all padding-related labels.
Reference Example:
Body {margin:15pt}
DL {
padding-top:22px;
padding-left:20%;
}
