Mdst 3559-02-08-css
-
Upload
rafael-alvarado -
Category
Documents
-
view
267 -
download
0
Transcript of Mdst 3559-02-08-css
![Page 1: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/1.jpg)
HTML and CSS
MDST 3559: DataestheticsProf. Alvarado
02/08/2011
![Page 2: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/2.jpg)
Business
• Revised syllabus– Will move from HTML to PHP – Then move down the stack into SQL
![Page 3: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/3.jpg)
Review
• jEdit• HTML• Basic CSS• Touched on idea of documents as data
structures
![Page 4: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/4.jpg)
CSS Box Model
![Page 5: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/5.jpg)
Overview
• Data structures and transformations• Data, addressability, and paths• CSS selectors to control look and feel• CSS selectors to control behavior
![Page 6: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/6.jpg)
• x
![Page 7: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/7.jpg)
Structures
• We have seen three basic structures so far:– Linear sequence of content (e.g. news article)– Tree structure of source code (HTML)– Tabular structure of CSV
• How are these related?– What depends on what?– How are they combined?
![Page 8: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/8.jpg)
Structures and Transforms
• The news article is an interpreted version of the tree– The tree is transformed into a sequence by means
of rules defined by CSS and other standards• CSV is actually a tree as well– Table• Row +
– Cell +
Where the number of cells is the same throughout
![Page 9: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/9.jpg)
• x Interpretation
![Page 10: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/10.jpg)
How do the rules work?
What does “interpretation” mean in this context?
![Page 11: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/11.jpg)
“Interpretation”
• Every data structure consists of elements• In a data structure, every element has an
address• A transformation is achieved by applying one
or more rule to a data structure• Rules reference elements by address– Either directly or by means of patterns ...
![Page 12: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/12.jpg)
Example transform rules
• For every element of pattern X, display using font Y
• For every element at location R and C, express as a point on a graph at position X and Y
![Page 13: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/13.jpg)
The key idea is selection
What to pick from the whole and what to do with it
![Page 14: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/14.jpg)
So, how does CSS do this?
How does it select?
![Page 15: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/15.jpg)
With Selectors
• Patternselector {
key: value;}
• Examplebody {
font-size: 12pt;}
![Page 16: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/16.jpg)
CSS Selectors: Basic
XElements of type X
#XElement with ID X
.XElements of Class X
*Every element
X Y Y is child of X
X > YY is immediate child
X + YY follows X
X ~ YY immediately follows
![Page 17: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/17.jpg)
CSS Selectors: Attributes
X[title]X has title
X[href=“foo”]X has href of ‘foo’
X[href*=”foo"]href contains ‘foo’
X[href^="http"]href begins with ...
X[href$=".jpg”]href ends with
X[data-*="foo"]Attribute matches
X[foo~="bar"]Attribute among valuese.g. attr=“v1 v2 v3”
![Page 18: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/18.jpg)
CSS Selectors: Pseudo
X:linkunclicked anchor
X:visitedclicked anchor
X:hoveron mouse hover
X:checkedchecked input
X:beforeX:after
Before and after the element
Works with the content property
E.g. content:”foo”;
![Page 19: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/19.jpg)
CSS Selectors: Double Colon
• X::first-letter• X::first-line
![Page 20: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/20.jpg)
Exercise• Download Aristlotle’s Poetics, Section I, Parts I & II• Mark up using DIVs with following classes and IDs
#front-matter#(title).creator +, #(role)#(date)
#content.section +, #(section-N)
.section-title
.part +, #(part-N).part-titlep +
![Page 21: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/21.jpg)
Exercise (cont’d)
• Then create a CSS element in the header to style each class and ID
• Vary the following properties– font-size– font-weight– font-family– padding– margin– first-letter of a section
![Page 22: Mdst 3559-02-08-css](https://reader034.fdocuments.us/reader034/viewer/2022052622/559287761a28ab5e468b46d2/html5/thumbnails/22.jpg)
Assignment (to be posted)• Create a page collection in your STUDIO1 directory with the following items:
– Main page main1.html– Topic page 1 main1-topic1.html– Topic page 2 main1-topic2.html
• For each page, create a TITLE element and an H1 element, titling each page as your wish.
• In Topic page 1– Embed two visualizations– Write 250 words of context
• In Topic page 2– Create a gallery of 4 images using a 2 x 2 tables
• Create a common style sheet for each page and define font and color styles for the following elements:– BODY, H1, and P
• Create a common menu in each page that links to the other pages