Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to create and insert CSS style sheets

2025-01-16 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to create and insert CSS stylesheets, the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

How to create and insert CSS style sheets

Insert CSS style sheet

When you read a stylesheet, the browser formats the HTML document based on it. There are three ways to insert a style sheet:

External style sheet

External stylesheets are ideal when styles need to be applied to many pages. With an external stylesheet, you can change the appearance of the entire site by changing a file. Each page uses tags to link to the stylesheet. The tag is in the header (of the document):

The browser reads the style declaration from the file mystyle.CSS and formats the document based on it.

External style sheets can be edited in any text editor. The file cannot contain any html tags. Stylesheets 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 a space between the attribute value and the unit. If you use "margin-left:20px" instead of "margin-left:20px", it only works in IE6, but it doesn't work in Mozilla/Firefox or Netscape.

Internal style sheet

When a single document requires a special style, you should use an internal style sheet. You can use tags to define internal stylesheets at the head of the document, like this:

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

Inline style

Inline styles lose many of the advantages of stylesheets by mixing presentation with content. Use this method with caution, such as when the style needs to be applied only once to an element.

To use inline style, you need to use the style attribute within the associated tag. The Style property can contain any CSS attribute. This example shows how to change the color and left margin of a paragraph:

Thisisaparagraph

Multiple styles

If some properties are defined by the same selector in different stylesheets, the property values will be inherited from the more specific stylesheet.

For example, an external stylesheet has three properties for the h4 selector:

H4 {color:red; text-align:left; font-size:8pt;}

The internal stylesheet has two properties for the h4 selector

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

If this page with an internal stylesheet is also linked to an external stylesheet, the style obtained by h4 is:

Color:red; text-align:right; font-size:20pt

That is, the color attribute is inherited from the external stylesheet, while the text arrangement (text-alignment) and font size (font-size) are replaced by the rules in the internal stylesheet.

On how to create and insert CSS stylesheets to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report