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

How do I add css to html?

There are three ways to set css in html, which are:

Inline formula

Embedded type

Introduction-link

Imported-@ import

1. In-line style. That is, to set css in the style attribute in the html tag, it is worth noting that the name-value pairs of css code are connected by a colon:, and different css styles are separated by semicolons. Although this method is easy to watch and debug, it violates the principle of separation of structure and performance, and we do not recommend it. However, in terms of loading speed, this is the fastest of the three ways. Believe it or not, you can take a look at Sina, NetEase, QQ, Sohu and other portals. Most of the content pages write CSS directly into the web page.

1 This is a div

This is the home page of Sina

two。 Built-in. This method is convenient for us to watch and debug, but when there are more styles, it is not suitable. Note: the label must be located in.

1234567891011121314Document # myDiv {color:red; background-repeat:no-repeat; font-size:18px;} This is a div.

3. Imported-link. There are two ways to import: one uses tags, and the other uses the @ import method. Introduce link first.

Link: that is, must be in the head tag, this method can introduce external css stylesheets into html, which is highly recommended.

1234567891011DOCTYPE html > Document This is a div.

3. Imported-@ import

Import: that is, also in the head tag, this method can introduce external css stylesheets into html, note that import and url are separated by spaces.

12345678910111213DOCTYPE html > Document @ import url ("style.css"); This is a div.

In addition, import can be used in css stylesheets to introduce other stylesheets. We write directly in css:

1@import url ("style.css")

@ import the best way to write

@ import is generally written in the following ways:

@ import 'style.css' / / Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 does not recognize

@ import "style.css" / / Windows IE4/NS4, Macintosh IE4/NS4 does not recognize

@ import url (style.css) / / Windows NS4, Macintosh NS4 does not recognize

@ import url ('style.css') / / Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 does not recognize

@ import url ("style.css") / / Windows NS4, Macintosh NS4 does not recognize

From the above analysis, @ import url (style.css) and @ import url ("style.css") are the best choices, with the largest number of compatible browsers. @ import url (style.css) is the most recommended from a byte optimization perspective.

The difference between link and @ import:

1.link is a XHTML tag that can define other transactions such as RSS in addition to loading CSS; @ import belongs to the category of CSS and can only load CSS.

When 2.link references CSS, it loads at the same time as the page loads; @ import requires the page to be loaded after the page is fully loaded, so we generally do not recommend using the @ import method.

3.link is a XHTML tag and there is no compatibility problem; @ import is proposed in CSS2.1 and is not supported by older browsers. From this point, we also do not recommend using the @ import method.

4.link supports using Javascript to control DOM to change styles; @ import does not.

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.