Web Front-end
CSS Tutorial
Comprehensive collection of commonly used CSS codes (essential for work)
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!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
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)
How to use CSS gradients for backgrounds
Aug 17, 2025 am 08:39 AM
CSSgradientsprovidesmoothcolortransitionswithoutimages.1.Lineargradientstransitioncolorsalongastraightlineusingdirectionsliketobottomorangleslike45deg,andsupportmultiplecolorstopsforcomplexeffects.2.Radialgradientsradiatefromacentralpointusingcircleo
How to create a glassmorphism effect with CSS
Aug 22, 2025 am 07:54 AM
To create a glass mimicry effect of CSS, you need to use backdrop-filter to achieve background blur, set a translucent background such as rgba(255,255,255,0.1), add subtle borders and shadows to enhance the sense of hierarchy, and ensure that there is enough visual content behind the elements; 1. Use backdrop-filter:blur(10px) to blur the background content; 2. Use rgba or hsla to define the transparent background to control the degree of transparency; 3. Add 1pxsolidrgba(255,255,255,0.3) borders and box-shadow to enhance the three-dimensionality; 4. Ensure that the container has rich backgrounds such as pictures or textures to present a blurred penetration effect; 5. It is compatible with old browsers
How to create a dotted border in CSS
Aug 15, 2025 am 04:56 AM
Use CSS to create dotted borders, just set the border attribute to dotted. For example, "border:3pxdotted#000" can add a 3-pixel-wide black dot border to the element. By adjusting the border-width, the size of the point can be changed. The wider borders produce larger points. You can set dotted borders for a certain side, such as "border-top:2pxdottedred". Dotted borders are suitable for block-level elements such as div and input. They are often used in focus states or editable areas to improve accessibility. Pay attention to color contrast. At the same time, different from dashed's short-line style, dotted presents a circular dot shape. This feature is widely used in all mainstream browsers.
How to change the list style in CSS
Aug 17, 2025 am 10:04 AM
To change the CSS list style, first use list-style-type to change the bullet or numbering style. 1. Use list-style-type to set the bullet of ul to disc, circle or square, and the number of ol is decimal, lower-alpha, upper-alpha, lower-roman or upper-roman. 2. Remove the tag completely with list-style:none. 3. Use list-style-image:url('bullet.png') to replace it with a custom image. 4. Use list-style-position:in
How to change the cursor in CSS
Aug 16, 2025 am 05:00 AM
Usebuilt-incursortypeslikepointer,help,ornot-allowedtoprovideimmediatevisualfeedbackfordifferentinteractiveelements.2.ApplycustomcursorimageswiththecursorpropertyusingaURL,optionallyspecifyingahotspotandalwaysincludingafallbacklikeautoorpointer.3.Fol
How to implement a dark mode theme with CSS
Aug 22, 2025 am 09:55 AM
There are two main ways to implement dark mode: one is to use prefers-color-scheme media to query automatically to adapt system preferences, and the other is to add manual switching function through JavaScript. 1. Use prefers-color-scheme to automatically apply dark themes according to the user system. There is no need for JavaScript, just define the styles in the media query; 2. To achieve manual switching, you need to define light-theme and dark-themeCSS classes, add toggle buttons, and use JavaScript to manage the theme status and localStorage to save user preferences; 3. You can combine both to read localSt first when the page is loaded.
How to use grid-template-areas in CSS
Aug 22, 2025 am 07:56 AM
Thegrid-template-areaspropertyallowsdeveloperstocreateintuitive,readablelayoutsbydefiningnamedgridareas;eachstringrepresentsarowandeachwordacolumncell,withgrid-areanamesonchildelementsmatchingthoseinthetemplate,suchas"headerheaderheader"for
How to add a box shadow in CSS
Aug 18, 2025 am 11:39 AM
To add box shadows, use box-shadow attribute; 1. The basic syntax is box-shadow: horizontal offset vertical offset blur radius expansion radius shadows in color; 2. The first three values are required, the rest are optional; 3. Use rgba() or hsla() to achieve transparent effect; 4. The positive expansion radius expands shadows and the negative value is reduced; 5. Multiple shadows can be added by commas separation; 6. Overuse should be avoided to ensure that visibility is tested on different backgrounds; this attribute is well supported by the browser, and reasonable use can improve the design texture.
