Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
notes:css_cheat_sheet [2008/08/17 23:00]
smthng
notes:css_cheat_sheet [2008/08/21 00:18] (current)
smthng
Line 54: Line 54:
   * Text properties examples <code html>   * Text properties examples <code html>
 color: #00ff00/green/rgb(0,255,0) ; text-shadow:blue; color: #00ff00/green/rgb(0,255,0) ; text-shadow:blue;
-text-align: center/justify ; text-indent: 1cm;+text-align: left/right/center/justify ; text-indent: 1cm;
 letter-spacing: 0.5cm/-3px ; line-height: 200%; letter-spacing: 0.5cm/-3px ; line-height: 200%;
 white-space: nowrap ; word-spacing: 30px white-space: nowrap ; word-spacing: 30px
Line 67: Line 67:
 font: italic small-caps 900 12px arial font: italic small-caps 900 12px arial
 font: caption/icon/menu/message-box/small-caption/status-bar </code> font: caption/icon/menu/message-box/small-caption/status-bar </code>
 +
 ==== CSS Border/List Properties ==== ==== CSS Border/List Properties ====
   * Border properties examples (btlr=bottom/top/left/right. An outline occurs outside of the border. <code html>   * Border properties examples (btlr=bottom/top/left/right. An outline occurs outside of the border. <code html>
-border-style: medium/solid/double/groove/dotted/dashed/inset/outset;+border-style: medium/solid/double/groove/dotted/ 
 +  dashed/inset/outset;
 border-btlr: width style color ; border-btlr-style border-btlr: width style color ; border-btlr-style
 border-width:5px ; border-btlr-width: thick border-width:5px ; border-btlr-width: thick
Line 88: Line 90:
 border-spacing: width x 2;caption-side: btlr border-spacing: width x 2;caption-side: btlr
 </code> </code>
 +
 +==== Sizing and Positioning CSS Properties ====
 +
 +  * Size properties examples <code html>
 +height/width: auto/50%/100px
 +min/max-height/width:none/50%/100px
 +line-height: normal/100px/1/50%</code>
 +
 +  * Position properties <code html>
 +display: inline/none/block (lots of others)
 +float: btlr ; 
 +position: relative(to normal)/absolute(rel to block)
 +  /fixed(rel to window, doesn't move)/static(normal) ;
 +bottom/top/left/right: +/-100px/width
 +vertical-align:top/bottom/text-top/text-bot/sub/super</code>
 +
 +  * Visibility properties <code html>
 +visibility:visible/hidden/collapse (for table elems)
 +clear:left/right/both/none (where floats aren't allowed)
 +clip: rect(10px, 5px, 10px, 5px)
 +overflow:auto/scroll/visible/hidden
 +z-index: 1 (0 is normal) </code>
 +
 +==== Advanced CSS ====
 +  * Pseudo classes can restrict the selector. a:hover and a:active may have to come after a:link and a:visited. <code html>
 +selector.class:pseudo-class {property: value}
 +a:link {color: #FF0000}   (unvisited link)
 +a:visited {color: #00FF00}  (visited link)
 +a:hover {color: blue}  (mouse-over element)
 +a:active {color: #0000FF} (selected element)
 +a:focus {color: #0000FF} (focused element - not in IE)
 +p:first-child {font-weight:bold}
 +p > em:first-child { } ; p:first-child em { }
 +</code>
 +  * Pseudo elements are dynamic elements <code html>
 +p:first-letter {} ; p:first-line {} ;
 +h1:before {} ; h1:after {} ;</code>
 +  * @media allows different styles for different media. Media examples include screen, print, handheld, projection, tty, tv, aural, braille. <code html> @media screen,print { p {color:blue} }</code> 
 +  * Misc Properties <code html>
 +opacity:0.4; (for firefox)
 +filter:alpha(opacity=40) (for IE)
 +
 +onmouseover="this.style.opacity=1;
 +  this.filters.alpha.opacity=100"
 +onmouseout="this.style.opacity=0.4;
 +  this.filters.alpha.opacity=40"
 +
 +cursor:deflt/cursor/pointer/move/wait/help/text/crosshair</code>
Recent changes RSS feed Creative Commons License Donate Minima Template by Wikidesign Driven by DokuWiki