Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS (Text (text-decoration (blink, link-through, overline, underline,…
CSS
Text
-
-
-
-
-
-
-
vertical -align
not intended to allow to vertically align text in middle of block level elements. More commonly used with inline elements <img>, <em>
-
-
-
:first-letter,;first-line
-
:link,:visited,:hover,:focus,:active
Box
centering
Set a box center on the page
Set the left-margin and right-margin to auto
In order to center a box on the page, set the width for the box
-
-
-
overflow
tells the browser that to do if content contained within a box is larger than the box itself
-
min-width, max-width
specifies the smallest size and maximum width a box can be display at when browser is narrow or wide
-
Change inline/block
display
-
inline-block
a block-level
element to flow like an inline
element, while retaining other
features of a block-level element.
-
-
box-shadow
-
Blur distance
If omitted, the shadow is a solid
line like a border
-
Spread of shadow
a positive value will
cause the shadow to expand in
all directions, and a negative
value will make it contract.
-
HTML5 Layout
traditional html layouts
link
-
articles
acts as container for any section of a page
contains the articles, blog, comment
header
contain logo, main navigation
<footer>
contains copyright, social linking, privacy, etc
Each article or section should have header and footer
-
-
aside
<aside> inside an <article>
it should contain information that is related to
acticle but not essential to its overall meaning
-
-
<figure> <figcaption>
contains any content that is referenced from
main flow of article. Images, Videos, Graphs
Diagrams, Code samples
List, Tables, Forms
list-style-type
-
ordered list
decimal, decimal-leading-zero
lower-alpha, upper-alpha,
lower-roman, upper-roman
unordered list
none, disc, circle, square
-
list-style-position
indicates whether the marker should appear
on the inside or the outside of the box
containing the main points
-
-
list-style
express the marker's style, image and position properties
Table properties
width, padding, text-transform, letter-spacing, font-size
border-top, text-align, background-color, :hover
-
-
border-spacing,
border-collapse
-
border-collapse
border-spacing will be ignored
and cells pushed together,
empty-cells properties will be ignored
-
Styling Forms
Text inputs
font-size, color, background-color
color, background-color, border, border-radius
:focus,:hover, background-image
Submit buttons
color, text-shadow, border-bottom,
background-color, :hover
Fieldsets and legends
width, color, background-color
border, border-radius, padding
-
-
Layout
Positioning
-
-
position:absolute
taken out of normal flow and no longer
affects the positions of other elements on the page.
position: fixed
is a type of absolute positioning.
It positions the element in relation
to the browser window.
z-index
use to control which element
sits on top when overlapping
Which element has z-index value
higher than the others, will sits on top
float allows to take an element in normal flow
and place it as far to the left or right of the containing
element as possible. Should use width property to indicate
how wide the floated element should be.
clear
no element (within the same containing element)
should touch the left or right hand side of a box.
-
-
Image
-
-
-
background
color, image, repeat, attachment, position
-
-
-
-
-
-