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/.

&


2/77


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


3/77


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

'


4/77


CSS #ntro%uction

9 A st+le% "T %ocument

pro%uce% b+ the st+le sheet style1.css:


5/77


CSS #ntro%uction

linkelement associates st+le sheet ;ith %oc$

)


6/77


CSS #ntro%uction

typeattribute speci=ies st+le language use%

*


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



CSS #ntro%uction

titleattribute provi%es st+le sheet name

(



CSS #ntro%uction

D



CSS #ntro%uction

Alternative, user selectable st+le sheets

can be speci=ie%

&0



CSS #ntro%uction

9 A st+le% "T %ocument

pro%uce% b+ the st+le sheet style2.css:

&&



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



CSS S+ntaB

9 Parts o= a st+le rule>or statement@

&'



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%:

&



CSS S+ntaB:

Selector Strings





t+pe selector

&)



CSS S+ntaB:

Selector Strings




9 Speci=ic elements b+ i%:universal selector

&*


17/77


CSS S+ntaB:

Selector Strings





#E selector&


18/77


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

&(


19/77


CSS S+ntaB:

Selector Strings



9 lements o= a certain t+pe an% class:this spanbelongs to three st+le classes

&D


20/77


CSS S+ntaB:

Selector Strings



9 lements o= a certain t+pe an% class:

this rule applies onl+ to span


21/77


CSS S+ntaB:

Selector Strings

9 Source anchor elements:

9 lement t+pes that are %escen%ents:

pseu%o!classes

2&


22/77


CSS S+ntaB:

Selector Strings


9 lement t+pes that are %escen%ants:

rule applies to lielement that is

22


23/77


CSS S+ntaB:

Selector Strings



rule applies to lielement that ispart o= the content o= an olelement

2'


24/77


CSS S+ntaB:

Selector Strings



rule applies to lielement that ispart o= the content o= an olelementthat is part o= the content o= a ulelement

2


25/77


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)


26/77


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*


27/77


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


28/77


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


29/77


CSS 4ule Casca%e

2D


30/77


CSS 4ule Casca%e

Select appropriate st+le sheets base%

on user selection an% me%ia t+pe$

'0


31/77


CSS 4ule Casca%e

Treat "T attributes such

as widthan% heighto= imgasi= %e=ine% b+ st+le rule instea%$

'&


32/77


CSS 4ule Casca%e

6ive originG;eight levels:&$ userGimportant

2$ authorGimportant

'$ authorGnormal

$ userGnormal

)$ user agentGnormal

'2


33/77


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:

''


34/77


CSS 4ule Casca%e

Specificity:1. styleattribute&$ rule ;ith selector:

&$

'


35/77


CSS 4ule Casca%e

Conceptuall+, create one

long st+le sheet$ ater

st+le rules have higher

priorit+ than earlier rules$

')


36/77


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%

'*


37/77


CSS #nheritance

'


38/77


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

'(


39/77


CSS 6ont Properties

9 A =ontis a mapping =rom co%e points to

gl+phs gl+ph

character cell

>content area@

'D


40/77


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


41/77


CSS 6ont Properties

generic

=onts are

s+stem!

speci=ic

&


42/77


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


43/77


CSS 6ont Properties

Compute% value

o= font-size

propert+

'


44/77


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


45/77


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


46/77


CSS 6ont Properties

*


47/77


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@:


48/77


CSS 6ont Properties

fontshortcut propert+:

#nitial values use% i= no value speci=ie% in fontpropert+ list

(


49/77


CSS TeBt 6ormatting

D


50/77


51/77


CSS TeBt Color

)&


52/77


CSS TeBt Color

)2


53/77


CSS -oB o%el

9 ver+ ren%ere% element occupies a boB:

>or innere%ge@

>or outere%ge@

)'


54/77


CSS -oB o%el

)


55/77


CSS -oB o%el

))


56/77


CSS -oB o%el

)*


57/77


CSS -oB o%el

)


58/77


CSS -oB o%el

)(


59/77


CSS -oB o%el

)D


60/77


CSS -oB o%el

*0


61/77


CSS -oB o%el

*&


62/77


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


63/77


-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

*'


64/77


-ackgroun%s

body style!"background-image#url($%ucumber&lower'ot.png$)"

*


65/77


.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

*)


66/77


.ormal 6lo; a+out

>bo%+@

>html@

**


67/77


.ormal 6lo; a+out

-lock

elements

onl+

*


68/77


.ormal 6lo; a+out

htmlbo%+

%iv %&

%iv %2

%iv %'

%iv %

Top e%ges o=

block boBes arein %ocument or%er

*(


69/77


.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


70/77


.ormal 6lo; a+out

9 When blocks stack, a%Qacent margins are

collapse%to the siKe o= the larger margin

0


71/77


72/77


.ormal 6lo; a+out

9 Can also speci=+ CSS length or

percentage >o= parent


73/77


.ormal 6lo; a+out

9 Can also speci=+ CSS length or

percentage >o= parent


74/77


.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


75/77


.ormal 6lo; a+out

9 Speci=+ value =or ertical-aligntoposition an inline element ;ithin line boB:

initial

value o=

vertical!

align

)


76/77


-e+on% .ormal 6lo;

9 CSS allo;s =or boBes to be positione%

outsi%e the normal =lo;:

Absolutepositioning

span


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/

Documents

Lib Present Course Webtechnology Slides 03 Css