Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (18)
Destaque
Destaque (7)
Semelhante a OOP CSS Presenation
Semelhante a OOP CSS Presenation (20)
Último
Último (20)
OOP CSS Presenation
- 1. CSS Cascading Style Sheets Not like the mountain range.
- 2. What isn’t CSS A programming language It lacks variables, logic, operators, etc. A markup language It contains no “data” or “content” A standard (It’s a specification and no one agrees)
- 3. What is CSS A method to style any XML Presentation (not content) Universally dis-agreed upon Inheritance based, so conceptually similar as subclassing in OOP
- 4. CSS 1 & 2 & 3 Three major “versions” of CSS Completely different levels of implementation across browsers. CSS 1: 1996 CSS 2: 1998 CSS 3: Probably never.
- 6. Selectors Type <a></a> <div></div><h1></h1> “a” or “div” or “h1” Class <div class=”foo”></div> “.foo” IDs <div id=”logo”></div> “#logo”
- 7. Advanced Selectors Compound <h1 id=”header” class=”new”>Foo</h1> h1#header.new Psuedo <a href=”http://someothersite.com/></a> a[href^"=http://"] not: <a href=”/thisislocal.com”></a> not IE6 safe
- 9. CSS3 is really cool Rounded Corners Drop Shadows Multiple Columns Multiple Backgrounds
- 10. Why’s it called Cascading?
- 11. Cascading xml is hierarchical so css is hierarchical. Styles applied to parent elements cascade to their children. Styles applied at the most general level cascade to all elements that fit that general level.
- 12. Cascading <html> <head> <title>A first cascade</title> <style type="text/css"> p { font-size: 36px; color: red; background: yellow; } </style> </head> <body> This is body <br /> <p>This is a default styled paragraph</p> <p style="font-size: 24px;">This is 24px paragraph</p> <br /> This is more default body <br /> </body> </html>
- 13. So what’s this OOP OPP has inheritance. In object-oriented programming, inheritance is a way to form new classes (instances of which are called objects) using classes that have already been defined. The inheritance concept was invented in 1967 for Simula.
- 14. That’s not OOP Type selectors are basically super classes ID selectors are like instances of a class Class selectors are like modules
- 15. Box Model IE 6 is broken Almost all other browsers follow this Width/Height is cumulative
- 16. Box Model cont. none run-in block table inline inherit inline-block inline-table list-item
- 17. Floats Left Right None Clear? clearfix