What are the elements that beautify a Web page in CSS? CSS can beautify the elements of the page summary

This article brings you to the content of the CSS in the beautification of the elements of the page? CSS can beautify the elements of the page summary, there is a certain reference value, there is a need for friends to refer to, I hope that you have some help.

1. Objectives of this chapter

Font styles and text styles are set using CSS

The hyperlink style is set using CSS

The list style is set using CSS

The background style is set using CSS

will use CSS to set the gradient effect

2.<span> Label

The role of <span> tags

To make a certain number of words or words stand out.

Example:

<p> enjoy <span class= "show" > "PKU" </span> Educational services </p><p> in the PHP Chinese web, a group of people silently support your achievement      <span ID = "Dream" > Dream </span></p><p class= "Bird" > select <span>php Chinese network </span> Achieve your dreams </p>

3. Font style

4. Font type

Font-family Property

P{font-family:verdana, "in italics";} Body{font-family:times, "Times New Roman", "italics";}

5. Font size

Font-size Property

Units: px (pixels), EM, REM, CM, MM, PT, PC

6. Font style

Font-style Property

Normal, italic (in-Library) and oblique (automatically italic font)

Example:

7. The weight of the font

Font-weight Property

8. Font properties

Font Property family weight size style

Order of font properties: font style → font weight → font size → font type

P span {font:oblique bold 12px "italic";}

9. Text Style

Text properties

10. Text color

Color Property

Rgb

The hexadecimal method represents the color: the first two represent the red component, the middle two bits represent the green component, and the last two represent the blue component

RGB (R,G,B): The value of a positive integer is 0~255

RGBA

A parameter that controls Alpha transparency is added to the RGB base, where the transparent channel value is 0~1

Example:

Color: #A983D8; color: #EEFF66; Color:rgb (0,255,255);--------------Deepest color Color:rgba (0,0,255,0.5);-----------Transparency

11. Typesetting text paragraphs

12. Text Decoration and vertical alignment

Text decoration

Text-decoration Property

Vertical alignment

Vertical-align properties: Middle, top, bottom

13. Text Shadows

Browser compatibility

14. Hyperlink Pseudo-Class

15. Use CSS to set up hyperlinks

16. List Style 2-1

List-style-type

List-style-image

17. List Style 2-2

   List-style:li {list-style:none;}

1. Web Background

R Red--g Green--b Blue

Background color

Background-color

Background image

Background-image

19. Setting the background image 2-1

Background image

Background-image Property

Background-image:url (picture path);

Background repeating mode

Background-repeat Property

Repeat: tile horizontally and vertically in two directions

No-repeat: Uneven shop, that is, show only once

Repeat-x: Tile Horizontally only

Repeat-y: Tile only in vertical direction

20. Setting the background image 2-2

Background positioning

Background-position Property

21. Setting the background

Background properties

Background property

23. Background dimensions

Background size background-size

24.CSS3 Gradient

Linear gradient

Color transitions along a straight line: From left to right, right to left, top to bottom

Radial gradient

A circular or elliptical gradient in which the color no longer changes along a straight line, but blends in all directions from a starting point

Browser compatibility

25.CSS3 Gradient Compatible

IE browser is Trident kernel, prefix:-ms-

Chrome browser is WebKit kernel, prefix:-webkit-

Safari browser is WebKit kernel with prefix:-webkit-

Opera browser is blink kernel, prefix:-o-

Firefox browser is the Mozilla kernel, prefixed with:-moz-

linear gradient

Top left and right downward gradient:linear-gradient (Top, red, blue)

<! DOCTYPE html>
Summarize


Related recommendations:

CSS3 How to achieve the animation effect of panorama (with code)

How to use pure CSS3 to realize the effect of picture carousel