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

This article mainly introduces "what is the basic knowledge of CSS". In the daily operation, I believe that many people have doubts about the basic knowledge of CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what is the basic knowledge of CSS?" Next, please follow the editor to study!

What is CSS

The full name of CSS is cascading style sheet (Cascading Style Sheets), which is usually called style sheet (Style Sheets). It is used for web page design.

The use of CSS technology in web page making can effectively achieve more accurate control over the layout, font, color, background and other effects of the page. As long as some simple changes are made to the corresponding code, the appearance and format of different parts of the same page or pages with different pages can be changed.

Second, the advantages of CSS

The content is separated from the performance, that is, to make a web page using the HTML language learned earlier, and use CSS to set the page style, style, and CSS style in a separate file, so that as long as the HTML file references the CSS file, it is convenient for later CSS style maintenance.

The unity of performance can make the performance of the web page very consistent and easy to modify.

Rich styles make the layout of the page flexible

Reduce the code amount of the web page and increase the browsing speed of the web page

Using the CSS of independent pages is beneficial for web pages to be included by search engines.

III. The basic grammatical structure of CSS

CSS, like HTML, is a computer language that can be parsed by browsers, so CSS has its own grammatical structure.

The CSS rule consists of two parts, a selector and a declaration, which must be placed in curly braces {}, which can be one or more

Each declaration consists of an attribute and a value, which are separated by a colon, and each statement ends with a score in English.

# H2 for selector # font-size and color for attributes # 12px and # fff for attribute values p {font-size:12px;color:#fff;} IV, style tag

CSS styles are introduced in HTML by using tags, which are used to define style information for HTML documents

The tag is located in the tag, which specifies how the HTML document is rendered in the browser

In the tag, type is a required attribute that defines the content of the style element with a value of "text/css"

P {font-size:12px; color:#fff;} V, CSS selector

In CSS, a selector is a pattern for selecting elements that need to be styled

All tag styles in the HTML language are controlled through different CSS selectors

There are three kinds of selectors in CSS: tag selector, class selector and ID selector.

Tag selector:

A HTML page consists of many tags, such as,

, CSS tag selector is used to declare these tags

The name of each HTML tag can be used as the name of the corresponding tag selector, for example

Tags and tags, if we need to define a tag selector on them, what should we do?

P {font-size:12px;} h2 {font-size:16px;}

It is important to note that a HTML page will have a lot of

Tags and tags, once the tag selector is declared, all the tags on the page will be applied. Although it is very convenient to use, it is not possible to define attributes for one of the tags separately. At this point, you need to use a class selector or an ID selector.

Class selector:

The name of the class selector can be defined by the user, and the properties and values, like the tag selector, must conform to the CSS specification. Its syntax is as follows

# .class1 is the name of the class selector # font-size is the attribute # 12px is the attribute value. Class1 {font-size:12px;}

Unlike the tag selector, once the class selector is set, the corresponding class style is applied to the tag of the HTML, referencing the class style using the tag's class attribute, as shown below

.class1 {font-size:18px; color:#f00;} hello world!

Hello world!

As shown in the following figure, the class style class1 is applied to the p tag on the top line, but not on the bottom line, so there is a change in the style on the top line and no change on the bottom line.

ID selector:

The ID selector is used the same way as the class selector, except that the ID selector can only be used once in the HTML page, so it is more targeted.

For example, if there is a class selector. Class1, then it can be applied to multiple tags on a page. If there is an ID selector class1, then it can only be used once in the page.

.class1 {font-size:18px; color:#f00;} # id1 {font-size:26px; color:#0A00F3;} this is the first line

This is the second line.

This is the third line.

This is the second line.

This is the second line.

Effect picture

VI. The introduction method of CSS style

There are three ways to introduce CSS styles into HTML pages: inline style, internal style, and external style.

Inline style:

The inline style is to set the CSS style directly using the style property in HTML. The usage is:

This method only works on the current HTML tag, and is written in the HTML tag, so this method can not separate the content from the presentation, and does not reflect the advantages of CSS.

Internal style:

Write the CSS code in

Of

The advantage of this method is that it is convenient to modify the style in the same page, but it is not conducive to sharing reuse code and maintenance code among multiple pages, and the separation of content and style is not thorough enough.

External style:

In actual development, we all use this way to introduce the CSS style, which is to save the CSS code as a separate CSS file with a .css extension, and then introduce this file into the page.

The syntax for introducing external styles is:

Untitled document # introduces the external css file style.css, and all the styles are written in this file. This is the first line.

This is the second line.

This is the third line.

This is the second line.

This is the second line.

7. Style priority

The full name of css is cascading style sheet. As the name implies, the styles in css can be superimposed, and the final effect of the page is the superposition of multiple styles.

The superposition of styles will cause conflicts between styles, so there is a problem of priority.

The priority of selector is: tag selector > ID selector > class selector.

Style priority: inline style > internal style > external style

8. CSS compound selector

Based on three basic selectors: tag selector, class selector and ID selector, the selector formed by combining two or more selectors in different ways is called composite selector.

Descendant selector:

Descendant selector (descendant selector) is also called inclusion selector. Descendant selector can select elements that are descendants of an element.

Its syntax is:

P strong {font-size:24px;}

This spring morning in bed I'm lying, Not to awake till birds are crying

Descendant selector:

The intersection selector consists of two selectors connected directly, the first of which must be a tag selector and the second must be a category selector or ID selector. There can be no spaces between the two selectors.

Its syntax is:

P.special {color:red;} Spring is so good that you sleep before you know it. Suddenly you wake up and there are birds singing everywhere.

Union selector:

Union selector is referred to as collective declaration, and union selector is formed by multiple selectors connected by commas.

Union selectors can be used to define selectors with exactly the same style or partially the same style.

The syntax is:

H 2 color:red; h 3, h 4, h 5, h, g, h, h, 4, h, 5, 9, 5, 9, 9, 4, 9, 9, 9, 4, 9, 9, 9, 9, 9

To put it simply, the inheritance of CSS is to treat each HTML tag as a container, and the contained small container inherits the style of the large container that contains it.

All CSS statements are based on the direct inheritance relationship of each tag. CSS inheritance means that the child tag inherits all the styles of the parent tag and can be modified on the basis of the parent tag style to produce a new style, while the style of the child tag does not affect the parent tag at all.

At this point, the study of "what is the basic knowledge of CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.