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 a CSS

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

Share

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

This article mainly shows you "how to create CSS", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to create CSS" this article.

How to insert a style sheet

There are three ways to insert a style sheet:

1. External style sheet (External style sheet)

two。 Internal style sheet (Internal style sheet)

3. Inline style (Inline style)

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

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:

This is a paragraph.

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.

Multiple style priority

Style sheets allow you to specify style information in a variety of ways. Styles can be specified in a single HTML element, in the header element of the HTML page, or in an external CSS file. You can even reference multiple external stylesheets within the same HTML document.

In general, the priorities are as follows:

Inline style) Inline style > (Internal style) Internal style sheet > (external style) External style sheet > browser default style

/ * Internal style * / h4 {color:green;} test!

Note: if the outer style is placed after the inner style, the outer style overrides the inner style.

The above is all the content of the article "how to create CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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