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
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
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
</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
Copyright: Tài liệu đại học ©