chƯƠng vii cascading style sheet-css
Post on 19-Mar-2016
51 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related