Summary of css properties
Commonly used CSS properties:
Font attributes: (font)
sizefont-size: x-large;(extra large) xx-small;(extremely small) Generally used for Chinese No, just use numerical values. Unit: PX, PD
font-style: oblique;(italic) italic;(italic) normal;(normal)
Line-height: normal;(Normal) Units: PX, PD, EM
Thickness font-weight: bold;(Bold font) lighter;(Thin font) normal;( Normal)
variant font-variant: small-caps;(small capital letters) normal;(normal)
uppercase and lowercase text-transform: capitalize;(first Uppercase letters) uppercase; (uppercase) lowercase; (lowercase) none; (none)
Modify text-decoration: underline; (underline) overline; (upperline) line-through; (delete Line) blink; (flash)
Commonly used fonts: (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
Background properties: (background)
Color
Picture background-image: url();
Repeat background-repeat: no-repeat;
Scroll background-attachment: fixed;(fixed) scroll;( Scroll)
Position background-position: left (horizontal) top (vertical);
Abbreviation method background:#000 url(..) repeat fixed left top;
Block attribute: (Block)
letter-spacing: normal; value
Yes Liu text-align: justify; (align both ends) left; (align left) right; (align right) center; (center)
Indent text-indent: value px;
vertical-align: baseline;(baseline) sub;(subscript) super;(subscript) top; text-top; middle; bottom; text-bottom;
word spacing word-spacing: normal; value
white-space: pre;(reserved) nowrap;(no line break)
display display:block; (block) inline; (embedded) list-item; (list item) run-in; (append part) compact; (compact) marker; (marker) table; inline-table; table-raw-group; table-header -group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(table title)
Box attribute : (Box)
width:; height:; float:; clear:both; margin:; padding:; Order: top, right, bottom, left
Border attributes: (Border)
border-style: dotted; (dotted line) dashed; (dashed line) solid; double; (double line) groove; (groove line) ridge;(ridge) inset;(dent) outset;
border-width:; border width
border-color:#;
Abbreviation method border:width style color;
List attribute: (List-style)
Type list-style-type: disc; (dot) circle; (circle) square; (square) decimal; (number) lower-roman; (decimal Roman code number) upper-roman; lower-alpha; upper-alpha;
Position list-style-position: outside; (outside) inside;
Image list-style-image: url(..);
Positioning attributes: (Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (cut)
css attribute code collection
One CSS text attribute:
color : #999999; /*Text color*/
##font-family : Songti, sans-serif; /*Text font*/
font-size : 9pt; /*Text size*/
font-style:itelic; /* Text italics*/
font-variant:small-caps; /*Small font*/
letter-spacing: 1pt; /*The distance between characters*/ line-height : 200%; /*Set line height*/
font-weight:bold; /*Text bold*/
vertical- align:sub; /*Subscript*/
vertical-align:super; /*Superscript*/
text-decoration:line-through; /*Add strikethrough*/
text-decoration: overline; /*Add top line*/
text-decoration:underline; /*Add underline*/
text-decoration:none; /*Remove link underline*/
text-transform : capitalize; /*Capitalize the first word*/
text-transform : uppercase; /*English uppercase*/
text-transform : lowercase; /*English lowercase*/
text-align:right ; /*Text is aligned to the right*/
text-align:left; /*Text is aligned to the left*/
text-align:center; /*Text is aligned to the center */
text-align:justify; /*Text alignment*/
vertical-align attribute
vertical-align: top; /*Align vertically upward*/
vertical-align:bottom; /*Align vertically downward*/
vertical-align:middle; /*Vertical Center alignment*/
vertical-align:text-top; /*Align text vertically upward*/
vertical-align:text-bottom; /*Text vertically Align downward*/
2. CSS border blank
padding-top:10px; /*Leave the top border blank*/
padding-right:10px; /*Leave the right border blank*/
padding-bottom:10px; /*Leave the bottom border blank*/
padding-left :10px; /*Leave the left border blank
3. CSS symbol attributes:
list-style-type:none; /*No number*/
list-style-type:decimal; /*Arabic numerals*/
##list-style-type:lower-roman; /*Lowercase Roman numerals*/
list-style-type:upper-roman; /*uppercase Roman numerals*/ ##list-style-type:lower-alpha; /*lowercase English letters*/
list-style-type:upper-alpha; /*uppercase English letters*/
list-style-type:disc; /*solid circle symbol*/
list-style-type:circle; /*Hollow circle symbol*/
list-style-type:square; /*Solid square symbol*/
list-style-image:url(/dot.gif); /*Picture-style symbol*/
list-style-position: outside; /*Convex row*/ /
list-style-position:inside; /*Indent*/
4. CSS background style:
/* Background color*/
background:transparent; /*Perspective background*/
background-image: url(/image/bg.gif); /*Background image */
background-attachment : fixed; /*Watermark fixed background*/
background-repeat : repeat; /*Repeat arrangement-web page default*/
background-repeat : no-repeat; /*No repeat arrangement*/
background-repeat : repeat-x; /*Repeat arrangement on the x-axis*/
background-repeat : repeat-y; /*Repeat the arrangement on the y-axis*/
Specify the background position
background-position : 90% 90%; /*The position of the x and y axes of the background image*/
background-position : top; /*Align upward*/
background-position : buttom; /*Align downward*/
background-position : left; /*Align left*/
background-position : right; /*Toward Align right*/
background-position : center; /*Align center*/
5. CSS connection properties:
a /*All hyperlinks*/
a:link /*Hyperlink text format*/
a:visited /*Viewed link text format*/
a:active /*Clicked link format*/
a: hover /*Mouse to link*/
Mouse cursor style:
Link finger CURSOR: hand
Cross body cursor:crosshair
Arrow pointing down cursor:s-resize
Cross arrow cursor:move
Arrow pointing right cursor:move
Add a question mark cursor:help
Arrow pointing left cursor:w-resize
Arrow pointing up cursor:n-resize
Arrow to the upper right cursor:ne-resize
Arrow to the upper left cursor:nw-resize
Text I type cursor:text
Arrow diagonally lower right cursor:se-resize
Arrow obliquely lower left cursor:sw-resize
Funnel cursor:wait
Cursor pattern (IE6) p {cursor:url("cursor file name.cur"),text;}
6. CSS border list:
border -top : 1px solid #6699cc; /*Top border*/
border-bottom : 1px solid #6699cc; /*Bottom border*/
border -left : 1px solid #6699cc; /*Left border*/
border-right : 1px solid #6699cc; /*Right border*/
and above This is the recommended writing method, but you can also use the conventional method as follows:
border-top-color : #369 /*Set the top color of the upper border*/
border-top-width: 1px /*Set the top width of the top border*/
border-top-style: solid/*Set the top style of the top border*/
Other frame styles
solid /*solid frame*/
dotted /*dotted frame*/
double / *Double line frame*/
groove /*Three-dimensional inner convex frame*/
ridge /*Three-dimensional relief frame*/
inset /*concave frame*/
outset /*convex frame*/
7. CSS form application:
Text box
Button
Check box
Select button
Multi-line text box
Drop-down menu option 1 option 2
8. CSS border style:
margin-top:10px; /*upper border*/
margin-right:10px; /*right margin value*/
margin-bottom:10px; /*lower margin value*/
margin-left:10px; /*Left margin value*/
CSS attribute: Font Style (Font Style)
Serial number Chinese description markup syntax
1 Font style {font:font-style font-variant font-weight font-size font-family}
2 Font type {font- family: "Font 1", "Font 2", "Font 3",...}
3 Font size {font-size: value|inherit| medium| large| larger| x- large| xx-large| small| smaller| ##5 Font thickness {font-weight:100-900|bold|bolder|lighter|normal;}
6 Font color {color:Number;}
7 Shadow color {text-shadow: 16-bit color value}
8 Font line height {line-height: value|inherit|normal;}
9 word spacing {letter-spacing: numerical value|inherit|normal}
10 word spacing {word-spacing: numerical value|inherit|normal}
11 font deformation{ font-variant:inherit|normal|small-cps }
12 English conversion {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 Font Deformation {font-size-adjust:inherit|none}
14 Font {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed| semi-expanded|ultra-condensed|ultra-expanded|wider}
Text Style
Serial number Chinese description mark syntax
1 Line spacing {line-height:numeric|inherit|normal;}
2 Text decoration {text-decoration:inherit|none|underline|overline|line-through|blink}
3 Space at the beginning of paragraph {text-indent:value|inherit}
4 Horizontal alignment {text-align:left|right|center|justify}
5 Vertical alignment {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 Writing mode {writing-mode :lr-tb|tb-rl}
Background style
Serial number Chinese description mark syntax
1 Background color{
2 Background image {background-image: url(URL)|none}
3 Background repeat {background-repeat:inherit|no-repeat|repeat|repeat-x| repeat-y}
4 Background fixed {background-attachment:fixed|scroll}
5 Background positioning {background-position:value|top|bottom|left| right|center}
6 Back style {background: background color|background image|background repeat|background attachment|background position}
Frame Style (Box Style)
Serial number Chinese description mark syntax
1 Border blank {margin:margin-top margin-right margin-bottom margin-left}
2 Padding{padding:padding-top padding-right padding-bottom padding-left}
3 Border width{border-width:border-top-width border-right-width border-bottom -width border-left-width}
Width value: thin|medium|thick|value
4 Border color {border-color: value value value value} Value value : Represents top, right, bottom, and left color values respectively
5 Border style {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 Border {border:border-width border-style color}
Top border {border-top:border-top-width border-style color}
Right border {border-right:border-right-width border-style color}
Bottom border {border-bottom:border-bottom-width border-style color}
Left border {border-left:border-left-width border-style color}
7 Width {width: length|percent| auto}
8 Height {height: value|auto}
9 Float {float:left|right|none}
10 Clear {clear:none|left |right|both}
Category list
Serial number Chinese description mark syntax
1 Control display {display:none|block|inline |list-item}
2 Control white space {white-space:normal|pre|nowarp}
3 Symbol list {list-style-type:disc|circle |square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 Graphic list {list-style-image:URL}
5 Position list {list-style-position:inside|outside}
6 Directory list {list-style:Directory style type|Directory style location|url}
7 Mouse shape {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize| w-resize|s-resize|se-resize|sw-resize}
The above is the detailed content of Summary of css properties. 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
