1 / 12

CIS 228

The Internet 10/20/11 CSS Layout. CIS 228. CSS Selectors. Rule: selector-group { property-declaration * } Selector-group: selector * , Selector: simple-selector * operator Operator: descendant (“”) | child (“>”) | sibling (“+”)

vstover
Download Presentation

CIS 228

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The Internet 10/20/11 CSS Layout CIS 228

  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> • <p> … </p> • </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 • 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 • 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 • 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 • 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)

More Related