Web page text

  • The < span > tag is used to combine inline elements in HTML documents. It has no fixed format.

  • Font style

  • Font type

    • The font-family property

      P {the font-family: Verdana, "regular script"; } body{font-family: "Times New Roman", "Times New Roman"; }Copy the code

      Verdana’s choice of font with or without Spaces: “Times New Roman”

  • Font size attribute: unit: px em…

  • Font style Attribute: Normal italic Oblique Standard, italic, and oblique

  • The font size

    The font – weight attribute

  • Font properties

    • The order of font properties: font style → font thickness → font size → font type
    • Font: Oblique bold 12px "regular "; }

  • Text attributes

Typesetting text paragraphs

Text decoration and vertical alignment

Text decoration:

The text – decoration properties

Vertical alignment:

Vertical-align Attribute: middle, top, bottom

Text shadow

Text-shadow: color x-offset (x-offset) y-offset (y-offset) Blur radius (blur-radius) Color: Shadow color. Defines the color to use when drawing shadows. If this value is not set, the color of the text will be used as the shadow color. X-offset: specifies the horizontal displacement of the shaded area. The value can be positive or negative. If it is on the right, it can be negative on the left. Y-offset: Specifies the vertical displacement of the shaded part. The value can be positive or negative, or negative on the left if it is on the right. Blur -radius: indicates the blur radius of the shadow. The larger the value, the more outward the shadow is blurred, the more blurred the edge of the shadow is. This value must be positive. If it is 0, it does not blur.

text-shadow : color  x-offset  y-offset  blur-radius;
Copy the code

Hyperlink pseudo-classes



Set the order of pseudo classes: A :link->a:visited->a:hover->a:active

A list of the style

list-style-type

list-style-image

list-style-position

list-style

Web page background

Div layout page

Background color: background-color and background-image. Special value: transparent

Background image introduction: background-image: URL (” image path “)

Background repetition :(background-repeat)

1. Repeat: Tile in both horizontal and vertical directions.

2. No-repeat: not tiled, and the picture is only displayed once.

3. Repeat -x: tile horizontally only.

4. Repeat -y: Tile only in the vertical direction.

Background positioning :(background-position)

1.Xpos Ypos: pixel value

2.X% Y% : Percentage indicates background location

3.X and Y directions: Indicates the critical value in the horizontal direction (left,center,right). Indicates the critical value in the vertical direction (Top: Center,bottom)

Background size: background-size:auto; (Default value, no change.)

Background-size: percentage (change to fixed pixels)

Background – size: cover; Note: (background-position:center;)

Background-size: contain(background-size: contain)

CSS 3 gradient

Linear-gradient (position, color, color) Browser: IE with prefix: -ms- Firefox: -Moz – Google: -webkit-

Direction of gradient:

  • To bottom: Color from top to bottom
  • To left: color from right to left
  • To right: color from left to right
  • To top left: from the bottom right to the top left
  • To Top ringht: Color from bottom left to top right
  • Bottom left: Color from top right to bottom left
  • A radial gradient is a round or oval gradient in which the colors no longer change in a straight line, but instead blend in all directions from a new starting point.
Linear-gradient (position, color1, color2...) - webkit-Linear-gradient (position, color1, color2,...)Copy the code