Bài giảng - giáo án: 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 TRUNG TÂM TIN HỌC ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM Bài 3: CSS Giới thiệu CSS Các loại CSS Sử dụng CSS Các style thường dùng Bài 3: CSS Giới thiệu CSS  Style Sheet  CSS – Cascading Style Sheets Bài 3: CSS Style Sheet  Là tập hợp khai báo style Style Sheet { : ; … } Các style { : ; … } … Bài 3: CSS Style Sheet  Là tập hợp khai báo style Ví dụ: h1 {color:#FF0000} div {background-color:#66CCFF; color:#0000FF; bordercolor:#0000FF; border-style:double; width:300} ul {list-style:square; color:#660000} Bài 3: CSS CSS – Cascading Style Sheets  Là chuẩn Internet W3C trì  Hiệu ứng style kế thừa từ tag khác Ví dụ:

• Canh chua
• Cá kho tộ
• Trứng chiên

Bài 3: CSS Các loại CSS  Inline Style  Internal Style  External Style Bài 3: CSS Inline Style  Loại style phần khai báo thuộc tính style tag HTML Ví dụ: Chào mừng bạn đến với học "CSS DHTML" Bài 3: CSS Internal Style  Dùng để định nghĩa style dùng chung trang web selector1 { : ; … } … … Bài 3: CSS External Style  Dùng chung website  Phần khai báo nằm tập tin có kiểu css tập tin xem Style Sheet 10 Bài 3: CSS External Style  Khai báo sử dụng: – Khai báo tập tin css selector { : ; … } – Liên kết với trang web … 11 Bài 3: CSS Sử dụng CSS  Phân loại Selector  Nhóm Selector 12 Bài 3: CSS 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 tag html có tên ten_tag_html – Selector = ten_class: áp dụng style cho thẻ html có thuộc tính class=“ten_class” – Selector = #tag_id: áp dụng style cho thẻ html có thuộc tính id=“tag_id” 13 Bài 3: CSS Phân loại Selector  Selector = ten_tag_html Ví dụ: tạo selector div để áp dụng style cho tất thẻ div div{color:#FF0000} Chào bạn Chào bạn 14 Bài 3: CSS Phân loại Selector  Selector = ten_class Ví dụ: tạo selector thong_bao để áp dụng style cho thẻ có thuộc tính class="thong_bao" thong_bao{color:#FF0000} Chào bạn Chào bạn 15 Bài 3: CSS 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 bạn Chào bạn 16 Bài 3: CSS Nhóm selector  Các selector có thuộc tính định dạng định nghĩa chúng style selector cách dấu phẩy (,)  Cú pháp: Selector1, Selector2, { thuoc_tinh1: gia_tri1; thuoc_tinh2: gia_tri2; } 17 Bài 3: CSS Nhóm selector #loi_chao, thong_bao{color:#FF0000} Chào bạn Chào bạn Chào bạn Chào bạn 18 Bài 3: CSS Các style thường dùng  Font chữ  Màu chữ (màu, hình ảnh) – Colors Background  Canh lề văn - Text Alignment  Lề văn đường viền – Margins Borders 19 Bài 3: CSS 20 ... KHOA HỌC TỰ NHIÊN-TP.HCM Bài 3: CSS Giới thiệu CSS Các loại CSS Sử dụng CSS Các style thường dùng Bài 3: CSS Giới thiệu CSS  Style Sheet  CSS – Cascading Style Sheets Bài 3: CSS Style Sheet... type="text /css" > h1 {color:#FF0000} div {background-color:#66CCFF; color:#0000FF; bordercolor:#0000FF; border-style:double; width :30 0} ul {list-style:square; color:#660000} Bài 3: CSS CSS –... type = “text /css? ?? id =“tên style sheet 2”> … Bài 3: CSS External Style  Dùng chung website  Phần khai báo nằm tập tin có kiểu css tập tin xem Style Sheet 10 Bài 3: CSS External