DOC PREVIEW
USF CS 682 - Distributed Software Development

This preview shows page 1-2-19-20 out of 20 pages.

Save
View full document
View full document
Premium Document
Do you want full access? Go Premium and unlock all 20 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 20 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 20 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 20 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 20 pages.
Access to all documents
Download any document
Ad free experience

Unformatted text preview:

{small lecturenumber - heblocknumber :} CSSaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Display and the Webaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Invasion of the Web Designersaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Invasion of the Web Designersaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} CSSaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} CSS rulesaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} A Simple ruleaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Matching on document structureaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Matching on classaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Matching on IDaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Matching on Pseudo-classesaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Declaration Blocksaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Conflict resolutionaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Conflict resolutionaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Cascadingaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Page layoutaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Floatingaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Positioningaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Summaryaddtocounter {blocknumber}{1}Distributed Software DevelopmentCSSChris BrooksDepartment of Computer ScienceUniversity of San FranciscoDepartment of Computer Science — University of San Francisco – p.1/??3-0: CSSCSS stands for Cascading Style SheetsProvides a way to specify how related document elementsshould be displayed.Makes design and maintenance easierAlso gives us an opportunity to introduce some topicswe’ll revisit in other forms:Documents as treesSpecifying paths to nodes in treesSeparating out the meaning of a tag from its use.Department of Computer Science — University of San Francisco – p.2/??3-1: Display and the WebHTML and the Web were initially developed at CERN in1990.Goal - allow information to be shared across a widevariety of platforms and displays.HTML deliberately left out specific layout instructionsParticular rendering of a document was dependent onclient’s capabilities.Information could be displayed on a wide variety ofdevices, but there was little presentational control.Department of Computer Science — University of San Francisco – p.3/??3-2: Invasion of the Web DesignersEarly versions of Yahoo! look very different from today.Single font, no table layout, background colors, menus,dynamic behavior, etc.Later versions of HTML added presentational elements.Ability to specify fonts within paragraph elements,control color more easily, use tables for layout, etc.Problem: these new elements don’t convey structuralinformation about a document.Department of Computer Science — University of San Francisco – p.4/??3-3: Invasion of the Web DesignersPreviously: <h1> Here’s a heading of a section</h1>Replacing this with <font size="+3" face="Times"color="blue"> Here’s the heading </font>gives the designer more control.But: the markup information is lost.Indexing is more difficult.No information for devices that can’t render Times, ormultiple-sized fonts.Also, difficult to maintain.Department of Computer Science — University of San Francisco – p.5/??3-4: CSSCSS provides the best of both worlds.Within the document, tags are specifed with structuralmarkup elements.<h1> Here’s a heading </h1>CSS lets you separately specify how to display H1elements.h1 {color: red; font: bold Times,serif;background: #FFEEFF}Display is controlled in a single locationClients that can’t render some aspect of a display can fallback on HTML.Department of Computer Science — University of San Francisco – p.6/??3-5: CSS rulesCSS is essentially a set of if-then rules that tell:What parts of a document to matchHow to format elements that match a rule.The cascade details how to deal with conflicts betweenrules.Department of Computer Science — University of San Francisco – p.7/??3-6: A Simple ruleA simple rule to force all H1 elements to be large, red,sans-serif font would be:h1 {font-size: large;font-color: red; font-family:sans-serif;}h1 is a selectorThe portion inside brackets is a declaration block.Consists of a set of key-value pairs.You can also specify a set of elements to be matched:h2, h3 {color: blue}Department of Computer Science — University of San Francisco – p.8/??3-7: Matching on document structureHTML documents have a hierarchical structureElements are nested within one anotherWe can consider an HTML document as a tree.We can then write selectors that match portions of thistree.ul li {font-size: small } This matches alllist elements underneath a UL tag.ol li ul li {font-style: oblique} Similar.p > em {font-style: oblique; color:green} Matches children only.h3 + p {text-indent: 12px } matchessiblings.Department of Computer Science — University of San Francisco – p.9/??3-8: Matching on classYou can also assign class attribute/value pairs to elementsand match on that.Period separates element type from class.<div> is useful for this.div.cb {font-size: 110%;}HTML:<div class="cb"> 30% labs </div>Department of Computer Science — University of San Francisco – p.10/??3-9: Matching on IDYou can also assign unique identifiers to an element andmatch on those.Pound sign separates element type from ID.ul#leclist {margin: 0px 0px 5px 150px;background-color: #CCBBBB;}HTML: <ul id="leclist"> ... </div>IDs are unique.Many elements can share a class.Department of Computer Science — University of San Francisco – p.11/??3-10: Matching on Pseudo-classesCSS also lets you match on pseudoclasses (moreaccurately called state)This includes things like whether the mouse is hoveringover an element, or whether a link has been visited:a {color: #663366} a:visited {color:#333366}p:hover {background-color: #CCCCCC}Department of Computer Science — University of San Francisco – p.12/??3-11: Declaration BlocksThe fun of CSS comes in specifying how differentelements should be rendered.You can control all the things you’d expect, plus someothers.Fonts: size, color, family, styleText alignment: indentation,


View Full Document

USF CS 682 - Distributed Software Development

Documents in this Course
Load more
Download Distributed Software Development
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Distributed Software Development and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Distributed Software Development 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?