CHNG VI F0RM

CHNG VII CASCADING STYLE SHEET-CSSI.GII THIUBng kiu (style sheet): L mt tp hp cc nh dng c dng miu t cch trnh by cc ti liu vit bng ngn ng HTML v XHTMLTin ch ca CSSTch ring ni dung v nh dng, lm cho m ngun gn gng hn, To ra cc kiu dng c th p dng cho nhiu trang, trnh lp li vic nh dng cc trang ging nhau.

I.GII THIUTit kim thi gian:Khi thay i nh dng trong CSS, cc trang s dng CSS s t ng cp nht s thay i .Kt hp vi JavaScript to hiu ng c bitBt li ca CSS:Mt s trnh duyt khng chp nhn CSS hon tonPhi mt thi gian hc cch s dng

II. PHN LOI-CCH TOPhn loi : C 3 loiInline styleInternal styleExternal style

II.1. INLINE STYLEInline style: L kiu c gn cho mt dng hoc mt on vn bn, bng cch s dng thuc tnh style bn trong tag mun nh dngC php:

Ni dung vn bn mun nh dng

II.1. INLINE STYLEV d :

This paragraph has an inline style applied to it This paragraph is displayed in the default style. Can you see the difference in this line

II.2. Internal style Internal style : L bng mu thch hp cho trang ring l vi nhiu vn bn.Cch to: Ta bng mu chung trn phn u trang trong cp tag S dng: Trong phn body, ni dung no mun s dng nh dng theo Style sheet to trn th t trong tag c nh ngha trong phn head

II.2. Internal style C php:

TagName{property1:v1;property2:v2 }(lp li cho mi tag c thuc tnh cn nh dng)

II.2. Internal style

H1,H2 { color: limegreen; font-family: Arial }

This is the H1 elementThis is the H2 elementThis is the H3 element with its default style as displayed in the browser

II.3. External style External style: L mt bng kiu c lu tr thnh mt file bn ngoi v c lin kt vi trang HTML.Bng kiu ny s c p dng v nh hng cho tt c cc trang ca mt website.

II.3. External style Cch to:To mt tp tin vn bn mi Nhp tn cc tag mun nh dng thuc tnh theo mu:TagName{property1:v1;property2:v2;}Lu tp tin vi nh dng Text Only v c phn m rng .css

II.3. External style V d:To tp tin Sheet1.css

H2 {color:blue; font-style:italic}P{text-align:justify; text-indent:8pt; font:10pt/15pt Myriad Roman,Verdana}II.3. External style Cch dng External style:C php:

II.3. External style

Changing the rules

Changing the rules is fun Changing the rules may not be such funThe H2 element again

III. NH BNG MU CHO LPC th chia cc yu t trong HTML thnh cc lp p dng kiu mu hiu qu hnC php:

.ClassName{property1:v1; property2:v2;}

III. NH BNG MU CHO LPTrong phn , nh du phn nm trong lp.C php:

Ni dung

III. NH BNG MU CHO LPV d:

.water{color:blue}.danger{color:red}

test watertest danger

IV. NH CC TAG RING BITDng p dng cho mt phn t ring bit trn trang WebC php:TagName#IDName{property1:v1; property2:v2;}

IV. NH CC TAG RING BITTrong tag Body nhp c php:

Ni dung

IV. NH CC TAG RING BITV d : ID Selectors p#control {color: red;font-weight:bold; text-indent:18pt}p{color: magenta;text-indent:0pt}

A hardware device that allows the user to make electronic copies of graphics or text.Short for picture element. A pixel refers to the small dots that make up an image on the screen.

V. TO CC TAG TY C 2 loi tag c th kt ni Class hay cc ID to cc tag tu , cn phn bit i tng cp khi v cp hngi tng cp khi nh mt on vn, thng bt u mt dng mi v c th cha cc i tng cp khi khc gm cc tag: P, H1, Body, table

V. TO CC TAG TY i tng cp hng khng to dng mi, thng cha vn bn v cc yu t trong hng khc gn cc tag: B, FontCc tag DIV v SPAN: c th kt ni vi cc phn t cp khi v ID to ra cc tag tu . Trong DIV ph hp vi cc i tng cp khi, SPAN ph hp vi cc i tng cp hng.V.1. TO TAG CP KHI TY Cch to: Bng cch thm mt CLASS hoc ID vo tag DIV v nh mu cn c.Trong phn Style hoc mt bng mu bn ngoi ta nhp:DIV.ClassName{property1:v1; property2:v2;} vi ClassName l tn lp s s dng

V.1. TO TAG CP KHI TY Hoc:DIV#Idname{property1: v1; property2:v2;}vi IDName l tn nh danh ca tag DIV

V.1. TO TAG CP KHI TY p dng tag cp khi tu vo trang HTMLTi u phn vn bn mun nh dng, ta nhp c php

Ni dung (bn trong c th cha cc tag hoc )

V d : ID Selectors DIV.control{background:magenta;font-size:28pt} DIV#intro{color:magenta;text-indent:0pt;font-weight:bold}

A hardware device that allows the user to make electronic copies of graphics or text.Short for picture element. A pixel refers to the small dots that make up an image on the screen.

V.2.TO CC TAG TRONG HNG TY Kt ni nhiu kiu nh dng vn bn trong mt tagC php:Trong phn Style, nhp c php:SPAN.Clname{property1: v1; property2:v2;}Hoc:SPAN#IDname{property1:v1; property2:v2;}

V.2.TO CC TAG TRONG HNG TY p dng tag trong hng tu vo trang HTML: Ti u on vn bn mun nh dng, nhp c php:

Ni dung vn bn

Hoc: Ni dung vn bn

V d : ID Selectors SPAN.control{background:magenta;font-size:200%}SPAN#intro{font-variant:small-caps;color: orange;font-weight:bold}

A hardware device that allows the user to make electronic copies of graphics or text.Short for picture element. A pixel refers to the small dots that make up an image on the screen.

VI.1. CC THUC TNH NH DNGNH DNG VN BNChn b font:font-family: familyname1, familyname2To ch nghing:Font-style: italicTo ch m:Font-weight: bold

VI.1. CC THUC TNH NH DNGnh c ch:Font-size: xx-small hoc x-small, small, medium, large, x-large, xx-large hoc Font-size:12ptC th nh dng cc thuc tnh ch nghing, m v c ch cng mt lc:Font: italic bold sizeMu ca ch:Color: colorName hoc #rrggbbMu nn ca ch:Background:colorName hoc #rrggbb

VI.1. CC THUC TNH NH DNGnh khong cc gia cc t, cc k t:Word-spacing:n (n: khong cch gia cc t, tnh bng pixel)Letter-spacing:n (n: khong cch gia cc t, tnh bng pixel)Canh l cho vn bn:Text-Align: left, right, center, justifyThay i dng ch: Text-transform: capitalize, uppercase, lowercase

VI.1.NH DNG DANH SCHList-style:circle chm trn rngList-style: disc chm trn enList-style: square chm en vungList-style: decimal nh s rpList-style: lower-alpha th t alphaList-style: upper-alpha th t alpha ch in hoaList-style: upper-roman s la m hoaList-style: lower-roman s la m thngList-style-image:url: hnh lm bullet

V d:

Inline style