Font configuration and elements of CSS study notes

Font:

1. Fonts
/* Set the font of the text in the webpage to Microsoft Yahei
Set the font for the text in the web page to Arial. */
body{font-family:"Microsoft Yahei";}

2. Font size and color
/* The font size of the text in the web page is 12 pixels, and the font color is set to #666 (gray)*/
body{font-size:12px;color:#666};
.stress{font-size:20px;color:red;}

3. Bold
/* Realize the setting text to be displayed in bold style */
p span{font-weight:bold;}

4. Italics
/* Implement text to be displayed in the browser in italic style */
p a{font-style:italic;}

5. Underscore
/* Set to underline style */
p a{text-decoration:underline;}

6. Strikethrough
 .oldPrice{text-decoration:line-through;}

7. Indent
/* Set 2 spaces indent for text segment */
p{text-indent:2em;}

8. Spacing (line-height) property (line-height)
/* Set the line spacing (line height) to 2em*/
p{line-height:2em;}

9.- Chinese character spacing, letter spacing
/* Set the letter spacing for the title to 20 pixels */
h1{letter-spacing: 20px;}

10.- Alignment Set the centering style for text, images in block elements
div{text-align:center;}

element:

1. Element classification
Block elements, inline elements (aka inline elements), and inline block elements.
Commonly used block elements are:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

Commonly used inline elements are:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

Commonly used inline block elements are:

<img>、<input>
2. Block-level elements
display:block is to display the element as a block-level element
/*The inline element a is converted into a block element, so that the a element has the characteristics of a block element. */
a{display:block;}

Block-level element features:
1) Each block-level element starts on a new line, and the elements after it also start on a new line. (Really overbearing, a block-level element is on a line)
2) The height, width, line height, and top and bottom margins of the element can be set.
3) If the element width is not set, it is 100% of its own parent container (consistent with the width of the parent element), unless a width is set.
例：div,p{background:pink;}

3. Inline elements
display:inline sets the element to be inline
Inline element features:
1) and other elements are all on one line;
2) The height, width and top and bottom margins of elements cannot be set;
3) The width of an element is the width of the text or image it contains and cannot be changed.
例：a,span,em{
	background:pink;/*Set the background color of a, span, em tags to pink*/
}

4. Inline block elements
display:inline-block is to set the element as an inline block element
Inline-block element features:
1) and other elements are all on one line;
2) The height, width, line height, and top and bottom margins of the element can be set.