CMPT 165 Advanced XHTML & CSS Part 4. Oct 20 th, 2015

Transcription

1 CMPT 165 Advanced XHTML & CSS Part 4 Oct 20 th, 2015

2 Quick Q/A on A /lisat/assign/A1.html

3 Example of creativity It was a very cold day and Napoleon was preparing with his army to invade the Russian mainland. Looking out the horizon from his camp, he said, "Wow, it feels like -10 out there. Where could we get hot soups these days for 99??? And would it not be wonderful if we could get authentic ones from Île de France? Hearing this, one of Napoleon's servants went to prepare some soup and pie. Unfortunately, they ran out of pies. So the servant asked his fellow servants, "Does anyone remember seeing any pies around?" One of his fellowmen responded, "All I remember from Calculus is that π has something to do with circles, and that 3 < π < 4. What about you? Do you remember any of that Without much to eat, Napoleon went to war hungry. Because of that, they lost their invasion campaign against Russia.

4 Last item to add to A1 Add one of below to your A1: Quotes Career aspirations Links to share: videos, commentary on products, sound clouds Autobiography Inspirations Photo gallery: life photos, passion, etc. Physical statistics: e.g. height, weight, etc. Voluntary work More precise requirements on A1 instruction

5 Highlights of CSS seen so far

6 Positioning

7 Positioning elements #box1{ background-; width: 500px; height: 500px; position: absolute; left: 100px; /*horizontal direction where box1 starts*/ top: 10px; /*vertical direction where box1 starts*/

8 Positioning elements <div id="box1"></div> <div id="box2"></div> Q: Box2 to stay on top? 100px 10px 30px #box1{ width: 500px; height: 500px; position: absolute; background-; left: 100px; top: 10px; #box2{ width: 500px; height: 500px; position: absolute; background-color: orange; left: 100px; top: 30px;

9 Positioning elements <div id="box1"></div> <div id="box2"></div> Q: Box2 to stay on top? 100px 10px 30px #box1{ width: 500px; height: 500px; position: absolute; background-; left: 100px; top: 10px; #box2{ width: 500px; height: 500px; position: absolute; background-color: orange; left: 100px; top: 30px; Z-index: 99;

10 CSS selectors Class vs. id Contextual selectors > + CSS Highlights Class and pseudo-class Elements and pseudo-elements CSS inheritance and specificity Inheritance: Cascade to next level if not specified Specificity: more specific selectors overrides less specific ones

11 Contextual selectors: recap ul li li { ul#greatgranny li#granny <ul id="greatgranny"> <li id="granny">heading <ol id="parent"> <li id="me">subheading <p id="child"> a</p> <p id="child2">b</p> </li> </ol> </li> </ul> ol#parent li#me p#child

12 Contextual selectors: recap ul li { ul#greatgranny li#granny ol#parent li#me p#child

13 Contextual selectors: recap ul li { ul li li { color: blue /*This is more specific */ ul#greatgranny li#granny ol#parent li#me color: blue p#child color: blue

14 Contextual selectors: next child Represented by symbol + body em + tt { ; p p p Q: Is <em> selected? em tt#parent Q: tell me in English?? A: "All <tt> tag that is the next child of <em>" 14 em tt#child

15 Contextual selectors: next child Represented by symbol + body em + tt { ; /* selects #parent */ p > em + tt { ; p p p /* selects #child */ tt em + tt { ; em tt#parent Q: Apply to #parent only? (Do not use #parent in your answer) em tt#child 15

16 Contextual selectors More examples: ul li > ol > li > ul > li { ; ul li > ol li { ; ul li li { ; ul li > ul ul li { ; ul li > ul ol li { ; ul li + li { ; /*first <li> selected?*/ ul li > li { ; /* valid? */ ul > ul li { ; /* valid? */

17 CSS Highlights CSS selectors Class vs. id Contextual selectors Immediate child (>) Next child (+) CSS inheritance and specificity Inheritance: Cascade to next level if not specified Specificity: more specific selectors overrides less specific ones

18 Measuring specificity Scoring system: An id is worth 100 Each class is worth 10 Each element is worth 1 Selector Id Class Element Total body #h1b h h1.key body { font-family:sans-serif; color: blue; #h1b { color: blue; h1 { color: green; h1.key { ; h1 with class key is more specific to: h1 (001).key (010) is larger than 011. Declaration in 2 nd style rule wins!

19 Questions for me?

20 Q: What are these? Pseudo-classes: Often used in anchors <a>: :link :visited :active :hover Other ones: :first-child :next-child

21 Q: What are these? Pseudo-classes: Often used in anchors <a>: :link :visited :active :hover Other ones: :first-child :next-child unvisited link visited link mouse clicked on link mouse hover on link

22 Pseudo-elements Not an actual element but behaves like one Usage: style specific parts of an element Ones you may find most useful: :first-letter :first-line :before :after 22

23 Pseudo-elements Style the first letter, first line of an element p:first-letter{ /*s sasfas */ color: green; font-size: xx-large; 23

24 Pseudo-elements Style the first letter, first line of an element p:first-letter{ color: green; font-size: xx-large p:first-line{ color: blue; font-variant: small-caps; 24

25 CSS Highlights CSS selectors Class vs. id Contextual selectors Immediate child (>) Next child (+) Class and pseudo-class And what are pseudo-class really? State: has history Elements and pseudo-elements CSS inheritance and specificity Inheritance: Cascade to next level if not specified Specificity: more specific selectors overrides less specific ones

26 Summary of CSS selectors Ancestor-descendent: selector1 selector2 selectorm { property: value; Immediate child: selector1 > selector2 > selectorn { property: value; Siblings: selector1 + selector2 + selectorp { property: value; Pseudo-element: selector:pseudo_element { property: value; Pseudo-class: selector:pseudo_class { property: value; Specificity: same as element In CSS3, distinction between 2 is made via: selector::pseudo_element { property: value; Specificity: same as class

27 What is the specificity score? ul:first-child li::first-letter Ans: 1 pseudo-class + 2 elements + 1 pseudo-element: 013 #nav.selected > a:hover Ans: 1 id + 1 class + 1 pseudo-class + 1 element: 121

28 Questions?