Nhập môn lập trình Web với PHP - Bài 3: CSS cơ bản

 TRUNG TÂM TIN HỌC
 ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM
NHẬP MÔN LẬP TRÌNH 
WEB VỚI PHP
 1
 TRUNG TÂM TIN HỌC
 ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM
 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
 2
 Bài 3: CSS cơ bản
1. Giới thiệu CSS
  Style Sheet
  CSS – Cascading Style Sheets
 3
 Bài 3: CSS cơ bản
Style Sheet
  Là một tập hợp các khai báo style 
 Style { : ; … } Các style
Sheet
 { : ; … }
 …
 4
 Bài 3: CSS cơ bản
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}
 5
 Bài 3: CSS cơ bản
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
 6
 Bài 3: CSS cơ bản
2. Các loại CSS
  Inline Style
  Internal Style
  External Style
 7
 Bài 3: CSS cơ bản
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"
 8
 Bài 3: CSS cơ bản
Internal Style
  Dùng để định nghĩa các style dùng chung 
 trong một trang web
 selector1 { : ; … }
 …
 …
 9
 Bài 3: CSS cơ bản
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
 10
 Bài 3: CSS cơ bản
External Style
  Khai báo và sử dụng:
 – Khai báo trong tập tin .css
 selector { : ; … }
 – Liên kết với trang web
 …
 .css" type="text/css">
 11
 Bài 3: CSS cơ bản
3. Sử dụng CSS
  Phân loại Selector
  Nhóm các Selector
 12
 Bài 3: CSS cơ bản
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”
 13
 Bài 3: CSS cơ bản
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
 14
 Bài 3: CSS cơ bản
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
 15
 Bài 3: CSS cơ bản
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
 16
 Bài 3: CSS cơ bản
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;
 ...
 } 17
 Bài 3: CSS cơ bản
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
 18
 Bài 3: CSS cơ bản
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
 19
Bài 3: CSS cơ bản
 20