Bài giảng Ôn tập về style sheets

[bunbozoheo]

Download miễn phí Bài giảng Ôn tập về style sheets

ƒThứtựưutiênápdụngđịnh dạng khi sửdụng các loại CSS (độ ưutiêngiảmdần) :
1. Inline Style Sheet
2. Embedding Style Sheet
3. External Style Sheet
4. Browser Default


http://cloud.liketly.com/flash/edoc/jh2i1fkjb33wa7b577g9lou48iyvfkz6-swf-2014-01-13-bai_giang_on_tap_ve_style_sheets.Tfx7TQQYVe.swf /tai-lieu/de-tai-ung-dung-tren-liketly-54797/
Để tải bản Đầy Đủ của tài liệu, xin Trả lời bài viết này, Mods sẽ gửi Link download cho bạn sớm nhất qua hòm tin nhắn.
Ai cần download tài liệu gì mà không tìm thấy ở đây, thì đăng yêu cầu down tại đây nhé:
Nhận download tài liệu miễn phí

Tóm tắt nội dung tài liệu:

Bài giảng môn học
Thiết kế & Lập trình WEB 2
ÔN TẬP VỀ STYLE SHEETS
Khoa Công nghệ thông tin
Trường Đại học Khoa học Tự nhiên
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
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 hay cả site
nhanh chóng (cascading)
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Các loại CSS
ƒ Gồm 3 loại CSS
– Inline Style Sheet (Nhúng CSS vào tag HTML)
– Embedding Style Sheet (Nhúng CSS vào trang web)
– External Style Sheet (Liên kết CSS với trang web)
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
1. Inline Style Sheet
ƒ Định nghĩa style trong thuộc tính style của từng
tag HTML
ƒ Cú pháp
…
ƒ Ví dụ:
This is yellow
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
2. Embedding Style Sheet
• Nhúng trong tag của trang HTML
ƒ Định nghĩa style theo cú pháp

Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
6
Embedding Style Sheet – Ví dụ
Embedded Style Sheet

This is green
This is red, 12 pt. and
Garamond.
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
3. External Style Sheet
ƒ Mọi style đều lưu trong file có phần mở rộng là *.CSS
ƒ 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
@import url(URL);
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
8
External Style Sheet – Ví dụ
Trong tập tin MyStyle.CSS
H2 {
FONT-WEIGHT: bold;
FONT-SIZE: 16pt;
COLOR: white;
FONT-STYLE: italic;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: red;
}
Trong trang Web có sử dụng
MyStyle.CSS
FrontPage 98 -
Cascading Style Sheets
REL="stylesheet" >
This is an H2
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
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
.TieuDe1{color: red;}
Test
href=“main.css” />
Test
Ưu điểm • Dễ dàng quản lý Style
theo từng tag của tài liệu
web.
• Có độ ưu tiên cao nhất
• Dễ dàng quản lý Style
theo từng tài liệu web.
• Không cần tải thêm các
trang thông tin khác cho
style
• Có thể thiết lập Style cho
nhiều tài liệu web.
• Thông tin các Style được
trình duyệt cache lại
Khuyết điểm • cần Khai báo lại
thông tin style trong từng
tài liệu Web và các tài liệu
khác một cách thủ công.
• Khó cập nhật style
• cần khai báo lại
thông tin style cho các tài
liệu khác trong mỗi lần sử
dụng
• Tốn thời gian download
file *.css và làm chậm quá
trình biên dịch web ở trình
duyệt trong lần đầu sử
dụng
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Độ ư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
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Định nghĩa Style
Kiểu 1
“property1:value1;
property2:value2;
………
propertyN:valueN;”>…
Kiểu 2
SelectorName {
property1:value1;
property2:value2;
………
propertyN:valueN;}
………
Ví dụ:

color : blue;
font-family : Arial;” > DHKHTN
Ví dụ:
.TieuDe1 {
color: red;
font-family: Verdana, sans-serif; }
DHKHTN
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
13
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
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
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ả
các tag Element trong tài liệu Web
h1 {color: red;}
/* ND của thẻ bị định dạng màu
chữ=đỏ */
#id Định dạng áp dụng cho ND tất cả
các tab có thuộc tính id trong tài
liệu Web
#test {color: green;}
/* ND của bất kỳ tag có thuộc tính id=test
đều bị định dạng màu chữ=xanh lá */
.class Định dạng áp dụng cho ND tất cả
các tab có thuộc tính class trong
tài liệu Web
.note {color: yellow;}
/* ND của bất kỳ tag có thuộc tính
class=note đều bị định dạng màu
chữ=vàng*/
element . class Định dạng áp dụng cho ND các
tag Element có thuộc tính class
tương ứng
h1.note {text-decoration:
underline;}
/* ND của các thẻ có thuộc tính
class=note đều bị định dạng gạch chân */
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Loại Mô tả phạm vi ảnh hưởng Ví dụ
Grouping Định dạng áp dụng cho ND một
nhóm các tag trong tài liệu.
h1,h2,h3 {background-color:
orange;}
/* ND của các thẻ đều bị
định dạng màu nền = màu cam */
Contextual Định dạng áp dụng cho ND các
thẻ được lồng trong một thẻ cha
nào đó
p strong {color: purple;}
/* ND của các thẻ nằm trong thẻ
đều bị định dạng màu chữ=màu tía */
Pseudo Class
Pseudo
element
Định dạng được áp dụng dựa vào
trạng thái của các Element.
(Không xuất hiện trong mã lệnh
HTML)
Các loại Selector (tt)
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Selector - Element
ƒ Có hiệu ứng trên tất cả element cùng loại tag
ƒ Ví dụ :
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Selector – ID rules
ƒ Có hiệu ứng duy nhất trên một element có đúng id.
ƒ Ví dụ :
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Selector – Class rules
ƒ Có hiệu ứng trên tất cả các loại tag có cùng giá trị
thuộc tính class.
ƒ Ví dụ :
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Selector – Kết hợp Element và Class
ƒ Ví dụ :
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Selector - Contextual Selection
ƒ Định dạng được áp dụng cho nội dung trong
chuổi tag theo đúng thứ tự
ƒ Ví dụ :
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Selector – Pseudo Class
ƒ Định dạng dựa vào trạng thái của liên kết, sự kiện
chuột.
ƒ Có thể kết hợp với Selector khác.
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Selector – Pseudo Element
ƒ Định dạng dựa vào vị trí đầu tiên
của ký tự, của dòng văn bản
ƒ :first-letter, :first-line
ƒ Có thể kết hợp với Selector
khác.
Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Selector – Pseudo Element
...