cmpt 165 - simon fraser university€¦ · css highlights •css selectors –class vs. id...
TRANSCRIPT
CMPT 165 Advanced XHTML & CSS – Part 4
Oct 20th, 2015
Quick Q/A on A1
http://www.cs.sfu.ca/CourseCentral/165/lisat/assign/A1.html
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.”
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
Highlights of CSS seen so far…
Positioning
Positioning elements
#box1{
background-color: red;
width: 500px;
height: 500px;
position: absolute;
left: 100px; /*horizontal direction where box1 starts*/
top: 10px; /*vertical direction where box1 starts*/
}
#box1{
width: 500px;
height: 500px;
position: absolute;
background-color: red;
left: 100px;
top: 10px;
}
#box2{
width: 500px;
height: 500px;
position: absolute;
background-color: orange;
left: 100px;
top: 30px;
}
Positioning elements
<div id="box1"></div>
<div id="box2"></div>
30px
10px
100px
Q: Box2 to stay on top?
#box1{
width: 500px;
height: 500px;
position: absolute;
background-color: red;
left: 100px;
top: 10px;
}
#box2{
width: 500px;
height: 500px;
position: absolute;
background-color: orange;
left: 100px;
top: 30px;
Z-index: 99;
}
Positioning elements
<div id="box1"></div>
<div id="box2"></div>
30px
10px
100px
Q: Box2 to stay on top?
CSS Highlights
• CSS selectors
– Class vs. id
– Contextual selectors >
+
– 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
Contextual selectors: recap
ul li li {
color: red
}
li#me
p#child
li#granny
ol#parent
ul#greatgranny
color: red
color: red
<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>
Contextual selectors: recap
li#me
p#child
li#granny
ol#parent
ul#greatgranny
color: red
color: red
color: red
color: red
ul li {
color: red
}
Contextual selectors: recap
li#me
p#child
li#granny
ol#parent
ul#greatgranny
color: blue
color: blue
color: red
color: red
ul li {
color: red
}
ul li li {
color: blue
}
/*This is more specific */
Q: tell me in English?? A: "All <tt> tag that is the next child of <em>"
em
Contextual selectors: next child
Represented by symbol +
14
p
p
body
em
tt#parent
color: red
em + tt {
color: red;
}
p
tt#child
color: red
Q: Is <em> selected?
Q: Apply to #parent only? (Do not use #parent in your answer) em
Contextual selectors: next child
Represented by symbol +
15
p
p
body
em
tt#parent
color: red
em + tt {
color: red;
}
p
tt#child
color: red
/* selects #parent */
p > em + tt {
color: red;
}
/* selects #child */
tt em + tt {
color: red;
}
Contextual selectors More examples:
ul li > ol > li > ul > li { color: red; }
ul li > ol li { color: red; }
ul li li { color: red; }
ul li > ul ul li { color: red; }
ul li > ul ol li { color: red; }
ul li + li { color: red; } /*first <li> selected?*/
ul li > li { color: red; } /* valid? */
ul > ul li { color: red; } /* valid? */
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
Selector Id Class Element Total
0 0 1 001
Measuring specificity
18
body {
font-family:sans-serif;
color: blue;
}
#h1b { color: blue; }
h1 { color: green; }
h1.key { color: red; }
body
#h1b 100 0 0 100
h1
0 0 1 001
h1.key
0 1 1 011
100 is larger than 011. Declaration in 2nd
style rule wins!
An id is worth 100 | Each class is worth 10 | Each element is worth 1
Scoring system:
h1 with class “key” is more specific to:
h1 (001) .key (010)
Questions for me?
Q: What are these?
Pseudo-classes:
Often used in anchors <a>:
:link
:visited
:active
:hover
Other ones:
:first-child
:next-child
…
Q: What are these?
Pseudo-classes:
Often used in anchors <a>:
:link unvisited link
:visited visited link
:active mouse clicked on link
:hover mouse hover on link
Other ones:
:first-child
:next-child
…
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
Pseudo-elements Style the first letter, first line of an element
23
p:first-letter{ /*s sasfas */
color: green;
font-size: xx-large;
}
Pseudo-elements Style the first letter, first line of an element
24
p:first-letter{
color: green;
font-size: xx-large
}
p:first-line{
color: blue;
font-variant: small-caps;
}
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
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;
}
selector::pseudo_element {
property: value;
}
In CSS3, distinction between 2 is made via:
Specificity: same as class
Specificity: same as element
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
Questions?