Webcourse css

  • 29 trang
  • file .pdf
Thiết kế và Lập trình Web 1
Bài 4
CSS – Casscading Style Sheets
Khoa CNTT – ĐH.KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
Nội dung
ƒ Giới thiệu CSS
ƒ Định nghĩa Style
ƒ Sử dụng và Phân loại CSS
ƒ Selector trong CSS và phạm vi ảnh hưởng
© 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
Nội dung
ƒ Giới thiệu CSS
ƒ Định nghĩa Style
ƒ Sử dụng và Phân loại CSS
ƒ Selector trong CSS và phạm vi ảnh hưởng
© 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
Giới thiệu về CSS
ƒ CSS = Casscading Style Sheets
ƒ Dùng để mô tả cách hiển thị các thành phần trên
trang WEB
ƒ Sử dụng tương tự như dạng TEMPLATE
ƒ Có thể sử dụng lại cho các trang web khác
ƒ Có thể thay đổi thuộc tính từng trang hoặc cả site
nhanh chóng (cascading)
© 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
Nội dung
ƒ Giới thiệu CSS
ƒ Định nghĩa Style
ƒ Sử dụng và Phân loại CSS
ƒ Selector trong CSS và phạm vi ảnh hưởng
© 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
Định nghĩa Style
Kiểu 1 Kiểu 2
“property1:value1; property1:value1;
property2:value2; property2:value2;
……… ………
propertyN:valueN;”>…
propertyN:valueN;}

………

Ví dụ: Ví dụ:

color : blue; color: red;
font-family : Arial;” > DHKHTN

font-family: Verdana, sans-serif; }

DHKHTN


© 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
Định nghĩa Style – Ghi chú
ƒ Giống Ghi chú trong C++
ƒ Sử dung /*Ghi chú*/
ƒ Ví dụ :
ƒ SelectorName {
property1:value1; /*Ghi chu 1*/
property2:value2; /*Ghi chu 2*/
………
propertyN:valueN;}
© 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
Nội dung
ƒ Giới thiệu CSS
ƒ Định nghĩa Style
ƒ Sử dụng và Phân loại CSS
ƒ Selector trong CSS và phạm vi ảnh hưởng
© 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
Các loại CSS
ƒ Gồm 3 loại CSS
1. Inline Style Sheet
2. Embedding Style Sheet
3. External Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
1. Inline Style Sheet
ƒ Định nghĩa style trong thuộc tính style của từng
tag HTML
ƒ Theo cú pháp kiểu 1



ƒ Ví dụ:

This is yellow


© 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
2. Embedding Style Sheet
• Nhúng trong tag

© 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
Embedding Style Sheet – Ví dụ

This is green


<P>This is red, 12 pt. and<br> Garamond.</P><br> Embedded Style Sheet<br> </BODY><br>



12 © 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
3. External Style Sheet
ƒ Mọi style đều lưu trong file có phần mở rộng là *.CSS
ƒ Định nghĩa style theo cú pháp kiểu 2
ƒ Tạo liên kết đến file CSS
1. Trong trang HTML: liên kết bằng tag link. Cú pháp:



2. Trong trang HTML: Liên kết bằng tag style với @import url.
Cú pháp



© 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
External Style Sheet – Ví dụ
Trong tập tin MyStyle.CSS Trong trang Web có sử dụng
MyStyle.CSS

H2 {

FONT-WEIGHT: bold;
FrontPage 98 -<br> FONT-SIZE: 16pt; Cascading Style Sheets
COLOR: white; FONT-STYLE: italic; REL="stylesheet" >
FONT-FAMILY: Arial;
BACKGROUND-COLOR: red;
font-color: white

This is an H2


}

14 © 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
So sánh, Đánh giá
Inline Style Sheet Embedding Style Sheet External Style Sheet
Khai báo Kiểu 1 Kiểu 2 Kiểu 2
Cú pháp



Test Test


Ưu điểm • Dễ dàng quản lý Style • Dễ dàng quản lý Style • Có thể thiết lập Style cho
theo từng tag của tài liệu theo từng tài liệu web. nhiều tài liệu web.
web. • Không cần tải thêm các • Thông tin các Style được
• Có độ ưu tiên cao nhất trang thông tin khác cho trình duyệt cache lại
style
Khuyết điểm • Cần phải Khai báo lại • Cần phải khai báo lại • Tốn thời gian download
thông tin style trong từng thông tin style cho các tài file *.css và làm chậm quá
tài liệu Web và các tài liệu liệu khác trong mỗi lần sử trình biên dịch web ở trình
khác một cách thủ công. dụng duyệt trong lần đầu sử
• Khó cập nhật style dụng
© 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
Độ ưu tiên
ƒ Thứ tự ưu tiên áp dụng định dạng khi sử dụng các
loại CSS (độ ưu tiên giảm dần) :
1. Inline Style Sheet
2. Embedding Style Sheet
3. External Style Sheet
4. Browser Default
© 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
Nội dung
ƒ Giới thiệu CSS
ƒ Định nghĩa Style
ƒ Sử dụng và Phân loại CSS
ƒ Selector trong CSS và phạm vi ảnh hưởng
© 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
Selector
ƒ Là tên 1 style tương ứng với một thành phần được
áp định dạng
ƒ Ví dụ:
.TieuDe1 {
color: red;
font-family: Verdana, sans-serif; }

DHKHTN


19 © 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
Các loại Selector
Loại Mô tả phạm vi ảnh hưởng Ví dụ
element Định dạng áp dụng cho ND tất cả h1 {color: red;}
các tag Element trong tài liệu Web /* ND của thẻ

bị định dạng màu
chữ=đỏ */
#id Định dạng áp dụng cho ND tất cả #test {color: green;}
các tab có thuộc tính id trong tà /* ND của bất kỳ tag có thuộc tính id=test
liệu Web đều bị định dạng màu chữ=xanh lá */
.class Định dạng áp dụng cho ND tất cả .note {color: yellow;}
các tab có thuộc tính class trong /* ND của bất kỳ tag có thuộc tính
tà liệu Web class=note đều bị định dạng màu
chữ=vàng*/
element . class Định dạng áp dụng cho ND các h1.note {text-decoration:
tag Element có thuộc tính class underline;}
tương ứng /* ND của các thẻ

có thuộc tính
class=note đều bị định dạng gạch chân */
© 2007 Khoa CNTT – ĐH KHTN