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

This article mainly introduces "what are the basic knowledge points of CSS". In the daily operation, I believe that many people have doubts about the basic knowledge points 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 to answer the questions of "what are the basic knowledge points of CSS?" Next, please follow the editor to study!

CSS introduction

We can use HTML to build a stable structural foundation, while the style control of the page is left to CSS. The style of web page includes the color, size, alignment, spacing and so on of various elements, which is a huge workload for designing or maintaining a website with more data. Fortunately, CSS can be used to control these styles, which will greatly improve the efficiency of web design and maintenance, and make the overall style of the page easy to achieve unity.

Overview of CSS

CSS is the abbreviation of English Cascading Style Sheet, which is translated into cascading style sheets in Chinese and cascading style sheets in Chinese. It is a technology used to define the appearance style of web pages. By introducing CSS rules into web pages, we can layout the page quickly and efficiently, and accurately control the width, height, position, font, background and other appearance effects of HTML tag objects. CSS is a kind of markup language, which can not only effectively control the style of web pages, but also realize the separation of web content and style, and allow CSS rules to be stored in a separate document. The extension of CSS file is "css".

CSS3

The CSS3 standard was drawn up as early as 1995 and was put on the W3C research agenda in 2001. however, it can be said that CSS3 has not changed much in the past 10 years. It was not until June 2011 that a new version of CSS3 was released. At present, many browsers widely support CSS3. CSS3 is an upgraded version of CSS technology. CSS3 language divides CSS into smaller modules and is developing towards modularization. The previous version was a relatively large and complex module, so it was decomposed into small and simple modules, while more new modules were added. In CSS3, there are font, color, layout, background, positioning, border, multi-column, animation, user interface and so on.

The basic usage of CSS

The rules for using CSS consist of two parts: a selector and one or more declarations. The basic syntax is as follows:

Selector {attribute 1: value; attribute 2: value; … Attribute n: value;} CSS attribute

The attributes of CSS are grouped according to related functions, including font, text, background, list, animation, and so on. The specific usage and examples of these attributes will be mentioned later.

The method of using CSS in HTML document

According to the different usage and scope of CSS in HTML documents, the use of CSS stylesheets can be divided into three categories: inline styles, internal stylesheets and external stylesheets, while external stylesheets can be divided into linking external style sheets and importing external style sheets. In this section, we recognize the ways to use CSS in HTML from four categories.

Inline style

Internal style sheet

External style sheet

Link to an external style sheet

Import external style sheets

Inline style

Inline style (inline style), also known as inline style, is the most direct one of the four ways to use CSS. Its implementation borrows the global attribute style of the HTML element and writes the CSS code directly into it. Strictly speaking, inline style is a lax use, it does not need a selector, in this way CSS code and HTML code are mixed together, so inline style is not recommended. The basic syntax of the inline style is as follows:

Internal style sheet

When a single document requires a special style, you should use an internal style sheet. Internal stylesheets place styles in the head area of the page so that the defined styles are applied to this page. Internal stylesheets are declared using style tags, which is a more common use. Its basic syntax is as follows:

Selector 1 {attribute: value; … } selector 2 {attribute: value; … }. Selector n {attribute: value; … }

The style tag defines the style information of the HTML document and specifies how the HTML element is rendered in the browser, where type is used to specify the type of content in the element.

Link to an external style sheet

External stylesheets can be used to ensure a uniform style of the site, or when there are more styles defined and multiple pages are required to share styles. To link to an external stylesheet is to save the stylesheet as an external stylesheet file and then link to the stylesheet file in the page using the link tag, with the link tag in the head area of the page. Its basic syntax is:

Where:

Href: indicates the path where the stylesheet is stored.

Rel: used to define the relationship between linked files and HTML, and rel= "stylesheet" refers to the use of this external stylesheet in the page.

The type attribute is used to specify the file type, and "text/css" means that the file type is stylesheet text.

Import external style sheets

Importing an external stylesheet means importing an external stylesheet in the style element in the header of the HTML file, and importing the external stylesheet in import mode. The method of importing an external style sheet is similar to that of a linked style sheet, but the style of importing an external style sheet is essentially equivalent to being inside a web page. Its basic syntax is:

@ import url ("stylesheet path"); CSS basic selector

Selector is an important concept in CSS, which can greatly improve the productivity of developers in writing or modifying stylesheets. CSS3 provides a large number of selectors, which can be divided into basic selector, composite selector, attribute selector, pseudo-class selector, pseudo-object selector and so on. Due to browser support, many selectors are rarely used in actual development. This article mainly records the most basic and most commonly used selectors. Basic selectors include tag selector, class selector, id selector, and generic selector.

Tag selector

The most basic components of an HTML document are HTML tags, and if you want to use the same CSS style for all similar tags in the document, you should use the tag selector. Its basic syntax is:

Tag name {attribute 1: value 1; attribute 2: value 2; … }

For example, when you want to center the text of all P tags, the syntax is as follows:

P {text-align: center;} class selector

The basic syntax of a class selector is:

Tag name. Class name {attribute 1: value 1; attribute 2: value 2; … }

The class selector is for the global attribute class of the tag, referencing it by:

It is worth noting that the class name here can be any legal character defined by the designer. If all tags are available, use *. The form of the class name, the * here indicates all, of course, can also be omitted.

Here are a few examples:

P.text1 {color:brown;font-size:14px;} / * only allowed in this form

The tag with the class name "text1" in the tag refers to the style * / * .text1 {color:brown;font-size:14px;} or .text1 {color:brown;font-size:14px;} / * indicating that all tags with the class name "text1" can reference the style * / id selector

The id selector and the class selector are roughly the same, except that the definition does not use "." With "#", the global attribute that acts on the HTML tag is "id" instead of "class". The basic syntax of the id selector is:

Tag name # id name {attribute 1: value 1; attribute 2: value 2;... }

The id selector is for the global attribute id of the tag, referenced by:

Of course, like the class selector, if used for all tags, it takes the form of * id name, where * means all or can be omitted.

Universal selector

A universal selector is a special selector that matches all elements in a web page with a * unless you use a more specific selector to specify that other values should be used for the same attribute in an element. A generic selector is slightly different from styling an body element because it applies to each element and does not depend on attributes inherited from rules applied to the body element. Its basic usage is as follows:

* {attribute 1: value 1; attribute 2: value 2; … } other CSS selectors

In addition to the CSS basic selector, CSS has many other selectors.

Combination selector

The combination selector in CSS can be counted as an upgraded version of the base selector, which means to combine to use the base selector. There are five main categories of combination selectors: multi-element selector, descendant selector, sub-selector, adjacent selector and sibling selector.

Multi-element selector

The basic syntax of a multi-element selector is:

E, F {attribute 1: value 1; attribute 2: value 2; … }

This is easy to understand, that is, multiple elements are selected at the same time, separated by ",".

Descendant element selector

The basic syntax of the descendant element selector is:

EF {attribute 1: value 1; attribute 2: value 2; … }

This is also easy to understand, which matches all F elements that belong to the descendants of E elements, which are separated by spaces, such as:

Table b {color:red;}

This means that all b-element text in the table is set to red.

Child element selector

The basic syntax of a child element selector is:

E > F {attribute 1: value 1; attribute 2: value 2; … }

The child element selector can only select the child elements of an element, where E is the parent element, F is the direct child element, E > F indicates that all the child elements F under the E element are selected and connected with >. This is different from the descendant element selector, where F is all descendant elements of E, while F in the child element selector must be a child of E.

Neighboring sibling selector

The basic syntax of the neighbor sibling selector is:

Attribute F {attribute 1: value 1; attribute 2: value 2;... }

The adjacent sibling selector can select the element immediately after another element, and they have the same parent element, linked with a + sign, in other words, E and F have the same parent element, and the F element follows the E element and is closely adjacent.

General brother selector

The basic syntax of a general sibling selector is:

Attribute F {attribute 1: value 1; attribute 2: value 2;... }

The general sibling selector will select all sibling elements after an element, linked with the ~ sign, which is similar to the neighboring sibling selector, needs to be in the same parent element, and the F element comes after the E element. The difference is that the E ~ F selector matches all the F elements that follow the E element, and the E selector matches only the F element that immediately follows the E element.

Attribute selector

The attribute selector is followed by a square bracket in which various attributes or expressions are listed. Property selectors come in many forms, and we will briefly introduce a few of them here through examples.

There is an attribute match

The style of the element is controlled by matching existing attributes, which are generally included in square brackets. For example, set any a tag with the href attribute to a composite color:

A [href] {color:brown;}

Exact attribute matching styles are applied only if the attribute value exactly matches the specified attribute value. Id selectors and class selectors are essentially exact attribute matching selectors. For example, set the link a tag to the URL "http://www.yisu.com"" to brown:

A [href= "http://www.yisu.com"]{color:brown;} prefix match

You can apply a style to an element as long as the starting string of the property value matches the specified string. Prefix matching is implemented in the form [^ =], such as:

[id ^ = "user"] {color:brown;}

Then the following labels can all turn brown:

Xiao Ming

Body weight

Age

Suffix matching

In contrast to prefix matching, you can apply a style to an element as long as the end character string of the attribute value matches the specified string. Suffix matching is implemented in the form of [$=], such as:

[id$= "Name"] {color:brown;}

Then the following labels can all turn brown:

jack

Rose.

Substring matching

Apply the style as long as there is a specified string in the attribute, using the [* =] form, such as:

[id*= "test"] {color:brown;}

Then the following labels can all turn brown:

Paragraph 1

Paragraph 2

Paragraph 3

At this point, the study of "what are the basic knowledge points 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.