Lap trinh webphan 2

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (491.29 KB, 67 trang )

(1)TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP TP.HCM KHOA CÔNG NGHỆ THÔNG TIN. BÀI GIẢNG MÔN. LẬP TRÌNH WEB PHÍA CLIENT. GV : ThS. Võ Thị Xuân Thiều 06-2011.

(2) NỘI DUNG MÔN HỌC. TỔNG QUAN PHẦN 1: NGÔN NGỮ HTML PHẦN 2: CASCADING STYLE SHEET (CSS) PHẦN 3: JAVASCRIPT.

(3) TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP TP.HCM KHOA CÔNG NGHỆ THÔNG TIN. BÀI GIẢNG MÔN: LẬP TRÌNH WEB PHÍA CLIENT. PHẦN II: CASCADING STYLE SHEET (CSS). GV : ThS. Võ Thị Xuân Thiều 06-2011.

(4) NỘI DUNG. 1. Giới thiệu. 9. Box Model. 2. Cách viết CSS. 10. Margin & padding. 3. Background. 11. Border. 4. Font chữ. 12. Height & width. 5. Text. 13. Float & clear. 6. Pseudo-classes for Links. 14. Position. 7. Class & id. 15. Layers. 8. Span & div. 16. Web standard.

(5) NỘI DUNG. 1. Giới thiệu. 1. Box Model. 2. Cách viết CSS. 9. Margin & padding. 3. Background. 10. Border. 4. Font chữ. 11. Height & width. 5. Text. 12. Float & clear. 6. Pseudo-classes for Links. 13. Position. 7. Class & id. 14. Layers. 8. Span & div. 15. Web standard.

(6) GIỚI THIỆU Cascading Style Sheet (CSS) q Là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XML, SVG, hay UML. q Giúp trình bày trang web phong phú và hiệu quả hơn. q Trình bày bằng CSS giúp website đồng bộ, thống nhất và dễ bảo trì..

(7) NỘI DUNG. 1. Giới thiệu. 9. Box Model. 2. Cách viết CSS. 10. Margin & padding. 3. Background. 11. Border. 4. Font chữ. 12. Height & width. 5. Text. 13. Float & clear. 6. Pseudo-classes for Links. 14. Position. 7. Class & id. 15. Layers. 8. Span & div. 16. Web standard.

(8) CÁCH VIẾT CSS Cú pháp CSS q Selector { property:value; } §. Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày. Nó là các tag HTML, class hoặc id. VD: body, p, #title, #content, .username,…. §. Property: Các thuộc tính quy định cách trình bày. VD: background-color, font-family, color, padding. q VD: h1, h2, h3 {color: #FF0000; font-family: arial}.

(9) CÁCH VIẾT CSS Đơn vị trong CSS q CSS2 hổ trợ các loại đơn vị đo: §. Chiều dài. §. Đo góc. §. Thời gian. §. Cường độ âm thanh. §. Màu sắc.

(10) CÁCH VIẾT CSS. Đơn vị trong CSS Đơn vị. Đơn vị đo chiều dài Mô tả. %. Phần trăm. in. Inch (1 inch = 2.54 cm). cm. Centimeter. mm. Millimeter. pt. Point (1 pt = 1/72 inch). pc. Pica (1 pc = 12 pt). px. Pixels.

(11) CÁCH VIẾT CSS. Đơn vị trong CSS Đơn. Đơn vị đo chiều dài Mô tả. vị em. 1 em tương đương kích thước font hiện hành, nếu font hiện hành có kích cỡ 14px thì 1 em = 14 px. Đây là một đơn vị rất hữu ích trong việc hiển thị trang web.. ex. 1 ex bằng chiều cao của chữ x in thường của font hiện hành. Do đó, đơn vị này không những phụ thuộc trên kích cỡ font chữ mà còn phụ thuộc loại font chữ vì cùng 1 cỡ 14px nhưng chiều cao chữ x của font Times và font Tohama là khác nhau..

(12) CÁCH VIẾT CSS. Vị trí đặt CSS Có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML: q Nội tuyến - Inline style (kiểu thuộc tính) q Bên trong - Internal style (thẻ style đặt trong thẻ head) q Bên ngoài - External style (liên kết với một file CSS bên ngoài).

(13) CÁCH VIẾT CSS. Vị trí đặt CSS. Nội tuyến - Inline style. q Nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng q Nếu muốn áp dụng nhiều thuộc tính cho nhiều thẻ HTML khác nhau thì không nên dùng cách này q Ví dụ: .

(14) CÁCH VIẾT CSS. Vị trí đặt CSS. Bên trong - Internal style. q Đưa tất cả các thuộc tính CSS vào trong thẻ style <head> <title>Ví dụ</title> <style type=”text/css”> . </style> </head>.

(15) CÁCH VIẾT CSS. Vị trí đặt CSS. Bên ngoài - External style. q Mã CSS được lưu trữ thành một file riêng với phần mở rộng là .css và được liên kết với trang HTML bằng thuộc tính href của thẻ link. q Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu.

(16) CÁCH VIẾT CSS. Vị trí đặt CSS. Bên ngoài - External style. q 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”} q Trong file .htm <head> <link rel=“stylesheet” type=”text/css” href=”Sheet1.css”> </head>.

(17) CÁCH VIẾT CSS. Sự ưu tiên q Thứ tự ưu tiên: §. CSS nội tuyến. §. CSS bên trong. §. CSS bên ngoài. §. CSS mặc định của trình duyệt. q Nếu cùng một thuộc tính cho một selector có cùng độ ưu tiên cao nhất thì cái sau được lấy..

(18) CÁCH VIẾT CSS. Sự ưu tiên q Dùng thuộc tính !important để tăng độ ưu tiên cho một thuộc tính. Ví dụ: p{ width:500px; text-align:left !important; color:#333 !important }.

(19) NỘI DUNG. 1. Giới thiệu. 9. Box Model. 2. Cách viết CSS. 10. Margin & padding. 3. Background. 11. Border. 4. Font chữ. 12. Height & width. 5. Text. 13. Float & clear. 6. Pseudo-classes for Links. 14. Position. 7. Class & id. 15. Layers. 8. Span & div. 16. Web standard.

(20) BACKGROUND. Màu nền background-color: value Các giá trị mã màu của background-color cũng giống như color nhưng có thêm giá trị transparent để tạo nền trong suốt. body { background-color:cyan }.

(21) BACKGROUND. Ảnh nền body{ background-image: url(logo.jpg) background-repeat: no-repeat } q Các giá trị của background-repeat: §. repeat-x: Chỉ lặp lại ảnh theo phương ngang.. §. repeat-y: Chỉ lặp lại ảnh theo phương dọc.. §. repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định. §. no-repeat: Không lặp lại ảnh.

(22) BACKGROUND. Ảnh nền. Khóa ảnh nền. q Thuộc tính background-attachment: §. scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.. §. fixed: Cố định ảnh nền so với nội dung trang web..

(23) BACKGROUND. Ảnh nền. Định vị ảnh nền. q Thuộc tính background-position: dùng một cặp hai giá trị để định vị ảnh nền. §. Các đơn vị tuyệt đối: cm, mm, px, in, …. §. Các đơn vị qui đổi: %. §. Các vị trí đặc biệt: top, bottom, left, right.

(24) BACKGROUND. Thuộc tính backgroud rút gọn q Cú pháp: background:<background-color> | <background-image> | <background-repeat> | <background-attachment> | <background-position> q Ví dụ: background-color:transparent; background-image: url(logo.png); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; à background:transparent url(logo.png) no-repeat fixed right bottom;.

(25) NỘI DUNG. 1. Giới thiệu. 9. Box Model. 2. Cách viết CSS. 10. Margin & padding. 3. Background. 11. Border. 4. Font chữ. 12. Height & width. 5. Text. 13. Float & clear. 6. Pseudo-classes for Links. 14. Position. 7. Class & id. 15. Layers. 8. Span & div. 16. Web standard.

(26) FONT CHỮ. Thuộc tính font-family q Hai loại tên font được dùng trong font-family: §. Family-names: Tên cụ thể của một font. Ví dụ: Arial, Verdana, Tohama,…. §. Generic families: Tên của một họ gồm nhiều font. Ví dụ: sans-serif, serif,…. q Ví dụ: h1, h2, h3 { font-family: “Time New Roman”, arial,serif }.

(27) FONT CHỮ. Thuộc tính font-variant q font-variant: small-caps §. Thuộc tính font-variant được dùng để chọn giữa chế độ bình thường và small-caps của một font chữ. §. Một font small-caps là một font sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa chuẩn..

(28) FONT CHỮ. Thuộc tính font-weight q font-weight: §. bold: in đậm. §. normal : bình thường. §. Có thể là các giá trị 100, 200, …, 900.

(29) FONT CHỮ. Thuộc tính font-size q font-size quy định kích thước chữ. Kích thước chữ có thể là: §. Đơn vị tuyệt đối: px, pt, in, cm, …. §. Đơn vị qui đổi: em hoặc %. §. Các giá trị: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger.

(30) FONT CHỮ. Thuộc tính font rút gọn q font :<font-style> | < font-variant> | <font-weight> | <font-size> |< font-family> q Ví dụ: h1 { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 35px; font-family: arial,verdana,sans-serif; } à h1 { font: italic small-caps bold 35px arial, verdana, sans-serif; }.

(31) NỘI DUNG. 1. Giới thiệu. 9. Box Model. 2. Cách viết CSS. 10.Margin & padding. 3. Background. 11.Border. 4. Font chữ. 12.Height & width. 5. Text. 13.Float & clear. 6. Pseudo-classes for Links. 14.Position. 7. Class & id. 15.Layers. 8. Span & div. 16.Web standard.

(32) TEXT. q color: #FFF à màu chữ trắng q text-indent: 30px à thụt đầu dòng 30px cho dòng văn bản đầu tiên của đoạn q text-align: left/right/center/justifyàcanh lề q letter-spacing: 5px àkhoảng cách giữa các ký tự trong văn bản là 5px.

(33) TEXT. q line-height: 20px à khoảng cách giữa các dòng văn bản trong đoạn là 20px q text-decoration: none/underline/overline/lignthrough/blink q text-transform: uppercase/lowercase/capitalize.

(34) NỘI DUNG. 1. Giới thiệu. 9. Box Model. 2. Cách viết CSS. 10. Margin & padding. 3. Background. 11. Border. 4. Font chữ. 12. Height & width. 5. Text. 13. Float & clear. 6. Pseudo-classes for Links. 14. Position. 7. Class & id. 15. Layers. 8. Span & div. 16. Web standard.

(35) PSEUDO--CLASSES FOR LINKS PSEUDO. Các trạng thái của liên kết q a:link khi liên kết chưa được thăm q a:hover khi rê chuột lên liên kết q a:visited khi liên kết được thăm q a:active khi liên kết đang được kích hoạt – đang giữ nhấn chuột.

(36) PSEUDO--CLASSES FOR LINKS PSEUDO. Ví dụ a { border:1px solid #000; font-size:14px } a:link { color:#00FF00; } a:hover { background-color:#00BFF3; color:#FF00FF; font-size:1.2em; text-decoration:blink }. a:visited { background-color:#FFF568; color:#FF0000; text-decoration:none } a:active { color:#662D91; font-variant:small-caps }.

(37) NỘI DUNG. 1. Giới thiệu. 9. Box Model. 2. Cách viết CSS. 10. Margin & padding. 3. Background. 11. Border. 4. Font chữ. 12. Height & width. 5. Text. 13. Float & clear. 6. Pseudo-classes for Links. 14. Position. 7. Class & id. 15. Layers. 8. Span & div. 16. Web standard.

(38) CLASS & ID. q Class dùng để nhóm các đối tượng có cùng thuộc tính, do tính chất đó nó có thể được sử dụng nhiều lần. q Id dùng để nhận dạng một đối tượng đặc trưng, id có tính duy nhất. q Tên của id và class không được bắt đầu bằng ký tự số..

(39) CLASS & ID Ví dụ DS Các Tỉnh, Thành Phố của Việt Nam <ul> <li>Hà Nội</li> <li>TP. Hồ Chí Minh</li> <li>Đà Nẵng</li> <li>Thừa Thiên Huế</li> <li>Khánh Hòa</li> <li>Quãng Ninh</li> <li>Tiền Giang</li> </ul>.

(40) CLASS & ID Class Ở ví dụ trước, làm thế nào để tên các thành phố là màu đỏ và tên các tỉnh là màu xanh da trời? à Dùng class nhóm thành 2 nhóm thành phố và tỉnh. <li class=”tp”>Hà Nội</li> <li class=”tp”>TP. Hồ Chí Minh</li> <li class=”tp”>Đà Nẵng</li> <li class=”tinh”>Thừa Thiên Huế</li> <li class=”tinh”>Khánh Hòa</li> <li class=”tinh”>Quãng Ninh</li> <li class=”tinh”>Tiền Giang</li>. CSS: .tp { color:FF0000 } .tinh { color:0000FF }.

(41) CLASS & ID Id Làm thế nào để Hà Nội sẽ có màu đỏ sậm, TP. Hồ Chí Minh màu đỏ, Đà Nẵng màu đỏ tươi còn các tỉnh màu xanh da trời à Dùng id để nhận dạng mỗi thành phố và dùng class để nhóm các tỉnh. <li id=”hanoi”>Hà Nội</li> <li id=”hcmc”>TP. Hồ Chí Minh</li> <li id=”danang”>Đà Nẵng</li> <li class=”tinh”>Thừa Thiên Huế</li> <li class=”tinh”>Khánh Hòa</li> <li class=”tinh”>Quãng Ninh</li> <li class=”tinh”>Tiền Giang</li>. #hanoi { color:# 790000 } #hcmc{ color:#FF0000} #danang{ color:#FF00FF} .tinh{ color:#0000FF}.

(42) NỘI DUNG. 1. Giới thiệu. 9. Box Model. 2. Cách viết CSS. 10. Margin & padding. 3. Background. 11. Border. 4. Font chữ. 12. Height & width. 5. Text. 13. Float & clear. 6. Pseudo-classes for Links. 14. Position. 7. Class & id. 15. Layers. 8. Span & div. 16. Web standard.

(43) SPAN VÀ DIV. q và <div> là các thẻ trung hòa, dùng để nhóm các phần tử lại cho mục đích định dạng CSS q dùng để nhóm một khối phần tử q <div> có thể nhóm một hoặc nhiều khối phần tử.

(44) SPAN VÀ DIV SPAN - Ví dụ Không có gì quý hơn độc lập, tự do . CSS: .nhanmanh { font-weight:bold }.

(45) SPAN VÀ DIV DIV - Ví dụ DS Các Tỉnh, Thành Phố . <li>Quãng Ninh</li>. <ul>. <li>Tiền Giang</li>. <div id=”tp”>. </div>. <li>Hà Nội</li>. </ul>. <li>TP. Hồ Chí Minh</li> <li>Đ Nẵng</li>. CSS: #tp {. </div> <div id=”tinh”>. color:#FF0000 } #tinh {. <li>Thừa Thiên Huế</li> <li>Khánh Hòa</li>. color:0000FF }.

(46) NỘI DUNG. 1. Giới thiệu. 9. Box Model. 2. Cách viết CSS. 10. Margin & padding. 3. Background. 11. Border. 4. Font chữ. 12. Height & width. 5. Text. 13. Float & clear. 6. Pseudo-classes for Links. 14. Position. 7. Class & id. 15. Layers. 8. Span & div. 16. Web standard.

(47) BOX MODEL. Box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần. Nó bao gồm padding (vùng đệm), border (viền) và margin (canh lề) và các tùy chọn..

(48) BOX MODEL. Ví dụ HTML: Trong CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần. CSS: p { width:200px; margin:30px 20px; padding:20px 10px; border:1px solid #000; text-align:justify. }.

(49) NỘI DUNG. 1. Giới thiệu. 9. Box Model. 2. Cách viết CSS. 10. Margin & padding. 3. Background. 11. Border. 4. Font chữ. 12. Height & width. 5. Text. 13. Float & clear. 6. Pseudo-classes for Links. 14. Position. 7. Class & id. 15. Layers. 8. Span & div. 16. Web standard.

(50) MARGIN & PADDING Margin body { margin-top:80px; margin-bottom:40px; margin-left:30px; margin-right:10px; border:1px dotted #FF0000 } Viết rút gọn: body { margin:80px 10px 40px 30px; border:1px dotted #FF0000 } Cú pháp: margin:<margin-top> | <margin-right> | <margin-bottom> | <margin-left> Hoặc: margin:<value1>|< value2>: • value1 là giá trị margin-top và margin-bottom • value2 là giá trị margin-left và margin-right.

(51) MARGIN & PADDING Padding body { padding: 0px 50px 20px 30px; border: 1px dotted #FF0000 }.

(52) NỘI DUNG. 1. Giới thiệu. 9. Box Model. 2. Cách viết CSS. 10. Margin & padding. 3. Background. 11. Border. 4. Font chữ. 12. Height & width. 5. Text. 13. Float & clear. 6. Pseudo-classes for Links. 14. Position. 7. Class & id. 15. Layers. 8. Span & div. 16. Web standard.

(53) BORDER. q border-width: thin (mảnh), medium (vừa), thick (dày), hoặc một giá trị đo cụ thể như pixels q border-color: màu đường viền của đối tượng q border-style: dotted, dashed, solid, double, groove, ridge, inset và outset. Thuộc tính none hay hidden dùng để ẩn đường viền § border-top, border-right, border-bottom hay border-left để chỉ định viền riêng cho các đối tượng.

(54) BORDER. q border-style (minh họa):. q Thuộc tính border rút gọn: border: <border-width> |<border-color> |<border-style>.

(55) NỘI DUNG. 1. Giới thiệu. 9. Box Model. 2. Cách viết CSS. 10. Margin & padding. 3. Background. 11. Border. 4. Font chữ. 12. Height & width. 5. Text. 13. Float & clear. 6. Pseudo-classes for Links. 14. Position. 7. Class & id. 15. Layers. 8. Span & div. 16. Web standard.

(56) WIDTH & HEIGHT. q width, height : quy định chiều rộng (chiều cao) cho một thành phần web q max-width, max-height: quy định chiều rộng (chiều cao) tối đa cho một thành phần web q min-width, min-height: quy định chiều rộng (chiều cao) tối thiểu cho một thành phần web q Ghi chú: Thông thường chiều cao một thành phần web do văn bản trong trang web đó quyết định. Việc định chiều cao chính xác cho một thành phần sẽ tạo thanh cuộn văn bản nếu chiều cao văn bản lớn hơn chiều cao đã định.

(57) NỘI DUNG. 1. Giới thiệu. 9. Box Model. 2. Cách viết CSS. 10. Margin & padding. 3. Background. 11. Border. 4. Font chữ. 12. Height & width. 5. Text. 13. Float & clear. 6. Pseudo-classes for Links. 14. Position. 7. Class & id. 15. Layers. 8. Span & div. 16. Web standard.

(58) FLOAT & CLEAR q float: dùng để cố định một thành phần web về bên trái hay bên phải không gian bao quanh nó Thuộc tính float có 3 giá trị: + left: Cố định phần tử về bên trái. + right: Cố định phần tử về bên phải. + none: Bình thường.

(59) FLOAT & CLEAR. q clear: thường được gán vào các phần tử liên quan tới phần tử đã được float để quyết định hướng xử sự của phần tử này. Ở ví dụ trước, khi ta float tấm ảnh qua trái thì mặc nhiên văn bản sẽ được tràn lên để lắp vào chỗ trống. Nhưng khi chúng ta đặt vào văn bản thuộc tính clear thì chúng ta có quyền quyết định xem phần văn bản đó có được tràn lên hay không. q clear có các giá trị: left (tràn bên trái), right (tràn bên phải), both (không tràn) và none.

(60) NỘI DUNG. 1. Giới thiệu. 9. Box Model. 2. Cách viết CSS. 10. Margin & padding. 3. Background. 11. Border. 4. Font chữ. 12. Height & width. 5. Text. 13. Float & clear. 6. Pseudo-classes for Links. 14. Position. 7. Class & id. 15. Layers. 8. Span & div. 16. Web standard.

(61) POSITION q position: thuộc tính dùng để định vị đối tượng. Thuộc tính này có các giá trị: § absolute: Định vị với gốc tọa độ là tọa độ (0, 0) của màn hinh § relative: Định vị được tính từ vị trí gốc trong tài liệu. § none: q Các thuộc tính đi cùng với position: § top: value1; § left: value2; § bottom: value3; § right: value4.

(62) NỘI DUNG. 1. Giới thiệu. 9. Box Model. 2. Cách viết CSS. 10. Margin & padding. 3. Background. 11. Border. 4. Font chữ. 12. Height & width. 5. Text. 13. Float & clear. 6. Pseudo-classes for Links. 14. Position. 7. Class & id. 15. Layers. 8. Span & div. 16. Web standard.

(63) LAYER. q z-index: value value là một con số, phần tử có số cao hơn sẽ nằm trên, phần tử có số thấp hơn sẽ nằm dưới. Ví dụ: #logo1 { position:absolute; top:70px; left:50px; z-index:1 } #logo2 { position:absolute; top:140px; left:100px; z-index:2 }.

(64) NỘI DUNG. 1. Giới thiệu. 9. Box Model. 2. Cách viết CSS. 10. Margin & padding. 3. Background. 11. Border. 4. Font chữ. 12. Height & width. 5. Text. 13. Float & clear. 6. Pseudo-classes for Links. 14. Position. 7. Class & id. 15. Layers. 8. Span & div. 16. Web standard.

(65) LAYER. q. Một trong những vấn đề quan trọng là làm sao đảm bảo trang web của bạn có thể hiển thị tốt trên hầu hết các trình duyệt.. q. W3C đã đặt ra các tiêu chuẩn về mã cho web. Họ đã tạo ra một công cụ gọi là CSS Validator để đọc và thẩm định tính hợp chuẩn cho CSS của bạn.. q. Đặt url file CSS của bạn ở ô url rồi nhấn nút “click to check stylesheet” để chương trình đọc file CSS của bạn. Nếu file CSS không phù hợp tiêu chuẩn, chương trình sẽ hiển thị danh sách lỗi. Nếu file CSS hợp chuẩn thì chương trình sẽ hiện ra bức ảnh chứng nhận. Bạn có thể đặt bức ảnh đó trên trang web của bạn để thể hiện nó đã được xây dựng trên các mã chuẩn..

(66) TÀI LiỆU THAM KHẢO. [1] WallPeart, Simple CSS Standard Edition.

(67) Võ Th Xuân Thi u.

(68)

Lap trinh webphan 2

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về