Ktl-icon-tai-lieu

Định dạng bằng CSS

Được đăng lên bởi luyen-thi-dai-hoc
Số trang: 31 trang   |   Lượt xem: 1191 lần   |   Lượt tải: 1 lần
Định dạng bằng CSS
Đào Việt Cường
Khoa CNTT-ĐHSP Hà Nội
dvc102@yahoo.com | cuongdv@hnue.edu.vn


CSS
 CSS=Cascading Style Sheet: Mẫu quy
định cách thức thể hiện các thẻ HTML
 Style được đưa vào HTML 4.0 để giải
quyết một số vấn đề.
 Giúp tiết kiệm được rất nhiều thời gian và
công sức cho việc thiết kế web.
 Có thể định nghĩa nhiều style vào một thẻ
HTML (Cascading)

Các loại style
 Có 4 loại style:
– Inline Style (Style được qui định trong 1 thẻ
HTML cụ thể)
– Internal Style (Style được qui định trong phần
<HEAD> của 1 trang HTML )
– External Style (style được qui định trong file
.CSS ngoài)
– Browser Default (thiết lập mặc định của trình
duyệt)

 Thứ tự ưu tiên: Mức ưu tiên giảm dần từ
trên xuống

Cách chèn CSS
 Đặt trong <head>…</head>
 Với Internal style:
<style type=“text/css”>
<!-Nội dung định nghĩa style

-->
</style>

Cách chèn CSS (tt)
 Với External style:
– Định nghĩa style trong file riêng (thường có
đuôi .CSS)
– Nhúng file CSS đã định nghĩa vào trang web:
<link href=“địa chỉ file"
rel="stylesheet" type="text/css">

 Với Inline style:
<tên_thẻ style=“tt1:gt1;tt2:gt2;…”>

Khai báo và sử dụng style

Chú ý khi viết style
 Style phân biệt chữ hoa, chữ thường
 Để ghi chú trong style sử dụng:
/*
Đoạn ghi chú

*/

Khai báo style

selector {
Property1: Value1;
Property2: Value2;
}

Style áp dụng cho thẻ cụ thể
 Trường hợp 1 thẻ: Đặt selector là tên_thẻ
p {
color: red;
}

 Khai báo đồng thời nhiều thẻ: Viết danh
sách tên thẻ phân cách bởi dấu phảy
h1,h2,h3,h4,h5,h6{
font-family:arial;

}

Tạo lớp
 Gắn với thẻ cụ thể: Đặt selector là
tên_thẻ.tên_lớp
p.loai1{
color:red;

}
p.loai2{
color:blue;

}

 Không gắn với thẻ cụ thể: bỏ phần tên_thẻ đi,
giữ lại dấu chấm:
.loai3{
color:green;

}

Sử dụng lớp
 Đặt thuộc tính class của thẻ=“tên_lớp”:
<tên_thẻ class=“tên_lớp”>

 Ví dụ:
<p class=“loai1”>Đoạn này màu đỏ</p>
<h1 class=“loai2”>Style không có hiệu
lực</h1>
<h2 class=“loai3”>Tiêu đề màu xanh</h3>

Định danh
 Tương tự như class. Thay dấu chấm (.) thành dấu
thăng (#).
 Cho thẻ cụ thể: tên_thẻ#định_danh{…}
 Tổng quát: #định_danh{…}
 Ví dụ:
p#doan1{
color:red;

}
#loai2{
color:blue;

}

Sử dụng định danh
 Mỗi định danh là duy nhất trên trang
 Đặt thuộc tính id của thẻ = định_danh
<tên_thẻ id=“định_danh”>

 Ví dụ:
<p id=“doan1”>Đoạn này màu đỏ</p>
<h1 id=“loai2”>Tiêu đề xanh</h1>

Một số trường hợp cụ thể

CSS Basic
1. CSS Background
2. CSS Text
3. CSS Font
4. CSS Border
5. CSS Margin
6. CSS Pa...
Định dạng bằng CSS
Định dạng bằng CSS
Đào Việt Cường
Đào Việt Cường
Khoa CNTT-ĐHSP Hà Nội
Khoa CNTT-ĐHSP Hà Nội
dvc102@yahoo.com
dvc102@yahoo.com
|
|
cuongdv@hnue.edu.vn
cuongdv@hnue.edu.vn
http://user.hnue.edu.vn/~cuongdv/
http://user.hnue.edu.vn/~cuongdv/
Định dạng bằng CSS - Trang 2
Để xem tài liệu đầy đủ. Xin vui lòng
Định dạng bằng CSS - Người đăng: luyen-thi-dai-hoc
5 Tài liệu rất hay! Được đăng lên bởi - 1 giờ trước Đúng là cái mình đang tìm. Rất hay và bổ ích. Cảm ơn bạn!
31 Vietnamese
Định dạng bằng CSS 9 10 276