Giới thiệu CSS Style Sheet... CSS CSS – – Cascading Style Sheets 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
Trang 1NHẬP MÔN LẬP TRÌNH
WEB VỚI PHP
Trang 2Bài 3: CSS cơ bản
1 Giới thiệu CSS
Trang 31 Giới thiệu CSS
Style Sheet
Trang 4Style 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
Trang 5Style 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>
Trang 6CSS
CSS – – Cascading Style Sheets 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ụ:
<div>
<ul>
<li> Canh chua</li>
<li> Cá kho tộ</li>
<li> Trứng chiên</li>
</ul>
</div>
Trang 72 Các loại CSS
Inline Style
Internal Style
External Style
Trang 8Inline 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>
Trang 9Internal 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”>
Trang 10External Style
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
Trang 11External Style
Khai báo và sử dụng:
selector { <tên thuộc tính >: <giá trị> ; … }
<head>
…
<link rel =stylesheet href ="<tên tập tin>.css" type="text/css">
Trang 123 Sử dụng CSS
Phân loại Selector
Trang 13Phân loại Selector
Phân loại selector theo cách áp dụng
style:
tất cả các tag html có tên là ten_tag_html
thẻ html có thuộc tính class=“ten_class”
html có thuộc tính id=“tag_id”
Trang 14Phân loại Selector
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
Trang 15Phân loại Selector
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>
Chào các bạn
Trang 16Phâ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
Trang 17Nhóm các selector
thể định nghĩa chúng trong cùng style và
selector sẽ cách nhau dấu phẩy (,)
Selector1, Selector2,
thuoc_tinh2: gia_tri2;
Trang 18Nhó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
Trang 194 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