Home >Web Front-end >HTML Tutorial >Use css_html/css_WEB-ITnose
Use css_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 11:55:031035browse
How to insert a style sheet
When a style sheet is read, the browser will format the HTML document according to it. There are three ways to insert a style sheet:
External style sheet
An external style sheet is ideal when styles need to be applied to many pages. With external style sheets, you can change the look of your entire site by changing one file. Each page links to the style sheet using the 2cdf5bf648cf2f33323966d7f58a7f3f tag. The 2cdf5bf648cf2f33323966d7f58a7f3f tag is in the head (of the document):
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
The browser will read the style declaration from the file mystyle.css and format the document according to it.
External style sheets can be edited in any text editor. The file cannot contain any html tags. Style sheets should be saved with a .css extension. Here is an example of a stylesheet file:
hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");} Do not leave spaces between attribute values and units. If you use "margin-left: 20 px" instead of "margin-left: 20px" it will only work in IE 6, but not in Mozilla/Firefox or Netscape.
Internal style sheets
When a single document requires special styling, an internal style sheet should be used. You can define an internal style sheet at the head of the document using the c9ccee2e6ea535a969eb3f532ad9fe89 tag, like this:
<head><style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}</style></head> Inline styles
Since presentation and content are mixed together, inline styles Coupling styles loses many of the advantages of style sheets. Use this approach with caution, for example when the style only needs to be applied once to an element.
To use inline styles, you need to use the style attribute within the relevant tag. The Style property can contain any CSS property. This example shows how to change the color and left margin of a paragraph:
<p style="color: sienna; margin-left: 20px">This is a paragraph</p>
Multiple Styles
If certain properties are defined by the same selector in different style sheets, Then the property value will be inherited from the more specific style sheet.
For example, the external style sheet has three properties for h3 selectors:
h3 { color: red; text-align: left; font-size: 8pt; } while the internal style sheet has two properties for h3 selectors:
h3 { text-align: right; font-size: 20pt; } If this page with an internal style sheet is linked to an external style sheet at the same time, then the style obtained by h3 is:
color: red; text-align: right; font-size: 20pt;
That is, the color attribute will be inherited from the external style sheet, and the text arrangement (text -alignment) and font-size are replaced by rules in the internal style sheet.