Css Essential
42 likes4,052 views
This document provides an overview of CSS essentials. It begins with an agenda that covers XHTML and CSS, CSS selectors, visual formatting models, basic and advanced CSS samples, and CSS tricks and hacks. The document then defines what CSS is used for and the separation of concerns between HTML and CSS. It covers basic and advanced CSS selectors including type, class, ID, and pseudo-class selectors. Box model, positioning, inheritance, and specificity are explained. Examples of block-level and inline-level elements are given along with common units and values in CSS. The document concludes with examples of basic and advanced CSS code and discusses various CSS hacks for cross-browser compatibility.
![CSS selector - advanced
Universal (wildcard) Selector
* { padding: 0; margin: 0; }
Child selector: #nav > li
Adjacent Sibling selector: h1 + p
Simple Attribute selector:
div[class]
input[type=”input”], div[id~=”container”] ...](https://image.slidesharecdn.com/css-essential-1230528114888905-2/85/Css-Essential-12-320.jpg)
![Hacks and Tricks
Most hacks is for IE Tricks for IE
Star hack (6) min-width/width(6)
Underscore hack (7) <!--[if lte IE 7]>
!important (6) <![endif]-->
> child selector (-5, -6)
property selector
has-layout? zoom: 1](https://image.slidesharecdn.com/css-essential-1230528114888905-2/85/Css-Essential-52-320.jpg)
Css Essential
- 1. CSS Essentials For the one who care about layout Tin@BrowBag 3 June 2011
- 2. Agenda XHTML & CSS CSS selector Visual formatting & models Basic sample Advanced sample Tricks and hacks
- 3. CSS define the visual model Layout Typography Units Rendering Graphics etc.
- 4. Era of CSS Before the movable- Moden publishing dawn type CSS 3
- 5. Agenda XHTML & CSS CSS selector Visual formatting & models Basic sample Advanced sample Tricks and hacks
- 6. XHTML and CSS XHTML => data (structure) CSS => presentation (visual) Separation of concerns Best practices: Use proper HTML tags Use meaningful class/id name (red-text warn-text) Minimizing HTML structure and CSS rules
- 8. Agenda XHTML & CSS CSS selector Visual formatting & models Basic sample Advanced sample Tricks and hacks
- 9. CSS selector - Rule Structure Selector Declaration block Declaration Declaration H1 { color: red; background: yellow; } Property Value Property Value
- 10. CSS selector - Basic Element Selector Type selector: h1 { font-weight: bold;} Descendant selector: li a { text-decoration: none; } Class Selector .warn { color: red } .full-width { width: 100% }
- 11. CSS selector - Basic ID 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
- 12. CSS selector - advanced Universal (wildcard) Selector * { padding: 0; margin: 0; } Child selector: #nav > li Adjacent Sibling selector: h1 + p Simple Attribute selector: div[class] input[type=”input”], div[id~=”container”] ...
- 13. CSS Rule Specificity (Weight) Four level of specificity 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
- 14. CSS Rule Specificity Rule Weight Weight (digit) Style=”” 1, 0, 0, 0 1000 #wrapped #content {} 0, 2, 0, 0 200 #content .date {} 0, 1, 1, 0 110 div#content {} 0, 1, 0, 1 101 #content {} 0, 1, 0, 0 100 p.comment .date {} 0, 0, 2, 1 21 p.comment {} 0,0, 1, 1 11 div p {} 0, 0, 0, 2 2 p {} 0, 0, 0, 1 1
- 15. CSS: Inherit and cascading Inheritance: Inherit ancestor element’s style, color, font-size (font*) descendants in dom tree inherit ancestor’s style none inherit: padding, margin, border, background no specificity (lowest priority)
- 16. CSS: Inherit and cascading Cascading: different level of css rule composite together all match selector declarations will be applied browser default style Inheritance selector declarations from lower to higher specificity the styles with !important later property overwrite former property
- 17. How to use them?
- 18. Real example (by Firebug)
- 19. Agenda XHTML & CSS CSS selector Visual formatting & models Basic sample Advanced sample Tricks and hacks
- 20. Element Classification Nonreplaced Elements The majority of HTML elements are NE Their content box is generate by itself Replaced Elements content box is replaced by something not directly represented by document content Image, flash object, input element
- 21. Everything start form the ‘display’ model “The display property specifies the type of box an element should generate.”
- 22. Era of CSS Before the movable- Moden publishing dawn type CSS 3
- 23. What’s the box?
- 24. Basic Box model margin: top right bottom left; border padding width Content Area height
- 25. Basic Box model Background margin: top right bottom left; border padding width Content Area height
- 26. Box model example (in firebug)
- 27. 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 * 2 This file is licensed under the Creative Commons Attribution ShareAlike 3.0 Unported (http://en.wikipedia.org/wiki/Image:W3C_and_Internet_Explorer_box_models.png)
- 28. So... for IE compatibility Normally, don’t use padding and margin on same element, use it in different level Make IE doesn't 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)
- 29. 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
- 30. Block-Level Layout It generate a rectangular box called element box, which describes 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 define only the width of content area
- 31. Block box formating margin: top right bottom left; border padding width Content Area height
- 32. Block box formating The containing block border padding auto margin width Content Area height negative margin border padding width Content Area height border padding fixed margin width Content Area height Fixed width
- 33. 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 flow 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
- 34. Inline-Level Layout content area inline element inline box content area half-leading which is Strongly emphasized and which is
- 35. Inline-Level Layout content area inline element inline box content area half-leading which is Strongly emphasized and which is baseline
- 36. Inline box formating The containing block which is Strongly emphasized which is beijing oepn party is good
- 38. Other Element Display Roles Inline-block: it has no breaks, but you can specific width and height on it display: none (totally hide the content, remove it from layout flow) about visibility: hide (do not display the content, but still take effect in layout flow)
- 39. Steal from http://www.slideshare.net/stopsatgreen/the-home-of-tomorrow-css-layouts Future Layout Modules
- 40. Steal from http://www.slideshare.net/stopsatgreen/the-home-of-tomorrow-css-layouts Future Layout Modules
- 41. Steal from http://www.slideshare.net/stopsatgreen/the-home-of-tomorrow-css-layouts Future Layout Modules
- 42. Steal from http://www.slideshare.net/stopsatgreen/the-home-of-tomorrow-css-layouts Future Layout Modules
- 43. Steal from http://www.slideshare.net/stopsatgreen/the-home-of-tomorrow-css-layouts Future Layout Modules
- 44. 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
- 45. Values and Units Color 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)
- 46. Values and Units Length Values Relative length units em-height (em) x-height (ex) Pixels (px) Percentage Values (%)
- 47. Agenda XHTML & CSS CSS selector Visual formatting & models Basic sample Advanced sample Tricks and hacks
- 48. CSS basic example Style for font (size, weight, color, style, family) Style for link love/hate rollover (spry) Style for float image and clear Style for background
- 49. Agenda XHTML & CSS CSS selector Visual formatting & models Basic sample Advanced sample Tricks and hacks
- 50. CSS Advanced example Image button rounded corner horizontal menu fixed width css tooltip mountain corner slide door tab 4 wrapped bg images 4 corner images css rounded corner
- 51. Agenda XHTML & CSS CSS selector Visual formatting & models Basic sample Advanced sample Tricks and hacks
- 52. Hacks and Tricks Most hacks is for IE Tricks for IE Star hack (6) min-width/width(6) Underscore hack (7) <!--[if lte IE 7]> !important (6) <![endif]--> > child selector (-5, -6) property selector has-layout? zoom: 1
- 53. You are coming a long way, baby
- 54. Thanks!
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n