Chapter 3. Ngon Ngu CSS

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT
VIỆN KỸ THUẬT - CÔNG NGHỆ
THIẾT KẾ WEB
Chương 3
NGÔN NGỮ CSS
(Cascading Style
Sheet)
NỘI DUNG
1. Giới thiệu CSS

2. Các loại style
3. Khai báo và sử dụng style
4. Cách tạo các loại style
5. Các thuộc tính định dạng
6. Thiết lập các thuộc tính cho liên kết
7. Đơn vị trong CSS
8. Một số thuộc tính mới trong CSS3
03/10/2024 Bài giảng Thiết kế Web 2

 CSS (Cascading Style Sheets) là một ngôn ngữ quy

định cách trình bày cho các tài liệu viết bằng HTML,
XHTML, XML, SVG, hay UML,…

 Tại sao CSS?

 CSS cung cấp nhiều thuộc tính trình bày dành cho các đối
tượng với sự sáng tạo trong việc kết hợp các thuộc tính
giúp mang lại hiệu quả cao.
 CSS đã được hỗ trợ bởi tất cả các trình duyệt và hiển thị
“như nhau” trên mọi hệ điều hành.
 CSS đưa ra phương thức áp dụng từ một file CSS ở ngoài.
Có hiệu quả đồng bộ khi tạo một website có hàng trăm
trang hay khi muốn thay đổi một thuộc tính trình bày nào
đó.
 CSS được cập nhật liên tục mang lại các trình bày phức tạp
và tinh vi hơn.


2. Các loại style
 Có 4 loại style:
 Inline Style (Style được qui định trong 1 thẻ HTML cụ
thể)
 Internal Style (Style được qui định trong
phần<head>của 1 trang HTML)
 External Style (style được qui định trong file .CSS
ngoài)
 Browser Default (thiết lập mặc định của trình duyệt)
 Thứ tự ưu tiên: Mức ưu tiên giảm dần từ trên
xuống
Các nhóm thẻ thuộc Inline

Chú ý khi viết style

 Style phân biệt chữ hoa, chữ thường
 Để ghi chú trong style sử dụng:
/*
Đoạn ghi chú
*/

Khai báo style
Selector {
Property: Value;
}
Trong đó:
+ Selector: Đối tượng sẽ áp dụng trình bày.
+ Property: Các thuộc tính quy định cách trình bày. Nếu
có nhiều hơn một thuộc tính thì phải dùng một dấu ;
(chấm phẩy)
+ Value: Giá trị thuộc tính
Style áp dụng cho thẻ cụ thể

 Trường hợp 1 thẻ: Đặt selector là tên_thẻ
p {
color: red;
}
 Khai báo đồng thời nhiều thẻ: Viết danh sách tên thẻ
phân cách bởi dấu phẩy
h1,h2,h3,h4,h5,h6 {
font-family:arial;
}

Tạo lớp (có thể áp dụng cho nhiều thẻ)

 Gắn với thẻ cụ thể: Đặt selector là tên_thẻ.tên_lớp
p.loai1 {
color:red;
}
p.loai2 {
color:blue;
}
 Không gắn với thẻ cụ thể: bỏ phần tên_thẻ đi, giữ lại
dấu chấm:
.loai3 {
color:green;
}

Sử dụng lớp
 Đặt thuộc tính class của thẻ=“tên_lớp”:
<tên_thẻ class=“tên_lớp”>
 Ví dụ:
<p class=“loai1”>Đoạn này màu đỏ</p>
<h1 class=“loai2”>Style không có
hiệu lực</h1>
<h2 class=“loai3”>Tiêu đề màu xanh</h3>
<p class=“loai3”>Đoạn này màu xanh</p>

Định danh (id)

 Tương tự như class. Thay dấu chấm (.) thành dấu thăng (#).
 Cho thẻ cụ thể: tên_thẻ#định_danh{…}
 Tổng quát: #định_danh{…}
 Ví dụ:
p#doan1{
color:red;
}
#loai2{
color:blue;
}

Sử dụng định danh

 Mỗi định danh là duy nhất trên trang
 Đặt thuộc tính id của thẻ = định_danh
<tên_thẻ id=“định_danh”>
 Ví dụ:
<p id=“doan1”>Đoạn này màu đỏ</p>
<h1 id=“loai2”>Tiêu đề xanh</h1>
 Chú ý: Không nên đặt tên class, id với ký tự đầu là

chữ số, nó sẽ không làm việc trong Firefox.

 Ví dụ: Xét đoạn mã HTML sau đây :

<p>Danh Sách Các Tỉnh, Thành Phố Của Việt Nam</p>
<ul>
<li>Hà Nội</li>
<li>TP. Hồ Chí Minh</li>
<li>Đà Nẵng</li>
<li>Thừa Thiên Huế</li>
<li>Khánh Hòa</li>
<li>Quãng Ninh</li>
<li>Tiền Giang</li>
</ul>
 Làm thế nào để tên các thành phố là màu đỏ và tên các tỉnh là màu
xanh da trời  Dùng class để tạo thành 2 nhóm.

 Ví dụ: …
li.tp {color:#F00;}
li.tinh {color:#00F;}
<p>Danh Sách Các Tỉnh, Thành Phố Của Việt Nam</p>
<ul>
<li class="tp">Hà Nội</li>
<li class="tp">TP. Hồ Chí Minh</li>
<li class="tp">Đà Nẵng</li>
<li class="tinh">Thừa Thiên Huế</li>
<li class="tinh">Khánh Hòa</li>
<li class="tinh">Quãng Ninh</li>
<li class="tinh">Tiền Giang</li>
</ul>

 Ví dụ:
Với ví dụ trên nhưng yêu cầu Hà Nội sẽ có màu đỏ sậm, TP.
Hồ Chí Minh màu đỏ, Đà Nẵng màu đỏ tươi và tên các tỉnh là
màu xanh da trời  Dùng id để nhận dạng mỗi thành phố,
class để nhóm các tỉnh.

 Ví dụ: …
#hanoi { color:#790000; }
#hcmc { color:#FF0000; }
#danang { color:#FF00FF;}
.tinh { color:#00F; }
<p>Danh Sách Các Tỉnh,
Thành Phố Của Việt
Nam</p>
<ul>
<li id="hanoi">Hà
Nội</li>
<li id="hcmc">TP. Hồ
Chí Minh</li>
<li id="danang">Đà
Nẵng</li>
<li class="tinh">Thừa
Thiên Huế</li>
03/10/2024<li class="tinh">KhánhBài giảng Thiết kế Web 18
Inline style
 Là kiểu được gán cho một dòng hoặc một đoạn văn bản, bằng
cách sử dụng thuộc tính style bên trong tag muốn định dạng
 Cú pháp:
<TagName
Style=“property1:value1;property2:value2;
…”>
Nội dung văn bản muốn định dạng
</TagName>

Inline style
 Ví dụ:
<body>
<p style=“color: aqua; font-style: italic; text- align: center”>
This paragraph has an inline style applied to it </p>
<p> This paragraph is displayed in the default style. </p>
<p> Can you see the <span style="color: red;"> difference </span>
in this line </p>
</body>

Internal style
 Là style thích hợp cho trang riêng lẻ với nhiều văn bản.
 Cách tạo: Tạo style chung trên phần đầu trang trong cặp tag
<head> … </head>
 Cú pháp:
<style type=”text/css”>
selector {property1:value1;property2:value 2; …}
.....
</style>

Internal style
 Ví dụ:
<html>
<head>
<style>
P{}
H1{}
H2{}
color: limegreen; font-family: Arial;
</style>
</head>
<body>
<p>This is the H1 element</p>
<h1>This is the H2 element</h1>
<h2>This is the H3 element with its default style as
displayed in the browser</h2>
</body>
</html>
External style
 Là style được lưu trữ thành một file bên ngoài và được liên kết với
trang HTML. Style này sẽ được áp dụng và ảnh hưởng cho tất cả các
trang của một website.
 Cách tạo:
 Tạo một tập tin văn bản mới
 Nhập tên các selector theo mẫu:
selector {property1: value1; property2:value2;…}
 Lưu tập tin với định dạng Text Only và có phần mở rộng .css
 Cách dùng: Liên kết tập tin css vào file html theo cú pháp:
<Head>
<link href=“tên tập tin.css” rel=“stylesheet” type=“text/css” />
</Head>

Bài tập
- Các bạn tự tìm 1 vài ví dụ về Inline, Internal và

External Style. Sau đó nộp lên Elearning

5. Các thuộc tính định dạng
Thuộc tính Background

Thuộc tính giá trị Ví dụ Mô tả
Xác định thành phần
nền được cố định
background- fixed background- hoặc cuộn so với
attachment attachment trang.
scroll :fixed; Được sử dụng kèm
với giá trị background-
image
background-color
mã màu :#ff0000;
background- Xác định màu nền cho
tên màu background-color: red;
color thành phần.
Giá trị rgb background-color:
rgb(255,0,0);
background- url(đường dẫn background-image: Xác định hình ảnh nền
image hình) url(ico_arrow.gif); cho thành phần.
Thuộc tính Background (tt)

left right
top Xác định vị trí hình ảnh
background- bottom background- nền cho thành phần.
position px position: left Được sử dụng kèm với
% top; giá trị background-image.
repeat-
background- x:ngang background- Xác định hình ảnh nền
repeat repeat-y repeat: được lặp như thế
repeat repeat-x; nào.
no-repeat
Một hoặc nhiều background: Có giá trị riêng lẻ hoặc
background giá trị của các url(ico_arrow. tổng hợp các thuộc tính
thuộc tính trên gif) repeat-x trên.
left top;

Ví dụ

Box Model
 Box model (mô hình hộp) mô tả cách mà CSS định

dạng khối không gian bao quanh một thành phần.
Gồm padding (vùng đệm), border (viền) và margin
(canh lề) và các tùy chọn.
p {width: 200px; margin: 30px 20px;

padding: 20px 10px; border: 1px solid #000;
text-align: justify }
<p> Trong CSS, box model (mô hình hộp)

mô tả cách mà CSS định dạng khối không
gian bao quanh một thành phần. </p>

Ví dụ

Thuộc tính Border

border-color:
mã màu #ff0000; Xác định màu sắc
border-color tên màu border-color: red; của đường viền.
Giá trị rgb border-color:
rgb(255,0,0);
Xác định hình
border-style kiểu border border-style: solid;dạng của đường
viền.
px
thin Xác định bề dày
border-width border-width: 5px;
medium của đường
thick viền.
Một hoặc nhiều Xác định tất cả
giá trị của các border: #ff0000
border các đường viền
thuộc tính định solid 2px;
xung quanh.
dạng.
Thuộc tính Border (tt)
Các kiểu border

Giá trị Mô tả Hiển thị
Xác định thành phần sẽ không có
none Đường viền hiển thị
đường viền.
Giống như giá trị none, nhưng được
hidden Đường viền hiển thị
dùng cho table.
Xác định đường viền cho thành phần
dotted Đường viền hiển thị
là dấu chấm (dotted).
dashed Đường viền hiển thị
là gạch ngang (dashed).
solid Đường viền hiển thị
là đường thẳng nét (solid).
double Đường viền hiển thị
là 2 đường thẳng nét (double).

Thuộc tính Giá trị Ví dụ Mô tả

border-top-
mã màu color: red; Xác định màu sắc
border-top-color tên màu border-top- cho đường viền
Giá trị rgb color: bên trên.
rgb(255,0,0);
Xác định hình
border-top-style:
border-top-style kiểu border dạng cho đường
solid;
viền bên trên.
px
Xác định bề dày
thin border-top-
border-top-width cho đường
medium width:
viền bên trên.
thick 5px;
Một hoặc
border-top:
nhiều giá trị Xác định đường
border-top #ff0000 solid
của các thuộc viền bên trên.
2px;
tính định dạng.

border-right-
mã màu Xác định màu sắc
border-right- color: #ff0000;
tên màu cho đường viền
color border-right-
Giá trị rgb bên phải.
color: red;
Xác định hình
border-right- border--right-
kiểu border dạng cho đường
style style: solid;
viền bên phải.
px
border-right- thin border-right-
cho đường
width medium width: 5px;
viền bên phải.
thick
Một hoặc
border-right:
border-right #ff0000
của các thuộc viền bên phải.
solid 2px;


border-bottom-
border-bottom- color: #ff0000;
tên màu cho đường viền
color border-
Giá trị rgb bên dưới.
bottom- color:
red;
Xác định hình
border-bottom- border-bottom-
kiểu border dạng cho đường
style style: solid;
viền bên dưới.
px
border-bottom- thin border-bottom-
cho đường
width medium width: 5px;
viền bên dưới.
thick
Một hoặc
border-bottom:
border-bottom #ff0000 solid
của các thuộc viền bên dưới.
2px;

border-left-color:
#ff0000;
border-left-color tên màu cho đường viền
border-left-color:
Giá trị rgb bên trái.
red;
Xác định hình
border-left-style:
border-left-style kiểu border dạng cho đường
solid;
viền bên trái.
px
thin border-left-
border-left-width cho đường
medium width:
viền bên trái.
thick 5px;
Một hoặc
border-left:
border-left #ff0000 solid
của các thuộc viền bên trái.
2px;

Thuộc tính border-collapse

 Thuộc tính border-collapse xác định đường
viền của table có tách biệt ra hay không.
 Chú ý là thuộc tính border-collapse chỉ được sử dụng
cho thành phần table.

Thuộc tính border-collapse

Khoảng trống giữa các
border-
đường viền (border) của
collapse collapse:
table bị loại bỏ, chỉ còn
đường viền duy nhất.
collapse;
Khoảng trống giữa các
border- đường viền (border) của
border-
separate collapse: table vẫn giữ nguyên, đây
collapse
là dạng mặc định của
separate;
table.
Xác định thừa hưởng
border-
thuộc tính từ thành phần
inherit collapse:
cha (thành phần bao
inherit;
ngoài).
Thuộc tính border-spacing

 Thuộc tính border-spacing xác định khoảng cách giữa
các đường viền của table.
 Chú ý là thuộc tính border-spacing chỉ được sử dụng
cho thành phần table có các đường viền tách biệt
nhau (border-collapse: separate).

Thuộc tính border-spacing

Độ rộng giữa các
border-spacing:
độ rộng đường viền (border)
10px;
của table.
Độ rộng giữa các
ngang border-spacing: đường viền (border)
border-spacing dọc 10px 20px; của table với giá trị
ngang và dọc.
Xác định thừa
border-collapse: hưởng thuộc tính từ
inherit
inherit; thành phần cha
(thành phần bao
ngoài).

Thuộc tính Margin

đơn vị Đây là cách viết ngắn gọn
margin: 5px 10px các thuộc tính bên dưới,
margin auto
3px 20px; đơn vị có thể là px, em,
inherit
%, ...
đơn vị Canh lề bên trên cho
margin-top auto margin-top: 5px; thành phần, đơn vị có thể
inherit là px, em, %, ...
đơn vị Canh lề bên phải cho
margin-right auto margin-right: 5px; thành phần, đơn vị có thể
đơn vị Canh lề bên dưới cho
margin-bottom auto margin-bottom: 5px; thành phần, đơn vị có thể
đơn vị Canh lề bên trái cho
margin-left auto margin-left: 5px; thành phần, đơn vị có thể
Cách sử dụng thuộc tính margin
Thuộc tính Thành phần Thể hiện Ví dụ Mô tả

margin: 5px margin-top: 5px;
4 thành top right margin-right: 10px
10px 3px
phần bottom left margin-bottom: 3px
20px;
margin-left: 20px
margin-top: 5px;
3 thành top (right margin: 5px margin-right: 10px
phần left) bottom 10px 15px; margin-left: 10px
margin margin-bottom: 15px
(top margin-top: 5px;
2 thành margin: 5px margin-bottom: 5px
bottom)
phần 10px; margin-right: 10px
(right left)
margin-left: 10px
margin-top: 10px;
1 thành (top right margin-right: 10px
margin: 10px;
phần bottom left) margin-bottom: 10px
margin-left: 10px
Thuộc tính Padding

đơn vị padding: 5px Đây là cách viết ngắn gọn
padding
10px 3px 20px; các thuộc tính bên dưới, đơn
inherit vị có thể là px, em, %, ...
đơn vị padding-top: Thêm vào khoảng không bên

padding-top trên cho thành phần, đơn vị
5px;
inherit có thể là px, em, %, ...
đơn vị padding-right: Thêm vào khoảng không bên

padding-right phải cho thành phần, đơn vị
5px;
padding- đơn vị padding-bottom: Thêm vào khoảng không bên

bottom 5px; dưới cho thành phần, đơn vị
đơn vị padding-left: Thêm vào khoảng không bên

padding-left trái cho thành phần, đơn vị có
5px;
03/10/2024 inherit Bài giảng Thiết kế Web
thể là px, em, %, ... 42
Cách sử dụng thuộc tính padding
Thuộc tính Thành phần Thể hiện Ví dụ Mô tả

padding: 5px padding-top: 5px;
4 thành top right padding-right: 10px
10px 3px
phần bottom left padding-bottom: 3px
20px;
padding-left: 20px
padding-top: 5px;
3 thành top (right padding: 5px padding-right: 10px
phần left) bottom 10px 15px; padding-left: 10px
padding padding-bottom: 15px
(top padding-top: 5px;
2 thành padding: 5px padding-bottom: 5px
bottom)
phần 10px; padding-right: 10px
(right left)
padding-left: 10px
padding-top: 10px;
1 thành (top right padding: padding-right: 10px
phần bottom left) 10px; padding-bottom: 10px
padding-left: 10px
Thuộc tính List

Một hoặc
nhiều giá
trị của các Đây là dạng viết ngắn gọn,
thuộc tổng hợp các kiểu bên
list-style list-style: square;
tính dưới (image, position,
image, type).
position,
style bên
dưới.
URL list-style: Thay thế các mục của
url(images/list.gif) danh sách bằng hình ảnh.
;
list-style-image none list-style: none; Không hiển thị image list,
đây là dạng mặc định.
inherit list-style: inherit; thuộc tính từ thành phần
03/10/2024 Bài giảng Thiết kế Web cha (thành phần bao 44
Thuộc tính List (tt)

inside list-style: inside; Xác định các mục nằm
bên trong nội dung.
Xác định các mục nằm
list-style- outside list-style: outside; bên ngoài nội dung, đây là
position dạng mặc định.
inherit list-style:inherit; thuộc tính từ thành phần
cha (thành phần bao
ngoài).


none list-style- Danh sách list-style-type 01.
type: none; Danh sách list-style-type
02.
disc list-style- • Danh sách list-style-type 01.
type: circle; • Danh sách list-style-type 02.
list-style- o Danh sách list-style-type 01.
list-style-type circle
type: disc; o Danh sách list-style-type 02.
list-style-  Danh sách list-style-type 01.
square
type: square;  Danh sách list-style-type 02.
1. Danh sách list-style-type 01.
decimal list-style-
type: 2. Danh sách list-style-type 02.
decimal;
decimal- list-style- 1. Danh sách list-style-type 01.
leading- type: 2. Danh sách list-style-type 02.
zero decimal-
03/10/2024
leading-zero;
Bài giảng Thiết kế Web 46

lower- list-style- a. Danh sách list-style-type 01.
alpha type: lower- b. Danh sách list-style-type 02.
alpha;
upper- list-style- A. Danh sách list-style-type 01.
alpha type: upper- B. Danh sách list-style-type 02.
list-style-type alpha;
lower- list-style- i. Danh sách list-style-type 01.
type: lower- ii. Danh sách list-style-type 02.
roman roman;
upper- list-style- I. Danh sách list-style-type 01.
type: upper- II. Danh sách list-style-type 02.
roman roman;
list-style- Xác định thừa hưởng thuộc tính
inherit
type: inherit; từ thành phần cha (thành phần
bao ngoài).
Thuộc tính Font
Thuộc tính Mô tả Giá trị

font Thuộc tính ngắn font-style
cho tất cả các font-variant
thiết lập về font. font-
weight
font-size
font-family
font-style Thiết lập chế độ normal
in nghiêng, xiên hay italic
bình thường. oblique
font-variant Thiết lập font normal
bình thường hay small-caps
small- caps
font-weight Thiết lập in đậm, normal
thường. bold
bolder
lighter
03/10/2024 Bài giảng Thiết kế Web 100 – 900 48
Thuộc tính Font (tt)

font-size Thiết lập kích cỡ font. xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
<length
>
%
font-family Thiết lập loại font family-name
hiển thị trang web/ generic-family
03/10/2024 49
đối tượng web.
Bài giảng Thiết kế Web
Thuộc tính Text

color Thiết lập màu chữ. <color>
text-indent Thiết lập <length>
khoảng thụt đầu %
dòng.
text-align Thiết lập chế left
độ canh văn right
bản. center
justify
letter-spacing Thiết lập khoảng normal
cách giữa các ký <length>
tự.
text-decoration Thêm hiệu none
ứng đặc biệt underline
cho văn bản. overline
line-through
blink
Thuộc tính Text (tt)

text-transform Change case văn none
bản. upper
lower
capitalize
none
text-shadow color
length

Thuộc tính Layout Position
Thuộc tính Float

Thuộc tính float xác định có hay không một thành phần được float (trôi
nổi).

left float: left; Thành phần được trôi nổi
(float) qua bên trái.
right float: right; Thành phần được trôi nổi
(float) qua bên phải.
float Thành phần không được trôi
none float: none; nổi (float) qua bên phải hay
trái, đây là dạng mặc định.
Xác định thừa hưởng thuộc
inherit float: inherit; tính từ thành phần cha (thành
phần bao ngoài).

Thuộc tính Layout Position (tt)
Thuộc tính Clear

Thuộc tính clear ngăn cản không cho đối tượng tràn lên vị trí rỗng do
các đối tượng phía trước bị float để lại.

left clear: left; Bên trái của thành phần
không được float.
right clear: right; Bên phải của thành phần
không được float.
clear Bên trái và phải của thành
both clear: both;
phần không được float.
Đây là mặc định của thành
none clear: none; phần clear, bên trái và phải
của thành phần được
float.

Thuộc tính Position

 Nguyên lý hoạt động của position
Cửa sổ trình duyệt giống như một hệ tọa độ và với
position có thể đặt một đối tượng web ở bất cứ vị trí nào
trên hệ tọa độ này

Thuộc tính Position

Thuộc tính position thường dùng kèm với các thuộc
tính định vị trí: left, right, bottom, top
Thành phần sẽ nằm theo
static position: static; thứ tự trong văn bản, đây là
dạng mặc định.
relative position: relative; Định vị trí tương đối cho
thành phần.
position Định vị trí tuyệt đối cho thành
phần con theo thành phần
position: bao ngoài (thành phần định vị
absolute
absolute; trí tương đối (position:
relative;)) hoặc theo cửa sổ
trình duyệt.
Minh họa
Các thuộc tính Top, Right, Bottom, Left

Các thuộc tính top, right, bottom, left được dùng để định vị trí cho
thành phần khi sử dụng thuộc tính position.
Chú ý: các thuộc tính này sẽ không có tác dụng khi position có giá trị là
static
Thuộc
Giá trị Ví dụ Mô tả
tính
Khoảng cách tính từ mép trên ngoài cùng
Khoảng
top top: 20px; của thành phần bao ngoài, đơn vị có thể
cách
là px, em, %, ...
right Khoảng right: 20px; Khoảng cách tính từ mép phải ngoài cùng
cách của thành phần bao ngoài
bottom Khoảng bottom: Khoảng cách tính từ mép dưới cùng của
cách 20px; thành phần bao ngoài
left Khoảng left: 20px; Khoảng cách tính từ mép trái ngoài cùng
cách của thành phần bao ngoài
Minh họa
56
Thuộc tính Z-index

Thuộc tính z-index thiết lập thứ tự xếp chồng nhau của một thành phần.
Thứ tự chồng nhau được sắp xếp dựa theo giá trị số, thành phần
HTML nào có chỉ số z-index cao hơn sẽ nằm trên, giá trị mặc định là 0.
Chú ý: z-index chỉ làm việc cùng với thuộc tính position.
Thuộc
Giá trị Ví dụ Mô tả
tính
z-index: Tự động sắp xếp thứ tự chồng nhau cho

auto
auto; thành phần, đây là dạng mặc định.
z-index
giá trị z-index: Sắp xếp thứ tự chồng nhau cho thành
10; phần theo giá trị.
inherit z-index: Xác định thừa hưởng thuộc tính từ thành
inherit; phần cha (thành phần bao ngoài).
Minh họa 2 Minh họa 1
57
Thuộc tính Display

giá trị Mô tả
Thành phần hiển thị như một khối, khi sử dụng giá trị block thành
block phần sẽ đứng một hàng độc lập so với thành phần trước và sau
nó. đây là dạng mặc định.
Thành phần sẽ hiển thị như một nội tuyến (inline, không ngắt
inline
dòng),
inline-block Thành phần sẽ hiển thị như một khối, nhưng là một khối nội tuyến.
Thành phần sẽ hiển thị như một khối và một nội tuyến cho các
list-item
điểm đánh dấu danh sách.
none Thành phần không hiển thị.
Thành phần sẽ hiển thị như một table, ngắt dòng trước và sau
table
thành phần.
table-row Thành phần sẽ hiển thị như một row của table
table-cell Thành phần sẽ hiển thị như một cell trong table
Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần
inherit
bao ngoài).
Minh họa
58
Thuộc tính Visibility
Thuộc tính giá trị Mô tả

Làm "sụp đổ" các hàng và cột của
collapse thành phần table, giá trị này chỉ sử
dụng cho thành phần table.
hidden Thành phần sẽ không được nhìn thấy.
visibility
Visible Hiển thị thành phần, đây là dạng mặc
định.
Xác định thừa hưởng thuộc tính từ
Inherit thành phần cha (thành phần bao
ngoài).
Minh họa 1 Minh họa 2

59
Thuộc tính Overflow

Thuộc tính giá trị Mô tả
Khi chiều cao của box không đủ chứa text, thì
visible
text vẫn hiển thị tràn qua box, đây là mặc định.
Khi chiều cao của box không đủ chứa text, thì
hidden
text bị tràn sẽ được dấu đi.
_ Khi chiều cao của box không đủ chứa text, thì
text bị tràn sẽ được dấu đi và xuất hiện thanh
scroll scroll, khi cuộn sẽ hiển thị text.
overflow _ Khi sử dụng thành phần này sẽ xuất hiện cả
thanh scroll ngang và dọc.
_ Khi chiều cao của box không đủ chứa text, thì
thanh scroll sẽ tự động hiển thị.
auto
_ Khi sử dụng thành phần này sẽ xuất hiện thanh
scroll dọc.
Xác định thừa hưởng thuộc tính từ thành phần
inherit
cha (thành phần bao ngoài).
Minh họa
60
6. Thiết lập các thuộc tính cho liên kết
• Để thiết lập các thuộc tính cho liên kết, chúng

ta thiết lập các thuộc tính trong các trạng
thái: Trạng thái Giải thích
a Chung cho các trạng thái
a:link Liên kết chưa thăm.
a:hover Khi rê chuột lên liên kết.
a:visited Khi liên kết đã thăm.
a:active Đang nhấn giữ chuột
a:link { a:hover{
color:#F00; text-decoration:underline;
font-family:verdana; border:#00F solid 1px;
text-decoration:none; background-color:#399;
} }
Đơn vị chiều dài

Đơn vị Mô tả
% Phần trăm
in Inch (1 inch = 2.54 cm)
cm Centimeter
mm Millimeter
1 em tương đương kích thước font hiện hành, nếu font
em hiện hành có kích cỡ 14px thì 1em = 14px. Đây là một
đơn vị rất hữu ích trong việc hiển thị trang web.
pt Point (1 pt = 1/72 inch)
pc Pica (1 pc = 12 pt)
px Pixels (điểm ảnh trên màn hình máy tính)

Đơn vị màu sắc

Đơn vị Mô tả
Color-name Tên màu tiếng Anh.
Ví dụ: black, white, red, green, blue, cyan, magenta,…
RGB (r,g,b) Màu RGB với 3 giá trị R, G, B có trị từ 0 – 255 kết hợp với
nhau tạo ra vô số màu.
RGB (%r,
Màu RGB với 3 giá trị R, G, B có trị từ 0 – 100% kết hợp.
%g,%b)
Hexadecimal Mã màu RGB dạng hệ thập lục.
RGB Ví dụ: #FFFFFF: trắng, #000000: đen, #FF0000: đỏ tươi.

8. Một số thuộc tính mới trong CSS3
 Làm việc với các thuộc tính mới trong CSS3:

 Border-radius
 Border-image
 Gradient
 Transform, transition, animation
 Chèn nhiều hình nền với CSS3

Tổng quan về CSS3
 Một số module quan trọng trong CSS3:

 Selectors
 Box Model
 Backgrounds and Borders
 Text Effects
 2D/3D Transformations
 Animations
 Multiple Column Layout
 User Interface

Những thuộc tính mới trong CSS3
 Border-radius: tạo ra góc bo tròn cho đường viền

 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 -o-border-radius: 10px;
-moz-animation hỗ trợ cho firefox.

-webkit-animation hỗ trợ cho Google Chrome và Safari.
-ms-animation hỗ trợ cho Internet Explorer.
-o-animation hỗ trợ cho Opera.

Thuộc tính Ví dụ Mô tả
border-top-left-radius: 5px; Góc trên - bên trái sẽ được uốn
border-top-left-radius
border-top-left-radius: 5px 10px; cong.
border-top-right- border-top-right-radius: 5px; Góc trên - bên phải sẽ được
radius border-top-right-radius: 5px 10px; uốn cong.
border-bottom-left- border-bottom-left-radius: 5px; Góc dưới - bên trái sẽ được
radius border-bottom-left-radius: 5px 10px; uốn cong.
border-bottom-right- border-bottom-right-radius: 5px; Góc dưới - bên phải sẽ được
radius border-bottom-right-radius: 5px 10px; uốn cong.
border-radius: 5px;
border-radius: 5px 10px;

border-radius Cả 4 góc đều được uốn cong.
border-radius: 5px 10px 4px;
border-radius: 5px 10px 4px 8px;

 Border-radius: Tạo border: http://border-radius.com/

-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
-webkit-border-top-left-radius: 24px;
-webkit-border-top-right-radius: 23px;
-webkit-border-bottom-right-radius: 45px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 24px;
-moz-border-radius-topright: 23px;
-moz-border-radius-bottomright: 45px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 24px;
border-top-right-radius: 23px;
border-bottom-right-radius: 45px;
border-bottom-left-radius: 10px; Minh họa
 Border-image:
-webkit-border-image: url(border.png) 30 30 round;
-o-border-image: url(border.png) 30 30 round;
border-image: url(border.png) 30 30 round;
-webkit-border-image: url(border.png) 30 30 stretch;

-o-border-image: url(border.png) 30 30 stretch;
border-image: url(border.png) 30 30 stretch;
Minh họa
 CSS3 Shadow:
div {
width: 300px;
height: 100px;
background-
color: yellow;
/* offset-x |
offset-y | blur-
radius |
spread-radius
| color */
box-shadow:
10px 10px
5px 0 Minh họa
#888888;
 CSS3 Gradient:
 Gradient là thành phần phổ biến trên trang web
 Gradient thường bao gồm:
 2 điểm dừng màu (color stop)
 1 điểm chuyển màu
 Với CSS3: sử dụng các thuộc tính định nghĩa gradient:

 Linear-gradient
 Radial-gradient

 CSS3 Gradient:
#grad1 {
height: 200px;
width:500px;
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax (must be last) */
}
<h3>Linear Gradient - Top to Bottom</h3>

<p>This linear gradient starts at the top. It starts red, transitioning to
blue:</p>
<div id="grad1"></div>

 CSS3 Gradient:
#grad1 {
height: 200px;
width:500px;
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}

 CSS3 Gradient:
#grad1 {
height: 200px;
width:500px;
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}

 CSS3 Gradient:
 Gradient với góc độ:
#grad1 {
height: 200px;
width:500px;
background: -webkit-linear-gradient(45deg, red, blue);
background: -o-linear-gradient(45deg, red, blue);
background: -moz-linear-gradient(45deg, red, blue);
background: linear-gradient(45deg, red, blue);
}

 CSS3 Gradient:
 Gradient với nhiều điểm màu:
#grad1 {
height: 200px;
width:500px;
background: -webkit-linear-gradient(red, green, blue);
background: -o-linear-gradient(red, green, blue);
background: -moz-linear-gradient(red, green, blue);
background: linear-gradient(red, green, blue);
}
Minh họa
 Tạo CSS3 Gradient:

www.Css3maker.com

Transform – Transition - Animation
 Transform:
 Cho phép xoay, kéo dãn, kéo nghiêng thành phần trên trang
transform: rotate(15deg) ;
transform: scale(1.2);
transform: skew(45deg, 5deg) ;
Minh họa
 Transform:
 Rotate(10deg)

 Transition
 Sử hành động (hover, click,…) để thực hiện
dụng
Transition
transition-property: xác định thuộc tính chuyển đổi
transition-duration: quy định thời gian chuyển đổi
transition-timing-function: xác định tốc độ của hiệu ứng
chuyển tiếp.

Transition
Hiệu ứng của quá trình chuyển đổi
none transition-property: none;
transition- sẽ không được hiển thị.
property Xác định hiệu ứng của quá trình
all transition-property: all;
chuyển đổi cho tất cả thuộc tính.
transition- Quá trình chuyển đổi mất bao nhiêu
Thời gian transition-duration: 2s;
duration thời gian.
Xác định một hiệu ứng của quá trình
transition-timing-function: chuyển đổi với một sự khởi đầu
ease
ease; chậm, sau đó nhanh chóng, sau đó
kết thúc chậm.
ease-in transition-timing-function:
chuyển đổi với một khởi đầu chậm
ease-in;
chạp.
transition-timing-function: Xác định một hiệu ứng của quá trình
transition- ease-out
ease-out; chuyển đổi với một kết thúc chậm.
timing-function Xác định một hiệu ứng của quá trình
ease-in-out transition-timing-function:
chuyển đổi với một khởi đầu và kết
ease-in-out;
thúc chậm.
linear transition-timing-function:
chuyển đổi với cùng một tốc độ từ
linear;
đầu đến cuối.
Xác định giá trị cho hiệu ứng của quá
cubic- transition-timing-function: trình chuyển đổi theo từng giai đoạn,
bezier(n,n,n,n) cubic-bezier(0,1,0.35,0);
giá trị xác định chỉ có thể từ 0 tới 1.
 Transition
img {
transition-property:all;
transition-duration:0.5s;
transition-timing-function:ease;
/* transition:all 0.5s ease; */
-webkit-transition-property:all;
-webkit-transition-
duration:0.5s;
-webkit-transition-timing-
function:ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
}
img:hover{
transform: scale(1.5);
-webkit-transform:
scale(1.5);
-moz-transform:
scale(1.5);
Minh họa
03/10/2024 -o-transform: Bài giảng Thiết kế Web 82
80
scale(1.5);
 Transition

 CSS animation
 Tạo hoạt hình
 Thay thế ảnh động,
hoạt hình Flash
animation-name: xác định tên cho một animation

animation-duration: quy định thời gian chuyển đổi
animation-iteration-count: xác định số lần thực hiện chuyển động.
animation-timing-function: xác định tốc độ của hiệu ứng
chuyển tiếp.
Minh họa
Animation

animation- tên animation-name: Xác định tên cho một
name animation myAnimation; animation.
animation- Tương tự transition-duration
duration
animation-
timing-function Tương tự transitoin-timing-function
số tự animation-iteration- Xác định số lần thực hiện
animation- count: 4; chuyển động.
iteration- nhiên
count
infinite animation-iteration- Chuyển động sẽ thực hiện
count: infinite; không giới hạn số lần.
normal animation-direction: Chuyển động bình thường, đây
animation- normal; là dạng mặc định.
direction animation-direction: Chuyển động sẽ được đảo
alternate
alternate; ngược ở chu kỳ tiếp theo.
paused animation-play-state: Xác định chuyển động dừng
animation- paused; lại.
play-state animation-play-state:
running Xác định chuyển động chạy.
running;
 CSS animation
 keyframe
 Hỗ trợ tạo hình ảnh dạng động/hoạt hình
 Hình ảnh động tạo ra bằng cách thay đổi thuộc tính từ tập hợp style
này sang style khác.
@keyframe animationname
{ keyfarmes-selector { css-
styles;}
}
 Animationname: tên của animation

 Keyframes-selector: tỷ lệ phần trăm thời gian
chuyển động
 CSS animation
.sanphammoi{ backgroun
d-color:#93F;
animation: myfirst 5s
infinite;
-webkit-animation: myfirst
5s infinite;}
@keyframes myfirst {
0%
{background:#93F;}
25%
{background:#939;}
50%
{background:#933;}
100% {background:#903;}
}
Minh họa
Hình nền với CSS3
 Thực hiện chèn 3 hình ảnh làm nền cho web
body {
background-color: #B3BBCA;
background-image:
url(images/bg1.png),url(images/bg2.png)
, url(images/bg3.png);
}

Hình nền với CSS3
 Chèn nhiều hình nền với vị trí chính xác:

.specialsale
{ width:
550px;
border: 2px
#773636
solid;
background-image: url(images/blueberry.jpg),url(images/orange.png);
background-repeat: no-repeat;
background-position: top right, 0 -45px;
}

Chapter 3. Ngon Ngu 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

Chapter 3. Ngon Ngu CSS

Uploaded by

Copyright:

Available Formats

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT

VIỆN KỸ THUẬT - CÔNG NGHỆ

1. Giới thiệu CSS

03/10/2024 Bài giảng Thiết kế Web 2

 CSS (Cascading Style Sheets) là một ngôn ngữ quy

03/10/2024 Bài giảng Thiết kế Web 3

 Tại sao CSS?

03/10/2024 Bài giảng Thiết kế Web 4

03/10/2024 Bài giảng Thiết kế Web 5

03/10/2024 Bài giảng Thiết kế Web 7

Chú ý khi viết style

03/10/2024 Bài giảng Thiết kế Web 8

Khai báo style

Style áp dụng cho thẻ cụ thể

03/10/2024 Bài giảng Thiết kế Web 10

Tạo lớp (có thể áp dụng cho nhiều thẻ)

03/10/2024 Bài giảng Thiết kế Web 11

03/10/2024 Bài giảng Thiết kế Web 12

Định danh (id)

03/10/2024 Bài giảng Thiết kế Web 13

Sử dụng định danh

 Chú ý: Không nên đặt tên class, id với ký tự đầu là

03/10/2024 Bài giảng Thiết kế Web 14

 Ví dụ: Xét đoạn mã HTML sau đây :

03/10/2024 Bài giảng Thiết kế Web 15

03/10/2024 Bài giảng Thiết kế Web 16

03/10/2024 Bài giảng Thiết kế Web 17

03/10/2024 Bài giảng Thiết kế Web 19

03/10/2024 Bài giảng Thiết kế Web 20

03/10/2024 Bài giảng Thiết kế Web 21

03/10/2024 Bài giảng Thiết kế Web 23

- Các bạn tự tìm 1 vài ví dụ về Inline, Internal và

03/10/2024 Bài giảng Thiết kế Web 24

Thuộc tính Background

Thuộc tính giá trị Ví dụ Mô tả

03/10/2024 Bài giảng Thiết kế Web 26

03/10/2024 Bài giảng Thiết kế Web 27

 Box model (mô hình hộp) mô tả cách mà CSS định

p {width: 200px; margin: 30px 20px;

<p> Trong CSS, box model (mô hình hộp)

03/10/2024 Bài giảng Thiết kế Web 28

03/10/2024 Bài giảng Thiết kế Web 29

Thuộc tính giá trị Ví dụ Mô tả

Các kiểu border

03/10/2024 Bài giảng Thiết kế Web 31

Thuộc tính Giá trị Ví dụ Mô tả

Thuộc tính Giá trị Ví dụ Mô tả

03/10/2024 Bài giảng Thiết kế Web 33

Thuộc tính Giá trị Ví dụ Mô tả

Thuộc tính Giá trị Ví dụ Mô tả

03/10/2024 Bài giảng Thiết kế Web 35

Thuộc tính border-collapse

03/10/2024 Bài giảng Thiết kế Web 36

Thuộc tính border-collapse

Thuộc tính border-spacing

03/10/2024 Bài giảng Thiết kế Web 38

Thuộc tính border-spacing

03/10/2024 Bài giảng Thiết kế Web 39

Thuộc tính Giá trị Ví dụ Mô tả

Thuộc tính Thành phần Thể hiện Ví dụ Mô tả

Thuộc tính Giá trị Ví dụ Mô tả

đơn vị padding-top: Thêm vào khoảng không bên

đơn vị padding-right: Thêm vào khoảng không bên

padding- đơn vị padding-bottom: Thêm vào khoảng không bên