Bài 2 Cơ chế làm việc của CSS - Giáo trình FPT

Bài 2
Cơ chế làm việc của CSS

NHẮC LẠI BÀI TRƯỚC
Nhắc lại về HTML
Định nghĩa XHTML, CSS
Cách thiết kế layout trang web
Làm quen với cấu trúc một trang web
Làm quen với những plugin kiểm tra mã XHTML và
CSS trên những trình duyệt khác nhau
Nhắc lại về HTML
Định nghĩa XHTML, CSS
Cách thiết kế layout trang web
Làm quen với cấu trúc một trang web
Làm quen với những plugin kiểm tra mã XHTML và
CSS trên những trình duyệt khác nhau
Bài 2 - Cơ chế làm việc của CSS 2

MỤC TIÊU BÀI HỌC
Cách áp dụng CSS cho trang web
Cấu trúc & Quy tắc khai báo CSS
Pseudo-Class (lớp giả)
Tính kế thừa trong CSS
Khai báo giá trị màu sắc và số trong CSS
Cách áp dụng CSS cho trang web
Pseudo-Class (lớp giả)
Tính kế thừa trong CSS
Khai báo giá trị màu sắc và số trong CSS

CÁCH ÁP DỤNG CSS
3 cách áp dụng CSS trong XHTML:
CSS
Bài 2 - Cơ chế làm việc của CSS
CSS
Linked Inline Embedded
4

INLINE
Inline: <p style="font-size: 25pt; font-weight:bold;
font-style: italic; color:red;">nội dung ...</p>
Inline
Style trong Embedded bị ghi đèĐịnh nghĩa dưới dạng
thuộc tính của thẻ
Giới hạn áp dụng trong thẻ được chèn
Nặng cho file HTML
Không có tính linh động
Lộn xộn giữa nội dung và trình bày
5
Định nghĩa dưới dạng
thuộc tính của thẻ

EMBEDDED
<head>
<style type="text/css">
h1 {font-size: 16px;}
p {color:blue;}
</style>
</head>
Embedded
Định nghĩa trong thẻ
<head> của trang
<head>
<style type="text/css">
h1 {font-size: 16px;}
p {color:blue;}
</style>
</head>
Định nghĩa style tập trung
Dùng lại được cho nhiều thẻ
Giới hạn áp dụng trong trang
Ghi đè style trong file CSS được Linked
6

LINKED
<head>
<link href="my_style_sheet.css" media="screen"
rel="stylesheet" type="text/css" />
</head>
<head>
<link href="my_style_sheet.css" media="screen"
rel="stylesheet" type="text/css" />
</head>
Các style được định nghĩa
trong file .css riêng và
được liên kết với trang,
định nghĩa liên kết đặt
trong thẻ <head>
/* CLASS:LIME TAG STYLES */
body.lime {background-color:#FFF;}
.lime #main_wrapper {background-color:#FFF;}
.lime #header {background-color:#507EA1;}
.lime #nav {background-color:transparent;}
.lime #content {background-color:#CFE673;}
.lime #promo {background-color:transparent;}
.lime #footer {background-color:#BFCCD6;}

LINKED
Linked
Có tính kế thừa
Phạm vi áp dụng: toàn bộ các trang trong website
Phạm vi áp dụng: toàn bộ các trang trong website
Thiết kế, chỉnh sửa dễ dàng
Áp dụng được nhiều file CSS
8

CẤU TRÚC ĐỊNH NGHĨA STYLE
Selector Câu lệnh
Là thẻ, id, lớp,…
Thuộc tính : Giá trị
10
Là thẻ, id, lớp,…
Các thuộc tính và
kiểu được CSS quy
định sẵn

ĐỊNH NGHĨA SELECTOR THEO THẺ
Định nghĩa style cho một selector:
h1 {color:blue; font-weight:bold;}
Định nghĩa cùng style cho nhiều selector:
h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}
Cùng một selector, có thể định nghĩa nhiều style
h3 {font-style: italic;}
Định nghĩa theo ngữ cảnh
div p {color:red;}
Định nghĩa style cho một selector:
h1 {color:blue; font-weight:bold;}
Định nghĩa cùng style cho nhiều selector:
Cùng một selector, có thể định nghĩa nhiều style
h3 {font-style: italic;}
Định nghĩa theo ngữ cảnh
div p {color:red;}

CÂY PHÂN CẤP THẺ CỦA TRANG
Hệ thống phân cấp này thể hiện thẻ nào lồng trong
thẻ nào

CSS:
p span em {color:green;}
XHTML:
<h1>Selector ngữ cảnh <em>rất</em> chọn lọc. </h1>
<p>Ví dụ này hướng dẫn cách nhắm đến một thẻ <em>cụ thể</em> bằng hệ thống phân cấp của
trang.</p>
<p>Chỉ cần là thẻ con cháu <span>theo <em>thứ tự được chỉ định</em> trong selector</span>;
các thẻ khác có thể nằm ở giữa và selector vẫn làm việc đúng.</p>
CSS:
p span em {color:green;}
XHTML:
trang.</p>
Selector em nằm trong thẻ span, và tất cả
nằm trong thẻ p nên chịu tác động của định
nghĩa CSS (đổi màu chữ thành xanh)

Làm việc với selector con
Nếu muốn viết một định nghĩa để thẻ được định
hướng phải là thẻ con (trực tiếp) của một thẻ cụ
thể, sử dụng ký hiệu >
p > em {color: green;}

CSS:
XHTML:
trang.</p>
CSS:
XHTML:
trang.</p>
Selector em là con của p nên mới chịu tác
động của thuộc tính màu sắc chữ xanh. Thẻ
em thứ hai không phải là con trực tiếp nên
không chịu tác động

ID & CLASS (LỚP)
Thuộc tính id: dùng để định danh (identifier) một thẻ
trên trang web
Ví dụ:
<div id="header">nội dung</div>
Thuộc tính class: dùng để định nghĩa một kiểu định
dạng
Ví dụ:
<div class="navigationbar">nội dung</div>
Slide 1 – XHTML: Cấu trúc nội dung web 16
Thuộc tính id: dùng để định danh (identifier) một thẻ
trên trang web
Ví dụ:
<div id="header">nội dung</div>
Thuộc tính class: dùng để định nghĩa một kiểu định
dạng
Ví dụ:
<div class="navigationbar">nội dung</div>

CLASS
Định dạng cụ thể vùng/thẻ tài liệu
Mang tính chất kế thừa, sử dụng lại nhiều lần với
nhiều vùng/thẻ trên trang
Được gắn với thẻ XHTML
Có thể áp dụng nhiều class trên một thẻ XHTML
Sử dụng ký tự . ở đầu định nghĩa style
Định dạng cụ thể vùng/thẻ tài liệu
Mang tính chất kế thừa, sử dụng lại nhiều lần với
nhiều vùng/thẻ trên trang
Được gắn với thẻ XHTML
Có thể áp dụng nhiều class trên một thẻ XHTML
Sử dụng ký tự . ở đầu định nghĩa style

ĐỊNH NGHĨA SELECTOR THEO CLASS
CSS:
p {font-family: Helvetica, sans-serif;}
.specialtext {font-weight:bold;}
XHTML:
<h1 class="specialtext">Đây là tiêu đề có <span>cùng lớp</span> với đoạn thứ hai</h1>
<p>Thẻ này không thuộc lớp nào.</p>
<p class="specialtext">Khi một thẻ được xác định bởi một lớp, ta có thể định hướng tới thẻ đó
<span>bất kể</span> vị trí của nó trong hệ thống phân cấp.</p>
CSS:
p {font-family: Helvetica, sans-serif;}
.specialtext {font-weight:bold;}
XHTML:
<h1 class="specialtext">Đây là tiêu đề có <span>cùng lớp</span> với đoạn thứ hai</h1>
<p>Thẻ này không thuộc lớp nào.</p>
<p class="specialtext">Khi một thẻ được xác định bởi một lớp, ta có thể định hướng tới thẻ đó
<span>bất kể</span> vị trí của nó trong hệ thống phân cấp.</p>
18

ĐỊNH NGHĨA SELECTOR THEO ID
ID không mang tính sử dụng lại nhiều lần, áp dụng
để định danh cho một thẻ
ID không mang tính chất kế thừa
Sử dụng ký tự # ở đầu định nghĩa style

ĐỊNH NGHĨA SELECTOR THEO ID
CSS:
p#specialtext {font-weight:bold; font-family: Helvetica, sans-serif;}
XHTML:
<p id="specialtext">Đây là văn bản đặc biệt</p>

SỰ KHÁC BIỆT GIỮA CLASS & ID
ID có sức mạnh hơn Class:
ID chỉ được gắn với một thẻ (thường là div) trên
XHTML (không xuất hiện nhiều lần)
Class có thể được gán với nhiều thẻ (xuất hiện nhiều
lần)
Có thể sử dụng nhiều thuộc tính id trong một trang,
nhưng mỗi thuộc tính có một giá trị (tên) riêng để
định nghĩa.
Dùng ID để định danh các thẻ, phục vụ cho việc lập
trình JavaScript
ID có sức mạnh hơn Class:
ID chỉ được gắn với một thẻ (thường là div) trên
XHTML (không xuất hiện nhiều lần)
Class có thể được gán với nhiều thẻ (xuất hiện nhiều
lần)
Có thể sử dụng nhiều thuộc tính id trong một trang,
nhưng mỗi thuộc tính có một giá trị (tên) riêng để
định nghĩa.
Dùng ID để định danh các thẻ, phục vụ cho việc lập
trình JavaScript
21

SELECTOR SAO (*)
Selector * hay còn gọi là selector đa năng, mang
nghĩa là "bất cứ thẻ nào" -> áp dụng cho mọi thẻ
* {color:green;} -> áp style mọi nội dung trên
trang sẽ có màu xanh
Hay dùng để đại diện cho một thẻ không xác định
p * em {font-weight:bold;} -> dấu * đại diện
cho "bất cứ thẻ con nào của p"
Selector * hay còn gọi là selector đa năng, mang
nghĩa là "bất cứ thẻ nào" -> áp dụng cho mọi thẻ
* {color:green;} -> áp style mọi nội dung trên
trang sẽ có màu xanh
Hay dùng để đại diện cho một thẻ không xác định
p * em {font-weight:bold;} -> dấu * đại diện
cho "bất cứ thẻ con nào của p"

SELECTOR THUỘC TÍNH
Selector cho một thẻ với thuộc tính xác định
img[title] {border: 2px solid blue;} -> áp dụng
cho mọi thẻ img có định nghĩa thuộc tính title
img[alt="Dartmoor-view of countryside"] {border:3px
green solid;} -> áp dụng cho thẻ img có
thuộc tính alt mang giá trị cụ thể
Selector cho một thẻ với thuộc tính xác định
img[title] {border: 2px solid blue;} -> áp dụng
cho mọi thẻ img có định nghĩa thuộc tính title
img[alt="Dartmoor-view of countryside"] {border:3px
green solid;} -> áp dụng cho thẻ img có
thuộc tính alt mang giá trị cụ thể

PSEU-DO CLASS
Pseudo-class là class phổ biến nhất được sử dụng
với các thẻ XHTML
Có tác dụng khi có sự kiện di chuột qua
Sử dụng tất cả những thành phần với Pseudo-class
để tạo hiệu ứng rollover
Một số trình duyệt sẽ không chấp nhận Pseudo-class
nếu như không tuân thủ thứ tự khai báo:
Link
Visited
Hover
Active
Pseudo-class là class phổ biến nhất được sử dụng
với các thẻ XHTML
Có tác dụng khi có sự kiện di chuột qua
Sử dụng tất cả những thành phần với Pseudo-class
để tạo hiệu ứng rollover
Một số trình duyệt sẽ không chấp nhận Pseudo-class
nếu như không tuân thủ thứ tự khai báo:
Link
Visited
Hover
Active
25

PSEU-DO CLASS
Một số thuộc tính khác của pseu-do class
:FIRST-CHILD
div.weather strong:ﬁrst-child {color:red;}
ví dụ:
<div class="weather"> Thời tiết <strong>rất</strong> nóng
<strong>cực kỳ</strong> ẩm.
</div>
:FOCUS
input:focus {border: 1px solid blue;}
Một số thuộc tính khác của pseu-do class
:FIRST-CHILD
div.weather strong:ﬁrst-child {color:red;}
ví dụ:
<div class="weather"> Thời tiết <strong>rất</strong> nóng
<strong>cực kỳ</strong> ẩm.
</div>
:FOCUS
input:focus {border: 1px solid blue;}
26

PSEU-DO CLASS
x:first-letter
p:first-letter {font-size:300%; float:left;}
x:first-line
p:first-line{font-variant:small-caps;}
x:before
h1.age:before {content:"Tuổi: "}
x:after
h1.age:after {content:" tuổi."}
x:first-letter
p:first-letter {font-size:300%; float:left;}
x:first-line
p:first-line{font-variant:small-caps;}
x:before
h1.age:before {content:"Tuổi: "}
x:after
h1.age:after {content:" tuổi."}
27

TÍNH KẾ THỪA TRONG CSS
Tính kế thừa là mối quan hệ giữa phần tử cha và
phần tử con trong CSS
Tối ưu hóa dung lượng của file .css
Sử dụng lại cho nhiều trang trong website
Được áp dụng nhiều nhất với những thuộc tính văn
bản
Áp dụng được cho nhiều vùng trên một trang
Sử dụng lại cho nhiều dự án khác
Tính kế thừa là mối quan hệ giữa phần tử cha và
phần tử con trong CSS
Tối ưu hóa dung lượng của file .css
Sử dụng lại cho nhiều trang trong website
Được áp dụng nhiều nhất với những thuộc tính văn
bản
Áp dụng được cho nhiều vùng trên một trang
Sử dụng lại cho nhiều dự án khác
29

CSS:
body,td,th {font-family: Tahoma, Geneva, sans-serif; font-size: 11px; color: #000; margin: 0px;
background-color:#ffffcc;}
Khi định nghĩa thuộc tính cho
thẻ body thì nhiều thẻ nằm
trong body sẽ kế thừa giá trị
các thuộc tính này

Các thẻ con có thể định nghĩa lại giá trị các thuộc
tính kế thừa
Các thẻ con không định nghĩa lại giá trị các thuộc
tính kế thừa sẽ mặc nhiên nhận các giá trị kế thừa
Kế thừa là khả năng mạnh mẽ của CSS, tuy nhiên
cũng cần dùng cẩn thận vì nó có thể đặt những
thuộc tính style không mong muốn cho các thẻ con
(đặc biệt là các thuộc tính về định vị)
Các thẻ con có thể định nghĩa lại giá trị các thuộc
tính kế thừa
Các thẻ con không định nghĩa lại giá trị các thuộc
tính kế thừa sẽ mặc nhiên nhận các giá trị kế thừa
Kế thừa là khả năng mạnh mẽ của CSS, tuy nhiên
cũng cần dùng cẩn thận vì nó có thể đặt những
thuộc tính style không mong muốn cho các thẻ con
(đặc biệt là các thuộc tính về định vị)

PHÂN LỚP TRONG CSS
Cách áp dụng các style từ trên xuống dưới từ một
cấp bậc của hệ thống phân cấp trong trang tới cấp
bậc tiếp theo
Là một cơ chế mạnh mẽ
Giúp viết css tiết kiệm, dễ dàng, tạo ra web với giao
diện tối ưu
Quy tắc phân lớp:
Quy tắc 1: tìm tất cả khai báo áp dụng cho mỗi thẻ và
thuộc tính
Quy tắc 2: phân loại theo trật tự và trọng lượng
Quy tắc 3: sắp xếp theo tính chuyên biệt
Quy tắc 4: sắp xếp theo trật tự
Cách áp dụng các style từ trên xuống dưới từ một
cấp bậc của hệ thống phân cấp trong trang tới cấp
bậc tiếp theo
Là một cơ chế mạnh mẽ
Giúp viết css tiết kiệm, dễ dàng, tạo ra web với giao
diện tối ưu
Quy tắc phân lớp:
Quy tắc 1: tìm tất cả khai báo áp dụng cho mỗi thẻ và
thuộc tính
Quy tắc 2: phân loại theo trật tự và trọng lượng
Quy tắc 3: sắp xếp theo tính chuyên biệt
Quy tắc 4: sắp xếp theo trật tự

Quy tắc 1:
• Khi mỗi trang được tả, trình duyệt xem xét mỗi thẻ trong trang để
tìm những định nghĩa áp dụng cho nó
Quy tắc 2:
• Trình duyệt tuần tự kiểm tra năm nguồn, thiết lập mọi thuộc tính
phù hợp trong quá trình đó
• Giá trị của thuộc tính được thiết lập cuối cùng trong quá trình này
quyết định hình thức
• Từ khoá !important:
– Đứng sau một khoagnr trống, sau style muốn trở nên quan trọng,
đứng trước dấu ;
Quy tắc 1:
• Khi mỗi trang được tả, trình duyệt xem xét mỗi thẻ trong trang để
tìm những định nghĩa áp dụng cho nó
Quy tắc 2:
• Trình duyệt tuần tự kiểm tra năm nguồn, thiết lập mọi thuộc tính
phù hợp trong quá trình đó
• Giá trị của thuộc tính được thiết lập cuối cùng trong quá trình này
quyết định hình thức
• Từ khoá !important:
– Đứng sau một khoagnr trống, sau style muốn trở nên quan trọng,
đứng trước dấu ;

Quy tắc 3:
• Tính chuyên biệt xác định độ cụ thể của định nghĩa
Quy tắc 4:
• Nếu hai định nghĩa có trọng lượng chính xác như nhau,
định nghĩa ở cấp bậc thấp nhất trong phân lớp ghi đè
giá trị
Quy tắc 3:
• Tính chuyên biệt xác định độ cụ thể của định nghĩa
Quy tắc 4:
• Nếu hai định nghĩa có trọng lượng chính xác như nhau,
định nghĩa ở cấp bậc thấp nhất trong phân lớp ghi đè
giá trị

KHAI BÁO GIÁ TRỊ MÀU SẮC VÀ SỐ TRONG CSS

GIÁ TRỊ SỐ
Sử dụng giá trị số để miêu tả độ dài của tất cả
những yếu tố trong trang
2 giá trị: tuyệt đối và tương đối

GIÁ TRỊ TUYỆT ĐỐI
Mô tả độ dài trong thế giới thực
Các thành phần của trang thường sử dụng đơn vị
pixel
Mô tả độ dài trong thế giới thực
Các thành phần của trang thường sử dụng đơn vị
pixel

GIÁ TRỊ TƯƠNG ĐỐI
Em được lấy từ độ rộng của ký tự trong font, vì vậy
kích thước của nó thay đổi tùy thuộc vào font mà
bạn sử dụng.
Em được lấy từ độ rộng của ký tự trong font, vì vậy
kích thước của nó thay đổi tùy thuộc vào font mà
bạn sử dụng.

GIÁ TRỊ TƯƠNG ĐỐI
Có hai lợi ích quan trọng cho việc sử dụng kích
thước tương đối như em cho font chữ:
Tận dụng khả năng kế thừa
Nếu bạn không định nghĩa kích thước font với đơn vị
tương đối, bạn đã vô hiệu hóa khả năng đặt kích
thước font trong menu View của Internet Explorer
Có hai lợi ích quan trọng cho việc sử dụng kích
thước tương đối như em cho font chữ:
Tận dụng khả năng kế thừa
Nếu bạn không định nghĩa kích thước font với đơn vị
tương đối, bạn đã vô hiệu hóa khả năng đặt kích
thước font trong menu View của Internet Explorer

GIÁ TRỊ MÀU SẮC
Hệ nhị phân (#RRGGBB and #RGB).
Phần trăm RGB (R%, G% B%).
Tên màu (red, green, blue…).

PHỤ LỤC B: THUỘC TÍNH CỦA CSS
Hãy xem Phụ lục B để biết các thuộc tính của CSS
Xuyên suốt quá trình học tập, làm việc
Tự thực hành với những thuộc tính đơn giản
Tự nghiên cứu

TỔNG KẾT
Có ba cách định nghĩa style cho trang là inline,
embbed và linked
Trong định nghĩa CSS, thuộc tính bắt buộc phải có
giá trị
Có các loại định nghĩa selector cho thẻ, lớp, id, *,
thuộc tính, lớp giả…
Áp dụng tính kế thừa trong CSS vào những thành
phần con khác nhau trên trang web
Giá trị gán cho các thuộc tính có thể ở dạng tương
đối hoặc tuyệt đối
Phụ lục B của sách mô tả đầy đủ các thuộc tính CSS
Có ba cách định nghĩa style cho trang là inline,
embbed và linked
Trong định nghĩa CSS, thuộc tính bắt buộc phải có
giá trị
Có các loại định nghĩa selector cho thẻ, lớp, id, *,
thuộc tính, lớp giả…
Áp dụng tính kế thừa trong CSS vào những thành
phần con khác nhau trên trang web
Giá trị gán cho các thuộc tính có thể ở dạng tương
đối hoặc tuyệt đối
Phụ lục B của sách mô tả đầy đủ các thuộc tính CSS

Bài 2 Cơ chế làm việc của CSS - Giáo trình FPT

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Bài 2 Cơ chế làm việc của CSS - Giáo trình FPT (20)

More from MasterCode.vn (20)

Bài 2 Cơ chế làm việc của CSS - Giáo trình FPT