Css _ basic tutorial

When it comes to CSS, you have to mention div. Now, the layout structure of the layout cannot be formatted using the table as previously. If you still use the table, that's great. Are you sure you want, it's too late to continue our web learning journey tomorrow. we hope you will support the Black Knight.
1. css application
1. Intra-row style: for example, <p style = "font: small; font-size: 36px"> sdfasfdasdf </p>
2. Embedded pages: for example, <style type = "text/css">
<! --
P {
Text-decoration: underline;
                               }
-->
</Style>
3. Import external <link href = "1.css" rel =" stylesheet "type =" text/css ">
2. css selector, attributes, and values
HTML has tags and CSS has selectors. The selector is used to name internal and external styles.
Each selector has attributes in {}, such as simple points like color, font-weight or background-color.
Values are separated by semicolons after colons (not equal signs. For example:

Body {
Font-size: 0.8em;
Color: navy;
}
The above indicates setting the font-size font size and color font color for the body selector. So basically, when it works with an HTML page, the text color between the body tag (content in the entire window) is navy and the font size is 0.8ems.
3. css color settings
Color and background-color can be used on most html elements, including the body. You only need to set the color and background color of the color font in the tag.

H1 {
Color: yellow;
Background-color: blue;
}
4. css text font settings
Font-family;
Font size: font-size;
Whether the font is bold: font-weight;
Whether the font is italic or not: font-style;
Whether the English font is case-insensitive font-transform;
Whether the font should be underlined: font-decoration;
Spacing between Chinese characters and letters: letter-spacing and word-spacing;
Row height: line-height;
Element Location: text-align;

Body {
Font-family: arial, helvetica, sans-serif;
Font-size: 0.8em;
}
H1 {
Font-size: 2em;
}
H2 {
Font-size: 1.5em;
}
A {
Text-decoration: none;
}
Strong {
Font-style: italic;
Text-transform: uppercase;
}
P {
Letter-spacing: 0.5em;
Word-spacing: 2em;
Line-height: 1.5;
Text-align: center;
}
5. Let's talk about the following: the box model.
   
CSS box mode
This involves the width and height of the margin padding border and the Middle content. Next, let's take a look at it and then summarize it.
6. Settings of margin and padding
Both are separated. margin is the spacing between elements and the outer margin, while padding is the spacing between elements, that is, the inner margin. They all have settings in the upper, lower, and left directions. Attributes that can be set on the four sides of the element: margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left;

H2 {
Font-size: 1.5em;
Background-color: # ccc;
Margin: 1em;
Padding: 3em;
}
7. Settings of the css border
It has a total of border-width | border-style | border-color, indicating the width, style, and color. Each is divided into four directions: up, down, and left.

H2 {
Border-style: dashed;
Border-width: 3px;
Border-left-width: 10px;
Border-right-width: 10px;
Border-color: red;
}
8. Use CSS attributes in combination

Body {
Font-family: arial, helvetica, sans-serif;
Font-size: 80%;
Color: black;
Background-color: # ffc;
Margin: 1em;
Padding: 0;
}

/* By the way, this is a comment */

P {
Line-height: 1.5em;
}

H1 {
Color: # ffc;
Background-color: #900;
Font-size: 2em;
Margin: 0;
Margin-bottom: 0.5em;
Padding: 0.25em;
Font-style: italic;
Text-align: center;
Letter-spacing: 0.5em;
Border-bottom-style: solid;
Border-bottom-width: 0.5em;
Border-bottom-color: # c00;
}

H2 {
Color: white;
Background-color: #090;
Font-size: 1.5em;
Margin: 0;
Padding: 0.1em;
Padding-left: 1em;
}

H3 {
Color: #999;
Font-size: 1.25em;
}

Img {
Border-style: dashed;
Border-width: 2px;
Border-color: # ccc;
}

A {
Text-decoration: none;
}

Strong {
Font-style: italic;
Text-transform: uppercase;
}

Li {
Color: #900;
Font-style: italic;
}

Table {
Background-color: # ccc;
}
You just need to understand what it means.