Css Essential

CSS EssentialsFor the one who care about layout Tin@BrowBag 3 June 2011

AgendaXHTML & CSSCSS selectorVisual formatting & modelsBasic sampleAdvanced sampleTricks and hacks

CSS deﬁne the visual modelLayoutTypographyUnitsRenderingGraphicsetc.

Era of CSSBefore the movable- Moden publishingdawn type CSS 3

XHTML and CSSXHTML => data (structure)CSS => presentation (visual)Separation of concernsBest practices: Use proper HTML tags Use meaningful class/id name (red-text warn-text) Minimizing HTML structure and CSS rules

Example of html

CSS selector - Rule StructureSelector Declaration block Declaration Declaration H1 { color: red; background: yellow; } Property Value Property Value

CSS selector - BasicElement Selector Type selector: h1 { font-weight: bold;} Descendant selector: li a { text-decoration: none; }Class Selector .warn { color: red } .full-width { width: 100% }

CSS selector - BasicID Selector #sidebar { float: right; width: 27em; }Pseudo class a:link { color: blue; } li:hover { background-color: grey; } input:focus { background-color: yellow; } All pseudo class: :active, :after, :before, :first-child, :first-letter, :first- line, :focus, :hover, :lang, :link, :visited

CSS selector - advancedUniversal (wildcard) Selector * { padding: 0; margin: 0; }Child selector: #nav > liAdjacent Sibling selector: h1 + pSimple Attribute selector: div[class] input[type=”input”], div[id~=”container”] ...

CSS Rule Speciﬁcity (Weight) Four level of speciﬁcity level 1(1000): inline style, <div style=”color: red”> level 2(0100): ID selector level 3(0010): class, pseudo class, attribute selector level 4(0001): element selector, universal selector Special level: !important (except IE6) Draw game: last declaration win

CSS Rule SpeciﬁcityRule Weight Weight (digit)Style=”” 1, 0, 0, 0 1000#wrapped #content {} 0, 2, 0, 0 200#content .date {} 0, 1, 1, 0 110div#content {} 0, 1, 0, 1 101#content {} 0, 1, 0, 0 100p.comment .date {} 0, 0, 2, 1 21p.comment {} 0,0, 1, 1 11div p {} 0, 0, 0, 2 2p {} 0, 0, 0, 1 1

CSS: Inherit and cascadingInheritance: Inherit ancestor element’s style, color,font-size (font*) descendants in dom tree inherit ancestor’s style none inherit: padding, margin, border, background no speciﬁcity (lowest priority)

CSS: Inherit and cascadingCascading: different level of css rule compositetogether all match selector declarations will be applied browser default style Inheritance selector declarations from lower to higher speciﬁcity the styles with !important later property overwrite former property

How to use them?

Real example (by Firebug)

Element ClassiﬁcationNonreplaced Elements The majority of HTML elements are NE Their content box is generate by itselfReplaced Elements content box is replaced by something not directly represented by document content Image, ﬂash object, input element

Everything start form the ‘display’ model“The display propertyspeciﬁes the type of boxan element shouldgenerate.”

Era of CSSBefore the movable- Moden publishingdawn type CSS 3

What’s the box?

Basic Box model margin: top right bottom left; border padding width Content Area height

Basic Box model Background margin: top right bottom left; border padding width Content Area height

Box model example (in ﬁrebug)

IE box model quirks W3C Actual width = margin * 2 + padding*2 + border * 2 + width (css property) content-width = width (css property) IE Actual width = margin * 2 + width (css property) content-width = width - padding * 2This ﬁle is licensed under the Creative Commons Attribution ShareAlike 3.0 Unported (http://en.wikipedia.org/wiki/Image:W3C_and_Internet_Explorer_box_models.png)

So... for IE compatibility Normally, don’t use padding and margin on same element, use it in different level Make IE doesnt work in quirks-mode Has-layout=true (zoom: 1, but can’t pass w3c validation) Don’t use width: 100% and padding on same element (for safty, use 95% or other safe value)

Element Display Roles - Block Level Block-Level is a element with property display: block It generate a box fills its parent’s content area can’t have other element on it’s side it generate breaks before/after it’s box Use width/height to determine the size min-width/max-width Div is block element by default Use overflow control overflow content display/hide

Block-Level LayoutIt generate a rectangular box called element box, whichdescribes the amount of space occupied by an element Background extends to the outer edge of the border Only margins, height, and width may be set to auto Only margins can be given negative values Padding & borders of element box default to 0 & none Width property deﬁne only the width of content area

Block box formating margin: top right bottom left; border padding width Content Area height

Block box formating The containing block border padding auto margin width Content Area heightnegative margin border padding width Content Area height border padding ﬁxed margin width Content Area height Fixed width

Element Display Roles - Inline Level Inline-level is a element with property display: inline It generate element box within a line of text and do not break up the ﬂow of that line, continues layout The box size is determined by it’s content inline element can only contain inline element Margin has no effect here line-height and vertical-align inline-height, inline-width (not recommended) font-size

Inline-Level Layoutcontent area inline element inline box content area half-leading which is Strongly emphasized and which is

Inline-Level Layoutcontent area inline element inline box content area half-leading which is Strongly emphasized and which is baseline

Inline box formating The containing block which is Strongly emphasized which is beijing oepn party is good

Normal layout ﬂow

Other Element Display RolesInline-block: it has no breaks, but you can specificwidth and height on itdisplay: none (totally hide the content, remove it fromlayout flow) about visibility: hide (do not display the content, but still take effect in layout flow)

Steal from http://www.slideshare.net/stopsatgreen/the-home-of-tomorrow-css-layoutsFuture Layout Modules

Control the layout Floating Layout Absolute positioning Left, right float Fixed positioning Clear float z-index Shrink to fit Table Layout Positioning Layout Fixed table layout Static positioning Automatic table layout Relative positioning

Values and UnitsColor Values Length Values #RRGGBB Absolute length units #RGB Inches (in) rgb(rrr.rr%, ggg.gg%, Centimeters (cm) bbb.bb%) Millimeters (mm) rgb(rrr, ggg, bbb) Points (pt) 12pt = 1in keyword (black, blue ...) Picas (pc)

Values and UnitsLength Values Relative length units em-height (em) x-height (ex) Pixels (px)Percentage Values (%)

CSS basic exampleStyle for font (size, weight, color, style, family)Style for link love/hate rollover (spry)Style for ﬂoat image and clearStyle for background

CSS Advanced exampleImage button rounded cornerhorizontal menu ﬁxed widthcss tooltip mountain cornerslide door tab 4 wrapped bg images 4 corner images css rounded corner

Hacks and TricksMost hacks is for IE Tricks for IE Star hack (6) min-width/width(6) Underscore hack (7)  > child selector (-5, -6) property selector has-layout? zoom: 1

You are coming a long way,baby

Thanks!

http://knitinr.blogspot.com	48
http://www.slideshare.net	9
http://dev.monqi.com.br	7
http://jitneytrade.com	3
http://knitinr.blogspot.in	2
http://philau-interactive.blogspot.com	2
http://knitinr.blogspot.se	1
http://knitinr.blogspot.com.au	1
http://knitinr.blogspot.de	1
http://knitinr.blogspot.co.uk	1

Css Essential

by Yue Tian on Dec 29, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 75

Statistics

Css Essential — Presentation Transcript