Bài giảng Thiết kế web: Chương 3 - Trường ĐH Thủ Dầu Một

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.22 MB, 15 trang )

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

NỘI DUNG

KHOA KỸ THUẬT - CÔNG NGHỆ

THIẾT KẾ WEB
Chương 3
NGÔN NGỮ CSS
(Cascading Style Sheet)
Phone: 0274. 3834930

Website:

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

18/01/2019

1. Giới thiệu CSS

1. Giới thiệu CSS

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

 Tại sao CSS?

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

18/01/2019

Bài giảng Thiết kế Web

3

1. Giới thiệu CSS

Bài giảng Thiết kế Web

2

 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 ở ngồ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.

18/01/2019

Bài giảng Thiết kế Web

4

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

18/01/2019

Bài giảng Thiết kế Web

5

18/01/2019

Bài giảng Thiết kế Web

6

1

3. Khai báo và sử dụng style

3. Khai báo và sử dụng style

Chú ý khi viết style

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

Khai báo style
Selector {
Property: Value;
}

/*
Đoạn ghi chú
*/

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
18/01/2019

Bài giảng Thiết kế Web

7

18/01/2019

Bài giảng Thiết kế Web

3. Khai báo và sử dụng style

3. Khai báo và sử dụng style

Style áp dụng cho thẻ cụ thể
 Trường hợp 1 thẻ: Đặt selector là tên_thẻ

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{

p {
color: red;
}

color:red;

}
p.loai2{
color:blue;

 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

}

 Không gắn với thẻ cụ thể: bỏ phần tên_thẻ đi, giữ lại dấu

chấm:

h1,h2,h3,h4,h5,h6{

.loai3{

font-family:arial;

color:green;

}

18/01/2019

8

}

Bài giảng Thiết kế Web

9

18/01/2019

Bài giảng Thiết kế Web

3. Khai báo và sử dụng style

3. Khai báo và sử dụng style

Sử dụng lớp
 Đặt thuộc tính class của thẻ=“tên_lớp”:

Định danh (id)

10

 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ên_thẻ class=“tên_lớp”>

 Tổng quát: #định_danh{…}

 Ví dụ:

Đoạn này

Style
lực

Tiêu đề
Đoạn này

màu đỏ

khơng có hiệu

 Ví dụ:
p#doan1{
color:red;

}
#loai2{

màu xanh

màu xanh

color:blue;

}

18/01/2019

Bài giảng Thiết kế Web

11

18/01/2019

Bài giảng Thiết kế Web

12

2

3. Khai báo và sử dụng style

3. Khai báo và sử dụng style

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

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

Danh Sách Các Tỉnh, Thành Phố Của Việt Nam

<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>Qng Ninh</li>
<li>Tiền Giang</li>

<tên_thẻ id=“định_danh”>

 Ví dụ:

Đoạn này màu đỏ

Tiêu đề xanh

</ul>

 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.
18/01/2019

Bài giảng Thiết kế Web

13

 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.

18/01/2019

Bài giảng Thiết kế Web

3. Khai báo và sử dụng style

3. Khai báo và sử dụng style

 Ví dụ: …
li.tp { color:#F00;
}
li.tinh { color:#00F; }

 Ví dụ:

14

Với ví dụ bê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.

Danh Sách Các Tỉnh, Thành Phố Của Việt Nam

<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>

18/01/2019

Bài giảng Thiết kế Web

15

18/01/2019

Bài giảng Thiết kế Web

3. Khai báo và sử dụng style

4. Cách tạo các loại style

 Ví dụ: …
#hanoi { color:#790000 }
#hcmc { color:#FF0000 }
#danang { color:#FF00FF }
.tinh { color:#00F; }

Inline style

16

 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:

Danh Sách Các Tỉnh, Thành Phố Của Việt Nam

<ul>

…”>
Nội dung văn bản muốn định dạng
</TagName>

<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>
<li class="tinh">Khánh Hòa</li>
<li class="tinh">Quãng Ninh</li>
<li class="tinh">Tiền Giang</li>

</ul>
18/01/2019

Bài giảng Thiết kế Web

17

18/01/2019

Bài giảng Thiết kế Web

18

3

4. Cách tạo các loại style

4. Cách tạo các loại style

Inline style

Internal style

 Ví dụ:
<body>

 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

This paragraph has an inline style applied to it

This paragraph is displayed in the default style.

Can you see the <span style = color:red> difference </span> in
this line

</body>

18/01/2019

Bài giảng Thiết kế Web

19

<head> … </head>
 Cú pháp:
<style type=”text/css”>

selector {property1:value1;property2:value 2; …}
.....
</style>

18/01/2019

20

Bài giảng Thiết kế Web

4. Cách tạo các loại style

4. Cách tạo các loại style

Internal style

External style

 Ví dụ:
<html>
<head>
<style type=”text/css”>
h1,h2 { color: limegreen; font-family: Arial }

</style>
</head>
<body>

This is the H1 element

This is the H2 element

This is the H3 element with its default style as displayed in the
browser

</body>
</html>

 Là style được lưu trữ thành một file bên ngoài và được liên kết với

18/01/2019

Bài giảng Thiết kế Web

21

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

backgroundattachment

backgroundcolor
backgroundimage
18/01/2019

giá trị

 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>

18/01/2019

Thuộc tính
Ví dụ

Mơ tả
Xác định thành phần
nền được cố định
hoặc cuộn so với
fixed
background-attachment
trang.
scroll
:fixed;
Được sử dụng kèm
với giá trị backgroundimage
background-color
mã màu
:#ff0000;
Xác định màu nền cho
tên màu

background-color: red;
thành phần.
Giá trị rgb
background-color:
rgb(255,0,0);
url(đường dẫn background-image:
Xác định hình ảnh nền
hình)
url(ico_arrow.gif);
cho thành phần.
Bài giảng Thiết kế Web

22

Bài giảng Thiết kế Web

Thuộc tính Background (tt)

Thuộc tính Background
Thuộc tính

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:

23

backgroundposition

backgroundrepeat

background

18/01/2019

giá trị
left
right
top
bottom
px
%
repeat-x
repeat-y
repeat
no-repeat
Một hoặc nhiều
giá trị của các
thuộc tính trên

Ví dụ

Mơ tả

Xác định vị trí hình ảnh
nền cho thành phần.
backgroundposition: left top; Được sử dụng kèm với
giá trị background-image.

backgroundXác định hình ảnh nền

repeat: repeat-x; được lặp như thế nào.
Có giá trị riêng lẻ hoặc
background:
url(ico_arrow.gif) tổng hợp các thuộc tính
repeat-x left top; trên.

Bài giảng Thiết kế Web

24

4

Box Model

Thuộc tính Border

 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 }

Thuộc tính

border-color

border-style

kiểu border

border-width

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.

18/01/2019

border
25

Bài giảng Thiết kế Web

Thuộc tính Border (tt)

giá trị
mã màu
tên màu
Giá trị rgb

Ví dụ
Mơ tả
border-color:
#ff0000;
Xác định màu sắc

border-color: red;
của đường viền.
border-color:
rgb(255,0,0);
Xác định hình
border-style: solid;dạng của đường
viền.

px
thin
medium
thick
Một hoặc nhiều
giá trị của các
thuộc tính định
dạng.

18/01/2019

Giá trị

Đường viền hiển thị
Đường viền hiển thị

border-top-style

Đường viền hiển thị

border-top-width

Đường viền hiển thị
Đường viền hiển thị

border-top
27

Thuộc tính Border (tt)

border-rightstyle

kiểu border

border-rightwidth

border-right

18/01/2019

18/01/2019

Mơ tả
Xác định màu sắc
cho đường viền
bên trên.

px
thin
medium
thick
Một hoặc

nhiều giá trị
của các thuộc
tính định dạng.

border-topwidth: 5px;

Xác định bề dày
cho đường viền
bên trên.

border-top:
#ff0000 solid
2px;

Xác định đường
viền bên trên.
28

Bài giảng Thiết kế Web

Thuộc tính Border (tt)

Giá trị

border-rightcolor

26

Xác định hình
border-top-style:

dạng cho đường
solid;
viền bên trên.

kiểu border

Đường viền hiển thị

Bài giảng Thiết kế Web

mã màu
tên màu
Giá trị rgb

Xác định tất cả
các đường viền
xung quanh.

Ví dụ
border-topcolor: red;
border-topcolor:
rgb(255,0,0);

mã màu
border-top-color tên màu
Giá trị rgb

Hiển thị

Mơ tả

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

Thuộc tính

border: #ff0000
solid 2px;

Thuộc tính Border (tt)
Thuộc tính

18/01/2019

Xác định bề dày
của đường viền.

Bài giảng Thiết kế Web

Các kiểu border
Giá trị

border-width: 5px;

Ví dụ
border-rightcolor: #ff0000;
border-rightcolor: red;

px
thin
medium
thick
Một hoặc
nhiều giá trị
của các thuộc
tính định dạng.

Mơ tả

Thuộc tính

Giá trị

Xác định màu sắc

cho đường viền
bên phải.

border-bottomcolor

mã màu
tên màu
Giá trị rgb

border--rightstyle: solid;

Xác định hình
dạng cho đường
viền bên phải.

border-bottomstyle

kiểu border

border-rightwidth: 5px;

Xác định bề dày
cho đường viền
bên phải.

border-bottomwidth

border-right:
#ff0000 solid
2px;

Xác định đường
viền bên phải.

border-bottom

Bài giảng Thiết kế Web

29

18/01/2019

Ví dụ
border-bottomcolor: #ff0000;
border-bottomcolor: red;

px
thin
medium
thick
Một hoặc
nhiều giá trị
của các thuộc
tính định dạng.

Mơ tả
Xác định màu sắc
cho đường viền
bên dưới.

border-bottomstyle: solid;

Xác định hình
dạng cho đường
viền bên dưới.

border-bottomwidth: 5px;

Xác định bề dày
cho đường viền
bên dưới.

border-bottom:
#ff0000 solid
2px;

Xác định đường
viền bên dưới.

Bài giảng Thiết kế Web

30

5

Thuộc tính Border (tt)
Thuộc tính

Giá trị

border-left-color

mã màu
tên màu
Giá trị rgb

border-left-style

kiểu border

border-left-width

border-left

Thuộc tính Border (tt)
Ví dụ
Mơ tả
border-left-color:
Xác định màu sắc
#ff0000;
cho đường viền
border-left-color:
bên trái.
red;
Xác định hình
border-left-style:
dạng cho đường
solid;
viền bên trái.

px
thin
medium
thick
Một hoặc
nhiều giá trị
của các thuộc
tính định dạng.

18/01/2019

border-leftwidth: 5px;

Xác định bề dày
cho đường viền
bên trái.

border-left:
#ff0000 solid
2px;

Xác định đường
viền bên trái.

Bài giảng Thiết kế Web

31

Thuộc tính Border (tt)

Giá trị
collapse

bordercollapse

Ví dụ
bordercollapse:
collapse;

borderseparate collapse:
separate;

inherit

bordercollapse:
inherit;

18/01/2019

Bài giảng Thiết kế Web

độ rộng

border-spacing

18/01/2019

32

 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).

33

18/01/2019

Bài giảng Thiết kế Web

34

Thuộc tính Margin
Thuộc tính

Thuộc tính border-spacing
Giá trị

Bài giảng Thiết kế Web

Thuộc tính border-spacing
Mô tả
Khoảng trống giữa các
đường viền (border) của
table bị loại bỏ, chỉ còn
đường viền duy nhất.

Khoảng trống giữa các
đường viền (border) của
table vẫn giữ nguyên, đây
là dạng mặc định của
table.
Xác định thừa hưởng
thuộc tính từ thành phần
cha (thành phần bao
ngồi).

Thuộc tính Border (tt)

Thuộc tính

18/01/2019

Thuộc tính Border (tt)

Thuộc tính border-collapse
Thuộc tính

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.

Ví dụ
border-spacing:
10px;

ngang
dọc

border-spacing:
10px 20px;

inherit

border-collapse:
inherit;

margin

Mô tả
Độ rộng giữa các
đường viền (border)
của table.
Độ rộng giữa các
đường viền (border)
của table với giá trị
ngang và dọc.
Xác định thừa hưởng
thuộc tính từ thành
phần cha (thành phần
bao ngồi).

Bài giảng Thiết kế Web

Giá trị

đơn vị
auto
inherit

đơn vị
auto
inherit
đơn vị
auto
margin-right
inherit
đơn vị
margin-bottom auto
inherit
đơn vị
auto
margin-left
inherit
margin-top

35

18/01/2019

Ví dụ

Mô tả
Đây là cách viết ngắn gọn
margin: 5px 10px các thuộc tính bên dưới,
3px 20px;

đơn vị có thể là px, em,
%, ...
Canh lề bên trên cho
margin-top: 5px;
thành phần, đơn vị có thể
là px, em, %, ...
Canh lề bên phải cho
margin-right: 5px; thành phần, đơn vị có thể
là px, em, %, ...
Canh lề bên dưới cho
margin-bottom: 5px; thành phần, đơn vị có thể
là px, em, %, ...
Canh lề bên trái cho
thành phần, đơn vị có thể
margin-left: 5px;
là px, em, %, ...
Bài giảng Thiết kế Web

36

6

Thuộc tính Padding

Cách sử dụng thuộc tính margin
Thuộc tính Thành phần

4 thành
phần

3 thành
phần
margin
2 thành
phần

1 thành
phần

Thể hiện

Ví dụ

Mơ tả

Thuộc tính

margin-top: 5px;
margin-right: 10px
margin-bottom: 3px
margin-left: 20px
margin-top: 5px;
top (right margin: 5px margin-right: 10px
left) bottom 10px 15px; margin-left: 10px
margin-bottom: 15px
margin-top: 5px;
(top
margin: 5px margin-bottom: 5px
bottom)

10px;
margin-right: 10px
(right left)
margin-left: 10px
margin-top: 10px;
margin-right: 10px
(top right
margin: 10px;
margin-bottom: 10px
bottom left)
margin-left: 10px
margin: 5px
top right
10px 3px
bottom left
20px;

18/01/2019

37

Bài giảng Thiết kế Web

4 thành
phần

3 thành
phần
padding
2 thành

phần

1 thành
phần

Thể hiện

Ví dụ

Mơ tả

Bài giảng Thiết kế Web

39

Thuộc tính List (tt)
Thuộc tính

list-styleposition

18/01/2019

Giá trị

padding-top

đơn vị
inherit

padding-right

đơn vị
inherit

paddingbottom

đơn vị
inherit

padding-left

đơn vị
inherit

18/01/2019

Thuộc tính

padding-top: 5px;
padding: 5px
padding-right: 10px
top right
10px 3px
padding-bottom: 3px
bottom left
20px;
padding-left: 20px
padding-top: 5px;
top (right padding: 5px padding-right: 10px
left) bottom 10px 15px; padding-left: 10px

padding-bottom: 15px
padding-top: 5px;
(top
padding: 5px padding-bottom: 5px
bottom)
10px;
padding-right: 10px
(right left)
padding-left: 10px
padding-top: 10px;
padding-right: 10px
(top right padding:
padding-bottom: 10px
bottom left) 10px;
padding-left: 10px

18/01/2019

padding

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

5px;
có thể là px, em, %, ...
Thêm vào khoảng khơng bên
padding-right:
phải cho thành phần, đơn vị
5px;
có thể là px, em, %, ...
Thêm vào khoảng không bên
padding-bottom:
dưới cho thành phần, đơn vị
5px;
có thể là px, em, %, ...
Thêm vào khoảng khơng bên
padding-left:
trái cho thành phần, đơn vị có
5px;
thể là px, em, %, ...
38

Bài giảng Thiết kế Web

Thuộc tính List

Cách sử dụng thuộc tính padding
Thuộc tính Thành phần

Giá trị
đơn vị
inherit

list-style

Giá trị
Ví dụ
Một hoặc
nhiều giá
trị của các
thuộc tính
list-style: square;
image,
position,
style bên
dưới.
list-style:
URL
url(images/list.gif);
none

list-style: none;

inherit

list-style: inherit;

list-style-image

18/01/2019

Mô tả

Đây là dạng viết ngắn gọn,
tổng hợp các kiểu bên
dưới (image, position,
type).

Thay thế các mục của
danh sách bằng hình ảnh.
Khơng hiển thị image list,
đây là dạng mặc định.
Xác định thừa hưởng
thuộc tính từ thành phần
cha (thành phần bao
ngồi).

Bài giảng Thiết kế Web

40

Thuộc tính List (tt)
Ví dụ

inside

list-style: inside;

outside

list-style: outside;

inherit

list-style:inherit;

Mơ tả
Xác định các mục nằm
bên trong nội dung.
Xác định các mục nằm
bên ngoài nội dung, đây là
dạng mặc định.
Xác định thừa hưởng
thuộc tính từ thành phần
cha (thành phần bao
ngồi).

Bài giảng Thiết kế Web

41

Thuộc tính

Giá trị

Ví dụ
Mơ tả
list-style-type: Danh sách list-style-type 01.
none;
Danh sách list-style-type 02.
list-style-type: • Danh sách list-style-type 01.
disc
circle;

• Danh sách list-style-type 02.
list-style-type: o Danh sách list-style-type 01.
circle
disc;
o Danh sách list-style-type 02.
list-style-type:  Danh sách list-style-type 01.
square
square;
 Danh sách list-style-type 02.
list-style-type: 1. Danh sách list-style-type 01.
decimal
decimal;
2. Danh sách list-style-type 02.
decimal- list-style-type:
01. Danh sách list-style-type 01.
leading- decimal02. Danh sách list-style-type 02.
leading-zero;
zero
none

list-style-type

18/01/2019

Bài giảng Thiết kế Web

42

7

Thuộc tính List (tt)

Thuộc tính Font
Thuộc tính

Thuộc tính

Giá trị
loweralpha
upperalpha
lowerlist-style-type roman
upperroman
inherit

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

18/01/2019

43

Bài giảng Thiết kế Web

Thuộc tính Font (tt)
Thuộc tính
font-size

font-family

text-shadow

font-style

font-variant

font-weight

18/01/2019

text-align

letter-spacing
text-decoration

45

Bài giảng Thiết kế Web

Mơ tả
Thiết lập màu chữ.
Thiết lập khoảng
thụt đầu dòng.
Thiết lập chế độ
canh văn bản.

Giá trị

<color>
<length>
%
left
right
center
justify
Thiết lập khoảng
normal
cách giữa các ký tự. <length>
none
Thêm hiệu ứng
underline
đặc biệt cho văn
overline
bản.
line-through
blink

18/01/2019

Bài giảng Thiết kế Web

46

Thuộc tính Layout Position

Mơ tả
Change case văn
bản.

Thuộc tính Float

Giá trị

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

none
upper
lower
capitalize
none
color
length

Thuộc tính

float

18/01/2019

44

Bài giảng Thiết kế Web

Thuộc tính
color
text-indent

Thuộc tính Text (tt)
Thuộc tính
text-transform

Giá trị

font-style
font-variant
font-weight
font-size
font-family
Thiết lập chế độ in normal
italic
nghiêng, xiên hay
oblique
bình thường.
Thiết lập font bình normal
small-caps
thường hay smallcaps

Thiết lập in đậm,
normal
thường.
bold
bolder
lighter
100 – 900

Thuộc tính Text

Mơ tả
Giá trị
Thiết lập kích cỡ font. xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
<length>
%
family-name
Thiết lập loại font
hiển thị trang web/
generic-family
đối tượng web.

18/01/2019

Mơ tả
Thuộc tính ngắn
cho tất cả các thiết
lập về font.

font

Bài giảng Thiết kế Web

47

18/01/2019

Giá trị

Ví dụ

left

float: left;

right

float: right;

none

float: none;

inherit

float: inherit;

Mô tả
Thành phần được trôi nổi
(float) qua bên trái.
Thành phần được trôi nổi
(float) qua bên phải.
Thành phần không được trôi
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
tính từ thành phần cha (thành
phần bao ngoài).

Bài giảng Thiết kế Web

48

8

Thuộc tính Layout Position (tt)

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

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.
Thuộc tính

clear

Giá trị

Ví dụ

left

clear: left;

right

clear: right;

both

clear: both;

none

clear: none;

18/01/2019

Mô tả
Bên trái của thành phần
không được float.

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

49

Bài giảng Thiết kế Web

Thuộc tính Layout Position (tt)

Giá trị
static
relative

position
absolute

18/01/2019

Các thuộc tính Top, Right, Bottom, Left

Mô tả
Thành phần sẽ nằm theo thứ
position: static; tự trong văn bản, đây là dạng
mặc định.
Định vị trí tương đối cho

position: relative;
thành phần.
Định vị trí tuyệt đối cho thành
phần theo thành phần bao
position:
ngồi (thành phần định vị trí
absolute;
tương đối position: relative;)
hoặc theo cửa sổ trình duyệt.

Ví dụ

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
top
right
bottom
left

Minh họa
18/01/2019

51

Bài giảng Thiết kế Web

Thuộc tính Layout Position (tt)

auto
z-index
giá trị
inherit
18/01/2019

Ví dụ

Khoảng
cách
Khoảng
cách
Khoảng
cách

Khoảng cách tính từ mép trên ngoài cùng
top: 20px; của thành phần bao ngồi, đơn vị có thể
là px, em, %, ...
Khoảng cách tính từ mép phải ngồi cùng
của thành phần bao ngồi
bottom:
Khoảng cách tính từ mép dưới cùng của
20px;
thành phần bao ngồi
Khoảng cách tính từ mép trái ngồi cùng

left: 20px;
của thành phần bao ngồi
right: 20px;

18/01/2019

Bài giảng Thiết kế Web

Minh họa

52

Thuộc tính Display

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.
Giá trị

Khoảng
cách

Thuộc tính Layout Position (tt)

Thuộc tính Z-index

Thuộc
tính

50

Bài giảng Thiết kế Web

Thuộc tính Layout Position (tt)

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
Thuộc tính

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

Mơ tả

z-index:
auto;

Tự động sắp xếp thứ tự chồng nhau cho
thành phần, đây là dạng mặc định.

z-index:
10;
z-index:
inherit;

Sắp xếp thứ tự chồng nhau cho thành

phần theo giá trị.
Xác định thừa hưởng thuộc tính từ thành
phần cha (thành phần bao ngoài).
Minh họa 1

Minh họa 2

Bài giảng Thiết kế Web

53

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).
18/01/2019

Bài giảng Thiết kế Web

Minh họa

54

9

Thuộc tính Layout Position (tt)

6. Thiết lập các thuộc tính cho liên kết

Thuộc tính Visibility
Thuộc tính

giá trị
collapse
hidden

visibility

Visible

Inherit

• Để 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:

Mơ tả
Làm "sụp đổ" các hàng và cột của
thành phần table, giá trị này chỉ sử
dụng cho thành phần table.

Trạng thái
a
a:link
a:hover
a:visited
a:active

Thành phần sẽ không được nhìn thấy.
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ừ
thành phần cha (thành phần bao
ngồi).

Giải thích
Chung cho các trạng thái
Liên kết chưa thăm.
Khi rê chuột lên liên kết.
Khi liên kết đã thăm.
Đang nhấn giữ chuột

a:link {

a:hover{
text-decoration:underline;
border:#00F solid 1px;
background-color:#399;
}

color:#F00;
font-family:verdana;
text-decoration:none;
}

18/01/2019

Minh họa 1

Bài giảng Thiết kế Web

Minh họa 2

55

7. Đơn vị trong CSS

em
pt
pc
px

Bài giảng Thiết kế Web

56

7. Đơn vị trong CSS

Đơn vị chiều dài
Đơn vị
%
in
cm
mm

18/01/2019

Đơn vị màu sắc

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

Đơn vị
Color-name
RGB (r,g,b)

RGB
(%r,%g,%b)
Hexadecimal
RGB

Mơ tả
Tên màu tiếng Anh.
Ví dụ: black, white, red, green, blue, cyan, magenta,…
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.
Màu RGB với 3 giá trị R, G, B có trị từ 0 – 100% kết hợp.
Mã màu RGB dạng hệ thập lục.
Ví dụ: #FFFFFF: trắng, #000000: đen, #FF00FF: đỏ tươi.

Point (1 pt = 1/72 inch)
Pica (1 pc = 12 pt)
Pixels (điểm ảnh trên màn hình máy tính)

18/01/2019

Bài giảng Thiết kế Web

57

18/01/2019

Bài giảng Thiết kế Web

8. Một số thuộc tính mới trong CSS3

Tổng quan về CSS3

 Làm việc với các thuộc tính mới trong CSS3:

 Một số module quan trọng trong CSS3:

 Border-radius

 Selectors

 Border-image

 Box Model

 Gradient

 Backgrounds and Borders

 Transform, transition, animation

 Text Effects

 Chèn nhiều hình nền với CSS3

 2D/3D Transformations

58

 Animations
 Multiple Column Layout

 User Interface

18/01/2019

Bài giảng Thiết kế Web

59

18/01/2019

Bài giảng Thiết kế Web

60

10

Những thuộc tính mới trong CSS3

Những thuộc tính mới trong CSS3
Thuộc tính

 Border-radius: tạo ra góc bo trịn cho đường viền

border-top-left-radius

 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;

 -o-border-radius: 10px;

Ví dụ

Mơ tả

border-top-left-radius: 5px;
border-top-left-radius: 5px 10px;

border-top-rightradius

border-top-right-radius: 5px;

border-bottom-leftradius

border-bottom-left-radius: 5px;

border-bottom-rightradius

border-bottom-right-radius: 5px;

border-top-right-radius: 5px 10px;
border-bottom-left-radius: 5px 10px;
border-bottom-right-radius: 5px 10px;

Góc trên - bên trái sẽ được uốn
cong.
Góc trên - bên phải sẽ được
uốn cong.
Góc dưới - bên trái sẽ được

uốn cong.
Góc dưới - bên phải sẽ được
uốn cong.

border-radius: 5px;

-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.
18/01/2019

border-radius: 5px 10px;
border-radius

border-radius: 5px 10px 4px 8px;

61

Bài giảng Thiết kế Web

Những thuộc tính mới trong CSS3
 Border-radius:

18/01/2019

18/01/2019

62

Bài giảng Thiết kế Web

Những thuộc tính mới trong CSS3

Tạo border: />
 Border-image:

-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;

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

-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

Minh họa
63

Bài giảng Thiết kế Web

18/01/2019

Bài giảng Thiết kế Web

Những thuộc tính mới trong CSS3

Những thuộc tính mới trong CSS3

 CSS3 Shadow:

 CSS3 Gradient:

div {
width: 300px;
height: 100px;
background-color: yellow;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 10px 10px 5px #888888;
}

64

 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

Minh họa
18/01/2019

Bài giảng Thiết kế Web

65

18/01/2019

Bài giảng Thiết kế Web

66

11

Những thuộc tính mới trong CSS3

Những thuộc tính mới trong CSS3

 CSS3 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) */
}

#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);
}

Linear Gradient - Top to Bottom

This linear gradient starts at the top. It starts red, transitioning to blue:

<div id="grad1"></div>

18/01/2019

67

Bài giảng Thiết kế Web

18/01/2019

Bài giảng Thiết kế Web

Những thuộc tính mới trong CSS3

Những thuộc tính mới trong CSS3

 CSS3 Gradient:

 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);
}

18/01/2019

 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);
}

69

Bài giảng Thiết kế Web

68

18/01/2019

Bài giảng Thiết kế Web

Những thuộc tính mới trong CSS3

Những thuộc tính mới trong CSS3

 CSS3 Gradient:

 Tạo CSS3 Gradient: www.Css3maker.com

 Gradient với nhiều điểm màu:

70

#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
18/01/2019

Bài giảng Thiết kế Web

71

18/01/2019

Bài giảng Thiết kế Web

72

12

Transform – Transition - Animation

Transform – Transition - Animation

 Transform:

 Transform:
 Rotate(10deg)

 Cho phép xoay, kéo dãn, kéo nghiêng thành phần trên trang

transform: rotate(15deg) ;
transform: scale(0.5,1);
transform: skew(45deg, 5deg) ;

18/01/2019

Minh họa

Bài giảng Thiết kế Web

73

18/01/2019

Bài giảng Thiết kế Web

Transition

Transform – Transition - Animation

Thuộc tính

 Transition

transitionproperty

 Sử dụng hành động (hover, click,…) để thực hiện

Transition

transitionduration

transition-property: xác định thuộc tính chuyển đổi

giá trị
none

transition-timing-function: xác định tốc độ của hiệu ứng
chuyển tiếp.

transitiontiming-function

Ví dụ
transition-property: none;

all

transition-property: all;

Thời gian

transition-duration: 2s;

ease

transition-timing-function:
ease;

ease-in

transition-timing-function:
ease-in;

ease-out

transition-timing-function:
ease-out;

ease-in-out

transition-timing-function:
ease-in-out;

linear

transition-timing-function:
linear;

transition-duration: quy định thời gian chuyển đổi

cubictransition-timing-function:
bezier(n,n,n,n) cubic-bezier(0,1,0.35,0);
18/01/2019

74

75

Bài giảng Thiết kế Web

18/01/2019

Mơ tả
Hiệu ứng của q trình chuyển đổi
sẽ không được hiển thị.
Xác định hiệu ứng của quá trình
chuyển đổi cho tất cả thuộc tính.
Q trình chuyển đổi mất bao nhiêu
thời gian.
Xác định một hiệu ứng của quá trình
chuyển đổi với một sự khởi đầu
chậm, sau đó nhanh chóng, sau đó
kết thúc chậm.
Xác định một hiệu ứng của quá trình
chuyển đổi với một khởi đầu chậm
chạp.
Xác định một hiệu ứng của quá trình
chuyển đổi với một kết thúc chậm.
Xác định một hiệu ứng của quá trình
chuyển đổi với một khởi đầu và kết
thúc chậm.
Xác định một hiệu ứng của quá trình
chuyển đổi với cùng một tốc độ từ
đầu đến cuối.

Xác định giá trị cho hiệu ứng của quá
trình chuyển đổi theo từng giai đoạn,
giá trị xác định chỉ có thể từ 0 tới 1.

Bài giảng Thiết kế Web

Transform – Transition - Animation

Transform – Transition - Animation

 Transition

 Transition

img {
transition-property:all;
transition-duration:0.5s;
transition-timing-function: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;
}

76

img:hover{
transform: scale(1.5);
-webkit-transform: scale(1.5);

-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
}
Minh họa
18/01/2019

Bài giảng Thiết kế Web

77

18/01/2019

Bài giảng Thiết kế Web

78

13

Animation

Transform – Transition - Animation

Thuộc tính
animationname
animationduration
animationtiming-function

 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

animationiterationcount

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.

animationdirection

animation-timing-function: xác định tốc độ của hiệu ứng
chuyển tiếp.

animationplay-state

giá trị
tên
animation

Ví dụ
animation-name:
myAnimation;

Mơ tả
Xác định tên cho một
animation.

Tương tự transition-duration

Tương tự transitoin-timing-function
số tự
nhiên
infinite
normal
alternate
paused
running

animation-iterationcount: 4;
animation-iterationcount: infinite;
animation-direction:
normal;
animation-direction:
alternate;
animation-play-state:
paused;
animation-play-state:
running;

Xác định số lần thực hiện
chuyển động.
Chuyển động sẽ thực hiện
không giới hạn số lần.
Chuyển động bình thường, đây
là dạng mặc định.
Chuyển động sẽ được đảo
ngược ở chu kỳ tiếp theo.
Xác định chuyển động dừng
lại.

Xác định chuyển động chạy.

Minh họa
18/01/2019

Bài giảng Thiết kế Web

18/01/2019

79

Transform – Transition - Animation

80

Transform – Transition - Animation

 CSS animation

 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.

.sanphammoi{
background-color:#93F;
animation: myfirst 5s infinite;
-webkit-animation: myfirst 5s infinite;}

@-webkit-keyframes myfirst {
0% {background:#93F;}
25% {background:#939;}
50% {background:#933;}
100% {background:#903;}
}

@keyframe animationname {
keyfarmes-selector { css-styles;}
}

@keyframes myfirst {
0% {background:#93F;}
25% {background:#939;}
50% {background:#933;}
100% {background:#903;}
}

 Animationname: tên của animation
 Keyframes-selector: tỷ lệ phần trăm thời gian chuyển động
 Css-styles: một hoặc nhiều thuộc tính css quy định
18/01/2019

Bài giảng Thiết kế Web

Bài giảng Thiết kế Web

Minh họa
81

18/01/2019

Bài giảng Thiết kế Web

Hình nền với CSS3

Hình nền với CSS3

 Thực hiện chèn 3 hình ảnh làm nền cho web

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

82

.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;
}
body {
background-color: #B3BBCA;
background-image:
url(images/bg1.png),url(images/bg2.png),
url(images/bg3.png);
}

18/01/2019