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

This article mainly introduces html how to insert css style, the article is very detailed, has a certain reference value, interested friends must read it!

Html insert css style method: 1, use the style attribute to insert CSS code within a specific HTML tag; 2, put the CSS code in the style tag pair in the head section of the document; 3, put the CSS code into the external CSS file, and introduce the link tag into the html document.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

I. in-line formula

Use the style attribute to set the CSS style within a specific HTML tag.

Inline CSS is not recommended because each HTML tag needs to be styled separately, and if you only use inline CSS, it can be very difficult to manage a Web site. However, it is useful in some cases. For example, if you do not have access to the CSS file or only need to apply styles to a single element. An example of a HTML page with inline CSS is as follows:

Hostinger Tutorials Something usefull here.

2. Embedded type

The embedded css style is to put the css code in a section of a particular page. Embedded CSS needs to be placed between tags.

Classes and ID can be used to reference CSS code, but they are active only on that particular page. The CSS style embedded in this way is downloaded each time the page is loaded, which increases the loading speed. It is useful to use embedded stylesheets in some cases, such as sending someone a page template because everything is on the same page, so it is much easier to see the preview.

P {color:white; font-size: 10px;} .center {display: block; margin: 0 auto;} # button-go, # button-back {border: solid 1px black;}

III. External connection

Externalization is the use of link tag elements to reference the external CSS file (.css file) into the HTML page, the reference needs to be placed in the part of the page.

Description of each attribute:

The href property sets the address of the external stylesheet file, either relative or absolute.

The rel attribute defines the associated document, which means that the associated stylesheet is associated.

The type attribute defines the type of import file, and like the style element, text/css indicates a CSS text file.

Generally, when defining a tag, you should define three basic attributes, of which href must be set.

You can also add the title attribute to the link element to set the title of the optional stylesheet, that is, when a web page document has imported multiple stylesheets, you can select the stylesheet file to apply through the value of the title attribute.

Tip: in the Firefox browser, you can select the "View-> Page style" option in the menu, and then the title property value will be displayed in the submenu. You can selectively apply the desired style sheet file by selecting a different title property value. This feature is not supported by IE browsers.

In addition, the title attribute is related to the rel attribute. According to the plan of the W3C, future web documents will use multiple elements to import different external files, such as stylesheet files, script files, theme files, and even other supplementary files customized by individuals. After importing so many different types of files with different names, you can use the title attribute to select, then the role of the rel attribute appears, it can specify the imported file type to be applied when the web page file is initially displayed, and currently it can only be associated with the CSS stylesheet type.

External style is the best solution for CSS application. A stylesheet file can be referenced by multiple web page files, and a web page file can import multiple stylesheets by repeatedly using link elements to import different stylesheet files.

The above is all the content of the article "how to insert html into css style". Thank you for reading! Hope to share the content to help you, more related 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.