CSS CHEAT SHEET

Syntax
selector {property: value;}
External Style Sheet
<link rel="stylesheet" type="text/css" href="style.css" />
Internal Style
<style type="text/css">
selector {property: value;}
</style>
Inline Style
<tag style="property: value">
GENERAL
Class String preceded by a period
ID String preceded by a hash mark
div Formats structure or block of text
span Inline formatting
color Foreground color
cursor Appearance of the cursor
display
block; inline; list-item; none
overflow How content overflowing its box is handled

visible, hidden, scroll, auto
visibility
visible, hidden
FONT
font-style
Italic, normal
font-variant
normal, small-caps
font-weight
bold, normal, lighter, bolder, integer (100-900)
font-size Size of the font
font-family Specific font(s) to be used
TEXT
letter-spacing Space between letters
line-height Vertical distance between baselines
text-align Horizontal alignment
text-decoration
blink, line-through, none, overline, underline
text-indent First line indentation
text-transform
capitalize, lowercase, uppercase
vertical-align Vertical alignment
word-spacing Spacing between words
BOX MODEL
CSS Box Model height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left;
BORDER
border-width Width of the border
border-style
dashed; dotted; double; groove; inset; outset; ridge; solid; none
border-color Color of the border
POSITION
clear Any floating elements around the element?

both, left, right, none
float Floats to a specified side

left, right, none
left The left position of an element

auto, length values (pt, in, cm, px)
top The top position of an element

auto, length values (pt, in, cm, px)
position
static, relative, absolute
z-index Element above or below overlapping elements?

auto, integer (higher numbers on top)
BACKGROUND
background-color Background color
background-image Background image
background-repeat
repeat, no-repeat, repeat-x, repeat-y
background-attachment Background image scroll with the element?

scroll, fixed
background-position
(x y), top, center, bottom, left, right
LIST
list-style-type Type of bullet or numbering in the list

disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none
list-style-position Position of the bullet or number in a list

inside; outside
list-style-image Image to be used as the bullet in a list
* The properties for each selector are in the order they should appear when using short
Advertisements
發表留言

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

%d 位部落客按了讚: