bài giảng thiết kế web - chương7 - css

CASCADING STYLE SHEET-CSS CHNGăVII I. GIIăTHIU  Bngăkiuă(styleăsheet) nhm tho mn nhu cu – Thm m – Gi tính thng nht cho trang HTML. – nh dang mt s tính cht thông thng cùng mt lúc cho tt c các đi tng trên trang  Tin ích ca CSS : – Tit kim thi gian – Khi thay đi đnh dng ch cn thay đi CSS, các trang khác s t đng cp nht s thay đi đó – Có th dùng các CSS cùng vi JavaScript đ to các hiu ng đc bit  Bt li ca CSS: – Không mt trình duyt nào chp nhn nó hoàn toàn – Phi mt thi gian đ hc cách s dng II. PHÂNăLOI-CÁCHăTO 1. Phânăloiă: Có 3 loi – Inline style – Internal style – External style a) Inline style: Là kiu đc gán cho mt dòng hoc mt đon vn bn, bng cách s dng thuc tính style bên trong tag mun đnh dng Cú pháp: <TagNameăStyle=”property1:value1;property2:ă value2;ă…”> Ni dung vn bn mun đnh dng </TagName>  Ví d : <BODY> <P style = “color:aqua ; font-Style:italic; text- Align:center”> This paragraph has an inline style applied to it <P> This paragraph is displayed in the default style. <P> Can you see the <SPAN style = color:red> difference </SPAN> in this line </BODY> b) Internal style : Là bng mu thích hp cho trang riêng l vi nhiu vn bn. – Cách to: Ta bng mu chung trên phn đu trang trong cp tag <head> – S dng: Trong phn body, ni dung nào mun s dng đnh dng theo bng mu trên thì đt trong tag đc đnh ngha trong phn head Cú pháp: <Head> <Style TYPE=”text/css”> TagName {property1:value1;property2:valueă2ă…} (lp li cho mi tag có thuc tính cn đnh dng) </Style> </Head> <HTML> <HEAD> <STYLE TYPE=”text/css”> H1,H2 { color: limegreen; font-family: Arial } </STYLE> </HEAD> <BODY> <H1>This is the H1 element</H1> <H2>This is the H2 element</H2> <H3>This is the H3 element with its default style as displayed in the browser</H3> </BODY> </HTML> c) External style : Là mt bng kiu đc lu tr thành mt file bên ngoài và đc liên kt vi trang HTML. Bng kiu này s đc áp dng và nh hng cho tt c các trang ca mt website.  Cáchăto: – To mt tp tin vn bn mi – Nhp tên các tag mun đnh dng thuc tính theo mu: TagName{property1:ăvalue1;ăproperty2:value2;…} – Lu tp tin vi đnh dng Text Only và có phn m rng .css  Ví d: To tp tin Sheet1.css H2 {color:blue; font-style:italic} P{text-align:justify; text-indent:8pt; font:10pt/15ptă“MyriadăRoman”,”Verdana”} [...]... Font-style: italic : Font-weight: bold : Font-size: xxlarge, x-large, xx- Font: italic bold size -small, small, medium, - Màu Màu : Word-spacing:n Letter-spacing:n cho : Text-Align: left, right, center, justify Text-transform: capitalize, uppercase, lowercase ListListListListList-style: lowerList-style: upperList-style: upperList-style: lowerList-style-image:url: hình làm bullet . vi đnh dng Text Only và có phn m rng .css  Ví d: To tp tin Sheet1 .css H2 {color:blue; font-style:italic} P{text-align:justify; text-indent:8pt; font:10pt/15ptă“MyriadăRoman”,”Verdana”}. <LinkăRel=StyleSheetăType=”text /css ă Href=”tênă tpătin .css > </Head> Víăd: <HTML> <HEAD><TITLE> Changing the rules</TITLE> <LINK REL=stylesheet HREF=” sheet1 .css TYPE=”text /css >. trang  Tin ích ca CSS : – Tit kim thi gian – Khi thay đi đnh dng ch cn thay đi CSS, các trang khác s t đng cp nht s thay đi đó – Có th dùng các CSS cùng vi JavaScript

Định dạng
Số trang	31
Dung lượng	2,54 MB