A stack style sheet is a computer language used to represent file styles such as HTML (an application of the standard Universal Markup Language) or XML (a subset of the standard Universal Markup Language).
CSS is currently the latest version of CSS3, is to be able to truly achieve Web page performance and content separation of a style design language. Compared to the performance of traditional HTML, CSS can control the placement of objects in the Web page with pixel-level precision, support almost all font size styles, have the ability to edit Web objects and model styles, and be able to conduct preliminary interaction design, is currently based on the best performance design language text display. CSS can be based on the understanding of different users to simplify or optimize the writing, for all types of people, have a strong legibility.
An external style sheet is an ideal choice when the style needs to be applied to many pages. With an external style sheet, you can change the appearance of the entire site by changing a file.
An internal style sheet can be used when a particular style is required for a single file. You can define an internal style sheet in the head section through the <style> tag.
Inline styles are used when special styles need to be applied to individual elements. The way to use inline styles is to use style attributes in related tags. Style properties can contain any CSS properties. The following example shows how to change the color and left margin of a paragraph.
CSS style Daquan
Font properties: (font)
size {font-size:x-large;} (Extra-Large) xx-small; (very small) general Chinese can not be used, as long as the value is possible, units: PX, PD
style {Font-style:oblique;} (oblique body) italic; (italic) normal; (normal)
Row height {line-height:normal;} (normal) units: PX, PD, EM
thickness {font-weight:bold;} (in bold) lighter; (fine body) normal; (normal)
Variant {font-variant:small-caps;} (Small capital Letter) normal; (normal)
case {text-transform:capitalize;} (uppercase) uppercase; (uppercase) lowercase; (lowercase) none; (none)
modifier {text-decoration:underline;} (underline) overline; (dash) Line-through; (strikethrough) blink; (flashing)
Common fonts: (font-family)
"Courier new", Courier, monospace, "Times New Roman", Times, Serif, Arial, Helvetica, Sans-serif, Verdana
Background properties: (background)
Color {background-color: #FFFFFF;}
Picture {Background-image:url ();}
repeat {background-repeat:no-repeat;}
scroll {background-attachment:fixed;} (fixed) scroll; (rolling)
Location {background-position:left;} (horizontal) Top (vertical);
Shorthand method {background: #000 URL (..) repeat fixed left top;}/* Shorthand this is often seen in the reading code, so study it carefully.
Block attributes: (block)//This property is the first time to know, to study * *
Word spacing {letter-spacing:normal;} value/* This property seems to be useful, more practice */
align {text-align:justify;} (justified) left; (aligned) right; 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 word-spacing:normal; Numerical
Space white-space:pre; (reserved) nowrap; (No line break)
show {Display:block;} (block) inline, (embedded) List-item; (list item) run-in; (additional) 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) The understanding of the/*display property is very vague */
Box Properties: (Box)
Width:; Height:; float:; Clear:both; margin:; padding:; Order: Upper right Down left
Border properties: (Border)
border-style:dotted; (dot line) dashed; (dashed) solid; Double, (two lines) groove, (Groove Line) ridge; (ridge) inset; (SAG) outset;
Border-width:; Border width
border-color:#;
Shorthand method border:width style color; /* Shorthand */
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 list-style-position:outside; (outside) inside;
Image List-style-image:url (..);
Positioning properties: (Position)
Position:absolute; Relative Static
Visibility:inherit; Visible Hidden
overflow:visible; Hidden Scroll Auto
Clip:rect (12px,auto,12px,auto) (cut)
CSS Property Code Daquan
A CSS Text property:
Color: #999999; /* Text color */
Font-family: Song body, Sans-serif; /* Text font */
font-size:9pt; /* Text Size */
Font-style:itelic; /* Text Italic */
Font-variant:small-caps; /* Small Font */
letter-spacing:1pt; /* distance 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; /* Add Strikethrough */
Text-decoration:overline; /* Add top Line */
Text-decoration:underline; /* Underline */
Text-decoration:none; /* Delete Link underline */
Text-transform:capitalize; /* First Letter Capital */
Text-transform:uppercase; /* English Capital */
Text-transform:lowercase; /* English lowercase */
Text-align:right; /* Text Right-aligned */
Text-align:left; /* Text left aligned */
Text-align:center; /* Text Center Align */
text-align:justify; /* Text Scatter alignment */
Vertical-align Property
Vertical-align:top; /* Vertical up alignment */
Vertical-align:bottom; /* Vertical Downward alignment */
Vertical-align:middle; /* Vertical Center Alignment */
Vertical-align:text-top; /* Text vertically up-aligned */
Vertical-align:text-bottom; /* Text vertically downwards */
Second, CSS border blank
padding-top:10px; /* Top Border left blank */
padding-right:10px; /* Leave blank in the right box */
padding-bottom:10px; /* Lower Border left blank */
padding-left:10px; /* Left Border blank
Third, CSS symbol properties:
List-style-type:none; /* Not numbered */
List-style-type:decimal; /* Arabic numerals */
List-style-type:lower-roman; /* Lowercase roman numerals */
List-style-type:upper-roman; /* Capital Roman numerals */
List-style-type:lower-alpha; /* Lowercase English letters */
List-style-type:upper-alpha; /* Uppercase English Alphabet */
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 symbol */
List-style-position:outside; /* Convex row */
List-style-position:inside; /* Indent in */
Four, CSS background style:
Background-color: #F5E2EC; /* Background color */
Background:transparent; /* Perspective Background */
Background-image:url (/image/bg.gif); /* Background picture */
background-attachment:fixed; /* Floating watermark Fixed background */
Background-repeat:repeat; /* Repeat Arrangement-page default */
Background-repeat:no-repeat; /* Do not repeat the arrangement */
Background-repeat:repeat-x; /* Repeat arrangement on X axis */
Background-repeat:repeat-y; /* Repeat arrangement on y-axis */
Specify background position
background-position:90% 90%; /* background picture x and Y axis position */
Background-position:top; /* Align up */
Background-position:buttom; /* Downward alignment */
Background-position:left; /* Align Left */
Background-position:right; /* Align Right */
Background-position:center; /* Center Alignment */
Five, CSS 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 go to link */
Mouse cursor Style:
Link Finger cursor:hand
Cross Body Cursor:crosshair
Arrow facing down Cursor:s-resize
Cross Arrow Cursor:move
Arrow facing right Cursor:move
Add a question mark Cursor:help
Arrow facing left Cursor:w-resize
Arrow facing up Cursor:n-resize
Arrow to top right cursor:ne-resize
The arrow is facing up to the left Cursor:nw-resize
Text I type Cursor:text
Arrow Oblique Right Bottom cursor:se-resize
Arrow Oblique left Lower cursor:sw-resize
Funnel cursor:wait
Cursor pattern (IE6) p {cursor:url ("cursor filename. cur"), text;}
Vi. CSS Frame Line list:
border-top:1px solid #6699cc; /* Upper Frame line */
border-bottom:1px solid #6699cc; /* Bottom Border */
border-left:1px solid #6699cc; /* Left Border line */
border-right:1px solid #6699cc; /* Right Border line */
This is the way the proposal is written, but it can also be used in the usual way:
Border-top-color: #369/* Set upper Border top Color */
BORDER-TOP-WIDTH:1PX/* Set upper Border top Width */
border-top-style:solid/* set upper Border top style */
Other wireframe Styles
Solid/* Solid wireframe */
Dotted/* Dashed box */
Double/* Dual wireframe */
Groove/* Stereoscopic inner convex frame */
Ridge/* Stereoscopic Relief Frame */
Inset/* Concave frame */
Outset/* Convex frame */
VII. Application of CSS forms:
text box
Button
check box
Select button
Multi-line text box
Drop-down menu option 1 option 2
Viii. CSS Boundary style:
margin-top:10px; /* Upper Border */
margin-right:10px; /* Right Boundary value */
margin-bottom:10px; /* Lower boundary value */
margin-left:10px; /* Left boundary value */
CSS Properties: Font style
Ordinal Chinese description Tag 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: numeric |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: value;}
7 Shadow color {text-shadow:16 bit color value}
8 Font Line Height {line-height: numeric |inherit|normal;}
9 Word Spacing {letter-spacing: Value |inherit|normal}
10 word Spacing {word-spacing: Value |inherit|normal}
11 font warp {Font-variant:inherit|normal|small-cps}
12 English Conversion {Text-transform:inherit|none|capitalize|uppercase|lowercase}
13 font Warp {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
Ordinal Chinese description Tag syntax
1 line Spacing {line-height: numeric |inherit|normal;}
2 text decoration {Text-decoration:inherit|none|underline|overline|line-through|blink}
3 Segment First Space {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 method {WRITING-MODE:LR-TB|TB-RL}
Background style
Ordinal Chinese description Tag syntax
1 background Color {background-color: value}
2 background picture {Background-image:url (URL) |none}
3 background Repeat {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 background Fix {Background-attachment:fixed|scroll}
5 background Positioning {background-position: Value |top|bottom|left|right|center}
6 Figure Style {background: background color | background image | Background repetition | background attachment | background position}
Frame style (Box style)
Ordinal Chinese description Tag syntax
1 boundary left White {margin:margin-top margin-right margin-bottom margin-left}
2 Filler {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: Numeric numeric numeric value} value: Represents top, right, bottom, 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 Altitude {height: value |auto}
9 Float {Float:left|right|none}
10 Clear {Clear:none|left|right|both}
Category List
Ordinal Chinese description Tag syntax
1 control display {Display:none|block|inline|list-item}
2 control blank {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 Graph list {List-style-image:url}
5 location 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}
Style sheet Notes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
