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!