Lib Present Course Webtechnology Slides 03 Css
-
Upload
rokesh-dhana -
Category
Documents
-
view
221 -
download
0
Transcript of Lib Present Course Webtechnology Slides 03 Css
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
1/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
Chapter '
St+le Sheets:
CSS
W- TC".//1#S
A C/P3T4 SC#.C P4SPCT#5
J6647 C$ JAC8S/.
&
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
2/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
otivation
9 "T markup can be use% to represent Semantics: h1meansthat an element is a top!level
hea%ing Presentation: h1elements looka certain ;a+
9 #t
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
3/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
St+le Sheet anguages
9 Casca%ing St+le Sheets >CSS@
Applies to >@"T as ;ell as
%ocuments in general
6ocus o= this chapter
9 Btensible St+lesheet anguage >S@
/=ten use% to trans=orm one %ocument to
another =orm, but can also a%% st+le
S Trans=ormations covere% in later chapter
'
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
4/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS #ntro%uction
9 A st+le% "T %ocument
pro%uce% b+ the st+le sheet style1.css:
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
5/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS #ntro%uction
linkelement associates st+le sheet ;ith %oc$
)
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
6/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS #ntro%uction
typeattribute speci=ies st+le language use%
*
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
7/77Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS #ntro%uction
hrefattribute provi%es st+le sheet 34
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
8/77Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS #ntro%uction
titleattribute provi%es st+le sheet name
(
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
9/77Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS #ntro%uction
D
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
10/77Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS #ntro%uction
Alternative, user selectable st+le sheets
can be speci=ie%
&0
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
11/77Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS #ntro%uction
9 A st+le% "T %ocument
pro%uce% b+ the st+le sheet style2.css:
&&
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
12/77Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS #ntro%uction
9 Single %ocument can be %ispla+e% on
multiple me%ia plat=orms b+ tailoring st+le
sheets:
This %ocument ;ill be printe%%i==erentl+
than it is %ispla+e%$
&2
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
13/77Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS S+ntaB
9 Parts o= a st+le rule>or statement@
&'
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
14/77Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS S+ntaB:
Selector Strings
9 Single element t+pe:
9 ultiple element t+pes:
9 All element t+pes:
9 Speci=ic elements b+ i%:
&
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
15/77Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS S+ntaB:
Selector Strings
9 Single element t+pe:
9 ultiple element t+pes:
9 All element t+pes:
9 Speci=ic elements b+ i%:
t+pe selector
&)
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
16/77Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS S+ntaB:
Selector Strings
9 Single element t+pe:
9 ultiple element t+pes:
9 All element t+pes:
9 Speci=ic elements b+ i%:universal selector
&*
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
17/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS S+ntaB:
Selector Strings
9 Single element t+pe:
9 ultiple element t+pes:
9 All element t+pes:
9 Speci=ic elements b+ i%:
#E selector&
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
18/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS S+ntaB:
Selector Strings
9 lements belonging to a st+le class:
4e=erencing a st+le class in "T:
9 lements o= a certain t+pe an% class:
class selector
&(
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
19/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS S+ntaB:
Selector Strings
9 lements belonging to a st+le class:
4e=erencing a st+le class in "T:
9 lements o= a certain t+pe an% class:this spanbelongs to three st+le classes
&D
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
20/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS S+ntaB:
Selector Strings
9 lements belonging to a st+le class:
4e=erencing a st+le class in "T:
9 lements o= a certain t+pe an% class:
this rule applies onl+ to span
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
21/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS S+ntaB:
Selector Strings
9 Source anchor elements:
9 lement t+pes that are %escen%ents:
pseu%o!classes
2&
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
22/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS S+ntaB:
Selector Strings
9 Source anchor elements:
9 lement t+pes that are %escen%ants:
rule applies to lielement that is
22
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
23/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS S+ntaB:
Selector Strings
9 Source anchor elements:
9 lement t+pes that are %escen%ants:
rule applies to lielement that ispart o= the content o= an olelement
2'
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
24/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS S+ntaB:
Selector Strings
9 Source anchor elements:
9 lement t+pes that are %escen%ants:
rule applies to lielement that ispart o= the content o= an olelementthat is part o= the content o= a ulelement
2
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
25/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS S+ntaB
9 St+le rules covere% thus =ar =ollo; ruleset
s+ntaB
9 At!ruleis a secon% t+pe o= rule
4ea%s st+le rules =rom speci=ie% 34
ust appear at beginning o= st+le sheet
34 relative to st+le sheet 34
2)
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
26/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
St+le Sheets an% "T
9 St+le sheets re=erence% b+ link"Telement are calle% eBternal st+le sheets
9 St+le sheets can be embe%%e%%irectl+ in
"T %ocument using styleelement
9 ost "T elements have styleattribute >value is list o= st+le %eclarations@
2*
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
27/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
St+le Sheets an% "T
9 4ules o= thumb:
3se eBternal st+le sheets to %e=ine site!;i%e
st+le
Pre=er st+le sheets >either eBternal or
embe%%e%@ to styleattributes
special characters
9 ust use re=erences in embe%%e% st+le sheets an%styleattribute
9 ust notuse re=erences in eBternal st+le sheets
2
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
28/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 4ule Casca%e
9 What i= more than one st+le %eclaration
applies to a propert+ o= an elementF
9 The CSS rule casca%e%etermines ;hich
st+le rule
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
29/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 4ule Casca%e
2D
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
30/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 4ule Casca%e
Select appropriate st+le sheets base%
on user selection an% me%ia t+pe$
'0
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
31/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 4ule Casca%e
Treat "T attributes such
as widthan% heighto= imgasi= %e=ine% b+ st+le rule instea%$
'&
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
32/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 4ule Casca%e
6ive originG;eight levels:&$ userGimportant
2$ authorGimportant
'$ authorGnormal
$ userGnormal
)$ user agentGnormal
'2
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
33/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 4ule Casca%e
9 3ser can %e=ine a st+le sheet
Bplicitl+ >eas+ in #@
#mplicitl+ >pre=erences@
9 3serGimportant highest priorit+ in CSS2 to
accommo%ate users ;ith special nee%s
4ules ma%e important b+ a%%ing HIimportant:
''
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
34/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 4ule Casca%e
Specificity:1. styleattribute&$ rule ;ith selector:
&$
'
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
35/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 4ule Casca%e
Conceptuall+, create one
long st+le sheet$ ater
st+le rules have higher
priorit+ than earlier rules$
')
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
36/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS #nheritance
9 What i= no st+le %eclaration applies to a
propert+ o= an elementF
9 1enerall+, the propert+ value is inherite%
=rom the nearest ancestor element that
has a value =or the propert+
9 #= no ancestor has a value >or the propert+
%oes not inherit@ then CSS %e=ines an
initial valuethat is use%
'*
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
37/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS #nheritance
'
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
38/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS #nheritance
9 ost properties inherit compute% value
Bception %iscusse% later: line-height
9 A little thought can usuall+ tell +ou ;hether
a propert+ inherits or not
Bample: height %oes not inherit
'(
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
39/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 6ont Properties
9 A =ontis a mapping =rom co%e points to
gl+phs gl+ph
character cell
>content area@
'D
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
40/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 6ont Properties
9 A =ont =amil+is a collection o= relate% =onts
>t+picall+ %i==er in siKe, ;eight, etc$@
9 =ont!=amil+ propert+ can accept a list o=
=amilies, inclu%ing generic=ont =amilies
generic
0
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
41/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 6ont Properties
generic
=onts are
s+stem!
speci=ic
&
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
42/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 6ont Properties
9 an+ properties, such as font-size,have a value that is a CSS length
9 All CSS length values eBcept 0 nee% units
2
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
43/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 6ont Properties
Compute% value
o= font-size
propert+
'
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
44/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 6ont Properties
9 4e=erence =ont%e=ines em an% eB units
.ormall+, re=erence =ont is the =ont o= the
element being st+le%
Bception: 3sing emGeB to speci=+ value =orfont-size
parent element
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
45/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 6ont Properties
9 /ther ;a+s to speci=+ value =orfont-size: Percentage>o= parent font-size@
Absolute siKeke+;or%: xx-small, x-small,small, medium>initial value@, large,x-large, xx-large
9 3ser agent speci=icL shoul% %i==er b+ M 20N 4elative siKeke+;or%: smaller, larger
9 4elative to parent element
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
46/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 6ont Properties
*
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
47/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 6ont Properties
9 TeBt is ren%ere% using line boBes
9 "eight o= line boB given b+ line-height #nitial value: normal>i.e., cell heightL
relationship ;ith em height is =ont!speci=ic@
/ther values >=ollo;ing are eOuivalent@:
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
48/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS 6ont Properties
fontshortcut propert+:
#nitial values use% i= no value speci=ie% in fontpropert+ list
(
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
49/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS TeBt 6ormatting
D
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
50/77
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
51/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS TeBt Color
)&
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
52/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS TeBt Color
)2
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
53/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS -oB o%el
9 ver+ ren%ere% element occupies a boB:
>or innere%ge@
>or outere%ge@
)'
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
54/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS -oB o%el
)
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
55/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS -oB o%el
))
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
56/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS -oB o%el
)*
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
57/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS -oB o%el
)
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
58/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS -oB o%el
)(
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
59/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS -oB o%el
)D
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
60/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS -oB o%el
*0
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
61/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS -oB o%el
*&
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
62/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
CSS -oB o%el
9 #= multiple %eclarations appl+ to a propert+,
the last %eclaration overri%es earlier
speci=ications
e=t bor%er is '0pB ;i%e,
inset st+le, an% re%
*2
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
63/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
-ackgroun%s
background-color Speci=ies backgroun% color =or content,
pa%%ing, an% bor%er areas
argin area is al;a+s transparent
.ot inherite%L initial value transparent
background-image
Speci=ies >using url()=unction@ image that;ill be tile%over an element
*'
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
64/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
-ackgroun%s
body style!"background-image#url($%ucumber&lower'ot.png$)"
*
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
65/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
.ormal 6lo; a+out
9 #n normal =lo; processing, each %ispla+e%
element has a correspon%ing boB
html element boB is calle% initial containing
blockan% correspon%s to entire %ocument -oBes o= chil% elements are containe% in
boBes o= parent
Sibling block elementsare lai% out one on topo= the other
Sibling inline elementsare one a=ter the other
*)
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
66/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
.ormal 6lo; a+out
>bo%+@
>html@
**
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
67/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
.ormal 6lo; a+out
-lock
elements
onl+
*
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
68/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
.ormal 6lo; a+out
htmlbo%+
%iv %&
%iv %2
%iv %'
%iv %
Top e%ges o=
block boBes arein %ocument or%er
*(
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
69/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
.ormal 6lo; a+out
9 What is a Hblock elementF
lement ;ith value blockspeci=ie% =or itsdisplaypropert+
3ser agent st+le sheet >not CSS@ speci=ies%e=ault valuesL t+pical block elements inclu%e
html, body, p, pre, di, form, ol, ul, dl,hr, h1through h*
ost other elements eBcept li an% table!
relate% have inlinespeci=ie% =or display
*D
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
70/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
.ormal 6lo; a+out
9 When blocks stack, a%Qacent margins are
collapse%to the siKe o= the larger margin
0
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
71/77
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
72/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
.ormal 6lo; a+out
9 Can also speci=+ CSS length or
percentage >o= parent
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
73/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
.ormal 6lo; a+out
9 Can also speci=+ CSS length or
percentage >o= parent
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
74/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
.ormal 6lo; a+out
9 -oBes correspon%ing to character cells
an% inline elementsare lai% out si%e b+
si%e in line boBesthat are stacke% one on
top o= the other
Character cells aligne% b+ baseline
"eightsbase% on
content
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
75/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
.ormal 6lo; a+out
9 Speci=+ value =or ertical-aligntoposition an inline element ;ithin line boB:
initial
value o=
vertical!
align
)
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
76/77
Jackson, Web Technologies: A Computer Science Perspective, 200 Prentice!"all, #nc$ All rights reserve%$ 0!&'!&()*0'!0
-e+on% .ormal 6lo;
9 CSS allo;s =or boBes to be positione%
outsi%e the normal =lo;:
Absolutepositioning
span
-
8/13/2019 Lib Present Course Webtechnology Slides 03 Css
77/77
Assignment HSt+le sheets
9 See the assignment %escription
9 3se book an% W'C CSS 2$&
4ecommen%ation as backgroun%
http:GG;;;$;'$orgGT4GCSS2&G
http://www.w3.org/TR/CSS21/http://www.w3.org/TR/CSS21/