Comprehensive collection of commonly used CSS codes (essential for work)

Using html css can very conveniently carry out the layout of web pages, but not every attribute or code should be kept in mind. Recently, I have summarized the commonly used codes in CSS to facilitate my future review, and at the same time Share it with everyone, hope it is useful to you.

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 settings

text-decoration: The main purpose of the 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 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: Do not repeat tiled background images

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

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

If the background image repeat attribute is not specified , the browser defaults to tile the background image 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

Value of parameter:

left: left alignment

right: right alignment

center: center alignment

justify: relative left and right alignment

4, vertical alignment

vertical-align: Parameter

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: displayed in the form of subscript

super: displayed in the form of 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 no line break

7. Display style

display: Parameter

Parameter selection 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 (floating): You can arrange block-level elements in a row, such as a horizontal menu.

6. clear clear float

6. Border

1. Style

border style parameters

Parameters of border style:

none: No border

dotted: The border is dotted line

dashed: The border is long and short lines

solid: The border is solid Line

double: The border is 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 lists on web pages 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-shaped

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

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

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

The above is the detailed content of Comprehensive collection of commonly used CSS codes (essential for work). For more information, please follow other related articles on the PHP Chinese website!