Download css3-mega-cheat-sheet-A4.pdf and more Lecture notes Voice in PDF only on Docsity!
THE MEGA
CHEAT SHEET
BACKGROUNDS
background
background-image background-position background-size background-repeat background-attachment background-origin background-clip background-color
background-attachment
scroll | fixed
background-break
bounding-box | each-box | continuous
background-clip
length % border-box | padding-box | content-box | no-clip
background-repeat
repeat | repeat-x | repeat-y | no-repeat
background-color
color transparent
background-color
color transparent
background-image
url none
background-size
length % auto | cover | contain
background-origin
border-box | padding-box | content-box
background-position
top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right x-% y-% x-pos y-pos
CSS3 is the latest evolution of the Cascading Style Sheets
language and aims at extending CSS2.1. It brings a lot of
gradients, transitions or animations, as well as new layoutslong-awaited novelties, like rounded corners, shadows,
like multi-columns, flexible box or grid layouts. Experimental
parts are vendor-prefixed and should either be avoided in
production environments, or used with extreme caution asboth their syntax and semantics can change in the future.
BORDER
border
border-width border-style border-color
border-bottom
border-bottom-width border-style border-color
border-left
border-left-width border-style border-color
border-right
border-right-width border-style border-color
border-left-style
border-style
border-width border-style color close
border-break
border-color
border-bottom-color
border-color
border-left-color
thin | medium | thick length
border-left-width
border-style
border-right-style
border-top-width border-style border-color
border-top
inset || [ length, length, length, length || ] none
box-shadow
border-style
border-bottom-style
border-color
border-top-color
border-style
border-top-style
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-style
border-color
border-right-color
thin | medium | thick | length
border-right-width
thin | medium | thick | length
border-top-width
thin | medium | thick | length
border-width
background-color
color transparent
border-collapse
collapse | separate
border-color
color
border-top-right-radius
length
border-bottom-right-radius
length
border-bottom-left-radius
length
border-image
image [ number / % border-width stretch | repeat | round ] none
border-radius
border-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius
FONT
font
font-style font-variant font-weight font-size/line-height font-family
caption | icon | menu | message-box |small-caption | status-bar font-weight
normal | bold | bolder | lighter |100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
font-size
xx-small | x-small | small | medium |large | x-large | xx-large | smaller | larger | inherit length %
font-family
normal | wider | narrower |ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | ultra-expanded |inherit
font-style
normal | italic | oblique | inherit
font-variant
font-size-adjust normal | small-caps | inherit
none | inherit number
TEXT
direction
ltr | rtl | inherit
text-indent
length %
text-wrap
normal | unresrricted | none |suppress
word-spacing
normal length %
text-justify
auto | inter-word | inter-ideograph |inter-cluster | distribute | kashida | tibetan
text-emphasis
none | [ [ accent | dot | circle | disc | [ before | after ]?]
punctuation-trim
none | [ start | end | adjacent ]
text-align
start | end | left | right | center | justify
text-align-last
start | end | left | right | center | justify
text-shadow
none color length
text-transform
none | capitalize | uppercase |lowercase
text-decoration
none | underline | overline |line-thorugh | blink
hanging-punctuation
none | [ start | end | end-edge ]
letter spacing
normal length %
text-outline
none color length
unicode-bidi
normal | embed | bidi-override
white-space
normal | pre | nowrap | pre-wrap | pre-line
word-break
normal | keep-all | loose | break-strict |break-all
word-wrap
normal length %
white-space-collapse
perserve | collapse | pre-serve-breaks |discard
COLORS
color
inherit color
opacity
inherit number
TABLE
border-collapse
collapse | separate
caption-side
top | bottom | left | right
border-spacing
length length
empty-cells
show | hide
table-layout
auto | fixed
TEMPLATE LAYOUT
box-align
start | end | center | base
box-direction
normal | reverse
box-flex
normal
box-pack
start | end | center | justify
box-sizing
content-box | padding-box |border-box | margin-box
tab-side
top | bottom | left | right
box-flex-group
integer
box-lines
single | multiple
box-orient
horizontal | verticle | inline-axis | block-axis
COLUMN
column-count
auto number
column-gap
normal length
column-fill
auto | balance
column-span
1 | all
column-width
auto length
columns
column-width column-count
column-rule
column-rule-width column-rule-style column-rule-color
column-rule-style
border-style
column-rule-width
thin | medium | thick length
GRID POSTIONING
grid-columns
none | inherit [ length percentage relative length ]
grid-rows
none | inherit [ length percentage relative length ]
SPEECH
cue
cue-before cue-after
mark
mark-before mark-after
mark-before
string
mark-after
string
cue-before
url [ silent | x-soft | soft | medium | loud |x-loud | none | inherit ] number %
caption-side
top | bottom | left | right
rest
rest-before rest-after
rest-before
none | x-weak | weak | medium | strong | x-strong | inherit time
rest-after
none | x-weak | weak | medium | strong | x-strong | inherit time
speak
none | normal | spell-out | digits | literal-punctuation | no-punctuation |inherit-number
pause
pause-before pause-after
phonemes
string
voice-duration
time
voice-family
inherit | [ <specific-voice, age, generic-voice,number> ]
voice-rate
x-slow | slow | medium | fast | x-fast | inherit %
voice-pitch
x-low | low | medium | high | x-high | inherit number %
voice-pitch-range
x-low | low | medium | high | x-high | inherit number
voice-stress
strong | moderate | none | reduced | inherit
voice-volume
silent | x-soft | soft | medium | loud | x-loud |inherit number %
pause-before
none | x-weak | weak | medium | strong | x-strong | inherit time
cue-after
url [ silent | x-soft | soft | medium | loud | x-loud | none | inherit ] number %
LIST & MARKERS
list-style
list-style-type list-style-position list-style-image
list-style-type
none | asterisks | box | check | circle |diamond | disc | hyphen | square | decimal | decimal-leading-zero |lower-roman | upper-roman | lower-alpha | upper-alpha |lower-greek | lower-latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana |hiragana-iroha | katakana-iroha | footnotes
list-style-image
none url
marker-offset
auto length
ANIMATIONS
animations
animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
animation-timing-function
ease | linear | ease-in | ease-out |ease-in-out | cubic-Bezier (number, number, number, number)
animation-direction
normal | alternate
animation-play-state
running | paused
animation-iteration-count
inherit number
animation-delay
time
animation-delay
time
animation-name
none | IDENT
TRANSITIONS
transitions
transitions-property transitions-duration transitions-timing-function transitions-delay
transition-timing-function
ease | linear | ease-in | ease-out |ease-in-out | cubic-Bezier ( number, number, number, number)
transitions-delay
time
transitions-duration
time
transitions-property
none | all
PSEUDO-CLASS
:active an activated element :focus an element while the element has focus :visited a visited link :hover an element when you mouse over it :link an unvisited link :disabled an element while the element is disabled :enabled an element while the element is enabled :checked an element (form element control) that is checked :selection an element that is currently selected of highlightedby the user
:lang allows the author to specify a language to use in aspecified element
:nth-child(n) an element that is the n-th sibling :nth-last child(n) an element that is the n-th sibling countingfrom the last sibling
:first-child an element that is the first sibling :last-child an element that is the last sibling :only-child an element that is the only child :nth-of-type(n) an element that is the n-th sibling of its type :nth-last-of-type(n) an element that is the n-th sibling of its typecounting from the last sibling
:last-of-type an element that is the last sibling of its type :first-of-type an element that is the first sibling of its type :only-of-type an element that is the only of its type :empty an element that has no children :root root element within the document :not(x) an element not represented by the argument 'x' :target a target element as specified by a target in a URI
PSEUDO-ELEMENT
::first-letter Adds special style to the first letter of a text ::first-line Adds special style to the first line of a text ::before Inserts some content before an element ::after Inserts some content after an element
ABSOLUTE MEASUREMENT
% percentage cm centimeter in inch mm millimeter pc pica (1p = 12 points) pt point (1pt = 1/72 inch)
RELATIVE MEASUREMENT ch width of the "0" glyph found in the font for the fontsize used to render em 1em = current font size of current element ex x-height of the element's font gd the grid defined by 'layout-grid' px pixel of the viewing device rem the font size of the root element vh the viewport's height vw the viewport's width vm viewport's height or width, whichever is smaller ofthe two
ANGLES deg degrees grad grads rad radians turn turns
TIME ms milli-seconds s seconds
FREQUENCY Hz hertz kHz kilo-hertz
COLORS color name red, blue, green, dark green rgb(x,y,z) red = rgb(255,0,0) rgb(x%,y%,z%) red = rgb(100%,0,0) rgba(x,y,z,alpha) red = rgba(255,0,0) #rrggbb red = #ff0000 (or shorthand = #f00)hsl(hue, saturation, lightness) red=hsl (0, 100%, 50%) flavor An accent color (typically chosen by theuser) to customize the user interface of the user agent itself. currentColor computed value of the 'currentColor'keyword is the computed value of the 'color' property
SELECTOR TYPES
Name
Universal Type Grouping Class Id Descendant
Child Adjacent Sibling General Sibling
Attribute
Info
Any element Any element of that type Multiple elements of different types Multiple elements of different types when youdon't want to affect all instances of that type A single element type when you don't want to affect all instances of that type An element that is below (in the documenttree) another element - no matter how many levels below An element that is directly below (in the document tree) another element All elements that share the same parent andelements are in the same immediate sequence All elements that share the same parent andelements are in the same sequence (not necessarily immediate) An element with that matches the attributelisted
Example
- { font: 10px Arial; } h1 { text-decoration: underline; } h1, h2, h3 { font-family: Verdana; } .sampleclass { text-decoration: underline; } #sampled { text-decoration: underline; } #gallery h1 { text-decoration: underline; }
#title > p { font-weight: bold; } h1 + p { font-style: italic; } h1 ~ p { font-style: italic; }
E[selected] - att whatever the valueE[att="val"] - att with a specific value E[rel~="next"] - att with a value is a whitespace separated list[lang|="en"] - att value either being exactly "val" or beginning with "val" immediately followed by "-" E[att^="val"] - att value that begins with the prefix "val"E[att$="val"] - att vale that begins with the suffix "val" E[att="val"] - att value contains at least one instance of thesubstring "val"
LINE BOX
alignment-adjust
auto | baseline | before-edge |text-before-edge | middle | central | after-edge | text-after-edge |ideographic | alphabetic | hanging | mathematical length %
drop-initial-after-align
alignment-baseline
drop-initial-size
auto integer % line
inline-box-align
initial | last integer
line-height
normal number length %
line-stacking
line-stacking-strategy line-stacking-ruby line-stacking-shift
line-stacking-strategy
inline-line-height |block-line-height | max-height | grid-height
line-stacking-ruby
exclude-ruby | include-ruby
line-stacking-shift
consider-shifts |disregard-shifts
line-stacking
line-stacking-strategy line-stacking-ruby line-stacking-shift
vertical-align
Baseline | sub | super | top |text-top | middle | bottom | text-bottom length %
text-height
auto | font-size | text-size |max-size
drop-initial-after-align
central | middle | after-edge |text-after-edge | ideographic | alphabetic | mathematical %
drop-initial-before-align
caps-height alignment-baseline
drop-initial-value
initial integer
drop-initial-before-adjust
before-edge | text-before-edge | central | middle | hanging |mathematical length %
alignment-baseline
baseline | ise-script | before-edge |text-before-edge | after-edge | text-after-edge | central | middle |ideographic | alphabetic | hanging | mathematical
baseline-shift
baseline | sub | super length %
dominant-baseline
auto | use-script | no-change |reset-size | alphabetic | hanging | ideographic | mathematical |central | middle | text-after-edge | text-before-edge
HYPERLINK
target
target-name target-new target-position
target-name
current | root | parent | new |modal string
target-new
window | tab | none
target-position
above | behind | front | back
RUBY
ruby-align
auto | start | left | center |end | right | distribute-letter | distribute-space | line-edge
ruby-overhang
auto | start | end | none
ruby-position
before | after | right | inline
ruby-span
attr(x) | none
PAGED MEDIA
fit
fill | hidden | meet | slice
fit-position
[top | center | bottom] || [left | center | right] length %
image-orientation
auto angle
POSITIONING
bottom
auto % length
right
auto % length
top
auto % length
clip
shape auto
left
auto % length
z-index
auto number
position
static | relative | absolute | fixed
page
auto identifier
page-break-after
auto | always | avoid | left | right
page-break-before
auto | always | avoid | left | right
page-break-inside
auto | avoid
windows
integer
size
auto | landscape | portrait length
orphans
integer
