Tom Tat Ngon Ngu CSS

Title
NGÔN NGỮ CSS
1
NGÔN NGỮ CSS
▪ CSS (Cascading Style Sheets): là ngôn ngữ được sử

dụng định dạng các phần tử cho các ngôn ngữ đánh
dấu (markup language) như là HTML.
▪ HTML cung cấp các thẻ để xây dựng thành phần của
website, CSS định dạng cách hiển thị của các thành
phần trên website.
2
NGÔN NGỮ CSS
HTML HTML + CSS
3
NỘI DUNG
1 ƯU ĐIỂM CỦA CSS
2 CÁCH SỬ DỤNG CSS
3 NHỮNG THUỘC TÍNH CƠ BẢN
4 CÁC THƯ VIỆN CSS
4
ƯU ĐIỂM CỦA CSS
▪ Giúp tiết kiệm nhiều thời gian và công sức cho việc
thiết kế web.
▪ Giúp nâng cao chất lượng giao diện của website với vô
số kiểu định dạng.
▪ Giúp mã nguồn của website gọn gàng hơn, dễ bảo trì,
nâng cấp.
5
SỬ DỤNG CSS
Cấu trúc
▪ Gồm các khai báo có dạng các cặp “ thuộc tính : giá trị ”
được ngăn cách với nhau bởi dấu ;
Thuộc tính 1: giá trị 1;
....
Thuộc tính n: giá trị n;
▪ Ví dụ:
color: blue; color: red; color: green;
font-size: 20px;
CSS CSS CSS

6
SỬ DỤNG CSS
Tích hợp CSS vào website
▪ Có 3 cách để tích hợp CSS vào website:
• Inline
• Internal
• External
7
SỬ DỤNG CSS
Inline CSS Mã HTML
<h3>ĐĂNG NHẬP HỆ THỐNG</h3>
<h3 style="color:#15c; margin:5px;">

ĐĂNG NHẬP HỆ THỐNG
</h3>
▪ Sử dụng thuộc tính style bên trong thẻ <h3> và đặt mã CSS bên
trong thuộc tính style. 8
SỬ DỤNG CSS
Inline CSS Mã HTML
<input type="text" placeholder="Tài khoản">

<input type="text" placeholder="Mật khẩu">
<input type="text" style="width:250px;

height:35px;..." placeholder="Tài khoản">

height:35px;..." placeholder="Mật khẩu">
Làm sao điều chỉnh chiều rộng của Tài khoản và Mật khẩu?
9
SỬ DỤNG CSS
Inline CSS
height:35px;..." placeholder="Tài khoản">

height:35px;..." placeholder="Mật khẩu">
▪ Cần thực hiện 2 lần điều chỉnh chiều rộng.

▪ Giả sử có 10 ô nhập thông tin thì cần thực hiện 10 lần điều chỉnh.
→ Chỉ cần 1 lần điều chỉnh với Internal CSS.
10
SỬ DỤNG CSS
Internal CSS
▪ Sử dụng thẻ <style> bên trong thẻ <head> và đặt mã
CSS bên trong thẻ <style>
<html> Đặt mã CSS tại đây
<head>
<style>
. . .
</style>
</head>
<body>
<center>
<h3> ĐĂNG NHẬP HỆ THỐNG </h3>
</center>
</body>
</html>
11
SỬ DỤNG CSS
Internal CSS
▪ Internal CSS có dạng:
selector
{
....
Thuộc tính n: giá trị n;
}
▪ Selector có thể là:
• Tên thẻ HTML (input, button, …)
• Class selector
• ID selector
• Kết hợp 12
SỬ DỤNG CSS
Internal CSS Mã HTML

<html> Selector là tên thẻ HTML

<head>
<style>
Chỉ cần điều
input {
chỉnh 1 lần khi
width:250px;
thay đổi độ rộng
height:35px;
. . .
}
</style>
</head>
<body>
. . .
</body>
</html>
13
SỬ DỤNG CSS
Internal CSS
<button> Đăng nhập </button>
<button> Tạo tài khoản mới </button>
Làm thế nào để định dạng nút Đăng nhập

và Tạo tài khoản mới bằng Internal CSS?
14
SỬ DỤNG CSS
Internal CSS
<button class='blue-button'>Đăng nhập</button>
<button class='green-button'>Tạo tài khoản mới</button>
<head>
<style>
.blue-button{
width:150px;
height:40px; Phải chỉnh
Class selector background-color:#007bff; sửa nhiều lần
. . .
}
.green-button{
width:150px;
height:40px;
background-color:#28a745;
. . .
}
</style>
</head>
15
SỬ DỤNG CSS
Internal CSS
<button class='button blue-button’>
Đăng nhập
Thêm một class
</button>
<button class='button green-button’>
Tạo tài khoản mới
</button>
<head>
<style>
.button{
width:150px; Định dạng các thuộc tính
height:40px; chung cho các nút
. . .
}
.blue-button{
background-color:#007bff;
}
.green-button{
}
</style>
</head>
16
SỬ DỤNG CSS
Internal CSS
<button id='blue-button'>Đăng nhập</button>
<button id='green-button'>Tạo tài khoản mới</button>
<head>
<style>
#blue-button{
width:150px;
height:40px;
ID selector background-color:#007bff;
. . .
}
#green-button{
width:150px;
height:40px;
. . .
}
</style>
</head>
17
SỬ DỤNG CSS
Internal CSS
<button id='button blue-button’>
Đăng nhập
</button>
<button id='button green-button’>
Tạo tài khoản mới
</button>
18
SỬ DỤNG CSS
External CSS
▪ Có dạng tương tự như Internal CSS nhưng không đặt
trực tiếp các mã CSS vào website
▪ Các mã CSS được đặt vào một file riêng có phần mở
rộng .css
▪ Sử dụng thẻ <link> đặt bên trong thẻ <head> để liên kết
các file CSS có sẵn với website
19
SỬ DỤNG CSS
External CSS
.button{
width:150px;
height:40px;
. . .
}
.blue-button{
background-color:#007bff;
} ten_file.css
.green-button{
}
20
SỬ DỤNG CSS
External CSS
<html>
<head>
<link rel="stylesheet" href="path_name/ten_file.css"/>
</head>
<body>
<center>
<h3> ĐĂNG NHẬP HỆ THỐNG </h3>
<input type="text" placeholder="Tài khoản"><br/>
<input type="text" placeholder="Mật khẩu"><br/>
<button class='blue-button button'>Đăng nhập</button>
. . .
</center>
</body>
</html>
21
NHỮNG THUỘC TÍNH CƠ BẢN
Thuộc tính định dạng văn bản
Thuộc tính Mô tả Ví dụ
color Định dạng màu văn bản color: blue;
font-size Kích thước văn bản font-size: 15px;
font-weight Độ đậm của văn bản font-weight: bold;
font-style Độ nghiêng của văn bản font-style: italic;
Khoảng cách giữa các dòng
line-height line-height: 1.5
của văn bản
text-decoration Trang trí văn bản text-decoration: underline;
Thêm khoảng trống trước văn
text-indent text-indent: 10px;
bản
Định dạng chữ thường hoặc
text-transform text-transform: uppercase;
chữ hoa cho văn bản
text-align Canh lề văn bản text-align: center;
22
Thuộc tính định dạng Box Model
vertical-align Sắp xếp nội dung theo chiều dọc vertical-align: middle;
width Chiều rộng của thành phần width: 200px;
height Chiều cao của thành phần height: 100px;
padding Khoảng cách giữa thành phần và nội padding: 10px;
dung bên trong
margin Khoảng cách giữa thành phần với các margin:15px;
thành phần khác
overflow Thiết lập xử lý khi nội dung bị tràn overflow: scroll;
float Đẩy thành phần sang trái hoặc phải float: left;
display Chỉ định cách hiển thị display: inline;
23
Thuộc tính định dạng Box Model
position Phương thức định vị vị trí của thành phần position: absolute;
Vị trí phía trên của thành phần position: absolute;
top
(sử dụng cùng với thuộc tính position) top: 10px;
Vị trí bên phải của thành phần position: absolute;
right
(sử dụng cùng với thuộc tính position) right: 10px;
Vị trí phía dưới của thành phần position: absolute;
bottom
(sử dụng cùng với thuộc tính position) bottom: 10px;
Vị trí bên phải của thành phần position: absolute;
left
(sử dụng cùng với thuộc tính position) left: 10px;
Thiết lập thành phần có được nhìn thấy
visibility visibility: hidden;
hay không
24
Thuộc tính định dạng nền và viền
Định dạng tất cả viền cho
border border: 1px solid #000;
thành phần
Định dạng viền trên cho
border-top border-top: 1px solid #000;
thành phần
Định dạng viền phải cho
border-right border-right: 1px solid #000;
thành phần
Định dạng viền trái cho
border-left border-left: 1px solid #000;
thành phần
Định dạng viền dưới cho
border-bottom border-bottom: 1px solid #000;
thành phần
Định dạng bo góc viền cho
border-radius border-radius: 1px solid #000;
thành phần
25
Thuộc tính định dạng nền và viền
Định dạng bóng cho
box-shadow box-shadow: 10px gray;
thành phần
Định dạng màu nền
background-color background-color: yellow;
cho thành phần
Định dạng nền dạng
background-image background-image: url("paper.gif");
ảnh cho thành phần
26
CÁC THƯ VIỆN CSS
▪ Tập hợp một số lượng lớn đoạn mã CSS được viết sẵn
và có thể áp dụng để thiết kế giao diện web nhằm giúp
tiết kiệm thời gian.
▪ Là một dạng External CSS.
▪ Mỗi thư viện có một cấu trúc riêng, cần hiểu rõ cấu trúc
thư viện để sử dụng.
▪ Website có thể sử dụng nhiều thư viện, tuy nhiên cần
chọn lọc để hạn chế sự trùng lặp.
27
Một số thư viện CSS
28
Sử dụng thư viện CSS
<html>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
</head>
<body>
<button class="btn btn-primary">Button</button>
</body>
</html>
29
TÀI LIỆU THAM KHẢO CHƯƠNG 3
[1] Jessica Minnick (2017), “Web Design with HTML5 and CSS3”, Eighth Edition,
Cengage Learning.
30
HỎI & ĐÁP
31

Tom Tat Ngon Ngu CSS

Uploaded by

Document Information

Original Title

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

Tom Tat Ngon Ngu CSS

Uploaded by

Copyright:

Available Formats

Title

NGÔN NGỮ CSS

▪ CSS (Cascading Style Sheets): là ngôn ngữ được sử

HTML HTML + CSS

1 ƯU ĐIỂM CỦA CSS

2 CÁCH SỬ DỤNG CSS

3 NHỮNG THUỘC TÍNH CƠ BẢN

4 CÁC THƯ VIỆN CSS

CSS CSS CSS

<h3>ĐĂNG NHẬP HỆ THỐNG</h3>

<h3 style="color:#15c; margin:5px;">

<input type="text" placeholder="Tài khoản">

<input type="text" style="width:250px;

<input type="text" style="width:250px;

<input type="text" style="width:250px;

▪ Cần thực hiện 2 lần điều chỉnh chiều rộng.

<input type="text" placeholder="Tài khoản">

<html> Selector là tên thẻ HTML

<button> Đăng nhập </button>

<button> Tạo tài khoản mới </button>

Làm thế nào để định dạng nút Đăng nhập

<button class='green-button'>Tạo tài khoản mới</button>

<button id='green-button'>Tạo tài khoản mới</button>

You might also like