Shulou(Shulou.com)06/01 Report--

Editor to share with you what is the element of beautifying the web page in css, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

two。 Label

The role of labels

Can make certain words or words stand out.

Example:

Enjoy the "Peking University-style" educational service

In php Chinese website, there is a group of people who silently support your achievements.

Dream

Choose php Chinese website to realize your dream

3. Font style

4. Font Typ

Font-family attribute

P {font-family:Verdana, "italics";}

Body {font-family:Times, "TimesNewRoman", "italics";}

5. Font size

Font-size attribute

Unit: px (pixel), em, rem, cm, mm, pt, pc

6. Font style

Font-style attribute

Normal, italic (included in the library) and oblique (automatically italicize fonts)

Example:

7. The thickness of the font

Font-weight attribute

8. Font Properti

Font property familyweightsizestyle

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

Pspan {font:obliquebold12px "italics";}

9. Text style

Text attribute

10. Text color

Color attribute

RGB

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

Rgb (r _ r _ g _ (b)): the value of a positive integer is 0,255.

RGBA

Added a parameter to control the transparency of alpha on the basis of RGB, where the transparent channel value is 0: 1.

Example:

Color:#A983D8

Color:#EEFF66

Color:rgb (0255255);-darkest color

Color:rgba (0rem 0pr 255pm 0.5);-Transparency

11. Typesetting text paragraph

twelve。 Text retouching and vertical alignment

Text decoration

Text-decoration attribute

Vertical alignment

Vertical-align attributes: middle, top, bottom

13. Text Shadow

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. Background of web page

R red-G green-B blue

Background color

Background-color

Background image

Background-image

19. Set background image 2-1

Background image

Background-image attribute

Background-image:url (Picture path)

Background repetition mode

Background-repeat attribute

Repeat: tiling horizontally and vertically

No-repeat: not tiled, that is, displayed only once

Repeat-x: tiling horizontally only

Repeat-y: tiling vertically only

20. Set background image 2-2

Background location

Background-position attribute

21. Set background

Background attribute

Background attribute

23. Background size

Background size background-size

24.CSS3 gradient

Linear gradient

Colors transition in a straight line: from left to right, from right to left, from top to bottom, etc.

Radial gradient

With a circular or oval gradient, the color no longer changes along a straight line, but blends in all directions from one starting point

Browser compatibility

25.CSS3 gradient compatibility

IE browser is the Trident kernel with the prefix:-ms-

Chrome browser is the Webkit kernel with the prefix:-webkit-

Safari browser is the Webkit kernel with the prefix:-webkit-

Opera browser is the Blink kernel with the prefix:-o-

Firefox browser is the Mozilla kernel with the prefix:-moz-

twenty-six。 Linear gradient

Gradient from upper left to lower right: linear-gradient (lefttop,red,blue)

Rookie course (runoob.com)

# grad1 {

Height:200px

Background:-webkit-linear-gradient (red,yellow,blue); / * Safari5.1to6.0*/

Background:-o-linear-gradient (red,yellow,blue); / * Opera11.1to12.0*/

Background:-moz-linear-gradient (red,yellow,blue); / * Firefox3.6to15*/

Background:linear-gradient (red,yellow,blue); / * Standard syntax (must be at the end) * /

}

Linear gradient-head to bottom

A linear gradient from the head, from red to yellow to blue:

Note: gradients are not supported in InternetExplorer9 and earlier IE browsers.

The above is all the content of the article "what are the elements of beautifying the web page in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.