css building blocks - scott...
Post on 29-May-2020
13 Views
Preview:
TRANSCRIPT
© 2005-2012 R. Scott GrannemanLast updated 20120120
You are free to use this work, with certain restrictions.For full licensing information, please see the last slide/page.
Washington University in St. LouisR. Scott Granneman
scott@granneman.comwww.granneman.com
SelectorsCSS Building Blocks
1
What’s a selector?It identifies objects on a web page
to which you wish to applyCSS declarations
2
How Many?
3
Selectors Level 3W3C Recommendation
29 September 2011http://www.w3.org/TR/css3-selectors/
4
5
5
6
6
CSS 1 & 2
7
19 selectors in CSS 1 & 2
8
CSS 3
9
Under developmentsince December 15, 2005
10
Not one large single specInstead, divided into
many separate documentscalled modules
11
Currently 50+ modules!Different modules
have different statuses
12
13
13
13
13
Which modules have reachedW3C Recommendation status?
3 in 2011! Selectors (19 new ones!)
! Namespaces! Color
14
Others have reachedW3C Candidate Recommendation
status! Backgrounds & Colors
! Media Queries! Multi-Column Layout
15
We’ll cover CSS 3 only a little bit
16
The W3C categorizes CSS selectors,but I like the way that WestCiv
(makers of StyleMaster& fine CSS tutorials)
categorize them,so we’re using their method
For details, see:http://www.westciv.com/style_master/academy/css_tutorial/selectors/
17
Web BrowserEngines
18
Rendering Engine Name BrowsersBrowsers
Trident
Gecko
WebKit
Presto
19
mshtml.dll
– 4.0.x– 5.0.x– 5.5.x– 6.0.x
3.1 7.04 8.0.x5 9.0.x6 10.0.x
45
5.56789
10
20
1.71.8
1.8.11.9
1.9.11.9.2
25
1 6 61.5 7 72 8 83 9 9
3.53.645
21
85100412522
530.17533.16
11.12345
522.11.3526.12.2533.16
345
22
533534.3534.7
534.10534.13534.16534.24534.30535.1
5 535.1 146 535.2 157 535.7 168 535.11 179 535.16 18
10111213
23
12
2.12.1.1
2.2.152.5.242.6.302.7.62
7 2.8.131 11.19 2.9.168 11.5
9.5 2.9.201 11.69.6 ? 12
10.0-110.510.611
24
TypeSelectors
25
AKA HTML Element Selectors
26
HTML elements as selectors:p {}h1 {}ul {}
table {}
27
Used when you want to affectevery instance of an element
Example:p { color: red; font-weight: bold;}
Result: text in every <p>...</p>is red & bold
28
Rendering Engine Support
4+
1+
85+
1+
29
ClassSelectors
30
Define a class in CSS:.emphasis {}.bookTitle {}
Apply it in HTML:<p class="emphasis">...</p>
<span class="bookTitle">...</span>
31
2 kinds of class selectors! Solitary class selectors! Element class selectors
32
Solitary class selectorscan be applied
to any HTML element.emphasis {}
33
Element class selectorscan only be used
with specific HTML elementp.emphasis {}a.emphasis {}
34
A class can be appliedas many times on a page
as you wish<p class="emphasis">
<span class="emphasis"><a class="emphasis">
... all on the same page
35
" #a-z Space
A-Z Starting with #
0-9 Starting with -
-
_
Rules for CSS class names
36
Class names should reflect function,not appearance
Good Bad
.emphasis .bold
.bookTitle .italic
.footer .bigRed
.center
37
Multiple words in a class name?These are all OK
.maincontentnav.mainContentNav.MainContentNav
Just be consistent!
38
Rendering Engine Support
7+
1+
85+
1+
39
ID Selectors
40
Define an ID in CSS:#navigation {}#utilityNav {}
Apply it in HTML:<div id="navigation">...</div><p id="utilityNav">...</p>
41
2 kinds of ID selectors! Solitary ID selectors! Element ID selectors
42
Solitary ID selectorscan be applied to any HTML element
#navigation {}
43
Element ID selectorscan only be used
with specific HTML elementdiv#navigation {}p#utilityNav {}
44
An ID can be appliedonly once per page
Not once per site – once per page<div id="navigation"><p id="utilityNav">
45
" #a-z Space
A-Z Starting with #
0-9 Starting with -
-
_
Rules for CSS ID names
46
ID names should reflect function,not appearance
Good Bad
#navigation #right
#utilityNav #narrow
#footer #bottom
47
Multiple words in a ID name?These are all OK
#maincontentnav#mainContentNav#MainContentNav
Just be consistent!
48
You’re probably going to use IDsa lot
when we get to CSS positioning
49
Rendering Engine Support
4+
1+
85+
1+
50
DescendentSelectors
51
Used to be calledContextual Selectorsbefore renaming to
Descendant Selectors
52
Selects an objectwhen it is the descendant
(child, grandchild,great grandchild, etc.)
of another objectNot necessarily the immediate child,
although that works,but any descendant
ul li {}ul li a {}
p.intro a {}
53
CSS:ul li {}ul li a {}p.intro a {}p img {}
54
CSS:p.intro a {}p img {}
HTML:<p class="intro"> ... <a> ... </
a> ... </p>
<p class="intro"> ... <span><a> ... </a></span> ... </p>
<p> ... <a><img> ... </img></a> ... </p>
55
You can often usea descendant selector
instead of a class
56
Given this HTML:<p> ... <img class="headshot"
src="..."> ... </p>
Instead of this CSS:.headshot {}
You could use this CSS:p img {}
And this HTML:<p> ... <img src="..."> ... </p>
57
Rendering Engine Support
4+
1+
85+
1+
58
LinkPseudo Class
Selectors59
Links have 4 different states:! Normal (an unvisited link)
! Visited! Hover (mouse cursor is over link)! Active (moment of being clicked)
60
CSS:a:link
a:visiteda:hovera:active
Combine withelement class selectors:
a.offsite:hover {}
61
Some of the 4 link statesare mutually exclusive
(can’t be visited & unvisitedat the same time)& some are not
(can be both visited & activeat the same time)
62
If CSS rules contradict,the last one wins
Specify your rules in this order:a {}
a:link {}a:visited {}a:hover {}a:active {}
63
Rendering Engine Support
3+
1+
85+
1+
a:link
64
Rendering Engine Support
3+
1+
85+
1+
a:visited
65
Rendering Engine Support
3+
1+
85+
1+
a:hover
66
Rendering Engine Support
3+
1+
85+
1+
a:active
67
PseudoElementSelectors
68
:first-line:first-letter
&:before:after
69
:first-line
Selects 1st lineof a block-level element
& can only be usedwith certain properties
p:first-line {}
70
:first-letter
Selects 1st letterof a block-level element
& can only be usedwith certain properties
p:first-letter
Often used to createa “drop cap” effect
71
:before
Selects element& inserts content
(text, images, counters, etc.)before it
72
:after
Selects element& inserts content
(text, images, counters, etc.)after it
73
CSSh1:before {content:"Chapter: ";}
HTML<h1>1</h1>
User seesChapter: 1
74
CSSa.flight:after {content:"http://
www.example.com/plane.gif";}
HTML<a class="flight" href="http://www.expedia.com">Expedia</a>
User seesExpedia $
75
CSSa:after {content: attr(href)}
HTML<a href="http://www.domain.com">Link
to site</a>
User seesLink to site http://www.domain.com
76
Rendering Engine Support
mshtml 5.5+*
1+
85+*
1+
:first-line
77
IE 8Rules with !important
are ignored inside :first-line
78
text-transformproperty doesn’t work
79
Rendering Engine Support
mshtml 5.5+*
1+
85+
1+
:first-letter
80
IE 6Combining :first-letter rules
with othersmay be problematic
IE 8Rules with !important
are ignored inside :first-letter
81
Rendering Engine Support
8+
1.9.1+
85+*
1+
:before
82
Some styles can’t be appliedto :before,
such as animations & transitions
83
Rendering Engine Support
8+
1.9.1+
85+*
1+
:after
84
Some styles can’t be appliedto :after,
such as animations & transitions
85
SelectorGroups
86
Allows you to applythe same declarations
to several selectors at oncep, input, blockquote, td {font-
family:"Times New Roman";}
a:link, a:visited, a:active, a:hover {background-color:#ffff00;}
87
Rendering Engine Support
4+*
1+
85+
1+
88
IE 8If IE doesn’t support
one of the grouped selectors,ALL of them fail!
89
UniversalSelectors
90
* {font-family: Verdana, sans-serif;}
* matchesevery (appropriate) HTML element
91
Instead of thisp, blockquote, td, option { font-family: Verdana, Arial, sans-serif; font-size: 12px;}
Use this* { font-family: Verdana, Arial, sans-serif; font-size: 12px;}
92
The Global White Space Reset* { margin: 0; padding: 0;}
93
Rendering Engine Support
7+
1+
85+
1+
94
DynamicPseudo Class
Selectors95
:hover & :active can be appliedto any element,
not just <a>Also added :focus
96
:hover (user’s mouse cursoris over element)
:active (form element at momentof being clicked)
:focus (form elementwhen keyboard’s cursor in or on it)
p:hover {}input:active {}
textarea:focus {}p.intro:hover {}
97
Rendering Engine Support
7+
1+
419.3+
1+
:hover
98
Rendering Engine Support
8+
1+
85+
1+
:active
99
Rendering Engine Support
8+
1+
85+
1+
:focus
100
LanguageSelectors
101
Select elementsbased on language encoding
Every language hasa 2-letter encoding
+ a dash& 2 more letters for dialects
102
fr = Frenchzh = Chineseen = English
en-US = American EnglishHTML
<p lang="fr">
103
Different languagesuse different formatting
Bold & italic,indenting,
quotation marks,etc.
To use with CSS:cite:lang(fr) {}
blockquote.literature:lang(zh) {}
104
Rendering Engine Support
8+
1.2+
525+
1+
105
ChildSelectors
106
Descendant selectors work for bothdirect children & any descendants,
no matter how deepThe child selector works only
for direct children,not grandchildren
or any other descendantsdiv>p {}
div>div {}
107
Rendering Engine Support
7+
1+
85+
1+
108
First ChildSelectors
109
The child selector worksonly if the element
is the 1st child of a parentp:first-child {}
means the first <p>of any parent element,not the first child of <p>
110
Rendering Engine Support
7+
1+
85+
1+
111
AdjacentSelectors
112
Selects siblings:2 or more elements
that are at the same level2nd element is selected, not both!
Elements must be listedin the order
in which they appear in HTMLh1 + h2 {margin-top:-20px;}img + p {margin:auto; text-align:center; width:70%;}
113
Rendering Engine Support
7+
1+
85+
1+
114
AttributeSelectors
115
Allows you to selecta particular element
based on 1 of 4 attribute conditions
116
(1) Does element foohave attribute bar?
This CSS:a[title] {}
matches this HTML:<a href="http://www.domain.com"
title="Stuff">
It doesn’t matter what the title is,just that it has a title.
117
(2) Does element foohave a specific attribute value bar?
This CSS:a[title="Balloon"] {}
matches this HTML:<a href="http://www.domain.com"
title="Balloon">
but not this HTML:<a href="http://www.domain.com"
title="Red Balloon">
118
(3) Does element foo have a specific attribute value bar among a list of
space separated values?This CSS:
a[title~="Balloon"] {}
matches this HTML:<a href="http://www.domain.com"
title="Red Balloon">
and this HTML:<a href="http://www.domain.com"
title="Blue Balloon">119
(4) Does element foo have a specific attribute value bar among a list of
hyphen separated values?This CSS:
a[lang|="en"] {}
matches this HTML:<a href="http://www.domain.com"
lang="en-US">
and this HTML:<a href="http://www.domain.com"
lang="en-UK">120
Rendering Engine Support
7+*
1+
85+
1+
x[attr]
121
Matches every td & th in tablewhen attribute is colspan
(regardless of whethercolspan is used!)
122
Rendering Engine Support
7+
1+
85+
1+
x[attr=“value”]
123
Rendering Engine Support
7+
1+
85+
1+
x[attr~=“value”]
124
Rendering Engine Support
7+
1+
85+
1+
x[attr|=“value”]
125
Sources
126
QuirksModeCompatibility Master Table
www.quirksmode.org/compatibility.html
127
Western CivilisationComplete CSS Guide:Selectors introduction
www.westciv.com/style_master/academy/css_tutorial/selectors/
128
Comparison of layout engines(Cascading Style Sheets)
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_
(Cascading_Style_Sheets)
129
CSS Compatibilityand Internet Explorer
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
130
Thank you!
Email: scott@granneman.comWeb: www.granneman.com
Publications: www.granneman.com/pubsBlog: blog.granneman.comTwitter: scottgranneman
131
© 2005-2012 R. Scott GrannemanLast updated 20120120
You are free to use this work, with certain restrictions.For full licensing information, please see the last slide/page.
Washington University in St. LouisR. Scott Granneman
scott@granneman.comwww.granneman.com
SelectorsCSS Building Blocks
132
Licensing of this workThis work is licensed under the Creative Commons Attribution-ShareAlike License.
To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/1.0or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.
In addition to the rights and restrictions common to all Creative Commons licenses, the Attribution-ShareAlike License features the following key conditions:
Attribution. The licensor permits others to copy, distribute, display, and perform the work. In return, licensees must give the original author credit.
Share Alike. The licensor permits others to distribute derivative works under a license identical to the one that governs the licensor’s work.
Questions? Email scott@granneman.com
133
top related