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
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 (704.33 KB, 20 trang )
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 CSS1. Giới thiệu CSS
Style Sheet
CSS – Cascading Style Sheets
Bài 3: CSS cơ bản
4
Style SheetStyle Sheet
Là một tập hợp các khai báo style
<head>
<style type = "text/css">
<tên tag 1> { <tên thuộc tính >: <giá trị> ; … }
<tên tag 1> { <tên thuộc tính >: <giá trị> ; … }
…
</style>
</head>
Các style
Style
Sheet
Bài 3: CSS cơ bản
5
Style SheetStyle Sheet
Là một tập hợp các khai báo style
Ví dụ:
<style type="text/css">
h1 {color:#FF0000}
div {background-color:#66CCFF; color:#0000FF; border-
color:#0000FF; border-style:double; width:300}
ul {list-style:square; color:#660000}
</style>
Bài 3: CSS cơ bản
6
CSS CSS –– Cascading Style SheetsCascading 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ụ:
<div>
<ul>
<li> Canh chua</li>
<li> Cá kho tộ</li>
<li> Trứng chiên</li>
</ul>
</div>
Bài 3: CSS cơ bản
7
2. Các loại CSS2. Các loại CSS
Inline Style
Internal Style
External Style
Bài 3: CSS cơ bản
8
Inline StyleInline 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"
</div>
Bài 3: CSS cơ bản
9
Internal StyleInternal Style
Dùng để định nghĩa các style dùng chung
trong một trang web
<head>
<style type = “text/css” id =“tên style sheet 1”>
selector1 { <tên thuộc tính >: <giá trị> ; … }
…
</style>
<style type = “text/css” id =“tên style sheet 2”>
…
</style>
</head>
Bài 3: CSS cơ bản
10
External StyleExternal 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 StyleExternal 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 { <tên thuộc tính >: <giá trị> ; … }
<head>
…
<link rel=stylesheet href="<tên tập tin>.css" type="text/css">
</head>
Bài 3: CSS cơ bản
12
3. Sử dụng CSS3. 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 SelectorPhâ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 SelectorPhâ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
<html>
<head>
<style type = "text/css">
div{color:#FF0000}
</style>
<head>
<body>
<div>Chào các bạn</div>
</body>
</head>
</html>
Chào các bạn
Bài 3: CSS cơ bản
15
Phân loại SelectorPhâ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".
<style type = "text/css">
.thong_bao{color:#FF0000}
</style>
<div class="thong_bao">Chào các bạn</div>
Chào các bạn
Bài 3: CSS cơ bản
16
Phân loại SelectorPhân loại Selector
Selector = #tag_id
Ví dụ: tạo selector #loi_chao để áp
dụng style cho thẻ có id="loi_chao"
<style type = "text/css">
#loi_chao{color:#FF0000}
</style>
<div id="loi_chao">Chào các bạn</div>
Chào các bạn
Bài 3: CSS cơ bản
17
Nhóm các selectorNhó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 selectorNhóm các selector
<html>
<head>
<style type = "text/css">
#loi_chao, .thong_bao{color:#FF0000}
</style>
<head>
<body>
<div id="loi_chao">Chào các bạn</div>
<div class="thong_bao">Chào các bạn</div>
</body>
</head>
</html>
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ùng4. 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
