Download presentation
Presentation is loading. Please wait.
1
The Internet 10/20/11 CSS Layout
CIS 228 The Internet 10/20/11 CSS Layout
2
CSS Selectors Rule: selector-group { property-declaration* }
Selector-group: selector * , Selector: simple-selector * operator Operator: descendant (“”) | child (“>”) | sibling (“+”) Simple-selector: (universal (“*”|“”)|type) context* (type is an XHTML element name) Context selectors Id-selector: #identifier Class-selector: .identifier Pseudo-class: :identifier (e.g. :link, :visited, :hover, etc.) Attribute-selector: [identifier]
3
XHTML Grouping Block grouping: div element
<div class=“cats”> <h1>Cats For Sale</h1> <h2>Six week old Tabby</h2> <p> … </p> <h2>Eight week old Siamese</h2> </div> Inline grouping: span element <span class=“x”><em>Trotsky</em> arrived</span>
4
The Style Attribute Three ways to attach CSS rules to a web page
The style element (in <head>) The link element (in <head>) The style attribute (on an element in <body>) Attribute value: CSS declaration(s) <p style=“color: red;”> <li style= “color:red; font-style: italic;”> Deprecated (try to avoid using) Violates separation of semantics from presentation
5
The Cascade Which declaration for property p applies on element e?
Concatenate style sheets: Browser defaults User style sheet Applicable author style sheet(s) External before internal (<link>'s before <style>'s) Gather declarations whose selectors match the e If any are “! important”, ignore the rest (You can mark declarations “! important”, but don't!) Ignore all but the most specific declarations The physically last remaining declaration wins
6
Selector Specificity Rules specified by style attributes are most specific If there is one, ignore the rest Id-selectors are most important Ignore rules with less than the most id-selectors Context-selectors are very important Ignore rules with less than the most context-selectors Type selectors are important Ignore rules containing less than the most type-selectors Remember: last remaining rule wins
7
Pseudo Classes and Elements
Refer to state not represented in the element tree Pseudo-classe selectors :link, :visited, :hover register the state of hyperlinks e.g. a:link { color: C4C } :first-child selects the first element of its parent e.g. blockquote > p:first-child { indent: 4em } Pseudo-element selectors (must come last) :first-letter, :first-line e.g. p.first-letter { font-size: 5em } :before, :after (not supported by IE) e.g. blockquote:before { content: open-quote }
8
Attribute Selectors Match elements based on their attribute
[title] elements with a title attribute e.g. li > a[title] [title=UN] matches elements with title UN e.g. p[class=loser] (same as p.loser) [title~=UN] matches element with UN in the title In a value that is a list of identifiers separated by “ ” [lang|=en] matches elements containing en in lang In a value that is a list of identifiers separated by “-”
9
Normal Flow Block elements Inline elements Arranged vertically
Line break between successive elements Margins overlap Ignore floats Inline elements Arranged horizontally Lines wrap (if they get too long) Margins add Respect float boundaries
10
Floats Floats are Clear property removed from the normal flow
pushed to the right (or left) of the page at the point they were removed ignored by block elements in the normal flow avoided by inline elements in the normal flow float: right ; Clear property delays a block element until after any float clear: right ;
11
Creating a Sidebar In XHTML In CSS
1 Wrap sidebar content in a div element 2 Give div element an id attribute (e.g. id= “sidebar”) 3 Move div element to where sidebar should start In CSS 4 Set width property of the sidebar 5 Set float property of the sidebar 6 Increase margin for content next to the sidebar 7 Set clear property for content immediately below sidebar
12
The Position Property Absolute Fixed Relative Static
top (right, bottom, left) relative to containing positioned element z-index property orders absolutely positioned elements Fixed Top (right, bottom, left) relative to viewport (browser window) Relative Top (right, bottom, left) relative to element's normal flow position Static Default (normal flow position)
Similar presentations
