cascading style sheets robin burke ect 360. outline midterm css css selection positioning svg final...
TRANSCRIPT
![Page 1: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/1.jpg)
Cascading Style Sheets
Robin Burke
ECT 360
![Page 2: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/2.jpg)
Outline
Midterm CSS
CSS selection Positioning
SVG Final project
![Page 3: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/3.jpg)
Midterm
2/2 5:45 pm
open book
![Page 4: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/4.jpg)
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
![Page 5: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/5.jpg)
Benefit
HTML goes back to defining structure Layout and display decisions encoded
in the stylesheet Designer can easily change page
format without affecting HTML
![Page 6: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/6.jpg)
Syntax of CSS
selector { attribute:value; } Example
h1 { font-color:blue; } Multiple attribute/values pairs possible
![Page 7: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/7.jpg)
XHTML example
![Page 8: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/8.jpg)
CSS in XML
XML is a data-interchange languagenot intended for display
CSS can be usedmust provide all display information
![Page 9: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/9.jpg)
CSS in XML, cont'd
HTML distinguishes in-line vs block elements<b> vs <p>crucial for layout
XML has no such distinction
![Page 10: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/10.jpg)
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
![Page 11: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/11.jpg)
Inheritance
Elements inherit their stylessetting a style for the "body" element
changes the whole documentsame true for parent elements in XML
![Page 12: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/12.jpg)
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
![Page 13: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/13.jpg)
External
a separate document "style sheet" is useddocuments link to the style sheet
plusstyle can be shared across documents
minusanother document to manage &
distribute
![Page 14: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/14.jpg)
Stylesheet linking
Processing instructioninformation for the rendering
applicationnot part of the document content
Syntax<?xml-stylesheet type="text/css"
href="course.css"?>
![Page 15: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/15.jpg)
Examples
external style
![Page 16: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/16.jpg)
Lists
can choose different kinds of bullets can control nesting behavior Example
![Page 17: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/17.jpg)
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
![Page 18: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/18.jpg)
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
![Page 19: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/19.jpg)
Examples
section section-number {font-weight: bold; }
section[type="night"] { color: blue; }
instructor:first-letter { font-size:large; color: red; }
![Page 20: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/20.jpg)
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
![Page 21: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/21.jpg)
Examples
#me { font-weight: bold; }
section.day { color: red; }
section.night { color: blue; }
![Page 22: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/22.jpg)
Alignment and positioning
padding
border
margin
Block-level element
![Page 23: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/23.jpg)
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
![Page 24: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/24.jpg)
Example
![Page 25: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/25.jpg)
Break
![Page 26: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/26.jpg)
SVG
Scalable Vector Graphics Graphics
graphical display of all sortseven UI
Vectoras opposed to "raster"
Scalableimportant for multi-platform
![Page 27: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/27.jpg)
SVG
XML application Based on "paint/canvas" model A graphic is a set of painting
operationslayered on top of each other
![Page 28: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/28.jpg)
Viewing SVG
Browser plug-inAdobe (best)Corel
Drawing toolsCorelDrawAdobe Illustrator
![Page 29: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/29.jpg)
Basic tools
text line rect circle ellipse path
![Page 30: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/30.jpg)
Attributes
x, ystart position
fillthe color of the contents
strokethe color of the line / edge
many others
![Page 31: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/31.jpg)
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>
![Page 32: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/32.jpg)
A more complex example
course logo
![Page 33: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/33.jpg)
HTML embedding
![Page 34: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/34.jpg)
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
![Page 35: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/35.jpg)
Example
scaling JPEG vs SVG
![Page 36: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/36.jpg)
Path
a way to represent complex shapes straight line curved
![Page 37: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/37.jpg)
Example
ducks
![Page 38: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/38.jpg)
Abstract path
A path need not be drawn Can be used to arrange other
elementsesp. text
![Page 39: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/39.jpg)
Path example
course logo with textPath
![Page 40: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/40.jpg)
Grouping and transforming
g element is used to group elements Reasons
apply an attribute to alldefine a new coordinate systemtransform the group
![Page 41: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/41.jpg)
Transform examples
Coordinate shift Skew
![Page 42: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/42.jpg)
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.
![Page 43: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/43.jpg)
CSS example
course logo internal course logo external
![Page 44: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/44.jpg)
Linking
With imagesclickable image maps
Butimage map separate from image
![Page 45: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/45.jpg)
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
![Page 46: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/46.jpg)
Linking example
course logo with link
![Page 47: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/47.jpg)
Filters
Graphical effects created by filters Can be applied under SVG control A complex topic
Filter effects blur lighting compositing blending convolution noise, etc.
![Page 48: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/48.jpg)
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
![Page 49: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/49.jpg)
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
![Page 50: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/50.jpg)
Scripting examples
course logo with roll-over mines
![Page 51: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/51.jpg)
Animation
SVG also supports animationuses some ideas from SMIL
![Page 52: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/52.jpg)
Animation example
course logo spinning
![Page 53: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/53.jpg)
Final project
XML application your choice should have 50 objects
Schema Transformations
full listing summary SVG
Display controlled by CSS
![Page 54: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/54.jpg)
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
![Page 55: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/55.jpg)
Milestones
2/6teamdomain
2/23schema draftdocument draft
3/15final presentation
![Page 56: Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project](https://reader035.vdocuments.us/reader035/viewer/2022070404/56649f355503460f94c52788/html5/thumbnails/56.jpg)
Next week
Midterm open book, notes covers
XML syntaxvalidationCSSSVG