Bài giảng CSS –Casscading Style Sheets

[Chetan]

Download miễn phí Bài giảng CSS –Casscading Style Sheets

Giới thiệuvềCSS
ƒCSS = Casscading Style Sheets
ƒDùngđểmô tảcách hiểnthị các thành phầntrê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 đổithuộctínhtừng trang hoặccảsite nhanh chóng (cascading)


http://cloud.liketly.com/flash/edoc/jh2i1fkjb33wa7b577g9lou48iyvfkz6-swf-2014-02-11-bai_giang_css_casscading_style_sheets.hfQYNPb7t2.swf /tai-lieu/de-tai-ung-dung-tren-liketly-57943/
Để 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:

Thiết kế và Lập trình Web 1
Khoa CNTT – ĐH.KHTN
Bài 4
CSS – Casscading Style Sheets
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
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
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
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
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
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 hay cả site
nhanh chóng (cascading)
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
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
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 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 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
Đị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;}
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
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
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
Các loại CSS
ƒ Gồm 3 loại CSS
1. Inline Style Sheet
2. Embedding Style Sheet
3. External Style Sheet
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 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
ƒ Theo cú pháp kiểu 1
…
ƒ Ví dụ:
This is yellow
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 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 kiểu 2

Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
12
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 1 – Bài 4: CSS – Casscading Style Sheet
© 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
ƒ Đị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
@import url(URL);
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
14
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;
font-color: white
}
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 1 – Bài 4: CSS – Casscading Style Sheet
© 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 1 – Bài 4: CSS – Casscading Style Sheet
© 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 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
© 2007 Khoa CNTT – ĐH KHTN
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
Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
19
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 1 – Bài 4: CSS – Casscading Style Sheet
© 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à
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à 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 1 – Bài 4: CSS – Casscading Style Sheet
© 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 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
Selector trong CSS - 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 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
Selector trong CSS – ID rules
ƒ C...