Use css_html/css_WEB-ITnose-HTML Tutorial-php.cn

Table of Contents

How to insert a style sheet

External style sheet

Internal style sheets

Inline styles

Multiple Styles

Home

Web Front-end

HTML Tutorial

Use css_html/css_WEB-ITnose

Jun 24, 2016 am 11:55 AM

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 <link> tag. The <link> tag is in the head (of the document):

&lt;head&gt;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;mystyle.css&quot; /&gt;&lt;/head&gt;

Copy after login

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(&quot;images/back40.gif&quot;);}

Copy after login

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 <style> tag, like this:

&lt;head&gt;&lt;style type=&quot;text/css&quot;&gt;  hr {color: sienna;}  p {margin-left: 20px;}  body {background-image: url(&quot;images/back40.gif&quot;);}&lt;/style&gt;&lt;/head&gt;

Copy after login

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:

&lt;p style=&quot;color: sienna; margin-left: 20px&quot;&gt;This is a paragraph&lt;/p&gt;

Copy after login

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;  }

Copy after login

while the internal style sheet has two properties for h3 selectors:

h3 {  text-align: right;   font-size: 20pt;  }

Copy after login

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;

Copy after login

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.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn