Learn front-end development from scratch and create your own web page world (3) - CSS Basics

1. Introduction to CSS

CSS (cascading style sheets), cascading style sheets, the performance standard language in WEB standards, the performance standard language mainly controls the display of web page information in the web page, and it is simply how to modify the display style of web page information.

Two, CSS syntax

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

CSS syntax example

The selector indicates the object to define the style, which can be the element itself, or a type of element or an element with a specified name.

Attribute : attribute is the attribute of the specified selector, it is the core of css, there are more than 150 attributes in css2
Attribute value : Attribute value includes statutory attribute value and common value plus unit, such as 25px, or color value, etc.

Explanation:
1) Each CSS style consists of two parts, namely the selector and the statement, and the statement is divided into attributes and attribute values;
2) Attributes must be placed in curly braces, and attributes and attribute values are connected with colons.
3) Each statement ends with a semicolon.
4) When an attribute has multiple attribute values, the attribute values and attribute values are in no particular order.
5) In the process of writing styles, operations such as spaces and line breaks do not affect the display of attributes.

Third, the creation of styles (internal styles, external styles, inline styles), and the difference between the two types of imported external style sheets

1. Internal styles

grammar:

<style type="text/css">
/*css语句*/
</style>

Note: When using the style tag to create a style, it is best to write the tag in <head></head>;

2. External styles

Method 1: Create an external style sheet:

<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />
Note:
When using the link element to import an external style sheet, the element needs to be written at the head of the document, that is, <head>between </head>and .

rel (relation): used to define the document association, representing the associated style sheet;
type: defines the document type;

Method 2: Importing an external style sheet

<style type="text/css">
@import url(目标文件的路径及文件名全称);
</style>

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

3. Inline style (interline style, inline style, embedded style)

grammar:<标签 style="属性：属性值;属性:属性值;"></标签>

4. The difference between the two types of external style sheet link and import

Difference 1: Essential difference: link is an XHTML tag, and @import is completely a way provided by CSS.
Difference 2: The difference in loading order: when a page is loaded (that is, when it is browsed by the viewer), the CSS referenced by the link will be loaded at the same time, while the CSS referenced by @import will wait until the page is completely downloaded before being loaded. . So sometimes when browsing a page loaded with CSS by @import, there will be no style (that is, flickering), which is quite obvious when the network speed is slow.
Difference 3: The difference in compatibility: @import is proposed by CSS2.1, so old browsers do not support it. @import can only be recognized by IE5 or above, but the link tag has no such problem.
Difference 4: The difference when using dom (document object model document object model) to control the style: when using javascript to control the dom to change the style, only the link tag can be used, because @import is not controllable by dom.

Five, the priority of the style sheet

Inline style sheets have the highest priority
The internal style sheet is related to the priority and writing order of the external style sheet, and the priority of writing later is higher.

Six, CSS selector (selector)

There are about ten commonly used selectors:
1. Type selector

    Syntax : element name { attribute: attribute value; }
    Explanation :
    a) The element selector uses the document language object type as the selector, that is, uses the element name in the structure as the selector. Such as body, div, p, img, em, strong, span...etc.
    b) All page elements can be used as selectors;
usage:

If you want to change the default style of an element, you can use the type selector;
(eg: change a div, p, h1 style)
When unifying the display effect of an element in the document, you can use the type selector
(for example: change the style of all p paragraphs in the document)

2. id selector

Syntax : #id name { attribute: attribute value; } ID selector is the only
description :

When we use the id selector, we should define an id attribute for each element
such as:<div id="div1"></div>
The grammatical format of the id selector is "#" plus a custom id name
such as:#box{width:300px; height:300px;}
English name should be used when naming, and keywords cannot be used: (all tags and attributes are keywords)
such as: head tag
An id name can only correspond to a specific element object in the document, because id can only define a unique element object in the page.
Greatest use for: creating the peripheral structure of a web page.

3. class selector

Syntax : .class name {attribute: attribute value;}
Description :

When we use the class selector, we should first define a class name for each element
The grammatical format of the class selector is: "such as: <div class="top"></div>"

Usage : The class selector is more suitable for defining a class of styles;

4. Wildcards

    Syntax : { Attribute: attribute value; }
    Explanation : The wording of the wildcard selector is *that its meaning is all elements.
    Usage : Commonly used to reset styles.

5. Group selector
syntax : selector 1, selector 2, selector 3 {attribute: attribute value;} comma-separated
description : when there are multiple selectors applying the same style, you can use "," for the selector Separated, merged into a group.

6. Include selector
    Syntax : selector 1 selector 2{attribute: attribute value;} separated by spaces
    Explanation : selector 1 and selector 2 are separated by spaces, which means all selectors 2 contained in selector 1;
    usage : When my element has a parent element, I want to change my own style, which can be solved directly by including a selector without adding a selector.

7. Pseudo-class selector (the selector that has been defined in the pseudo-class selector CSS cannot be named casually)

Syntax : generally <a>used with

a:link{attribute: attribute value;} the initial state of the hyperlink;
a:visited{attribute: attribute value;}The state of the hyperlink after being visited;
a:hover {attribute: attribute value;} mouse hover, that is, the state when the mouse crosses the hyperlink;
a:active{attribute: attribute value;}The state when the hyperlink is activated, that is, the state of the hyperlink when the mouse is pressed; let them abide by a love/hate principle, that is, Link–visited–hover–active.

Description :

When these 4 hyperlink pseudo-class selectors are used in combination, attention should be paid to their order. The normal order is:
a:link,a:visited,a:hover,a:active. Sometimes the wrong order will make the style of the hyperlink failure;
In order to simplify the code, the same statement in the pseudo-class selector can be put forward in the a selector;
for example: a{color:red;} a:hover{color:green;} means that the three states of the hyperlink are the same , only the color changes when the mouse is crossed.

8. Pseudo-object (pseudo-element) selectors
are used to create elements that are not in the document tree and add styles to them (such as: before/:after)

The double colon (::) introduced in CSS3 is not supported by IE8 and below, all browsers support the use of double colons in pseudo-elements. Some pseudo-elements such as ::backdrop only accept the use of double colons.

If you want to be compatible with browsers of lower versions, you can use single colons, and you must still use double colons on pseudo-elements that specify double colons.

Grammar : It can be understood as the same colon writing method as the pseudo-class selector

first-letter/:first-letter: Sets the style of the first character within the object.
first-line/:first-line: Styles the first line within the object.
before/:before: Set the content that happens before the object (according to the logical structure of the object tree). For use with the content attribute
after/:after: Sets what happens after the object (according to the logical structure of the object tree). For use with the content attribute
:selection: Set the color of the object when it is selected.
::placeholder:::-webkit-input-placeholder/::-moz-placeholder/:-ms-input-placeholder Set the placeholder text of a form element

Seven, the weight of CSS selectors

In css, four digits are used to represent the weight, and the expression of weight is as follows: 0, 0, 0, 0

Type selectors have a weight of 0001
The class selector has a weight of 0010
The id selector has a weight of 0100
Sub-selectors have a weight of 0000
Attribute selectors have a weight of 0010
Pseudo-class selectors have a weight of 0010
Pseudo-element selectors have a weight of 0010
Weights containing selectors: the sum of weights containing selectors
Inline styles have a weight of 1000
Inherited styles have a weight of 0000

When the style settings of different selectors conflict, the style of ++high-weight selector++ will override the style of ++low-weight selector++.

For example: the weight of b .demo is 1+10=11, and the weight of .demo is 10, so the style of .demo often fails

For selectors with the same weight, the style follows the principle of proximity: whichever selector is defined last, the selector style will be used.

(Note: it is the order in which the selector is defined in the css style, not the order in which it is used in html)

8. Notes on the page

html comments

css comments
/* 我是css的注释 */

九、css float

    Definition : Define how other text in the web page wraps around this element Display
    purpose : To make vertical things horizontal
    Grammar : float: none/left/right;

left: the element is floating on the left of the text
right: the element is floating on the right
none: the default value, no floating.

If the first text is set to float and the rest is not set to the first, it will cover the second half layer.
If the floating does not affect the bottom, add a box

float left

float right

Welcome everyone to pay attention to my official account "Treading the Waves Life Circle". There are not only more interesting content here, but also the latest information of Treading the Waves always keep abreast of the cutting-edge technology. Come and join us!