160 likes | 250 Views
Cascading Style Sheets. CSS2. HINT. Use a LIVE CSS editor Web Developer Tools for FireFox have this Firefox has addons for CSS reference Someday somebody will merge the CSS reference with a live editor… maybe you? Firefox add-ons are coded in javascript. CSS3 properties.
E N D
Cascading Style Sheets • CSS2
HINT • Use a LIVE CSS editor • Web Developer Tools for FireFox have this • Firefox has addons for CSS reference • Someday somebody will merge the CSS reference with a live editor… maybe you? Firefox add-ons are coded in javascript...
CSS3 properties • Draft finalized end of 2005? still in draft 2008… • Browser support initially limited • Problems: • buggy limited support • POORLY designed standard
Naming Conventions • If you didn’t notice… • CSS attributes are LOWERCASE • background color = background-color • colors in CSS • named (a short list) red, blue, green… • #99CC33 → #9C3
Display • display: none; (hide) • display: inline; (fits in the line) • display: block; (alone on its own line) • display: table-row, table-column, table-cell, inline-table
Import • @import “…” or @import url( … ) • media types can follow it • @media media_type {…css…} • like: if( media_type == true ) { } • ex: @import “fancy.css” print, screen;
Printing • page-break-before • page-break-after • page-break-inside • auto, always, avoid, left, right • @page {margin properties…}
Box Model • All Elements (tags) have a box around them. • width, height • margin, padding,border • position: top,left,bottom,right
Positions & Dimensions • width, height • top,left,bottom,right • must be positioned to use • auto or inherit (used in CSS cascades) • ##% = relative to parent • units: mm,cm,in,px,pt,pc,em,ex
relative Positioning • Position relative to the text flow (sibling text and tags) • If the text moves, it moves • Example: sub-text or super-text (1st 2nd X² ) • negative positions allowed
absolute Positioning • positions relative to PARENT position • scrolls with the PARENT position • bottom is the bottom of document • going off the page can cause browser to make document larger • negative positions (left/right/top/bottom) are allowed
fixed Positioning • positioned ON THE WINDOW • bottom is the bottom of the window’s page viewing area • does NOT scroll with the the page • adjusts to when the window does
float Positioning • left or right • The box moves to the left or right of the area (contained by parent) • text flows around the box • works diagrams or photos in text documents
z-index • Layering control • Multiple positioned boxes overlapping cause a layering problem, this solves it • only works on boxes that are positioned • 0 and up back to front • auto = default behavior
tricks • bugs (look up the Acid Tests for CSS) • there are IE specific comments that help in coding around IE bugs • Absolute positioning inside a PARENT with relative positioning can be useful • Combining positioning, tables, float can create interesting situations (bugs too)