Bài 3: CSS cơ bản

TRUNG TÂM TIN HỌC ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM 1 NHẬP MÔN LẬP TRÌNH WEB VỚI PHP TRUNG TÂM TIN HỌC ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM 2 Bài 3: CSS cơ bản 1. Giới thiệu CSS 2. Các loại CSS 3. Sử dụng CSS 4. Các style thường dùng Bài 3: CSS cơ bản 3 1. Giới thiệu CSS  Style Sheet  CSS – Cascading Style Sheets Bài 3: CSS cơ bản 4 Style Sheet  Là một tập hợp các khai báo style { : ; … } { : ; … } … Các styleStyle Sheet Bài 3: CSS cơ bản 5 Style Sheet  Là một tập hợp các khai báo style Ví dụ: h1 {color:#FF0000} div {background-color:#66CCFF; color:#0000FF; border- color:#0000FF; border-style:double; width:300} ul {list-style:square; color:#660000} Bài 3: CSS cơ bản 6 CSS – Cascading Style Sheets  Là một chuẩn của Internet do W3C duy trì  Hiệu ứng của style có thể được kế thừa từ các tag khác Ví dụ: Canh chua Cá kho tộ Trứng chiên Bài 3: CSS cơ bản 7 2. Các loại CSS  Inline Style  Internal Style  External Style Bài 3: CSS cơ bản 8 Inline Style  Loại style này chính là phần khai báo thuộc tính style trong các tag HTML Ví dụ: <div style="color:#FF0000; background-color:#CCCCCC; border-style:inset; width:450; text-align:center; padding:10,10, 10,10"> Chào mừng các bạn đến với bài học về "CSS và DHTML" Bài 3: CSS cơ bản 9 Internal Style  Dùng để định nghĩa các style dùng chung trong một trang web selector1 { : ; … } … … Bài 3: CSS cơ bản 10 External Style  Dùng chung trong một website  Phần khai báo nằm trong một tập tin có kiểu là .css và tập tin này được xem như là một Style Sheet Bài 3: CSS cơ bản 11 External Style  Khai báo và sử dụng: – Khai báo trong tập tin .css – Liên kết với trang web selector { : ; … } … .css" type="text/css"> Bài 3: CSS cơ bản 12 3. Sử dụng CSS  Phân loại Selector  Nhóm các Selector Bài 3: CSS cơ bản 13 Phân loại Selector  Phân loại selector theo cách áp dụng style: – Selector = ten_tag_html: áp dụng style cho tất cả các tag html có tên là ten_tag_html – Selector = .ten_class: áp dụng style cho các thẻ html có thuộc tính class=“ten_class” – Selector = #tag_id: áp dụng style cho các thẻ html có thuộc tính id=“tag_id” Bài 3: CSS cơ bản 14 Phân loại Selector  Selector = ten_tag_html Ví dụ: tạo selector div để áp dụng style cho tất cả các thẻ div div{color:#FF0000} Chào các bạn Chào các bạn Bài 3: CSS cơ bản 15 Phân loại Selector  Selector = .ten_class Ví dụ: tạo selector .thong_bao để áp dụng style cho các thẻ có thuộc tính class="thong_bao". .thong_bao{color:#FF0000} Chào các bạn Chào các bạn Bài 3: CSS cơ bản 16 Phân loại Selector  Selector = #tag_id Ví dụ: tạo selector #loi_chao để áp dụng style cho thẻ có id="loi_chao" #loi_chao{color:#FF0000} Chào các bạn Chào các bạn Bài 3: CSS cơ bản 17 Nhóm các selector  Các selector có cùng thuộc tính định dạng thì có thể định nghĩa chúng trong cùng style và selector sẽ cách nhau dấu phẩy (,)  Cú pháp: Selector1, Selector2, ... { thuoc_tinh1: gia_tri1; thuoc_tinh2: gia_tri2; ... } Bài 3: CSS cơ bản 18 Nhóm các selector #loi_chao, .thong_bao{color:#FF0000} Chào các bạn Chào các bạn Chào các bạn Chào các bạn Bài 3: CSS cơ bản 19 4. Các style thường dùng  Font chữ  Màu chữ và nền (màu, hình ảnh) – Colors và Background  Canh lề văn bản - Text Alignment  Lề văn bản và đường viền – Margins và Borders Bài 3: CSS cơ bản 20