Home>Article>Web Front-end> 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!