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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
