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!

I recently found a solution to dynamically update the color of any product image. So with just one of a product, we can colorize it in different ways to show

In this week's roundup, Lighthouse sheds light on third-party scripts, insecure resources will get blocked on secure sites, and many country connection speeds

There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used

The document head might not be the most glamorous part of a website, but what goes into it is arguably just as important to the success of your website as its

What's happening when you see some JavaScript that calls super()?.In a child class, you use super() to call its parent’s constructor and super. to access its

JavaScript has a variety of built-in popup APIs that display special UI for user interaction. Famously:

I was chatting with some front-end folks the other day about why so many companies struggle at making accessible websites. Why are accessible websites so hard

There is an HTML attribute that does exactly what you think it should do:


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

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 English version
Recommended: Win version, supports code prompts!

SublimeText3 Linux new version
SublimeText3 Linux latest version