Necessary CSS naming conventions and common CSS code collections for front-end development

If you encounter some names that are not commonly used, you can use translation tools to translate them and get their English names. I usually use Youdao Translator or Google Translator online.

Google Translate Online: http://translate.google.cn/

Youdao Online Translation: http://fanyi.youdao.com/

For standard naming, it is best to use English naming, and usually the naming is consistent with your own layout content.

Fourth, common CSS code

Although there are many CSS attributes, there are really not many attributes that we often use. This is also some common CSS attribute codes that I have collected and sorted out before. I hope it can help some newcomers. For old drivers ignore it.

Font attribute:(font)

Size {font-size: x-large;}(extra large) xx-small;(extremely small) It is not used in general Chinese, as long as the value can be used, unit: PX, PD

Style {font-style: oblique;}(Italic) italic;(Italic) normal;(Normal)

Line height {line-height: normal;}(normal) unit: PX, PD, EM

Thickness {font-weight: bold;}(bold) lighter;(thin) normal;(normal)

Variant {font-variant: small-caps;}(small caps) normal;(normal)

Case {text-transform: capitalize;}(first letter capitalize) uppercase;(uppercase) lowercase;(lowercase) none;(none)

Modification {text-decoration: underline;}(underline) overline;(overline) line-through;(strikethrough) blink;(flashing)

Common fonts: (font-family)

'Courier New', Courier, monospace, 'Times New Roman', Times, serif, Arial, Helvetica, sans-serif, Verdana

Background attribute: (background)

Color {background-color: #FFFFFF;}

Image {background-image: url();}

Repeat {background-repeat: no-repeat;}

Scroll {background-attachment: fixed;}(fixed) scroll;(scroll)

Position {background-position: left;}(horizontal) top(vertical);

Shorthand method {background:#000 url(..) repeat fixed left top;} /*shorthand. This often appears in reading code, so you should study it carefully*/

Block attribute: (Block) /*This is the first time I know this attribute, so I need to study more*/

Word spacing {letter-spacing: normal;} Value /*This attribute seems to be useful, practice more*/

Align {text-align: justify;}(justify both ends) left;(left justify) right;(right justify) center;(center)

Indent {text-indent: value px;}

Vertical alignment {vertical-align: baseline;}(baseline) sub;(subscript) super;(subscript) top; text-top; middle; bottom; text-bottom;

word-spacing: normal; value

Space 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) /* The understanding of the display attribute is very vague*/

Box attributes:(Box)

width:; height:; float:; clear:both; margin:; padding:;

Order: top right bottom left

Border property: (Border)

border-style: dotted;(dotted line) dashed;(dashed line) solid(solid line); double;(double line) groove;(grooved line) ridge;(ridged) inset;(sag) outset;

border-width:; border width

border-color:#;

Shorthand method border: width style color; /*shorthand*/

List attribute: (List-style)

Type list-style-type: disc; (dot) circle; (circle) square; (square) decimal; (number) lower-roman; alpha; upper-alpha;

Position list-style-position: outside;(outside) inside;

Image list-style-image: url(..);

Positioning attribute: (Position)

Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (cropping)

CSS Text Properties

color : #999999; /*text color*/

font-family : Song, sans-serif; /*text font*/

font-size : 9pt; /*text size*/

font-style:itelic; /*text italic*/

font-variant:small-caps; /*small font*/

letter-spacing : 1pt; /*Word spacing*/

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; /*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 right alignment*/

text-align:left; /*text left alignment*/

text-align:center; /*text alignment*/

text-align:justify; /*text alignment*/

vertical-align attribute

vertical-align:top; /* vertical alignment up */

vertical-align:bottom; /* vertical alignment down*/

vertical-align:middle; /*vertically centered alignment*/

vertical-align:text-top; /*text vertical alignment*/

vertical-align:text-bottom; /*text vertical alignment down*/

Border space

padding-top:10px; /*Leave the upper border blank*/

padding-right:10px; /*The right border is left blank*/

padding-bottom:10px; /*Leave the bottom border blank*/

padding-left:10px; /*Leave the left border blank

Symbol Properties

list-style-type:none; /*no numbering*/

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 circular symbol*/

list-style-type:circle; /*hollow circular symbol*/

list-style-type:square; /*solid square symbol*/

list-style-image:url(/dot.gif); /*picture-style symbols*/

list-style-position: outside; /*convex row*/

list-style-position:inside; /*indent*/

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 - webpage default*/

background-repeat : no-repeat; /*not repeated arrangement*/

background-repeat : repeat-x; /* Repeat arrangement on the x-axis*/

background-repeat : repeat-y; /* Repeat arrangement on the y axis*/

Specify background position

background-position : 90% 90%; /* The position of the x and y axes of the background image*/

background-position : top; /*upward alignment*/

background-position : buttom; /*align down*/

background-position : left; /*align left*/

background-position : right; /*right alignment*/

background-position : center; /*center alignment*/

Connection Properties

a /*all hyperlinks*/

a:link /*Hyperlink text format*/

a:visited /*Visited link text format*/

a:active /*Press the format of the link*/

a:hover /*Mouse to link*/

Mouse Cursor Style

Link finger CURSOR: hand

cross cursor:crosshair

Arrow down cursor:s-resize

Cross arrow cursor:move

Arrow pointing right cursor:move

Add a question mark cursor:help

Arrow left cursor:w-resize

Arrow up cursor:n-resize

Arrow up right cursor:ne-resize

Arrow up left cursor:nw-resize

Text type I cursor:text

Arrow slanted right down cursor:se-resize

Arrow down left cursor:sw-resize

Funnel cursor:wait

Cursor pattern (IE6) p {cursor:url('cursor file name.cur'),text;}

CSS outline list:

border-top : 1px solid #6699cc; /*upper border*/

border-bottom : 1px solid #6699cc; /*Bottom border*/

border-left : 1px solid #6699cc; /*left border*/

border-right : 1px solid #6699cc; /*right border*/

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 frame line*/

border-top-width :1px /*Set the top width of the upper border*/

border-top-style : solid/*Set the top style of the upper frame line*/

Other border styles

solid /*solid frame*/

dotted /*dotted box*/

double /*double line box*/

groove /*three-dimensional inner convex frame*/

ridge /*three-dimensional relief frame*/

inset /*concave frame*/

outset /*convex frame*/

CSS border styles

margin-top:10px; /*top border*/

margin-right:10px; /*right border value*/

margin-bottom:10px; /*lower boundary value*/

margin-left:10px; /*left border value*/

Font Style

Font style {font:font-style font-variant font-weight font-size font-family}

Font type {font-family:'font1','font2','font3',...}

Font size {font-size:value|inherit|medium|large|larger|x-large|xx-large|small|smaller|x-small|xx-small}

Font style {font-style:inherit|italic|normal|oblique}

Font weight {font-weight:100-900|bold(bold)|bolder(extra thick)|lighter(thin)|normal(normal);}

Font color {color: value;}

Shadow color {text-shadow:16-bit color value}

Font line height {line-height:value|inherit|normal;}

Word spacing {letter-spacing:value|inherit|normal}

Word spacing {word-spacing:value|inherit|normal}

Font variant {font-variant:inherit|normal|small-cps }

English transformation {text-transform:inherit|none|capitalize|uppercase|lowercase}

Font deformation {font-size-adjust:inherit|none}

Font{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

Text Style (Text Style)

line spacing {line-height:value|inherit|normal;}

Text decoration {text-decoration:inherit|none|underline|overline|line-through|blink}

Space at the beginning of the paragraph {text-indent:value|inherit}

Horizontal alignment {text-align:left|right|center|justify}

Vertical alignment {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

Writing method {writing-mode:lr-tb|tb-rl}

Background Style

Background color {background-color: value}

Background-image {background-image: url(URL)|none}

Background repeat {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

Background fixed {background-attachment:fixed|scroll}

Background positioning {background-position: value|top|bottom|left|right|center}

Background Style {background:background-color|background-image|background-repeat|background-attachment|background-position}

Box Style

Border margin: {margin:margin-top margin-right margin-bottom margin-left}

Padding: {padding:padding-top padding-right padding-bottom padding-left}

Border width: {border-width:border-top-width border-right-width border-bottom-width border-left-width}

Width value: thin|medium|thick|value

Border color: {border-color: value value value value value} value: represent top, right, bottom, left color values ​​

Border style:

{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove} 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}

Width {width:length|percentage|auto}

Height {height:value|auto}

float {float:left|right|none}

Clear {clear:none|left|right|both}

Categories list

Control display {display:none|block|inline|list-item}

Control Whitespace {white-space:normal|pre|nowarp}

Symbol list {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}

Graphic List {list-style-image:URL}

Position list {list-style-position:inside|outside}

Directory list {list-style:directory style type|directory style location|url}

Mouse shape {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

Like (810)

Reward 支付宝扫一扫

南 Columnist

48 196

生成海报