Front-end basic CSS

1. CSS selector

2. Grouping and nesting

3. Pseudo-class selector

4. The priority of the selector

5. Other attributes (background, text)

6. CSS box model

7. Floating

8. Positioning

1. CSS selector

Basic selector:

Element selector: p {color: "red";}
ID selector: # i1 {background-color: red;}
Class selector: .c1 {font-size: 14px;}

Universal selector

* {color:white;}

Combination selector

Descendant selector: li a {color: green;} / * Li internal a label sets font color * /
Son selector: div> p {font-family: "Arial Black", arial-black, cursive;} / * Select all <p> elements whose parent is <div> elements * /
Adjacent selector: div + p {margin: 5px;} / * Select all <p> elements immediately after the <div> element * /
Brother selector: # i1 ~ p {border: 2px solid red;} / * All brother p tags behind i1 * /

Second, grouping and nesting

Grouping:

When the styles of multiple elements are the same, there is no need to repeatedly set the style for each element. You can set the element style uniformly by grouping selectors separated by commas between multiple selectors.

div,p {color:red;}

Nesting:

Multiple selectors can be mixed.

For example: all p tags in the .c1 class set the font color to red

.c1 p {color:red;}

Three, pseudo-class selector

/ * Unvisited link * /
a: link {
color: # FF0000
}

/ * Links
visited * / a: visited {
color: # 00FF00
}

/ * Move the mouse to the link * /
a: hover {
color: # FF00FF
}

/ * Selected link * /
a: active {
color: # 0000FF
}

/ input input frame style when the focus is obtained /
input: focus {
outline: none;
background-color: #eee;
}

Fourth, the priority of the selector

! [Insert picture description here] (https://img-blog.csdnimg.cn/20200413163558770.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dX=QMx7,

5. Other attributes (background, text)

Text alignment: text-align

left align left, default
right align right
center align
justify justify

Text decoration: text-decoration

none The default value. Define standard text
underline defines a line under the text
overline defines a line on the text
line-through defines a line through the text
inherit inherits the value of the text-decoration attribute of the parent element

First line indent: text-indent

Indent the first line of the paragraph by 32 pixels: p {text-indent: 32px;}

Background attributes:

background-color: red;
background-image:url(’ ');
background-repeat: no-repeat;
/ * Background
repeat: the background image is tiled to fill the entire web page
repeat-x is tiled horizontally
repeat-y is tiled vertically
* /
background-position: right top / * background position * /

Six, the box model

Attributes	effect
margin	It is used to control the distance between elements; the most basic purpose of margin is to control the spacing of the space around the element, to achieve the purpose of separating each other from a visual point of view.
padding	Used to control the distance between the content and the border
border	Borders around inner margins and content
content	The contents of the box, displaying text and images

Insert picture description here

Margin:

.margin-test {
margin-top : 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left : 20px;
}

Abbreviation: order ----> top right bottom left

.margin-test { margin: 5px 10px 15px 20px; }

Common centering:

margin : 0 auto;

Padding:

. padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}

Abbreviation: order ----> top right bottom left

padding: 5px 10px 15px 20px;

Seven, floating

In css, any element can float
floating element will generate a block-level box, regardless of what element itself.

float:

left: float left
right: float right
none: default value

clear: The clear attribute specifies which item of the element does not allow other floating elements.

value	description
left	Floating elements are not allowed on the left
right	Floating elements are not allowed on the right
both	Floating elements are not allowed on the left and right sides
none	Defaults. Allow floating elements to appear on both sides.
inherit	Specifies that the value of the clear attribute should be inherited from the parent element.

Clear float:

There are three main ways to understand the side effects of floating (parent tag collapse):

Fixed height
Pseudo-elements removal method
overflow: hidden

overflow property:

value	description
visible	Defaults. The content will not be trimmed and will appear outside the element frame.
hidden	The content will be trimmed and the rest will not be visible.
scroll	The content will be trimmed, but the browser will display a scroll bar to view the rest of the content

8. Positioning

static The default value, no positioning, cannot be used as a reference for absolute positioning.
Relative positioning, taking your original position as a reference.
Note: position: a main usage of relative: it is convenient for absolute positioning elements to find reference objects.
absolute positioning.
fixed

absolute:

The element box set to absolute positioning is completely removed from the document stream and positioned relative to the nearest positioned ancestor element. If the element does not have a positioned ancestor element, its position is relative to the original containing block (the body element). The space originally occupied by the element in the normal document flow is closed as if the element did not originally exist. After the element is positioned, a block-level box is generated, regardless of what type of box it generates in the normal flow.

Important: If the parent sets the position attribute, such as position: relative ;, then the child element will be positioned with the upper left corner of the parent as the original point. This can well solve the problem of label deviation of adaptive websites, that is, the parent is adaptive.

Note: The sub-parent phase: the child element uses absolute positioning, and the parent element uses relative positioning.