3.CSS style
( 1 ) font style
color font color ( Red , Blue , #fff ... )
font-family font posture ( " Microsoft elegant black " , "in the Microsoft YaHei" , " Times New Roman " , serif ... )
font-style font is turned italic ( Normal , Italic )
font-weight font weight ( Thin , Normal , Bold , Bolder , 100 ~ 900 )
font-size font size (the default browser 16px ) ( 100px , 2em ... )
WebFont font posture:
Find the appropriate link in the network packet font (or font package local link), in CSS declarations
@ Font-face {
font-family: "Custom Name";
src: url ( 'link address');
}
Then with style font-family: "custom name"; to.
WebFont Fonts icon:
As iconfont selected site icon added item, select Font class code generation by <link> into the label CSS file (supplemented with HTTPS: ), typically <i> write the full name of the icon class name tag to reference (e.g. IconFont icon-XXX ) (or download it locally with the <img> tags that reference).
Or select Unicode code generation, the @ font-face write the appropriate link, font-Family is IconFont , the icon name (generated Unicode written form) can be referenced in the label.
( 2 ) Text Style
Font text-align arrangement ( left , Center , right ... )
text-transform font changes ( none , UPPERCASE , lowercase ... )
text-decoration text decoration ( none , underline , overline , Line-through ... )
text-shadows text shadow [Shadow-H] [V-Shadow] [Blur] [Color] ( 5px 3px 4px #ededed , ... )
the shape of the cursor when the cursor suspension cursor on the link
outline around the box link
( 3 ) list style
list-style-type setting list item flag type ( Circle , Square ... )
list-style-position setting position of the list of items logo appears ( Outside , Inside )
list-style-image custom settings list item flag ( URL '. / ...')
list-style list style shorthand wording [type] [Image] [position] ( Circle Outside URL '. / ...' , ... )
line-height line height
( 4 ) box style
background-color background color ( Red , Blue , #fff ... )
background-image background image ( url '. / ...')
background-clip BACKGROUND coverage (crop background) (
border-box within borders, padding-Box within padding, Content-Box Content Area
）
background-origin BACKGROUND start point (
border-box frame portion origin, padding-Box padding portion origin, Content-Box content region portion origin
）
background-position background image of the initial position ( left , Top , right , 10px 20px ... )
background-repeat background images repeat mode (
repeat order to cover the entire range of the background, the background image is repeated as much as possible, in the context of the cutting edge (Clipping) the last image to the background using the entire range.
space with a blank picture separated as much as possible the background image fills the entire screen without the use of cutting (clipping)
round the picture is compressed or expanded to fit the entire range of the background, without the use of cutting
no-repeat will not be repeated
）
background-attachment background image fixed point (
fixed fixed on the viewport, Scroll on the element itself, fixed local fixing element in the content itself
）
background-size the size of the background ( Cover , ... )
background shorthand wording set background [Attachment] [Clip] [Color] [Image] [position] [REPEAT] ( Fixed border-Blue Box URL '. / ...' left-NO REPEAT , ... )
width width
height height
margin-top Top Margin
margin-right and right margins
margin-bottom bottom margins
margin-left Left Margin
margin Margin
margin: 10px; on the left and right lower
margin: 0 10px; down to 0 , about 10px
margin: 0 5px 10px; on 0 , about 5px , the 10px
margin: 0 5px 10px 15px; on the left and right lower
The top margin padding-top
The padding-right and right margins
padding-bottom padding bottom
The left margin padding-left
padding padding
padding: 10px; on the left and right lower
padding: 0 10px; down to 0 , about 10px
padding: 0 5px 10px; on 0 , about 5px , the 10px
padding: 0 5px 10px 15px; on the left and right lower
border-radius fillet radius
border-top-style top border line type
border-top-width top border width
a top border-top-color border line color
the top border line border-top
the right border-right-style border line type
the right border-right-width border width
the right border-right-color border line color
border-right right sides
border-bottom-style bottom border line type
border-bottom-width bottom border width
bottom border-bottom-color border line color
border-bottom bottom border
border-left-style left border line type
border-left-width left border width
border-left-color left border line color
border-left left border
border-style border line type
border-color border line color
border-width Border width
（border: 1px solid #ededed、...）
shadow box-shadow box (# CCC 5px 5px 10px, the inset from 3px 0 0 LightBlue , ... )
A box consists of:
Margin margin
Border border
Padding padding
Content storage area for child elements or content
Box calculation :
box-sizing: content-box; - content box ( default )
width = Content width
height = high content
Occupied width = border + padding + width
The share of high = border + padding + height
box-sizing: border-box; - frame box
width = within borders and all
width = border + padding + content width
height = within borders and all
height = border + padding + content high
( 5 ) Table Styles
background add background color for the table
table-layout specified display box table, row, column algorithm (
Auto :( default value) Table and cell width depends on the contents contained therein.
Fixed : Table first line width depending on the width of each column of the table is set, and the width of the column.
）
border-collapse border of the specified table are merged or separated (
separate :( default value) to separate mode represents two adjacent grid has its own border.
Collapse : merge mode represents two adjacent lattice Shared Border
）
caption-side Specifies the caption is located in which position on the table ( Top , bottom )
[Unit Additional information:
colour
# 333333 equivalent to # 333
#ededed
rgb (0,0,0) is equivalent to # 000000
rgba (0,0,0,0.3) 0.3 to Transparency
Gradient ...
length
Absolute units
px pixels
Relative units
em on the current element font-size values , such as:
font-size:12px;
1em = 12px;
2em = 24px;
rem
html{font-size:14px}
1rem = 14px;
%
width relative to the parent element
border-radius with respect to the current element width
...
】