-
Notifications
You must be signed in to change notification settings - Fork 83
/
part_02_specificity.html
143 lines (116 loc) · 4.42 KB
/
part_02_specificity.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html>
<head>
<!--[if gte IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<![endif]-->
<meta charset="utf-8" />
<title>CSS3: From Knowledgable to Ninja</title>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/screen.css" media="projection, screen"/>
<link rel="stylesheet" href="css/print.css" media="print"/>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="topinfo">
</div>
<header>
<nav>
<ul>
<li class="button cancel" id="back">Back</li>
<li class="button done" id="next">Next</li>
</ul>
</nav>
</header>
<div id="info">
<p>
<span class="key">→</span> and <span class="key">→</span> to change slides.
<span class="key">2</span> for comments. <a href="http://estelle.github.com/CSS-Workshop">estelle.github.com/CSS-Workshop</a>
</p>
</div>
<div id="presentation">
<div id="presentation-counter"></div>
<div id="slides">
<div class="slide normal">
<header>
<h1 style="font-size:200%;">CSS: from Knowledgable to Ninja</h1>
</header>
<section class="content">
<p> ◈ Estelle Weyl</p>
<p> ◈ <a href="http://www.twitter.com/estellevw">@estellevw</a></p><p> ◈ <a href="http://www.standardista.com">www.standardista.com</a></p>
</section>
</div>
<!-- OUTLINE -->
<div class="slide normal">
<header><h1>Course Outline</h1></header>
<section class="content">
<ol><li><a href="../selectors/">Selectors</a></li>
<li><a href="part_02_specificity.html">Specificity</a></li>
<li><a href="part_03_generated.html">Generated Content</a></li>
<li><a href="part_04_media.html">Media Queries</a></li>
<li><a href="part_04_media.html#slide10">Debugging</a></li>
<li><a href="part_06_colors.html">Colors & Transparency </a></li>
<li><a href="part_07_fonts.html">Fonts / Typography </a></li>
<li><a href="part_08_backgrounds.html">Backgrounds & Borders </a></li>
<li><a href="../gradients/">Gradients</a></li>
<li><a href="part_10_transforms.html">Transforms</a></li>
<li><a href="../animation/">Transitions & Animation</a></li>
<li><a href="part_12_features.html">Other Features</a></li>
</ol>
</section>
</div>
<div class="slide intro">
<header><h1>Part 2: Specificity</h1></header>
</div>
<!-- Specificity -->
<div class="slide normal">
<header><h1>Understanding Specificity</h1></header>
<section class="content">
<ul class="specificity">
<li class="id">ID</li>
<li class="class">Class</li>
<li class="element">Element</li>
</ul>
<ul class="specificity nonspec">
<li>1-0-0</li>
<li>0-1-0</li>
<li>0-0-1</li>
</ul>
<p><a href="http://www.standardista.com/wp-content/uploads/2012/01/specifishity1.pdf" target="_blank">PDF</a><br>
<a href="files/11_specificity.html" target="play">Examples</a></p>
</section>
</div>
<!-- Specificity PDF -->
<div class="slide" style="padding: 0;">
<object data="http://www.standardista.com/wp-content/uploads/2012/01/specifishity1.pdf" style="width:100%; height:100%; overflow:scroll"></object>
</div>
<!-- Specificity Notes -->
<div class="slide normal">
<header><h1>Specificity: The less than obvious</h1></header>
<section class="content">
<p>The * selector, or global selector, has no value.</p>
<pre contenteditable>* {} 0-0-0 </pre>
<p>Combinators, like ~, >, and + have no value</p>
<pre contenteditable>ul li {} 0-0-2
ul > li {} 0-0-2</pre>
<p>:not has no value, but parameter selector does</p>
<pre contenteditable>.myClass:not(p) {} 0-1-1</pre>
<p>Specificity is not inheritance</p>
</section>
</div>
<div class="slide object">
<header><h1>Play Time</h1></header>
<object data="files/00_basic.html"></object>
<a href="files/00_basic.html" target="play" class="objectlink">Try it out</a>
</div>
<div class="slide intro">
<header><h1>Part 3: Generated Content</h1></header>
<h1><a href="part_03_generated.html">Next ➹</a></h1>
</div>
</div>
<script src="slides.js"></script>
</body>
</html>