Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final...
-
Upload
shanon-barton -
Category
Documents
-
view
217 -
download
0
Transcript of Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final...
Cascading Style Sheets
Robin Burke
ECT 360
Outline
Midterm CSS
CSS selection Positioning
SVG Final project
Midterm
2/2 5:45 pm
open book
What is a style?
An association between a set of display properties a logical unit of document content
Not document content
Some exceptions numbered lists, captions, etc.
CSS originated for adding style to HTML documents
Benefit
HTML goes back to defining structure Layout and display decisions encoded
in the stylesheet Designer can easily change page
format without affecting HTML
Syntax of CSS
selector { attribute:value; } Example
h1 { font-color:blue; } Multiple attribute/values pairs possible
XHTML example
CSS in XML
XML is a data-interchange languagenot intended for display
CSS can be usedmust provide all display information
CSS in XML, cont'd
HTML distinguishes in-line vs block elements<b> vs <p>crucial for layout
XML has no such distinction
Display attribute
block display content in a separate chunk
in-line display content as part of the parent element
list-item display content as part of a list
none hide content
Inheritance
Elements inherit their stylessetting a style for the "body" element
changes the whole documentsame true for parent elements in XML
Embedded style
style is declared within a given XML document
plusstyle information centralized
minuscan't be reused on other documentsno standardized way to do this
External
a separate document "style sheet" is useddocuments link to the style sheet
plusstyle can be shared across documents
minusanother document to manage &
distribute
Stylesheet linking
Processing instructioninformation for the rendering
applicationnot part of the document content
Syntax<?xml-stylesheet type="text/css"
href="course.css"?>
Examples
external style
Lists
can choose different kinds of bullets can control nesting behavior Example
CSS Rules: Selectors
any element name element with particular attribute
foo[bar="baz"] not implemented in IE 6.0
element relationshipsa ba > ba + b
designer-defined classes
CSS Pseudo-elements
Pseudo-elementsa class name that is pre-defined but
isn't a tag Example
first-linefirst-letter
Also not implemented in IE 6.0
Examples
section section-number {font-weight: bold; }
section[type="night"] { color: blue; }
instructor:first-letter { font-size:large; color: red; }
CSS Classes and Ids
A class is a user-defined nameidentifies certain elements for stylingin document, <foo class="bar">in stylesheet, foo.bar
ID must be unique in documentuse for identify a single element to
have a particular style#id
Examples
#me { font-weight: bold; }
section.day { color: red; }
section.night { color: blue; }
Alignment and positioning
padding
border
margin
Block-level element
Layering
Boxes can overlap each othertransparent regions will show throughlayering
• negative margin does this
Boxes can be positioned absolutelyalso causes layering
• position: absolute• specific position on page
Example
Break
SVG
Scalable Vector Graphics Graphics
graphical display of all sortseven UI
Vectoras opposed to "raster"
Scalableimportant for multi-platform
SVG
XML application Based on "paint/canvas" model A graphic is a set of painting
operationslayered on top of each other
Viewing SVG
Browser plug-inAdobe (best)Corel
Drawing toolsCorelDrawAdobe Illustrator
Basic tools
text line rect circle ellipse path
Attributes
x, ystart position
fillthe color of the contents
strokethe color of the line / edge
many others
Simple example
a box containing text<svg width="475px" height="75px"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect
fill="blue" stroke="black" stroke-width="5"
x="0" y="0" width="475" height="75"/>
<text x="10" y="20"
fill="white" font-size="18">
Hello world
</text>
</svg>
A more complex example
course logo
HTML embedding
Scalability
All images are pixelsrasterization
When are pixels created?jpg, gif, png, etc. at creation timesvg at display time
Benefitsno loss of clarity at high scalesmaller files esp. for simple drawings
Example
scaling JPEG vs SVG
Path
a way to represent complex shapes straight line curved
Example
ducks
Abstract path
A path need not be drawn Can be used to arrange other
elementsesp. text
Path example
course logo with textPath
Grouping and transforming
g element is used to group elements Reasons
apply an attribute to alldefine a new coordinate systemtransform the group
Transform examples
Coordinate shift Skew
Combining CSS and SVG
SVG elementscan have CSS styles applied
Internal or external style Familiar properties
color, font-family, etc. also SVG specific
fill, stroke, fill-opacity, etc.
CSS example
course logo internal course logo external
Linking
With imagesclickable image maps
Butimage map separate from image
Linking, cont'd
A elementas in HTMLbut based on XLink standard
Example<a xlink:href="myurl">
<rect ...></rect>
</a>
Clicking in the rectangle goes to URL
Linking example
course logo with link
Filters
Graphical effects created by filters Can be applied under SVG control A complex topic
Filter effects blur lighting compositing blending convolution noise, etc.
Filter example
course logo with specular effect Steps
get the silhouette of the image and blur it offset blur to create shadow apply lighting to blur to get highlight trim highlights to fit image add highlight back to original image combine with shadow
Scripting
SVG graphics can be scriptedusing JavaScript / ECMAScript
Same techniques as used in HTMLevent handling via onclick,
onmouseover, ec. Difference
now interacting with SVG DOMnot HTML DOM
Scripting examples
course logo with roll-over mines
Animation
SVG also supports animationuses some ideas from SMIL
Animation example
course logo spinning
Final project
XML application your choice should have 50 objects
Schema Transformations
full listing summary SVG
Display controlled by CSS
Final project, cont'd
SchemaDocument
Transform #1(XSLT)
Full Listing(XHTML)
Full ListingStyle (CSS)
Full ListingDisplay
Transform #2(XSLT)
Summary(XHTML)
SummaryStyle (CSS)
SummaryDisplay
Transform #3(XSLT)
GraphicalSummary
(SVG)
GraphicalStyle (CSS)
GraphicalDisplay
validates
Milestones
2/6teamdomain
2/23schema draftdocument draft
3/15final presentation
Next week
Midterm open book, notes covers
XML syntaxvalidationCSSSVG