Compare Inline, Internal and External CSS

Compare Inline, Internal,
External CSS
Tags
Status In progress
ạ ẽ ể ề ị ể
Xin chào các b n sinh viên, hôm nay chúng ta s cùng tìm hi u v ba cách đ nh ki u
ằ
trang web b ng CSS: Inline, Internal và External.
Inline CSS
ộ ị ể ẻ ự ế ằ ử ụ
Inline CSS là m t cách đ nh ki u cho các th HTML tr c ti p b ng cách s d ng
ộ ộ ể ượ ặ ẻ ởủ ấ
thu c tính style . Thu c tính style có th đ c đ t bên trong th m c a b t kỳ thẻ
HTML nào.
Ví d :ụ
HTML
<h1 style="color: red;">Tiêu đề</h1>
ẽạ ộ
Mã HTML này s t o ra m t tiêu đ có màu đ . ề ỏ
Ưu điểm của Inline CSS:
ấ ơ ả ểử ụ
R t đ n gi n đ s d ng.
Có thể được sử dụng để định kiểu cho các thẻ HTML riêng lẻ.
Nh ược điểm của Inline CSS:

ể ệ ả ị ạ
Có th gây khó khăn cho vi c qu n lý các đ nh d ng CSS.
Có thể làm tăng kích thước của trang web.
Internal CSS
Compare Inline, Internal, External CSS 1

ộ ị ể ầ ử ằ
Internal CSS là m t cách đ nh ki u cho các ph n t HTML b ng cách s d ng các ử ụ
ẻ ầ ủ ệ ẻ ứ
th style bên trong ph n head c a tài li u HTML. Các th style ch a các quy t c ắ
ị ầ ử
CSS xác đ nh cách các ph n t HTML s đ c hi n th .ẽ ượ ể ị
Ví d : ụ
HTML
<!DOCTYPEhtml>
<html lang="en">
<head>
<title>Internal CSS</title>
<style>
h1 {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
</body>
</html>
ẽạ ộ ề
Mã HTML này s t o ra m t tiêu đ có màu đ và c ch 20px.ỏ ỡ ữ
Ưu điểm của Internal CSS:
ơ ả ểử ụ
Khá đ n gi n đ s d ng.
Có thể được sử dụng để định kiểu cho các phần tử HTML được sử dụng lặp đi
lặp lại.
Nh ược điểm của Internal CSS:

ể
Có th làm tăng kích th ước của trang web.
External CSS
ộ ị ể ầ ử ằ
External CSS là m t cách đ nh ki u cho các ph n t HTML b ng cách s d ng các ử ụ
ệ ệ ệ ượ ư ữ ệ
t p CSS riêng bi t. Các t p CSS này đ c l u tr bên ngoài tài li u HTML và đ c ượ
ế ớ ệ ằ ẻ
liên k t v i tài li u HTML b ng th link .
Ví dụ:
HTML

<!DOCTYPEhtml>
<html lang="en">
<head>
<title>External CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Tiêu đề</h1>
</body>
</html>
ẽ ế ệ ớệ
Mã HTML này s liên k t tài li u HTML v i t p CSS có tên style.css . Các quy t c ắ
ượ ị ệ ẽ ượ ụ
CSS đ c đ nh nghĩa trong t p style.css s đ c áp d ng cho t t c các ph n t ấ ả ầ ử
HTML trên trang web.
Ưu điểm của External CSS:

ọ ễ ả
Làm cho trang web g n gàng và d qu n lý h n. ơ
Giúp cải thiện hiệu suất trang web.
Nh ược điểm của External CSS:

ể ứ ạ ơ
Có th ph c t p h n Internal CSS đ thi t l p.ể ếậ
Khi nào nên s d ng? ử ụ
Inline CSS được sử dụng tốt nhất cho các thẻ HTML riêng lẻ.
Internal CSS được sử dụng tốt nhất cho các phần tử HTML được sử dụng lặp đi
lặp lại.
External CSS được sử dụng tốt nhất cho các trang web lớn hoặc phức tạp.
ặ ể
Đ c đi m Inline CSS Internal CSS External CSS
ị
V trí đ tặ ẻ
Bên trong th HTML
Bên trong
ẻ
th style trong
ệ
Bên ngoài tài li u
phần
HTML
head
Ưu điểm ấ ơ ả ểử ụ
R t đ n gi n đ s d ng ơ ả ểử
Khá đ n gi n đ s Làm cho trang web
ụ
d ng ọ ễ ả
g n gàng và d qu n

ơ ả ệ
lý h n, giúp c i thi n
ệ ấ
hi u su t trang web
ể
Có th gây khó khăn cho
ệ ả ị
vi c qu n lý các đ nh
ể ể ứ ạ ơ
Có th ph c t p h n
Nh ược điểm ạ ể
d ng CSS, có th làm
Có th làm tăng kích
ướ ủ ể ế
Internal CSS đ thi t
ướ ủ
tăng kích th c c a
th c c a trang web
ậ
l p
trang web
ử ố ấ ẻ ố ấ
T t nh t cho các
ố ấ
Khi nào nên s
ụ
T t nh t cho các th
ẻ ầ ử
ph n t HTML đ c ượ T t nh t cho các trang
ớ ặ ứ ạ
d ng HTML riêng l
ử ụ ặ ặ ạ
s d ng l p đi l p l i
web l n ho c ph c t p
M cđứ ộ ưu tiên
ứ ộư ủ ắ ượ ị ở ứự
M c đ u tiên c a các quy t c CSS đ c xác đ nh b i th t mà các quy t c đ c ắ ượ
ặ ệ ặ ệ ắ ượ ặ ướ ẽ ứ ộ ư
đ t trong tài li u HTML ho c t p CSS. Quy t c đ c đ t tr c s có m c đ u tiên
cao hơn quy tắc được đặt sau.
Về cơ bản, mức độ ưu tiên của các quy tắc CSS được chia thành ba nhóm:
Inline CSS có mức độ ưu tiên cao nhất. Các quy tắc CSS được đặt trong
thuộc tính của một thẻ HTML sẽ có mức độ ưu tiên cao nhất. Điều này có
style
nghĩa là các quy tắc Inline CSS sẽ được áp dụng trước các quy tắc Internal CSS
và External CSS.
ứ ộ ưu tiên thấp hơn Inline CSS. Các quy tắc CSS được
Internal CSS có m c đ
đặt trong thẻ trong phần
style của tài liệu HTML sẽ có mức độ ưu tiên
head
thấp hơn Inline CSS. Tuy nhiên, Internal CSS vẫn có mức độ ưu tiên cao hơn
External CSS.
ứ ộư
External CSS có m c đ ấ ấ ắ ượ ặ
u tiên th p nh t. Các quy t c CSS đ c đ t trong
ệ ệ ẽ ứ ộư ấ ấ ề
các t p CSS riêng bi t s có m c đ u tiên th p nh t. Đi u này có nghĩa là các
quy tắc External CSS sẽ được áp dụng sau cùng, sau các quy tắc Inline CSS và
Internal CSS.
Ví d : ụ
HTML
<!DOCTYPEhtml>
<html lang="en">
<head>
<title>Mức độ ưu tiên CSS</title>
<style>
h1 {
color: red;

}
</style>
</head>
<body>
<h1 style="color: blue;">Tiêu đề</h1>
</body>
</html>
ẽạ ộ ề ỏ ắ
Mã HTML này s t o ra m t tiêu đ có màu đ . Quy t c CSS đ ược đặt trong thẻ
styletrong phần có mức độ ưu tiên cao hơn quy tắc CSS được đặt trong
head
thuộc tính của thẻ

style . Do đó, tiêu đề sẽ có màu đỏ.
h1
HTML
<!DOCTYPEhtml>
<html lang="en">
<head>
<title>Mức độ ưu tiên CSS</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<link rel="stylesheet" href="style.css">
<h1 style="color: red;">Tiêu đề</h1>
</body>
</html>
ẽạ ộ ề ỏ ắ
Mã HTML này cũng s t o ra m t tiêu đ có màu đ . Quy t c CSS đ ược đặt trong
tệ p có mức độ ưu tiên thấp hơn quy tắc CSS được đặt trong thẻ
style.css style
trong phần . Do đó, quy tắc CSS được đặt trong thẻ
head trong phần
style head sẽ
được áp dụng trước, khiến tiêu đề có màu đỏ.

Compare Inline, Internal and External CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Compare Inline, Internal and External CSS

Uploaded by

Copyright:

Available Formats

Compare Inline, Internal,

<h1 style="color: red;">Tiêu đề</h1>

Nh ược điểm của Inline CSS:

Có thể làm tăng kích thước của trang web.

Compare Inline, Internal, External CSS 1

Nh ược điểm của Internal CSS:

Compare Inline, Internal, External CSS 2

Ưu điểm của External CSS:

Nh ược điểm của External CSS:

Compare Inline, Internal, External CSS 3

Compare Inline, Internal, External CSS 4

thuộc tính của thẻ

Compare Inline, Internal, External CSS 5

You might also like