css tag summary
Font attribute: (font)
Size: font-size: x-large; (extra large) xx-small; (very small) Generally not used in Chinese, as long as the value is used, unit: PX, PD
style: font-style: oblique; (skewed italic) italic; (italic) normal; (normal)
line height: line-height: normal; (normal) unit: PX, PD, EM
thickness: font-weight: bold; (bold) lighter; ( Fine) normal; (normal)
variant: font-variant: small-caps; (small capital letters) normal; (normal)
capitalization: text-transform: capitalize; (initial capital) uppercase; (uppercase) lowercase; (Lower case) none; (no)
decoration: text-decoration: underline; (underline) overline; (upline) line-through; (strikethrough) blink; (flashing)
common font: (font-family) "Courier New ", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
background attributes: (background)
color: background-color: #FFFFFF;
picture: background-image: url();
Repeat: ackground-repeat: no-repeat;
scroll: ackground-attachment: fixed; (fixed) scroll; (scroll)
position: ackground-position: left (horizontal) top (vertical);
shorthand method: background: #000 url( …) repeat fixed left top;
Block attributes: (Block)
Word spacing: etter-spacing: normal; Value
alignment: xt-align: justify; (justified at both ends) left; (justified on the left) right; (justified on the right) center ;(Centered)
indentation: ext-indent: value px;
vertical alignment: ertical-align: baseline;(baseline) sub;(subscript) super;(subscript) top; text-top; middle; bottom; text- bottom;
word spacing: ord-spacing: normal; value
space: hite-space: pre; (reserved) nowrap; (no line break)
Display: isplay: block; (block) inline; (inline) list-item; (list item) run-in; (additional part) compact; (compact) marker; (mark) 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 attributes: (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 (solid line); double (double line); groove (groove line); ridge; (ridge) inset; (concave) outset;
border-width:; border width
border-color: #;
shorthand method border: width style color;
list properties: ( List-style)
type: list-style-type: disc; (dot) circle; (circle) square; (square) decimal; (number) lower-roman; (small Luo code number) upper-roman; lower-alpha ; upper-alpha;
Position: ist-style-position: outside; (外) inside;
Image: ist-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) (cutting) css attribute code encyclopedia
一CSS text attribute:
color: #999999; / text color /
font-family: Song Ti, sans-serif; / text font /
font-size: 9pt; / text size /
font-style:itelic; / text italic /
font-variant:small-caps; / small font /
letter-spacing: 1pt; / between characters /
line-height: 200%; / set line height/
font-weight:bold; / text bold /
vertical-align:sub; / subscript word /
vertical-align:super; / superscript word /
text-decoration:line-through; / strikethrough /
text-decoration : overline; / add top line /
text-decoration:underline; / add underline /
text-decoration:none; / remove link underline /
text-transform: capitalize; / first word uppercase /
text-transform: uppercase; / English uppercase /
text-transform: lowercase; / English lowercase /
text-align:right; / text-align right /
text-align:left; /Align the text to the left /
text-align:center; / align the text in the center /
text-align: justify; / Disperse text alignment /
vertical-align property
vertical-align: top; / align vertically up /
vertical-align: bottom; / vertical Bottom alignment /
vertical-align: middle; / vertical center alignment /
vertical-align: text-top; / text vertical alignment upwards /
vertical-align: text-bottom; / text vertical alignment downwards /
two, CSS border blank
padding- top:10px; / Leave blank on the upper border /
padding-right:10px; / Leave blank on the right border /
padding-bottom:10px; / Leave blank on the bottom border /
padding-left:10px; /Leave the left border blank /
3. CSS symbol attributes:
list-style-type: none; / No numbering /
list-style-type:decimal; / Arabic numerals /
list-style-type:lower-roman; /lower- case 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; / filled circle symbol /
list-style-type:circle; / hollow circle symbol /
list-style-type:square; / filled square symbol /
list-style-image:url(/dot.gif); / Picture-like symbols /
list-style-position: outside; / convex /
list-style-position:inside; / indentation /
four, CSS background style:
background-color:#F5E2EC; / 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; / Do not repeat the arrangement /
background-repeat: repeat-x; / repeat the arrangement on the x-axis /
background-repeat: repeat-y; / repeat the arrangement on the y-axis /
specify the background position
background-position: 90% 90%; / background image x and y axis position /
background-position: top; / align up /
background-position: buttom; / align down /
background-position: left; / align to left /
background-position: right; / right alignment /
background-position: center; / center alignment /
5. CSS connection attributes:
a / all hyperlinks /
a:link / hyperlink text format /
a:visited / viewed Link text format /
a:active/ press link format /
a:hover/ mouse to link /
mouse cursor style:
link finger CURSOR: hand
Cross cursor: crosshair
arrow pointing down cursor: s-resize
cross arrow cursor: move arrow pointing
right cursor: move
plus a question mark cursor: help arrow pointing
left cursor: w-resize
arrow pointing up cursor: n-resize
arrow pointing right up cursor :ne-resize
arrow toward upper left cursor:nw-resize
text type I cursor:text
arrow diagonal lower right cursor:se-resize
arrow diagonal lower left cursor:sw-resize
funnel cursor:wait
cursor pattern (IE6) p (cursor:url( "Cursor file name.cur"),text;}
6. List of CSS border lines:
border-top: 1px solid #6699cc; / upper border /
border-bottom: 1px solid #6699cc; / lower border /
border-left : 1px solid #6699cc; / left frame line /
border-right: 1px solid #6699cc; / right frame line/The
above is the recommended way of writing, but you can also use the conventional way as follows:
border-top-color: #369 / Set the top color of the upper border line /
border-top-width: 1px / Set the width of the upper border top /
border-top -style: solid/ set the top style of the upper frame line /
other frame line styles
solid / solid frame /
dotted / dashed frame /
double / double wire frame /
groove / three-dimensional inner convex frame /
ridge / three-dimensional relief frame /
inset / concave frame /
outset / raised frame /
Seven, CSS form use:
text box
button
check box
selection 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 border value /
margin-bottom:10px; / lower border value /
margin-left:10px; / left border value /
CSS Attributes: Font Style (Font Style)
serial number Chinese description Mark 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:numerical value|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4 font Style {font-style:inherit|italic|normal|oblique}
5 font weight {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: numeric value|inherit|normal;}
9 word spacing {letter-spacing: numeric value|inherit|normal}
10 word spacing {word-spacing: numeric 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 words {font-stretch:condensed | expanded | extra-condensed | extra -expanded | inherit | narrower | normal | semi-condensed | semi-expanded | ultra-condensed | ultra-expanded | wider}
text styles (text style)
No. Chinese description tags syntax
1 line spacing { line-height: numeric value|inherit|normal;}
2 text decoration {text-decoration:inherit|none|underline|overline|line-through|blink}
3 space at the beginning of paragraph {text-indent: numeric 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 style{ writing-mode:lr-tb|tb-rl}
background style
serial number Chinese description mark syntax
1 background color {background-color: number}
2 background image {background-image: url(URL)|none}
3 background repeat {background- repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 fixed background {background-attachment:fixed|scroll}
5 background positioning {background-position:number|top|bottom|left|right|center}
6 Back view style {background: background color | background image | background repeat | background attachment | background position}
Box Style (Box Style)
serial number Chinese description mark syntax
1 margin space {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|numerical value
4 border color {border-color: numerical numerical numerical numerical value} numerical value: respectively represent top, right, bottom, left color values
5 border style {border-style:none|hidden|inherit|dashed|solid |double|inset|outset|ridge|groove}
6 border {border:border-width border-style color}
upper 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|percentage | auto}
8 Height{height:number|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 Location list {list-style-position:inside|outside}
6 Directory list {list-style:Catalog style type|Catalog 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}
word-wrap controls line wrapping. When using break-word, line break will be forced. There is no problem in Chinese, and no problem in English sentences. But for long strings of English, it doesn't work. Break-word controls whether to break words. Normal is the default, and English words are not split. break-all, is a break word. When the word reaches the boundary, the next letter automatically goes to the next line. Mainly solve the problem of long strings of English. Keep-all refers to Chinese, Japanese, and Korean keep-all words. That is, only at this time, without word-wrap, the Chinese will not wrap. (English sentences are normal.) Under ie: use word-wrap:break-word; everything is normal. ff: If these two are not used, there will be no problems in Chinese. There is no problem with English sentences. However, long strings of English can cause problems. In order to solve long strings of English, word-wrap:break-word;word-break:break-all; is generally used. However, this method will cause the words in ordinary English sentences to be broken (also under IE). The main problem currently lies in the disconnection of long strings of English and English words. In fact, the long string of English is just a relatively long word. That is, should English words be broken? The problem is obvious, and obviously shouldn't be disconnected. For long strings of English, it is malicious, so naturally you don't need to worry about it. However, we must think of some way to prevent it from expanding the container. Use: overflow:auto; ie, long strings will automatically wrap. Under ff, the long string will be covered. So, in summary, the best way is word-wrap:break-word; overflow:hidden; instead of word-wrap:break-word;word-break:break-all;.