Warm preface: Today is a beautiful weekend, if the weather is very good, go out for a walk, go to the park or climb the mountain, if the weather is bad, stay at home lazy sleep, is not not a good way to relax to relieve the tired and heavy body for a week, what do you think?

Color notation

The first: color name representation

For example: red, blue, green

Note: Color comparison table [tool.oschina.net/commons?typ…]

Second: RGB representation

R: red red

G: green, green

B: the blue blue

Color depth can be expressed as a value between 0 and 255

color: rgb(255, 22, 100); RGB (0,0,0) => black RGB (255,255,255) => white RGB (255,0,0) => redCopy the code

You can also set the color depth with % %. If you use percentages, use percentages all the time

Color: rgb(20%, 10%, 0%); // The percent sign cannot be omittedCopy the code

Third: hexadecimal color representation

#802;  red 

#880022;  blue

#00ff00; green.Copy the code

Note: abbreviate to three digits: only when the corresponding values of RGB three colors are two identical numeric values can be omitted to three digits

For example: #889922 —–> #892

For example, 0 1 2 3 456789 a B C D E F

Unit notation

Relative units: px, pixel. Logical opposites.

Let’s say I have a 1280px screen, and I’m going to have a 1280px page full screen. For example, if you set the screen resolution to 2000px, the full screen of a web page will take 2000px.

  • Cm: 1 Cm, 1 mm
  • Absolute unit

typography

Set the font size

Set the text size in two units: px relative units and cm, mm absolute units

We usually use relative units px, pixel

Such as:

Set the text size in two units: px relative units and absolute units cm, mm, in

We usually use relative units px, pixel.

Such as:

Div {
    font-size: 14px;
}
Copy the code

Em is a relative unit. Em is equal to 1 font size 12px, so 1em = 12px

Em can set the width, height, borders, margins, etc. Such as:

div {
    Width: 3em;
}
Copy the code

Setting font Type

Word-wrap: break-word! Important;Copy the code

The font-family property is used to set the font. Common fonts in web pages include Song Typeface, Microsoft Yahei, bold, etc. For example, to set the font for all paragraphs of text in a web page to Microsoft Yahei, you can use the following CSS style code:

p { font-family:Microsoft Yahei; }Copy the code

Multiple fonts can be specified at the same time, separated by commas

font-family:Verdana, Arial, '宋体';
Copy the code

Note: The western alphabet system is divided into two types: serif and sans-serif.

Note: Serif is a typeface with extra decoration at the beginning and end of the stroke, and the thickness of the stroke is different. Sansserif, on the other hand, doesn’t have these extra decorations, and the strokes are about the same thickness. For a more secure setup:

font-family:tahoma,arial,'Hiragino Sans GB',\5b8b\4f53, sans-serif;
Copy the code

Find a sans-Serif font as the default font.

Note the order, if you put sans-serif in front, the rest will be invalid!!

Set font bold

Set font bold:

Font-weight: indicates the value of font weight.Copy the code

The font-weight attribute defines the size of a font. The value can be Normal, bold, bolder, lighter, and 100 to 900 (integer multiple of 100).

400: Normal 700: boldCopy the code

Font bolding is related to the font. For example, a font with only two thicknesses has the same effect from normal to bold and from bolder.

// font-weight: normal; // if you use numbers: 400 normal, 700 bold 900 bolder weight: 700;Copy the code

Font co-wrote

All CSS rules at the beginning of font can be combined directly into a font rule to define syntax rules:

< span style = "box-sizing: border-box; color: RGB (50, 50, 50); }Copy the code

Such as:

.box {
    font: oblique bold 14px/2 SimSun,'Microsoft YaHei',sans-serif; font: 14px SimSun; font-style:oblique; font-weight:bold; font-size:14px; // The line height is 1.5 times that of the font. font-family:SimSun ,'Microsoft YaHei',sans-serif;
}
Copy the code

Note: In fact, the attributes that do not need to be set can be omitted, but the font-size and font-family attributes, otherwise the font attribute will not work

Text appearance properties of the CSS

Sets the font color

Color: text color

.box { color: red; } .box { color:#ccc; } hexadecimal notationThe box {RGB (33, 32, 33); } RGB representation methodCopy the code

Sets the line height of the text

Line height definition: The distance between two lines of text baseline

Sets the modifier line for the text

Text-decoration: text decoration

The text-decoration property is used to set the underline, underscore, delete and other decorative effects of the text. The available property values are as follows:

  • <s> Delete line </s>

  • None: No decorations (normal text default)

  • -Leonard: Underline?

  • -Leonard: Overline

  • Line-through: deletes a line

Note: Multiple values can be assigned after text-decoration to add multiple display effects to the text.

For example: want text to be underlined, underlined and strikeout

span {
background-color: #ccc;
text-decoration: underline overline line-through;
}

Copy the code

Set the character spacing and English word spacing

  • Letter – spacing, word spacing

  • Word-spacing: Spacing between English words

Such as:

// Control the spacing between characters. The spacing can be negative: 2px; // Control the distance between English words, can be negative! word-spacing: 2px;Copy the code

Whitespace handling

When you create a web page using HTML, no matter how many Spaces there are in the source code, only one character of space is displayed in the browser,

In the CSS, you can use the white-space property to set the handling of whitespace characters. The property values are as follows:

  • Default value of normal (blank, blank lines in text are invalid, full lines are wrapped)
  • Pre pre formatting (blank and blank lines in text are invalid, and automatically wrap after full line)
  • Nowrap blank line invalid! Force text not to wrap! Unless a line break is encountered
  • Content outside the boundaries of an element is not wrapped, and a scroll bar is automatically added if it is outside the browser page

Easter eggs!

Set the cursor to hand shape

Img {// Change the cursor to the shape of a small hand when moving over an element }Copy the code

The next section: Classic aspects of the CSS box model