Text properties

color

Sets the foreground color of the text content

Representation

English, rgb, etc

English words

color: red;
Disadvantages: imprecise

hexadecimal

All design software has a common color representation
Each color component is a number from 0 to 255: hexadecimal ff is 255 of decimal
#aabbcc form, can be abbreviated as #abc

Common colors:
Black is #000
White is #fff white
Gray has #CCC, #333, #2f2f2f, etc

rgb()

 color: rgb(255，0，0);

rgba()

Compatible from IE9

color: rgba(255，0，0，.65);

The last parameter: transparency; Its range is 0-1. 0 means pure transparency and 1 means pure solid

font-size

The unit is usually px. There are also em, rem and other units

font-size: 30px；

The font size of Web text is usually 16px, and the browser supports a minimum of 10px

font-weight

Example significance
font-weight: normal; Normal thickness, equivalent to 400
font-weight: bold; Bold, equivalent to 700
font-weight: lighter; Thinner, most Chinese fonts do not support
font-weight: bolder; Thicker, most Chinese fonts are not supported

font-style

Set font tilt
Example significance
font-style: normal; Cancel tilting. For example, i, em and other labels that are naturally tilted can be set to not tilt
font-style: italic; Set to italic font (common)
font-style: oblique; Set to italic font (simulated with regular font, not commonly used)

text-decoration

Used to set the appearance of the decorative line of the text (underline, strikeout)
Example significance
text-decoration: none; No finishing line
text-decoration: underline; Underline
text-decoration: line-through; Delete line

Font properties

font-family

Set font

font-family: "Microsoft YaHei ";

The font can be in the form of a list. The English font is placed in the front and the font behind is the "backup" font

font-family: serif，"Times New Roman"，"Microsoft YaHei ";

Fonts must be installed
If it is not installed, you need to define the font

Define font

Font file is required. Download the font file while loading the web page

@font-face {
    font-family: 'Font name';
    font-display: swap;
    src: url('eot Font file address');
    /* IE 9 */
    src: url('eot Font file address') format('embedded-opentype')，
        /* IE6-IE8 */
        ur1('woff2 Font file address') format('woff2')， ur1('woff Font file address') format('woff')，
 /* chrome\firefox */
 ur1('ttf Font file address') format('truetype')，
 /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        ur1('svg Font file address') format('svg');
    /*  iOS4.1- */
}

Alibaba Pratt & Whitney

website https://www.iconfont.cn/webfont
Advantages: no need to download fonts

Paragraph attribute, line attribute

text-indent

Defines the amount of indentation in the first line of text

text-indent: 2em;/* em Represents the character width */

line-height

Define row height
Company:
1) Value in px

 line-height: 30px;

2) A numeric value without a unit that represents a multiple of the font size

line-height: 1.5;

3) Percentage, indicating multiple of font size

line-height: 150%;

Center text vertically

Row height = box Height

Text centered horizontally

 text-align: center;

Who wants to center	level	vertical
text	text-align:center;	Line height = box Height
Box	margin:0 auto;	(code below)

father{
position:relative;
}
element{
position: absolute;
top: 50%;
margin-top: -Half your height;
}

font

Font style, font weight, font size / line height, font family

Italic bold font size / line height

font: italic bold 20px/1.5 Arial，"Microsoft YaHei ";

Inheritance

Because the text related attributes are inherited, the font size, color and line height of the body tag are usually set, which can be used as the default style of the whole web page

Proximity principle

If there is inheritance, the selector weight is invalid

<div id="box1" class="box1">
    <div id="box2" class="box2">
        <div id="box3" class="box3">
            <p>I am writing</p>
        </div>
    </div>
</div>
  /* p The label inherits the style*/
  #box1 #box2 #box3 {
      color: red;
  }

The weight directly selected is larger, and the inherited weight is regarded as 0

p {
    color: green;
}
 #box1 #box2 {
     color: red;
 }
 #box1 #box3 {
     color: blue;
 }