CSS creationLOGIN

CSS creation

CSS Creation

When a style sheet is read, the browser will format the HTML document according to it.


How to insert a style sheet

There are three ways to insert a style sheet:

  • External style sheet

  • Internal style sheet

  • Inline style


##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 uses the

tag to link to the style sheet. The 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 it according to it document.

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 style sheet file:

hr {color:sienna;}p {margin-left:20px;}
body {background-image:url ("../style/images/back40.gif");}

Do not leave a space 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. lamp.gif


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 top of the document using the <style> tag, like this:

The tag defines an internal style sheet at the top of the document, like this:

#<head>

<style>
hr { color:sienna;}
p {margin-left:20px;}
body {background-image:url("../style/images/back40.gif");}
</style> ;
</head>


Inline style

Because the presentation and content are mixed At the same time, inline styles lose 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>


Priority

If in an external style sheet,

Internal style sheet (located inside the tag),Inline style (inside the HTML element), if the style of the same HTML element is set, the style of the inline style (inside the HTML element) will take effect

So their priority is

  • Inline styles (inside HTML elements) are the highest

  • The second is the internal style sheet (located inside the tag)

  • The last is the external Style sheet


Next Section

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p {color: #e22c5e } </style> </head> <body> <p STYLE="color: #1c10b4">css的优先级</p> </body> </html>
submitReset Code
ChapterCourseware