The selector

The id selector

The ID selector can specify a specific style for HTML elements marked with a specific ID. HTML elements use id attributes to set id selectors. CSS id selectors are defined as “#”.

#id_1 { text-align:center; color:blue; } // Element attribute id="id_1" <p id=" ID_1 ">Hello World! </p>Copy the code

Hello World! It’s blue in the center

Class selectors are used to describe the style of a set of elements. Unlike id selectors, class selectors control multiple elements. Class selectors are represented in HTML as class properties, and in CSS as a dot “.”.

.class_01 { text-align:center; } <h1 class="class_01" id=" ID_1 "> Title centered in red </ H1 > <p class="class_01"> Paragraph centered. </p>Copy the code

The class selector can be used in conjunction with the ID selector

.class_01 { text-align:center; } #id_1 { color:red; } <h1 class="class_01" id=" ID_1 "> Title centered in red </ H1 > <p class="class_01"> Paragraph centered. </p>Copy the code

Label selector

The name of each HTML tag can be used as the name of the corresponding tag selector.

div1 { color:red; } div2 { text-align:center; } p { color:blue; } < div1 > < p > the abcd < / p > < / div1 > < div2 > < / p > < p > 2 paragraph < / div2 >Copy the code

CSS links

Links can be styled using any CSS property such as color, font-family, background, and so on.

A :link {color:green; } /* unvisited link */ a:visited {color:red; } /* a:hover {color:purple; } /* Mouse over the link */ a:active {color:gray; } /* Mouse click */Copy the code

The box model

The box model is the view that the layout elements of an HTML page are a rectangular box, that is, a container for content

Border (border)

Border sets the border of the element. The border has three parts: width (thickness) border style border color

value describe
none Define no borders.
hidden Same as “None”. Except when applied to tables, for which hidden is used to resolve border conflicts.
dotted Define dot borders. Rendered as solid lines in most browsers.
dashed Define the dotted line. Rendered as solid lines in most browsers.
solid Define a solid line.
double Define a double line. The width of the double line is equal to the value of border-width.
groove Define 3D groove borders. The effect depends on the value of border-color.
ridge Define a 3D ridge border. The effect depends on the value of border-color.
inset Define 3D Inset borders. The effect depends on the value of border-color.
outset Define 3D outset frame. The effect depends on the value of border-color.
inherit Specifies that border styles should be inherited from the parent element.

Padding

Padding affects the actual size of the box. If the box already has a width and height, the inner border will make the box bigger.

  • Padding-left: Padding left
  • Padding-top: Top padding (set the distance between the top and the inner margin)
  • Padding-right: Right padding distance
  • Padding-bottom: Padding distance

Outer frame (margin)

The margin property sets the outer border, which controls the distance between boxes.

attribute describe
margin Shorthand properties. Set all margin properties in one declaration.
margin-bottom Sets the lower margin of the element.
margin-left Sets the left margin of the element.
margin-right Sets the right margin of the element.
margin-top Sets the upper margin of the element