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.

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

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

CSS creation

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]