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

This article is about how CSS styles HTML elements with specified attributes. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Create and read CSS

When you read a stylesheet, the browser formats the HTML document based on it.

There are three ways to insert a style sheet: an external style sheet, an internal style sheet, and an 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:

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

Tip: do not leave a space between the attribute value and the unit, such as "20px" cannot be written as "20px".

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/back.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: defined by the same selector in different style sheets

If some properties have multiple styles, the property values are inherited from a 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:

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

That is, the color properties will be inherited from the external style sheet, while the text arrangement and font size will be replaced by the rules in the internal style sheet.

Thank you for reading! This is the end of this article on "how CSS styles HTML elements with specified attributes". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out 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.