Home > Article > Web Front-end > Detailed explanation of CSS style creation
When a style sheet is read, the browser formats the HTML document according to it.
<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 the attribute value and the unit. 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>
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 Many advantages of style sheets will be lost. 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 some properties are defined by the same selector in different style sheets, the property values will change from More specific style sheets are inherited.
For example, the external style sheet has three properties for the h3 selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}and the internal style sheet has two properties for the h3 selector:
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-alignment and font size will be inherited from the external style sheet. (font-size) will be replaced by rules in the internal style sheet.
Multiple styles will be cascaded into a
Style sheet allows style information to be specified in multiple ways. Styles can be specified in individual HTML elements, in the header element of an HTML page, or in an external CSS file. You can even reference multiple external style sheets within the same HTML document.
Cascading orderWhen the same HTML element is defined by more than one style, which style will be used? Generally speaking, all styles will be cascaded in a new virtual style sheet according to the following rules, with number 4 having the highest priority. Browser default settingsExternal style sheetInternal style sheet (located inside the 93f0f5c25f18dab9d176bd4f6de5d30e tag) Inline styles (in HTML inside the element)Therefore, inline styles (inside HTML elements) have the highest priority, which means that they will take precedence over style declarations in: tags, style declarations in external style sheets, or in the browser style declaration (default).
Tip: If you use the style of an external file and define the style in 93f0f5c25f18dab9d176bd4f6de5d30e, the internal style sheet will replace the style of the external file. [Related recommendations]
1. Special recommendation: "php Programmer Toolbox" V0.1 version download
2. Free css online video tutorial
3. php.cnDugujiujian(2)-css video tutorial
The above is the detailed content of Detailed explanation of CSS style creation. For more information, please follow other related articles on the PHP Chinese website!