2021 css commonly used code collection

Complete list of commonly used css codes

html css can be very convenient for the layout of web pages, and can also reduce a lot of unnecessary code.

1. Text settings

1. font-size: font size parameter

2. font-style: font format

3. font-weight: font thickness

4. Color attribute

color: parameter

Please use web safe color

2. Super Link setting

text-decoration: The main purpose of parameter

is to change the underline when the browser displays text links.

Parameter value range:

underline: underline the text

overline: underline the text

line-through: underline the text Strikethrough

blink: Make the text blink

none: Do not display any of the above effects

3. Background

1. Background color

background-color: parameter

2.Background image

background-image: url(URL)

URL is the storage path of the background image, none means none.

3. Background image repetition

background-repeat: Parameter

Parameter value range:

no-repeat: No Repeat tile background image

repeat-x: Make the image tile only in the horizontal direction

repeat-y: Make the image tile only in the vertical direction

If If the background image repeat attribute is not specified, the browser defaults to the background image being tiled horizontally and vertically.

4. Background image fixed

Background image fixed controls whether the background image scrolls with the scrolling of the web page. If you do not set the background image fixed attribute, the browser's default background image will scroll with the scrolling of the web page. In order to avoid overly fancy background images from diverting the viewer's attention when scrolling, they are generally set to a fixed

background-attachment: Parameter

Parameter value range:

fixed: When the web page is scrolled, the background image is fixed relative to the browser window

scroll: When the web page is scrolled, the background image is scrolled relative to the browser window

4. Block

1. Word spacing

word-spacing: spacing distance

2. Letter spacing

letter-spacing: Letter spacing

3. Text alignment

text-align: Parameter

Parameter values:

left: left alignment

right: right alignment

center: center alignment

justify: relative left and right alignment

4. Vertical alignment

vertical-align: Parameters

top: top alignment

bottom: bottom alignment

text -top: relative text top alignment

text-bottom: relative text bottom alignment

baseline: baseline alignment

middle: center alignment

sub: Display

in the form of a subscript: Display

in the form of a superscript 5. Text indent

text-indent: Indent distance

12px is equivalent to a text distance of

6, space

white-space: Parameter

normal normal

pre reserved

nowrap without line wrapping

7. Display style

display: Parameter

Parameter value range :

block: block-level elements, line breaks before and after the object

inline: no line breaks before and after the object

list-item: line breaks before and after the object, added Bullets

none: No display

5. Box

1, height height

2, width width

3. padding inner margin

4. margin outer margin

5. float: allows block-level elements to be arranged in a row, such as a horizontal menu.

6. clear clear float

6. Border

1. Style

border style parameter

Parameters of border style:

none: no border

dotted: border is dotted line

dashed: border is long and short line

solid: The border is a solid line

double: The border is a double line

2, width

border width parameter

3. Color

border color parameter

7. List

list-style-type List style

The list characters of different browsers may be different, which may affect the web page, so most of the lists in the web page are displayed with background images.

Control the style of the user interface

8. Mouse

cursor: mouse shape parameter

CSS mouse shape parameter table:

Mouse shape: CSS code

style="cursor:hand" 　　Hand shape

style="cursor:crosshair" 　　 Cross shape

style="cursor: text" 　　 Text shape

style="cursor:wait" 　　 Hourglass shape

style="cursor:move" 　　 Cross arrow shape:

style="cursor:help" 　　 Question mark Shape

style="cursor:e-resize"  Right arrow shape

style="cursor:n-resize"  Up arrow shape

style="cursor:nw- resize" upper left arrow-shaped

style="cursor:w-resize" Left arrow shape

style="cursor:s-resize" Down arrow shape

style="cursor:se-resize" Lower right Arrow shape

style="cursor:sw-resize" Lower left arrow shape

Thank you for reading, I hope you will benefit a lot.

This article is reproduced from: https://blog.csdn.net/xujiuba/article/details/78926554

Recommended tutorial: "CSS Tutorial"

The above is the detailed content of 2021 css commonly used code collection. For more information, please follow other related articles on the PHP Chinese website!