Docstoc

Advanced_CSS

Document Sample
Advanced_CSS Powered By Docstoc
					Advanced CSS: Beyond Simple Classes

Katya Sadovsky katya@uci.edu

University of California  Irvine

University of California, Irvine
• • • • • • • • Located in Southern California Year Founded: 1965 Enrollment: over 24K students 1,400 Faculty (Academic Senate) 8,300 Staff 6,000 degrees awarded annually Carnegie Classification: Doctoral/Research – Extensive Extramural Funding - 311M in 2005-2006

•

Undergoing significant enrollment growth

University of California  Irvine

Agenda
• Brief overview of the Cascading Style Sheets (CSS) 2 syntax • Selectors & cascading • Block vs Inline elements

• CSS box model
• Element presentation: float, position, etc. • Generated content

• Tips and tricks
University of California  Irvine

What is CSS
• Cascading Style Sheets, or CSS, are a series of instructions that specify how markup elements should appear on a Web page. • For the purposes of this presentation, I will focus on CSS level 2 specification.

University of California  Irvine

The Sad Truth About IE
• Internet Explorer (even IE7) is still not CSS compliant • Some of the areas not supported:
– Child selectors

– Attribute selectors
– Counters

University of California  Irvine

Brief overview of the CSS2 syntax Ruleset syntax:
selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S* S* = [ \t\r\n\f]+ declaration = property ':' S* value;

Example:

selector declaration

.uportal-text-small {

color : Black; font-family : Verdana, Geneva, Arial, Helvetica; font-size : 10px; }

property
University of California  Irvine

Selectors & cascading
• Selectors are a way to match styles to elements in the document tree • Different types of selectors:
– – – – – – – – – Universal selector Type selectors Descendant selectors Child selectors Adjacent sibling selectors Attribute selectors ID selectors Pseudo-elements Pseudo-classes

• Spaces matter!
– P#myid – selects a P element with id equal to “myid” – P #myid – selects an element with id equal to “myid” that is a

descendant of P

University of California  Irvine

Selectors & cascading
Pattern Meaning

* E EF

Universal selector: matches any element. Type selector: matches any E element (i.e., an element of type E; e.g. H1 or P). Descendant selector: matches any F element that is a descendant of an E element.

E>F
E+F E[foo] E[foo="warning"] E[foo~="warning"] E[lang|="en"] DIV.warning E#myid E:lang(c) E:first-child E:link, E:visited E:active, E:hover, E:focus E:first-line, E:first-letter

Child selector: matches any F element that is a child of an element E.
Adjacent siblings selector: Matches any F element immediately preceded by an element E. Attribute selector: matches any E element with the "foo" attribute set (whatever the value). Attribute selector: matches any E element whose "foo" attribute value is exactly equal to "warning". Attribute selector: matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". Attribute selector: matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en“ (e.g. en-US). HTML only. The same as DIV[class~="warning"]. ID selector: matches any E element ID equal to "myid". Pseudo-class selector: matches element of type E if it is in (human) language c (the document language specifies how language is determined). Pseudo-class selector: matches element E when E is the first child of its parent. Pseudo-class selector: matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). Dynamic Pseudo-class selector: matches E during certain user actions. Pseudo-element selector: matches the first formatted line or letter of element E.

Works in most browsers (incl. IE)

University of California  Irvine

Cascading and Inheritance
• When there are multiple rules that could apply to the same element and/or property and media type, sort declarations on ():
1. Weight (normal, !important) and origin (author, user,
user agent)
normal: author -> user -> user agent !important: user -> author -> user agent

NOTE: user agents supply a “default” style sheet

2. Selector specificity: more specific selectors have
precedence

3. Order specified: styles specified later in the order
have precedence
University of California  Irvine

Cascading and Inheritance
• A simplified view of the preceding “formula”:

STYLE attribute
overrides <STYLE> block overrides Linked stylesheet overrides Imported stylesheet

University of California  Irvine

Logical vs Physical Tags
• “Logical” tags convey the structure and semantic information of the document (H1-H6, P, STRONG) • “Physical” tags specify the visual presentation of document elements but do not convey the meaning of the document or its parts (B, U, FONT, BR) • Do not use physical tags to solely describe the visual presentation of content (be mindful of alternative user agents such as speech readers or text-only browsers)

University of California  Irvine

Block vs Inline elements
• Block-level elements are presented visually as blocks; i.e. they generate a line break before and after themselves (<p>, <ul>, etc) – Can contain other block-level and inline elements – Act as containing blocks for nested elements

• All other elements, are inline elements; no line breaks are generated before and after (<span>)
– Cannot contain other block-level elements • “Replaced” elements are those that are replaced by the content they point to (<img>, <applet>, etc)

University of California  Irvine

CSS box model
margin padding

content

border

Also, see 3D diagram at http://www.hicksdesign.co.uk/journal/3d-css-box-model
University of California  Irvine

Containing & Anonymous block boxes
• Block boxes can serve as containing blocks for child boxes
– Note: if a block box has another block box inside it, then they are forced to have only block boxes inside it, by wrapping any inline boxes in an anonymous block box
<div> some text <p>paragraph</p> other text </div>

University of California  Irvine

Notes on boxes
• There are cases when adjacent margins collapse

• Relative positioning is calculated with respect to the content edge

University of California  Irvine

Positioning schemes
• Positioning schemes in CSS include:
– Normal flow (includes relative positioning)
– Floating – Absolute positioning

University of California  Irvine

Floating
• float property allows element boxes to be shifted to the right or left on the current line
– Floated boxes are block boxes – Floated boxes are “pulled out” of the normal flow and repositioned – Must have explicit width – May overlap other boxes

• clear property specifies which side(s) of an element should NOT be adjacent to a floating box that is specified earlier in the document
University of California  Irvine

Relative and Absolute Positioning
• position property:
– static – box is positioned according to normal flow
– relative – box is positioned relative to where it would have been placed in the normal flow – absolute – box is positioned relative to its containing block; these boxes are taken out of flow – fixed – box is fixed in relation to the viewport (a browser window or a printed page)

University of California  Irvine

Element presentation
• display property controls what type of box is generated for an element
– Values: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-headergroup | table-footer-group | table-row | table-columngroup | table-column | table-cell | table-caption | none | inherit

University of California  Irvine

Generated content
• CSS allows authors to generate content that is not part of the document tree using the following entities:
– :before pseudo-element – :after pseudo-element – content property

University of California  Irvine

Tips and tricks
• Trick for extending a DIV over floating child divs: – IE:
div.main {
height: 100%; … }

– Firefox:
div.main:after {
content: ""; display: block; height: 0; clear: both; visibility: hidden; }
University of California  Irvine

Useful URLs
• CSS resources:
– http://www.w3.org/TR/REC-CSS2/ – http://www.yourhtmlsource.com/stylesheets – http://meyerweb.com/eric/css/ – http://webtips.dantobias.com/logical.html – http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm – http://www.w3.org/2005/Talks/11-steven-css-advanced/ – http://www.hicksdesign.co.uk/journal/3d-css-box-model – http://greystate.dk/resources/css-boxmodel/ – http://www.csszengarden.com/?cssfile=062/062.css
University of California  Irvine


				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:67
posted:8/2/2009
language:English
pages:22