CSS summary (Part 1) and css summary (Part 2)

CSS summary (Part 1) and css summary (Part 2)

CSS formatting

☆Font. We can use css styles to Set Font, font size, color, and other style attributes for the text in the webpage. Let's take an example. The following code is implemented: Set the font to. For the text in the webpage.
Body {font-family: "";}
Do not set unnecessary fonts here, because if the font you set is not installed on your local computer, the default font of your browser will be displayed. (Because whether the user can see the font style you set depends on whether the user's local computer has installed the font you set .)

☆Font size and color: Use the following code to set the font size of text on the webpage to 12 pixels and set the font color to #666 (Gray ):
Body {font-size: 12px; color: #666}

☆Bold, we can also use css styles to change the text style: bold, italic, underline, and strikethrough. You can use the following code to set the text to be displayed in bold.
P span {font-weight: bold ;}
Here we can see that if you want to set the bold text is a separate css style to achieve, and then do not use h1-h6 or strong label to achieve the bold style.

☆Italic. The following code displays text in italic text in a browser:
P a {font-style: italic ;}

☆Underline. In some cases, you want to set the text style as an underline, so that you can emphasize the text visually. You can use the following code to achieve this:
P a {text-decoration: underline ;}

☆Delete a line. What should I do if I want to set a Delete line on the webpage? This style is often seen on e-commerce websites
You can use the following code to delete the line on the original price:
. OldPrice {text-decoration: line-through ;}

☆Indent: the blank spaces of the two characters are used before the segments in the Chinese text. The special style can be implemented using the following code:
P {text-indent: 2em ;}

☆Line spacing (line height) plays an important role in paragraph layout. The following Code sets the line spacing of a paragraph to 1.5 times.
P {line-height: 1.5em ;}

☆Character spacing and letter spacing. If you want to set the text interval or letter interval in the web page layout, you can use letter-spacing, as shown in the following code:
H1 {
Letter-spacing: 50px;
}
...
<H1> The Great Gatsby

Note: When this style is used for English words, it is used to set the spacing between letters.
☆Set the word spacing. What if I want to set the spacing between English words? You can use word-spacing. The following code:
H1 {
Word-spacing: 50px;
}
...
<H1> welcome to YanHeng! </H1>

☆Alignment: Do you want to set a center style for text and images in block elements? You can use the text-align style code. The following code can be used to center the text.

H1 {
Text-align: center;
}
<H1> The Great Gatsby You can also set to left:
H1 {
Text-align: left;
}
<H1> The Great Gatsby You can also set to right:
H1 {
Text-align: right;
}
<H1> The Great Gatsby

CSS Box Model

☆Element classification. Before explaining CSS layout, we need to know some knowledge in advance. In CSS, tag elements in html are generally divided into three different types: block elements, inline elements (also called intra-row elements), and inline block elements.
Common block elements include:
<Div>, <p>, Common inline elements include:
<A>, <span>, <br>, <I>, <em>, <strong>, <label>, <q>, <var>, <cite>, <code>
Commonly used inline block elements include:
, <input>

I. Block Elements

Block-level elements: <div>, <p>, For example, a {display: block ;}
Block-level element features:
1. Each block-level element starts from a new row, and the subsequent element also starts from another row.
2. You can set the height, width, row height, and top and bottom margins of an element.
3. If the element width is not set, it is 100% of its parent container (consistent with the width of the parent element) unless a width is set.

Ii. inline Elements

In html, <span>, <a>, <label>, <input>, , <strong>, and <em> are typical inline elements (intra-row elements) (inline) element. Of course, block elements can also be set to inline elements through the Code display: inline. The following code converts a block element div into an inline element. Using a div element on a page has the inline element characteristics.

For example, div {display: inline ;}
Inline element features:
1. and other elements are on one row;
2. The height, width, Row Height, top and bottom margins of the element cannot be set;
3. The width of an element is the width of the text or image it contains and cannot be changed.

3. inline block elements

Inline block elements (inline-block) are both inline elements and block elements. The Code display: inline-block sets the element as an inline block element. (Added in css2.1). The and <input> labels are inline block labels.

For example, a {display: inline-block ;}
Inline block element features:
1. and other elements are on one row;
2. You can set the height, width, row height, and top and bottom margins of an element.

☆Three elements of the Box Model: border, fill, and border

1. border)

The border of the box model is the line centered around the content and the padding. You can set the width, style, and color of the line (three border attributes ).
For example, the following code sets the Border width to 2px, the style to solid, and the color to red as the border:
Div {
Border: 2px solid red;
}
The above is the abbreviation of the border code, which can be written separately:
Div {
Border-width: 2px;
Border-style: solid;
Border-color: red;
}
Note:
1. border-style (border style) Common styles include:
Dashed (dotted line) | dotted (dotted line) | solid (solid line ).
2. The color in border-color (border color) can be set to hexadecimal color, for example:
Border-color: #888; // do not forget the previous well number.
3. The width in border-width (border width) can also be set:
Thin | medium | thick (but not frequently used), which is usually pixel (px ).

Now there is a problem. What if I want to set the lower border for the p tag, but do not set the border style for the other three sides? In css Styles, you can set a style for the border in one direction only:
Div {border-bottom: 1px solid red ;}
You can also use the following code to set the top, right, and left borders of other three sides:
Border-top: 1px solid red;
Border-right: 1px solid red;
Border-left: 1px solid red;

Ii. width and height

The width and height of the box model are different from the width and height of the object we usually call. The width and height defined in css are ), it refers to the content range in the filling.
Therefore, the actual width of an element (the width of the box) = left border + Left Border + Left fill + content width + right fill + Right Border + right border. (For example)

 

The height of the element is also the same.

For example:
Css code:
Div {
Width: 200px;
Padding: 20px;
Border: 1px solid red;
Margin: 10px;
}
Html code:
<Body>
<Div> text content </div>
</Body>
The actual length of the element is 10px + 1px + 20px + 200px + 20px + 1px + 10px = 262px. You can view the element box model in chrome, for example:

 

3. Filling)

The distance between the element content and the border can be set, which is called "fill ". Filling can also be divided into upper, right, lower, left (clockwise ). The following code:
Div {padding: 20px 10px 15px 30px ;}
Do not confuse the sequence. The above code can be written separately:
Div {
Padding-top: 20px;
Padding-right: 10px;
Padding-bottom: 15px;
Padding-left: 30px;
}
If the top, right, bottom, and left are filled with 10px, you can write it like this.
Div {padding: 10px ;}
If the padding is 10px, And the padding is 20px, you can write it like this:
Div {padding: 10px 20px ;}

4. Border (margin)

The distance between the element and other elements can be set using the border (margin. The boundary can also be divided into upper, right, lower, and left. The following code:
Div {margin: 20px 10px 15px 30px ;}
You can also write separately:
Div {
Margin-top: 20px;
Margin-right: 10px;
Margin-bottom: 15px;
Margin-left: 30px;
}
If the upper right bottom left boundary is 10px, write as follows:
Div {margin: 10px ;}
If the upper and lower boundary is 10 PX, and the left and right sides are 20 PX, you can write this statement:
Div {margin: 10px 20px ;}
To sum up, the difference between padding and margin is that padding is inside the border and margin is outside the border.