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 n[r]
(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 Giới thiệu Box Model Cách viết CSS 10 Margin & padding Background 11 Border Font chữ 12 Height & width Text 13 Float & clear Pseudo-classes for Links 14 Position Class & id 15 Layers Span & div 16 Web standard (5) NỘI DUNG Giới thiệu Box Model Cách viết CSS Margin & padding Background 10 Border Font chữ 11 Height & width Text 12 Float & clear Pseudo-classes for Links 13 Position Class & id 14 Layers Span & div 15 Web standard (6) GIỚI THIỆU Cascading Style Sheet (CSS) q Là ngôn ngữ quy định cách trình bày cho các tài liệu viết HTML, XML, SVG, hay UML q Giúp trình bày trang web phong phú và hiệu q Trình bày CSS giúp website đồng bộ, thống và dễ bảo trì (7) NỘI DUNG Giới thiệu Box Model Cách viết CSS 10 Margin & padding Background 11 Border Font chữ 12 Height & width Text 13 Float & clear Pseudo-classes for Links 14 Position Class & id 15 Layers 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 áp dụng các thuộc tính trình bày Nó là các tag HTML, class 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ị 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 § Màu sắc (10) CÁCH VIẾT CSS Đơn vị 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ị CSS Đơn Đơn vị đo chiều dài Mô tả vị em em tương đương kích thước font hành, font hành có kích cỡ 14px thì em = 14 px Đây là đơn vị hữu ích việc hiển thị trang web ex ex chiều cao chữ x in thường font hành Do đó, đơn vị này không phụ thuộc trên kích cỡ font chữ mà còn phụ thuộc loại font chữ vì cùng cỡ 14px chiều cao chữ x font Times và font Tohama là khác (12) CÁCH VIẾT CSS Vị trí đặt CSS Có ba cách khác để nhúng CSS vào tài liệu HTML: q Nội tuyến - Inline style (kiểu thuộc tính) q Bên - Internal style (thẻ style đặt thẻ head) q Bên ngoài - External style (liên kết với 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 tài liệu HTML cách nhúng vào 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 thì không nên dùng cách này q Ví dụ: <p style = “color: aqua ; font-style: italic; textalign: center”> (14) CÁCH VIẾT CSS Vị trí đặt CSS Bên - Internal style q Đưa tất các thuộc tính CSS vào thẻ style <head> <title>Ví dụ</title> <style type=”text/css”> <! body { background-color:#FFF } p { color:#00FF00 } > </style> </head> (15) CÁCH VIẾT CSS Vị trí đặt CSS Bên ngoài - External style q Mã CSS lưu trữ thành file riêng với phần mở rộng là css và liên kết với trang HTML thuộc tính href thẻ link q Đây là cách làm khuyến cáo, nó đặc biệt hữu ích cho việc đồng hay bảo trì website lớn sử dụng cùng 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 § CSS bên ngoài § CSS mặc định trình duyệt q Nếu cùng thuộc tính cho selector có cùng độ ưu tiên cao thì cái sau 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 thuộc tính Ví dụ: p{ width:500px; text-align:left !important; color:#333 !important } (19) NỘI DUNG Giới thiệu Box Model Cách viết CSS 10 Margin & padding Background 11 Border Font chữ 12 Height & width Text 13 Float & clear Pseudo-classes for Links 14 Position Class & id 15 Layers Span & div 16 Web standard (20) BACKGROUND Màu background-color: value Các giá trị mã màu background-color giống color có thêm giá trị transparent để tạo suốt body { background-color:cyan } (21) BACKGROUND Ảnh body{ background-image: url(logo.jpg) background-repeat: no-repeat } q Các giá trị 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 phương, đây là giá trị mặc định § no-repeat: Không lặp lại ảnh (22) BACKGROUND Ảnh Khóa ảnh q Thuộc tính background-attachment: § scroll: Ảnh cuộn cùng nội dung trang web, đây là giá trị mặc định § fixed: Cố định ảnh so với nội dung trang web (23) BACKGROUND Ảnh Định vị ảnh q Thuộc tính background-position: dùng cặp hai giá trị để định vị ảnh § 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 Giới thiệu Box Model Cách viết CSS 10 Margin & padding Background 11 Border Font chữ 12 Height & width Text 13 Float & clear Pseudo-classes for Links 14 Position Class & id 15 Layers Span & div 16 Web standard (26) FONT CHỮ Thuộc tính font-family q Hai loại tên font dùng font-family: § Family-names: Tên cụ thể font Ví dụ: Arial, Verdana, Tohama,… § Generic families: Tên 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 dùng để chọn chế độ bình thường và small-caps font chữ § Một font small-caps là font sử dụng chữ in hoa có kích cỡ nhỏ 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 % § 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 Giới thiệu Box Model Cách viết CSS 10.Margin & padding Background 11.Border Font chữ 12.Height & width Text 13.Float & clear Pseudo-classes for Links 14.Position Class & id 15.Layers 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 đầu tiên đoạn q text-align: left/right/center/justifyàcanh lề q letter-spacing: 5px àkhoảng cách các ký tự văn là 5px (33) TEXT q line-height: 20px à khoảng cách các dòng văn đoạn là 20px q text-decoration: none/underline/overline/lignthrough/blink q text-transform: uppercase/lowercase/capitalize (34) NỘI DUNG Giới thiệu Box Model Cách viết CSS 10 Margin & padding Background 11 Border Font chữ 12 Height & width Text 13 Float & clear Pseudo-classes for Links 14 Position Class & id 15 Layers Span & div 16 Web standard (35) PSEUDO CLASSES FOR LINKS PSEUDO Các trạng thái liên kết q a:link liên kết chưa thăm q a:hover rê chuột lên liên kết q a:visited liên kết thăm q a:active liên kết kích hoạt – 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 Giới thiệu Box Model Cách viết CSS 10 Margin & padding Background 11 Border Font chữ 12 Height & width Text 13 Float & clear Pseudo-classes for Links 14 Position Class & id 15 Layers 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, tính chất đó nó có thể sử dụng nhiều lần q Id dùng để nhận dạng đối tượng đặc trưng, id có tính q Tên id và class không bắt đầu ký tự số (39) CLASS & ID Ví dụ <p>DS Các Tỉnh, Thành Phố Việt Nam</p> <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 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 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: { color:FF0000 } tinh { color:0000FF } (41) CLASS & ID Id Làm nào để Hà Nội 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 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 Giới thiệu Box Model Cách viết CSS 10 Margin & padding Background 11 Border Font chữ 12 Height & width Text 13 Float & clear Pseudo-classes for Links 14 Position Class & id 15 Layers Span & div 16 Web standard (43) SPAN VÀ DIV q <span> 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 <span> dùng để nhóm khối phần tử q <div> có thể nhóm nhiều khối phần tử (44) SPAN VÀ DIV SPAN - Ví dụ <p>Không có gì quý <span class=”nhanmanh”> độc lập</span>, <span class=”nhanmanh”>tự </span>.</p> CSS: nhanmanh { font-weight:bold } (45) SPAN VÀ DIV DIV - Ví dụ <p>DS Các Tỉnh, Thành Phố </p> <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 Giới thiệu Box Model Cách viết CSS 10 Margin & padding Background 11 Border Font chữ 12 Height & width Text 13 Float & clear Pseudo-classes for Links 14 Position Class & id 15 Layers 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 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: <p> 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 thành phần </p> CSS: p { width:200px; margin:30px 20px; padding:20px 10px; border:1px solid #000; text-align:justify } (49) NỘI DUNG Giới thiệu Box Model Cách viết CSS 10 Margin & padding Background 11 Border Font chữ 12 Height & width Text 13 Float & clear Pseudo-classes for Links 14 Position Class & id 15 Layers 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 Giới thiệu Box Model Cách viết CSS 10 Margin & padding Background 11 Border Font chữ 12 Height & width Text 13 Float & clear Pseudo-classes for Links 14 Position Class & id 15 Layers Span & div 16 Web standard (53) BORDER q border-width: thin (mảnh), medium (vừa), thick (dày), giá trị đo cụ thể pixels q border-color: màu đường viền đố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 để đị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 Giới thiệu Box Model Cách viết CSS 10 Margin & padding Background 11 Border Font chữ 12 Height & width Text 13 Float & clear Pseudo-classes for Links 14 Position Class & id 15 Layers Span & div 16 Web standard (56) WIDTH & HEIGHT q width, height : quy định chiều rộng (chiều cao) cho thành phần web q max-width, max-height: quy định chiều rộng (chiều cao) tối đa cho thành phần web q min-width, min-height: quy định chiều rộng (chiều cao) tối thiểu cho thành phần web q Ghi chú: Thông thường chiều cao thành phần web văn trang web đó định Việc định chiều cao chính xác cho thành phần tạo cuộn văn chiều cao văn lớn chiều cao đã định (57) NỘI DUNG Giới thiệu Box Model Cách viết CSS 10 Margin & padding Background 11 Border Font chữ 12 Height & width Text 13 Float & clear Pseudo-classes for Links 14 Position Class & id 15 Layers Span & div 16 Web standard (58) FLOAT & CLEAR q float: dùng để cố định thành phần web bên trái hay bên phải không gian bao quanh nó Thuộc tính float có giá trị: + left: Cố định phần tử bên trái + right: Cố định phần tử bên phải + none: Bình thường (59) FLOAT & CLEAR q clear: thường gán vào các phần tử liên quan tới phần tử đã float để định hướng xử phần tử này Ở ví dụ trước, ta float ảnh qua trái thì mặc nhiên văn tràn lên để lắp vào chỗ trống Nhưng chúng ta đặt vào văn thuộc tính clear thì chúng ta có quyền định xem phần văn đó 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 Giới thiệu Box Model Cách viết CSS 10 Margin & padding Background 11 Border Font chữ 12 Height & width Text 13 Float & clear Pseudo-classes for Links 14 Position Class & id 15 Layers 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) màn hinh § relative: Định vị tính từ vị trí gốc tài liệu § none: q Các thuộc tính cùng với position: § top: value1; § left: value2; § bottom: value3; § right: value4 (62) NỘI DUNG Giới thiệu Box Model Cách viết CSS 10 Margin & padding Background 11 Border Font chữ 12 Height & width Text 13 Float & clear Pseudo-classes for Links 14 Position Class & id 15 Layers Span & div 16 Web standard (63) LAYER q z-index: value value là số, phần tử có số cao nằm trên, phần tử có số thấp nằm 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 Giới thiệu Box Model Cách viết CSS 10 Margin & padding Background 11 Border Font chữ 12 Height & width Text 13 Float & clear Pseudo-classes for Links 14 Position Class & id 15 Layers Span & div 16 Web standard (65) LAYER q Một vấn đề quan trọng là làm đảm bảo trang web bạn có thể hiển thị tốt trên hầu hết các trình duyệt q W3C đã đặt các tiêu chuẩn mã cho web Họ đã tạo công cụ gọi là CSS Validator để đọc và thẩm định tính hợp chuẩn cho CSS bạn q Đặt url file CSS bạn ô url nhấn nút “click to check stylesheet” để chương trình đọc file CSS bạn Nếu file CSS không phù hợp tiêu chuẩn, chương trình hiển thị danh sách lỗi Nếu file CSS hợp chuẩn thì chương trình ảnh chứng nhận Bạn có thể đặt ảnh đó trên trang web bạn để thể nó đã 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)