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

This article focuses on "summing up the basics of CSS". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the basics of summing up CSS.

A brief introduction to CSS

Css: cascading style sheet English full name: cascading style sheets

The presentation standard language in the WEB standard mainly controls the display of web page information in web pages, which simply means how to modify the display style of web page information.

At present, it is recommended to follow the CSS3.0 released by W3C.

A computer language used to modify style files such as XHTML or XML.

Css2.0 officially launched by W3C on May 21, 1998

II. CSS grammar

CSS syntax: selector {attribute: attribute value; attribute: attribute value;}

The selector represents the object to define the style, either the element itself, a class of elements, or an element with a name.

Attribute: the attribute is the attribute of the specified element, which is the core of css. Css2 has more than 150 attributes.

Attribute values: attribute values include legal attribute values and common numerical additions, such as 25px, or color values.

Description:

1) each CSS style consists of two parts, a selector and a declaration, which is divided into attributes and attribute values.

2) the attribute must be placed in curly braces, and the attribute and the attribute value must be connected with a colon.

3) each declaration ends with a semicolon.

4) when an attribute has more than one attribute value, the attribute value and the attribute value are in no order.

5) in the process of writing style, spaces, line breaks and other operations do not affect the display of attributes.

Third, the creation of styles (internal style sheets, external style sheets, inline style sheets)

A, internal style sheet

Syntax:

/ * CSSS statement * /

Note: when creating a style using the style tag, it is best to write the tag in the

B, external styl

* method 1: create external stylesheets:

Description:

When you import an external stylesheet using the link element, you write the element in the header of the document, that is, between and.

Rel (relation): used to define document associations that represent associated stylesheets

Type: defining document types

* method 2: import external style sheets

@ import url (full name of the path and file name of the target file)

Note: there is no space between @ and import and no space between url and parentheses; it must end with a semicolon

C, inline style (interline style, inline style, embedded style, embedded style)

Syntax:

Example:

Fourth, the difference between the two external stylesheets link and import

Extended knowledge points: the difference between link and import importing external styles:

Difference 1: essential difference: link belongs to the XHTML tag, while @ import is entirely a way provided by CSS.

Difference 2: difference in loading order: when a page is loaded (that is, when browsed by the viewer), the CSS referenced by link will be loaded at the same time, while the CSS referenced by @ import will wait until the page has been downloaded before it is loaded. So sometimes there is no style (that is, flickering) when browsing the page where @ import loads CSS, which is obvious when the network speed is slow.

Difference 3: compatibility difference: @ import is proposed by CSS2.1, so old browsers do not support it. @ import can only be recognized by those above IE5, while the link tag does not have this problem.

Difference 4: the difference when using dom (document object model document object Model) to control styles: when using javascript to control dom to change styles, you can only use link tags, because @ import is not controlled by dom.

Priority of the stylesheet

A. inline stylesheets have the highest priority

B. the internal stylesheet is related to the priority of the external stylesheet and the order of writing, and the priority of later writing is high.

C, scope: inline style has the smallest scope and can only be applied to the current element, followed by internal style sheets, which can be applied to the current HTML file, and finally to external style sheets, which can be applied to all linked HTML files.

At this point, I believe you have a deeper understanding of "summing up the basics of CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.