1 / 38

CHƯƠNG VII CASCADING STYLE SHEET-CSS

CHƯƠNG VII CASCADING STYLE SHEET-CSS. I.GIỚI THIỆU. Bảng kiểu (style sheet) : Là một tập hợp các định dạng được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML và XHTML Tiện ích của CSS T ách riêng nội dung và định dạng , làm cho mã nguồn gọn gàng hơn,

elana
Download Presentation

CHƯƠNG VII CASCADING STYLE SHEET-CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CHƯƠNG VII CASCADING STYLE SHEET-CSS

  2. I.GIỚI THIỆU • Bảngkiểu (style sheet): Làmộttậphợpcácđịnhdạngđược dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML và XHTML • Tiệníchcủa CSS • Tách riêngnội dung và định dạng, làm chomãnguồn gọn gàng hơn, • Tạoracáckiểudángcóthểápdụngchonhiềutrang, tránh lặp lại việc định dạng các trang giống nhau.

  3. I.GIỚI THIỆU • Tiếtkiệmthờigian:Khithayđổiđịnhdạngtrong CSS, cáctrangsửdụng CSS sẽtựđộngcậpnhậtsựthayđổiđó. • Kếthợpvới JavaScript đểtạohiệuứngđặcbiệt • Bấtlợicủa CSS: • Mộtsốtrìnhduyệtkhôngchấpnhận CSS hoàntoàn • Phảimấtthờigianđểhọccáchsửdụng

  4. II. PHÂN LOẠI-CÁCH TẠO • Phânloại : Có 3 loại • Inline style • Internal style • External style

  5. II.1. INLINE STYLE • Inline style: Làkiểuđượcgánchomộtdònghoặcmộtđoạnvănbản, bằngcáchsửdụngthuộctính style bêntrong tag muốnđịnhdạngCúpháp: <TagName Style=”property1:v1;property2: v2; …”> Nội dung vănbảnmuốnđịnhdạng </TagName>

  6. II.1. INLINE STYLE 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>

  7. II.2. Internal style • Internal style : Làbảngmẫuthíchhợpchotrangriênglẻvớinhiềuvănbản. • Cáchtạo: Taọbảngmẫuchungtrênphầnđầutrangtrongcặp tag <head> • Sửdụng: Trongphần body, nội dung nàomuốnsửdụngđịnhdạngtheo Style sheet đãtạo ở trênthìđặttrong tag đượcđịnhnghĩatrongphần head

  8. II.2. Internal style • Cúpháp: <Head> <Style TYPE=”text/css”> TagName{property1:v1;property2:v2 …} (lặplạichomỗi tag cóthuộctínhcầnđịnhdạng) </Style> </Head>

  9. II.2. Internal style <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>

  10. II.3. External style • External style: Làmộtbảngkiểuđượclưutrữthànhmột file bênngoàivàđượcliênkếtvớitrang HTML. • Bảngkiểunàysẽđượcápdụngvàảnhhưởngchotấtcảcáctrangcủamột website.

  11. II.3. External style • Cáchtạo: • Tạomộttập tin vănbảnmới • Nhậptêncác tag muốnđịnhdạngthuộctínhtheomẫu: TagName{property1:v1;property2:v2;…} • Lưutập tin vớiđịnhdạng Text Only vàcóphầnmởrộng.css

  12. II.3. External style • Vídụ: • Tạotập tin Sheet1.css H2 {color:blue; font-style:italic} P{text-align:justify; text-indent:8pt; font:10pt/15pt “Myriad Roman”,”Verdana”}

  13. II.3. External style • Cáchdùng External style: • Cúpháp: <Head> <Link Rel=StyleSheet Type=”text/css” Href=”têntập tin.css”> </Head>

  14. II.3. External style <HTML> <HEAD><TITLE> Changing the rules</TITLE> <LINK REL=stylesheetHREF=”sheet1.css” TYPE=”text/css”> </HEAD> <BODY> <H2> Changing the rules is fun</H2> <P> Changing the rules may not be such fun <H2>The H2 element again</H2> </BODY></HTML>

  15. III. ĐỊNH BẢNG MẪU CHO LỚP Cóthểchiacácyếutốtrong HTML thànhcáclớpđểápdụngkiểumẫuhiệuquảhơn • Cúpháp: <STYLE> .ClassName{property1:v1; property2:v2;…} </STYLE>

  16. III. ĐỊNH BẢNG MẪU CHO LỚP • Trongphần <Body>, đánhdấuphầnnằmtronglớp. • Cúpháp: <TagName Class=”ClassName”> Nội dung </TagName>

  17. III. ĐỊNH BẢNG MẪU CHO LỚP Vídụ: <HTML> <HEAD> <STYLE> .water{color:blue} .danger{color:red} </STYLE> </HEAD> <BODY> <P class=“water”>test water <P class=“danger”>test danger </BODY></HTML>

  18. IV. ĐỊNH CÁC TAG RIÊNG BIỆT Dùngđểápdụngchomộtphầntửriêngbiệttrêntrang Web • Cúpháp: <style> TagName#IDName{property1:v1; property2:v2;…} </style>

  19. IV. ĐỊNH CÁC TAG RIÊNG BIỆT • Trong tag Body nhậpcúpháp: <TagNameID=IDName> Nội dung </TagName>

  20. IV. ĐỊNH CÁC TAG RIÊNG BIỆT Vídụ : <HTML> <HEAD><TITLE> ID Selectors</TITLE> <STYLE> p#control{color: red;font-weight:bold; text-indent:18pt} p{color: magenta;text-indent:0pt} </STYLE> </HEAD> <BODY> <p id=control>A hardware device that allows the user to make electronic copies of graphics or text. <p>Short for picture element. A pixel refers to the small dots that make up an image on the screen. </BODY></HTML>

  21. V. TẠO CÁC TAG TÙY Ý • Có 2 loại tag cóthểkếtnối Class hay các ID đểtạocác tag tuỳ ý, cầnphânbiệtđốitượngcấpkhốivàcấphàng • Đốitượngcấpkhốinhưmộtđoạnvăn, thườngbắtđầumộtdòngmớivàcóthểchứacácđốitượngcấpkhốikhácgồmcác tag: P, H1, Body, table

  22. V. TẠO CÁC TAG TÙY Ý • Đốitượngcấphàngkhôngtạodòngmới, thườngchứavănbảnvàcácyếutốtronghàngkhácgồncác tag: B, Font… • Các tag DIV vàSPAN: cóthểkếtnốivớicácphầntửcấpkhốivà ID đểtạoracác tag tuỳ ý. Trongđó DIV phùhợpvớicácđốitượngcấpkhối, SPAN phùhợpvớicácđốitượngcấphàng.

  23. V.1. TẠO TAG CẤP KHỐI TÙY Ý • Cáchtạo: • Bằngcáchthêmmột CLASS hoặc ID vào tag DIV vàđịnhmẫucầncó. • Trongphần Style hoặcmộtbảngmẫubênngoàitanhập: DIV.ClassName{property1:v1; property2:v2;…} vớiClassNamelàtênlớpsẽsửdụng

  24. V.1. TẠO TAG CẤP KHỐI TÙY Ý Hoặc: DIV#Idname{property1: v1; property2:v2;…} vớiIDNamelàtênđịnhdanhcủa tag DIV

  25. V.1. TẠO TAG CẤP KHỐI TÙY Ý • Ápdụng tag cấpkhốituỳ ý vàotrang HTML • Tạiđầuphầnvănbảnmuốnđịnhdạng, tanhậpcúpháp <DIV Class=”ClassName” IDname=”Idname”> Nội dung </DIV> (bêntrongcóthểchứacác tag <P> hoặc <H1>)

  26. Vídụ : <HTML> <HEAD><TITLE> ID Selectors</TITLE> <STYLE> DIV.control{background:magenta;font-size:28pt} DIV#intro{color:magenta;text-indent:0pt;font-weight:bold} </STYLE> </HEAD> <BODY> <DIV class='control'>A hardware device that allows the user to make electronic copies of graphics or text.</DIV> <DIV ID='intro'>Short for picture element. A pixel refers to the small dots that make up an image on the screen. </DIV> </BODY></HTML>

  27. V.2.TẠO CÁC TAG TRONG HÀNG TÙY Ý Kếtnốinhiềukiểuđịnhdạngvănbảntrongmột tag • Cúpháp: • Trongphần Style, nhậpcúpháp: SPAN.Clname{property1: v1; property2:v2;…} • Hoặc: SPAN#IDname{property1:v1; property2:v2;…}

  28. V.2.TẠO CÁC TAG TRONG HÀNG TÙY Ý • Ápdụng tag tronghàngtuỳ ý vàotrang HTML: • Tạiđầuđoạnvănbảnmuốnđịnhdạng, nhậpcúpháp: <SPAN Class=”classname”> Nội dung vănbản </SPAN> • Hoặc: <SPAN ID=”IDName”> Nội dung vănbản </SPAN>

  29. Vídụ : <HTML> <HEAD><TITLE> ID Selectors</TITLE> <STYLE> SPAN.control{background:magenta;font-size:200%} SPAN#intro{font-variant:small-caps;color: orange;font- weight:bold} </STYLE> </HEAD> <BODY> <SPAN class='control'>A </SPAN> <SPAN style="color:red">hardware device that allows the user to make electronic copies of graphics or text.</span> <SPAN ID='intro'>Short for picture element. A pixel refers to the small dots that make up an image on the screen. </SPAN> </BODY></HTML>

  30. VI.1. CÁC THUỘC TÍNH ĐỊNH DẠNG • ĐỊNH DẠNG VĂN BẢN • Chọnbộ font: font-family: familyname1, familyname2… • Tạochữnghiêng: Font-style: italic • Tạochữđậm: Font-weight: bold

  31. VI.1. CÁC THUỘC TÍNH ĐỊNH DẠNG • Địnhcỡchữ: Font-size: xx-small hoặc x-small, small, medium, large, x-large, xx-large hoặc Font-size:12pt • Cóthểđịnhdạngcácthuộctínhchữnghiêng, đậmvàcởchữcùngmộtlúc: Font: italic bold size • Màucủachữ: Color: colorNamehoặc #rrggbb • Màunềncủachữ: Background:colorNamehoặc #rrggbb

  32. VI.1. CÁC THUỘC TÍNH ĐỊNH DẠNG • Địnhkhoảngcácgiữacáctừ, cáckýtự: Word-spacing:n (n: khoảngcáchgiữacáctừ, tínhbằng pixel) Letter-spacing:n (n: khoảngcáchgiữacáctừ, tínhbằng pixel) • Canhlềchovănbản: Text-Align: left, right, center, justify • Thayđổidạngchữ: Text-transform: capitalize, uppercase, lowercase

  33. VI.1.ĐỊNH DẠNG DANH SÁCH List-style:circlechấmtrònrổng List-style: disc chấmtrònđenList-style: square chấmđenvuôngList-style: decimal đánhsố ả rậpList-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ãthường List-style-image:url: hìnhlàm bullet

  34. Vídụ: <ul style="list-style-image:url(../image/b3.GIF)"> <li><font size="+3" color="#FF0000">Inline style </font> <li><font size="+3“ color="#FF0000">Internal style</font> <li><font size="+3" color="#FF0000">External style</font> </ul>

  35. VI.2. ĐỊNH DẠNG NỀN TRANG • background-color: màunền • background-image: ảnhnền • Background- position: vịtríđặtảnhnềngồmcácgiátrị:left, right, center, top, bottom,inherit • background-repeat: ảnhlặp • Repeat: lặptrêncảtrang • Repeat-x: lặptheochiềungang • Repeat-y: lặptheochiêùđứng • background-attachment: giữảnhcuộn /khôngcuộntheotrangcủatrìnhduyệt

  36. Vídụ: <body style="background-image:url(../image/h1.jpg); background-position:top; background-repeat:repeat-x; background-attachment:inherit">

  37. VI.3. ĐỊNH DẠNG ĐƯỜNG VIỀN • border-style: kiểuđườngviền • border-collapse: collapse: đườngviềnlún • border-bottom-style • border-left-style:double • border-right-style:double • border-top-style • border-left-color

  38. VI.4. ĐỊNH DẠNG HYPERTEXT LINK • Text-Decoration:none: khônggạchdưới • A:visited{color:#rrggbb} • A:link{styles chovịtríchưađượcxem} • A:active{style chonhững link đang click} • A:hoever{style khitrỏlướt qua link} • a:hover {color: #FF00FF;}

More Related