advanced xhtml & css part 3 - simon fraser university · advanced xhtml & css – part 3...
Post on 09-Apr-2018
219 Views
Preview:
TRANSCRIPT
CMPT 165 D1 (Fall 2015)
CMPT 165 Advanced XHTML & CSS – Part 3
Oct 15th, 2015
CMPT 165 D1 (Fall 2015)
Today’s Agenda
• Quick Recap of last week: – Tree diagram
– Contextual selectors
• CSS: Inheritance & Specificity
• Review 1 exam question
• Q/A for Assignment 1
CMPT 165 D1 (Fall 2015)
CMPT 165 D1 (Fall 2015)
<ol>
<li>Item
<ul>
<li> Item </li>
<li> Item </li>
<li> Item
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
</li>
<li>Item
<ul>
<li> Item </li>
<li> Item
<ol>
<li>Item</li>
</ol>
</li>
</ul>
</li>
</ol>
Contextual selectors
4
ul li { color: red;
}
ul li ul { color: red;
}
ul …element… li { color: red;
}
This is equivalent to above:
CMPT 165 D1 (Fall 2015)
<ol>
<li>Item
<ul>
<li> Item </li>
<li> Item </li>
<li> Item
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
</li>
<li>Item
<ul>
<li> Item </li>
<li> Item
<ol>
<li>Item</li>
</ol>
</li>
</ul>
</li>
</ol>
Contextual selectors
5
ul li { color: red;
}
ul …element… li { color: red;
}
This is equivalent to above:
ul li ol { color: red;
}
ul ol { color: red;
}
This is equivalent to above:
CMPT 165 D1 (Fall 2015)
More on contextual selectors: “immediate child”
Represented by symbol >
6
p
p
body
em
tt
strong
color: red
p strong { color: red;
}
tt > strong { color: red;
}
p > tt > strong { color: red;
}
More specific rule:
Even more specific:
CMPT 165 D1 (Fall 2015)
“immediate child” illustrated
7
ol > li { color: red;
}
ul ol { color: red;
}
?
<ol>
<li>Item
<ul>
<li> Item </li>
<li> Item </li>
<li> Item
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
</li>
<li>Item
<li>
<li> Item </li>
<li> Item
<ol>
<li>Item</li>
<li>Item</li>
</ol>
</li>
</ul>
</li>
</ol>
<ol> is not immediate child of <ul> (immediate child is <li>)
CMPT 165 D1 (Fall 2015)
More on contextual selectors: “next child” Represented by symbol +
8
p
p
body
em
tt
strong
color: red
em+tt { color: red;
}
p
p+p { color: red;
}
What if following?
Only this element is selected
CMPT 165 D1 (Fall 2015)
More on contextual selectors: “next child” Represented by symbol +
9
tt
em
p
strong
strong+em { color: red;
}
What if the following?
CMPT 165 D1 (Fall 2015)
Today’s Agenda
• Quick Recap of last week: – Tree diagram
– Contextual selectors
• CSS: Inheritance & Specificity
• Review 1 exam question
• Q/A for Assignment 1
CMPT 165 D1 (Fall 2015)
CSS rules
Inheritance
“is a way of propagating [cascading] property values from parent elements to their children.”
-- CSS3 working draft specs
Specificity
• Allows us to override inherited rules
• Every stylerule has a weight on specificity
• Higher weight more “rule” power
11
CMPT 165 D1 (Fall 2015)
Specificity of stylerules
12
<body>
<h1 id="h1a">Heading A</h1>
<h1 id="h1b" class="key">Heading B</h1>
<p id="p1">This is a sentence.</p>
<p id="p2">This is another sentence.</p>
</body>
body {
font-family:sans-serif;
color: blue;
}
h1 #generic,
h1#h1b { color: blue; }
h1 { color: green; }
h1.key { color: red; }
h1#h1a
p#p1
p#p2
h1#h1b.key
body
font-family:
sans-serif;
color: blue;
color: red; color: green;
id is more specific than class
color: blue;
CMPT 165 D1 (Fall 2015)
CSS rules
Inheritance
“is a way of propagating [cascading] property values from parent elements to their children.”
-- CSS3 working draft specs
Specificity
• Allows us to override inherited rules
• Every stylerule has a weight on specificity
• Higher weight more “rule” power
13
CMPT 165 D1 (Fall 2015)
Selector Id Class Element Total
0 0 1 001
Measuring specificity
14
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)
CMPT 165 D1 (Fall 2015)
Measuring specificity
15
Selector Id Class Element Total
h2 strong
h2 strong
{
font-family: serif;
}
h2 strong
{
font-family: serif;
font-size: 12pt;
} /*same specificity as above*/
0 0 1+1 002
Reminder: this is a single style rule
(depends on selectors, not number of declarations)
CMPT 165 D1 (Fall 2015)
Measuring specificity
16
p.key em
#nav li
#nav .red .key
#main_body #left .key
#main_body #left h1 tt em
p em
#nav, #body
ol + ul
table tr td ul > li
Selector Id Class Element Total
CMPT 165 D1 (Fall 2015)
Measuring specificity
17
p.key em 0 1 1+1 012
#nav li 1 0 1 101
#nav .red .key 1 1+1 0 120
#main_body #left .key 1+1 1 0 210
#main_body #left h1 tt em 1+1 0 1+1+1 203
p em 0 0 1+1 002
#nav, #body 1 0 0 100
ol + ul 0 0 1+1 002
table tr td ul > li 0 0 1+1+1+1+1 005
Selector Id Class Element Total
Recall: Commas are used to separate independent selectors that have been grouped together.
Why? Because .key can be
standalone, p.key refers to 2 levels of specificity 011
Why? There are just 2 levels of specificity 101
CMPT 165 D1 (Fall 2015)
Questions?
CMPT 165 D1 (Fall 2015)
“Pseudo”
CMPT 165 D1 (Fall 2015)
Pseudo-elements “Pseudo”: not actual, unreal
Pseudo-element: not 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
20
CMPT 165 D1 (Fall 2015)
Pseudo-elements Style the first letter, first line of an element
21
p:first-letter{
color: green;
font-size: xx-large;
}
CMPT 165 D1 (Fall 2015)
Pseudo-elements Style the first letter, first line of an element
22
p:first-letter{
color: green;
font-size: xx-large
}
p:first-line{
color: blue;
font-variant: small-caps;
}
CMPT 165 D1 (Fall 2015)
Pseudo-elements
Insert additional content before or after an element
:after
:before
23
blockquote:after {
content: “--L.T.";
}
CMPT 165 D1 (Fall 2015)
Pseudo class
24
CMPT 165 D1 (Fall 2015)
Pseudo-classes
E.g.
:first-child first child of an element
:last-child last child of an element
25
div:first-child{
color: red;
}
#d1
#d2
#d3
div
<div>
<div id=“d1”>123456</div>
<div id=“d2”>abc </div>
<div id=“d3”>abcdef</div>
</div>
color:red;
Pseudo-class: not actual class but behaves like one
CMPT 165 D1 (Fall 2015)
#e3
#e4
div
#e1
#e2
div
:last-child
26
#d1
#d2
#d3
div
<div>
<div id="d1"> </div>
<div id="d2"> </div>
<div id="d3"> </div>
</div>
<em id="e1">a</em> <em id="e2">b</em>
<em id="e3">c</em> <em id="e4">d</em>
Browser window:
“Select all <em> tags that are last-child”
em:last-child{
color: red;
}
a b c d
CMPT 165 D1 (Fall 2015)
#e3
#e4
div
#e1
#e2
div
:last-child
27
#d1
#d2
#d3
div
<div>
<div id="d1"> </div>
<div id="d2"> </div>
<div id="d3"> </div>
</div>
Colour only #e2 in red?
em:last-child{
color: red;
}
<em id="e1">a</em> <em id="e2">b</em>
<em id="e3">c</em> <em id="e4">d</em>
CMPT 165 D1 (Fall 2015)
#e3
#e4
div
#e1
#e2
div
28
#d1 em:last-child{
color: red;
} #d1
#d2
#d3
div
Color only #e2 in red?
“Select all <em> tags in #d1 that are last-child”
:last-child
em:last-child{
color: red;
}
Browser window:
a b c d
CMPT 165 D1 (Fall 2015)
More common pseudo-classes • In anchor elements <a>
:link unvisited link
:visited visited link
:active mouse clicked on link
:hover mouse hover on link
• Called pseudo-classes, but think of them as “states”
– i.e. depends on users’ actions, rendered dynamically by user’s browser
29
CMPT 165 D1 (Fall 2015)
More common pseudo-classes • Simple (good) way to add interaction with user
30
a {
text-decoration: none;
color: #86759A;
}
a:link {
font-weight: bold;
}
a:visited {
font-weight: normal;
}
a:hover, a:focus, a:active {
text-decoration: underline; /*Try on your own: text-decoration: overline; */
}
Demo
CMPT 165 D1 (Fall 2015)
Notes on anchor-based pseudo-classes
• a:hover should come after a:link and a:visited
• a:active should come after a:hover
– Know why?
• Can join:
a:visited:hover
• The state of order determines the order of CSS precedence
31
CMPT 165 D1 (Fall 2015)
:hover, :active
• Works for any element
– E.g. lists, dividers, images, etc.
• If properly used, a good/cool way to interact with user
32
<div id="nav"> <!-- subdivider#1 -->
<ul>
<li><a href="demo.html" title="Home page">Home</a></li>
<li><a href="demo.html" title="About me" >About me</a></li>
<li><a href="demo.html" title="My notes">My course notes</a></li>
<li><a href="demo.html" title="Contact">Contact</a></li>
</ul>
</div>
Demo
CMPT 165 D1 (Fall 2015)
Quick recap
• More on contextual selectors
– Symbols for specific contextual selectors:
– Immediate child
– Next child
• Pseudo class vs. Pseudo element
• Measuring specificity
CMPT 165 D1 (Fall 2015)
Miscellaneous items • DTD
• Meta
• Character entities
CMPT 165 D1 (Fall 2015)
Character entities
35
CMPT 165 D1 (Fall 2015)
Character entities
• End of Unit 4 of Study Guide
• < | > are part of markup tags; invalid markup on its own
• Character entities are used to display reserved characters
E.g. non-breaking space:
“♪”: ♪
• Case sensitive; e.g. this won’t work: &Copy;
• Don’t forget to end with semicolon
• 3 ways to specify:
Approach Starts with either…
name &
decimal (dec) &#
hexadecimal (hex) &#x
36
CMPT 165 D1 (Fall 2015)
Common mistakes Reference http://line25.com/articles/10-html-entity-crimes-you-really-shouldnt-commit
• Math: – “x”, “ / ” keys for multiply sign should be avoided, use instead:
– Fractions: “1” “/” “4”
• Double quotes:
– One on keyboard is use for measurement, e.g. 3'10"
– Curly quotes should be used, e.g. “I can do it”
37
“ I can do it ”
× ÷
¼ &frac23
CMPT 165 D1 (Fall 2015)
Character entities: references
Currency
http://www.w3schools.com/charsets/ref_utf_currency.asp
Math
http://www.w3schools.com/charsets/ref_utf_math.asp
Greek and Coptic Symbols
http://www.w3schools.com/charsets/ref_utf_greek.asp
Arrows
http://www.w3schools.com/charsets/ref_utf_arrows.asp
Miscellaneous
http://www.w3schools.com/charsets/ref_utf_symbols.asp
38
CMPT 165 D1 (Fall 2015)
CMPT 165 D1 (Fall 2015)
Take-Home Exercises???
Still not sure? Please read over this:
http://www.w3schools.com/css/css_boxmodel.asp
CMPT 165 D1 (Fall 2015)
The Box Model Content - Content of the box, where text and images appear
Border - A border that goes around the padding and content
Padding - Clears an area around the content; transparent by default
Margin - Clears an area outside the border; transparent by default
41
This is content. How would you differentiate “padding” from “margin”???
CMPT 165 D1 (Fall 2015)
CMPT 165 D1 (Fall 2015)
42
CMPT 165 D1 (Fall 2015)
43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN“"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html>
<head><title>Title</title>
<style type="text/css">
p {
width: 200px;
padding: 10px;
padding-left: 20px;
margin: 20px;
border: 5px solid #000;
float: left;
height: 500px;
}
</style>
</head>
<body>
<p>c</p>
</body>
<html>
Take-Home Exercise: Q1
Given code on the left: 1) What’s the box model for all <p>
tags? Draw your answers out.
2) And what are its dimensions?
CMPT 165 D1 (Fall 2015)
Take-Home Exercise: Q2
44
<h2>Definition List</h2>
<dl>
<dt><em>Dashi Broth</em></dt>
<dd>A basic broth in Japanese cooking. </dd>
</dl>
<dl>
<dt><em>Short Grained Steamed Rice</em></dt>
<dd>The most common rice eaten in Japan. </dd>
</dl>
dt {
font-style: italic;
}
What else is wrong?
CMPT 165 D1 (Fall 2015)
Style via CSS stylerule
45
<h2>Definition List</h2>
<dl>
<dt><em>Dashi Broth</em></dt>
<dd>A basic broth in Japanese cooking. </dd>
</dl>
<dl>
<dt><em>Short Grained Steamed Rice</em></dt>
<dd>The most common rice eaten in Japan. </dd>
</dl>
dt {
font-style: italic;
}
Lists are used to relate connected items…
separating as 2 lists defeat the purpose of using a list
CMPT 165 D1 (Fall 2015)
Questions?
CMPT 165 D1 (Fall 2015)
Remaining agenda items
• CSS: last notes – Positioning
– Functions & directives
– Cool features of CSS3
• Coursework: – Exercise 5
– Assignment 1
47
CMPT 165 D1 (Fall 2015)
Positioning
• Static: elements are positioned according to normal flow
– Refer as normal position
– Block vs. inline elements?
• To change: position property
– 3 other values…
1. Fixed: does not move even if window changes size
2. Relative: relative to normal position
3. Absolute: relative to parent element
48
CMPT 165 D1 (Fall 2015)
2. Relative Positioning
49
#box1 {
width: 500px;
height: 700px;
border: .5em black solid;
position: relative;
top: 10px;
left: 10px;
}
10px
10px
#box2 {
width: 500px;
height: 700px;
border: .5em black solid;
position: relative;
top: 10px;
left: -10px;
}
10px
-10px
Relative to normal position
CMPT 165 D1 (Fall 2015)
3. Absolute Positioning
50
#grandparent {
width: 200px;
height: 500px;
background-color: black;
}
#parent {
width: 100px;
height: 100px;
background-color: orange;
}
Relative to parent
CMPT 165 D1 (Fall 2015)
Relative to parent
3. Absolute Positioning
51
#grandparent {
width: 200px;
height: 500px;
background-color: black;
}
#parent {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 10px;
}
10px
CMPT 165 D1 (Fall 2015)
3. Absolute Positioning Relative to parent
52
#grandparent {
width: 200px;
height: 500px;
background-color: black;
}
#parent {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 10px;
}
#child{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 10px;
}
10px
?
CMPT 165 D1 (Fall 2015)
Relative to parent
3. Absolute Positioning
53
#grandparent {
width: 200px;
height: 500px;
background-color: black;
}
#parent {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 10px;
}
#child{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 10px;
}
10px
10px
CMPT 165 D1 (Fall 2015)
Positioning • Relative to left side
• Relative to right side
• Relative to bottom side
54
left: 10px;
right: 10px;
10px
bottom: 10px;
10px
10px
?
CMPT 165 D1 (Fall 2015)
#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 <div id="box1"></div>
<div id="box2"></div>
CMPT 165 D1 (Fall 2015)
#box1{
width: 500px;
height: 500px;
position: absolute;
background-color: red;
left: 100px;
top: 10px;
z-index: 2;
}
#box2{
width: 500px;
height: 500px;
position: absolute;
background-color: orange;
left: 100px;
top: 30px;
}
Positioning <div id="box1"></div>
<div id="box2"></div>
CMPT 165 D1 (Fall 2015)
#box1{
width: 500px;
height: 500px;
position: absolute;
background-color: red;
left: 100px;
top: 10px;
z-index: 2;
}
#box2{
width: 500px;
height: 500px;
position: absolute;
background-color: orange;
left: 100px;
top: 30px;
}
Positioning the “z-dimension”
(top, left) (X, Y)
(bottom, right) (X, Y)
Z-index gives you depth
• Default of all objects:
z-index: 0;
• Larger z-index:
– “closer towards the viewer”
Q: an element that is on top of everything?
CMPT 165 D1 (Fall 2015)
Remaining agenda items
• CSS: last notes – Positioning
– Functions & directives
– Cool features of CSS3
• Coursework: – Exercise 5
– Assignment 1
58
top related