CSS Learning Notes Foundation and Selector

This is a note about CSS foundation and selector, after all, their memory is not as good as a notebook, so record it, later forget that there is a place to turn over, review and relive.

Introduction to CSS

We can use HTML to build a stable structural foundation, while style control of the page is left to CSS T he style of a Web page includes the color, size, line shape, spacing, and so on of various elements, which can be a huge effort to design or maintain a web site with more data. Fortunately, you can use CSS to control these styles, which will greatly improve the efficiency of web design and maintenance, and make the overall style of the web page easily unified.

CSS overview

CSS is an acronym for Cascading Style Sheet which Chinese translated into cascading style sheets, or cascaded style sheets. I t is a technique used to define the appearance style of a Web page, introducing CSS rules in a Web page that allows you to lay out pages quickly and efficiently, and precisely control the appearance of HTML tagged objects such as width, height, location, font, background, and so on. CSS is an identity language that not only effectively controls the style of web pages, but more importantly enables the separation of web content from style and allows CSS rules to be stored separately in a single document, with the extension "css" for CSS files.

CSS3

CSS3 standard was developed as early as 1995 and was on the W3C research agenda in 2001, but CSS3 has remained largely unchanged for 10 years, until a new version of CSS3 was released in June 2011, and CSS3 is now widely supported by many browsers. CSS3 is an upgraded version of CSS technology, and CSS3语言 divides CSS into smaller modules, moving toward modularity. T he previous version was a larger and more complex module, so break it down into a small, simple module and add more new modules. There are multiple modules in CSS3 for fonts, colors, layouts, backgrounds, positioning, borders, columns, animations, user interfaces, and so on.

Basic usage of CSS

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

        选择器{
            属性1: 值;
            属性2: 值;
            …
            属性n: 值;
        }

CSS Learning Notes Foundation and Selector1

CSS properties

The properties of CSS are grouped by related functionality, including fonts, text, backgrounds, lists, animations, and more, and examples of how these properties are used will be mentioned later.

The method of using CSS in HTML documents

Depending on how CSS is used and the scope of its use in HTML documents, CSS style sheets are used in three broad categories: in-row styles, internal style sheets, and external style sheets, which can be chained into external style sheets and imported external style sheets. In this section, we look at ways to use CSS in HTML from four categories.

In-line style

The internal style sheet

The external style sheet

Chain into an external style sheet

Import an external style sheet

In-line style

Inline style, also known as inline style, is the most direct of the four ways to use CSS which implements borrowing the global property style of HTML elements to write CSS code directly into it. S trictly speaking, in-row styles are an impertinence approach that does not require a selector, where CSS code and HTML code are mixed together, so in-row styles are not recommended. The basic syntax of in-line styles is as follows:

        <标记 style="属性:值; 属性:值; …">

The internal style sheet

When a single document requires a special style, you should use an internal style sheet. I nternal style sheets are styles placed in the head area of the page, so that defined styles are applied to this page, and internal style sheets are declared using style tags, which is a more common method of use. The basic syntax is as follows:

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            选择器1｛属性:值;…｝
            选择器2｛属性:值;…｝
            ……
            选择器n｛属性:值;…｝
        </style>
    </head>

style tag defines the style information for an HTML document, specifying how HTML elements are rendered in a browser, where type is used to specify the type of content in the element.

Chain into an external style sheet

You can use an external style sheet when you want to ensure style consistency for your site, or when you define more style content and you need multiple pages to share styles. C haining into an external style sheet is saving the style sheet as an external style sheet file and then linking it to the style sheet file with a link link on the page, which is placed in head area of the page. The basic syntax is:

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="样式表路径" rel="stylesheet" type="text/css" />
    </head>

thereinto:

href Indicates the path that the style sheet holds.

rel Used to define the relationship between a linked file and HTML rel="stylesheet" to the use of this external style sheet in a page.

type property specifies the file type, and “text/css” to the type of file that is style sheet text.

Import an external style sheet

Importing an external style sheet is importing an external style sheet in the style element at the head of an HTML file, and importing an external style sheet takes import approach. I mporting an external style sheet is similar to chaining a style sheet, but importing an external style sheet is essentially equivalent to having inside a Web page. The basic syntax is:

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            @import url("样式表路径");
        </style>
    </head>

CSS Basic Selector

Selectors are an important concept in CSS that can dramatically increase the productivity of developers writing or modifying style sheets. CSS3 provides a large number of selectors, which can be broadly divided into basic selectors, combination selectors, property selectors, pseudo-class selectors, pseudo-object selectors, and so on. D ue to browser support, many selectors are rarely used in actual development, and this article focuses on the most basic and commonly used selectors. Basic selectors include tag selectors, class selectors, id selectors, and universal selectors.

Mark the selector

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

        标记名{ 属性1:值1; 属性2:值2;…}

For example, to center the text of all P labels, the syntax is as follows:

            p{
                text-align: center;
            }

Class selector

The basic syntax of class selectors is:

        标记名.类名{属性1:值1;属性2:值2;…}

The class selector classes the global class of the tag, as follows:

        <标记名 class="类名">

It is important to note that the class name here can be any legitimate character, defined by the designer. If it is available for all tags, it takes the form of *.类名 where * everything and, of course, can be omitted.

Here are a few examples:

        <style type="text/css">
            p.text1{color:brown;font-size:14px;}
            /* 该形式下只允许<p>标记中类名为"text1"的标签引用该样式 */
            *.text1{ color:brown;font-size:14px; }
            或
            .text1{ color:brown;font-size:14px; }
            /* 表示所有类名为"text1"的标签都可引用该样式 */
        </style>

id selector

id selectors and class selectors are roughly the same, except that "." is not used when defining. I nstead, the global property that “#” on HTML tag is “id” instead of “class” The basic syntax of the id selector is:

        标记名#id名{ 属性1: 值1;属性2: 值2;…}

id selector's global property id for the tag is referenced as:

        <标记名 id="id名">

Of course, as with the class selector, if all tags are used, they are in the form of *#id名 * is represented by all and can be omitted.

Universal selector

A universal selector is a special selector that matches all elements in a Web * unless you use a more specific selector to specify that the same property in an element should use other values. T he universal selector is slightly different from styling body element because the universal selector applies to each element and does not rely on properties inherited from the rules applied to the body element. Its basic usage is as follows:

        <style type="text/css">
            *{
                属性1: 值1;
                属性2: 值2;
                …
            }
        </style>

Other CSS selectors

In addition to CSS Basic Selector, CSS has many other selectors.

Combine selectors

A combination selector in CSS can be counted as an upgrade to the underlying selector, which means combining to use the base selector. There are five main categories of combined selectors: multi-element selectors, descendant selectors, sub-selectors, adjacent selectors, and brother selectors.

CSS Learning Notes Foundation and Selector2

Multi-element selector

The basic syntax of a multi-element selector is:

        E, F {属性1:值1;属性2:值2;… }

This is very understandable, is to select multiple elements at the same time, the middle use of ", " separated.

Descendant element selector

The basic syntax of the descendant element selector is:

        E F {属性1:值1;属性2:值2;… }

It is also well understood that all F E元素 belonging to the descendants of E F元素 are matched, and that E元素 are separated from F F元素 by spaces, such as:

        table b{color:red; }

this means that all b元素 in the table are set to red.

Child element selector

The basic syntax of the child element selector is:

        E>F{属性1:值1;属性2:值2;…}

The child element selector can only select the child element of an element, where E is the parent element, F is the direct child element, and E>F represents all child elements F under the E element selected, which are connected by >. This is not the same as the descendant element selector, in the descendant element selector F is all descendant elements of E, and in the child element selector F must be a child element of E.

Adjacent brother selector

The basic syntax of the adjacent sibling selector is:

        E+F{属性1:值1;属性2:值2;…}

Adjacent sibling selectors can select elements immediately after another element, and they have the same parent element, linked by a plus sign, in other words, E and F have the same parent element, and the F element is behind the E element and closely adjacent.

General brother selector

The basic syntax of the general brother selector is:

        E~F{属性1:值1;属性2: 值2;…}

The general brother selector will select all the sibling elements behind an element, linking with the number, which is similar to the adjacent sibling selector, needs to be in the same parent element, and the F element is after the E element. The difference is that the E-F selector matches the F-element behind all E-elements, and the E-F matches only the F-elements immediately behind the E element.

The property selector

A property selector is a middle bracket that lists a variety of properties or expressions after a tag. There are many forms of property selectors, and here are a few examples.

There is a property match

By matching existing properties to control the style of an element, you typically include the matching property in parentheses. For example, set any a标记 with the href property to a complex color:

        a[href]{color:brown;}

Exact Property Match Styles are applied only if the property values exactly match the specified property values, and the id selector and class selector are essentially exact property match selectors. For example, set the link a标记 to the URL "http://www.w3cschool.cn" to brown:

        a[href="http://www.w3cschool.cn"]{color:brown;}

Prefix match

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

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

The following labels can then turn brown:

        <p id="userName">小明</p>
        <p id="userWeight">体重</p>
        <p id="userAge">年龄</p>

The suffix matches

As opposed to prefix matching, you can apply a style to an element as long as the end character of the property value is matched with the specified string. Suffix matching [$=] in the form of a .

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

The following labels can then turn brown:

        <p id="JackName">杰克</p>
        <p id="RoseName">萝丝</p>

Substring match

Styles are applied as long as there is a specified string in the property, and the implementation is [*=]形式 in the form of a , such as:

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

The following labels can then turn brown:

        <p id="Rosetest">段落1</p>
        <p id="testY">段落2</p> 
        <p id="xtesty">段落3</p>

These are CSS study notes, I hope to help you. Then students interested in CSS can take a look at the tutorial:

CSS tutorial: https://www.w3cschool.cn/css/

CSS Microsys: https://www.w3cschool.cn/minicourse/play/csscourse

CSS Learning Notes Foundation and Selector

Table of contents

Introduction to CSS

CSS overview

CSS3

Basic usage of CSS

CSS properties

The method of using CSS in HTML documents

In-line style

The internal style sheet

Chain into an external style sheet

Import an external style sheet

CSS Basic Selector

Mark the selector

Class selector

id selector

Universal selector

Other CSS selectors

Combine selectors

Multi-element selector

Descendant element selector

Child element selector

Adjacent brother selector

General brother selector

The property selector

There is a property match

Prefix match

The suffix matches

Substring match

Cookie Consent