Tạo bài viết
Đăng ký
19/09/2018, 15:03

CSS trong HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 < ! DOCTYPE html > < html > < head > <style> body { background-color : lightgrey } h1 { color : blue } p { ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
 
<h1>Đây là đề mục</h1>
<p>Đây là đoạn văn bản.</p>
 
</body>
</html>

Demo

Trang trí HTML với CSS

CSS là viết tắt của từ Cascading Style Sheets

Bạn có thể chèn CSS vào HTML theo 3 cách:

  • Trực tiếp – sử dụng thuộc tính style trong các thẻ HTML
  • Nội bộ – sử dụng thẻ <style> trong phần <head> của HTML
  • CSS ngoài – sử dụng một hoặc nhiều tệp tin CSS ở bên ngoài

Cách sử dụng phổ biến nhất là chia CSS thành các tệp tin riêng biệt sau đó gọi chúng vào HTML. Nhưng trong bài học này, chúng ta sẽ sử dụng CSS nội bộ vì nó dễ minh họa hơn và bạn cũng thực hành dễ hơn.

Bạn có thể học nhiều hơn về CSS trong phần Học CSS

CSS trực tiếp (Inline CSS)

Kiểu viết CSS trực tiếp chỉ hữu dụng khi sử dụng một kiểu trang trí cho một thành thẻ trong HTML.

CSS trực tiếp được viết thông qua thuộc tính style.

Đoạn CSS sau thay đổi màu chữ của một đề mục:

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
 
<h1 style="color:blue">Đây là đề mục xanh</h1>
 
</body>
</html>

Demo

CSS nội bộ (Internal CSS)

Sử dụng CSS nội bộ có thể trang trí cho tất cả các thành phần trong trang HTML.

CSS nội bộ được viết trong phần <head> của một trang HTML, sử dụng thẻ <style>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
 
<h1>Đây là đề mục</h1>
<p>Đây là đoạn văn bản.</p>
 
</body>
</html>

Demo

CSS ngoài (External CSS)

Hãy tưởng tượng, bạn có rất nhiều trang HTML có cùng kiểu trang trí, nếu sử dụng CSS nội bộ hoặc CSS trực tiếp bạn sẽ phải lặp đi lặp lại ở mỗi trang. Khi bạn muốn thay đổi cách trang trí của một thành phần nào đó, bạn phải sửa trên tất cả các trang.

CSS ngoài đặc biệt hữu dụng khi bạn cần cách trang trí sử dụng cho nhiều trang. Bạn có thể thay đổi kiểu trang trí trên tất cả các trang bằng cách thay đổi một tệp tin CSS duy nhất.

CSS ngoài được viết vào một tệp tin .css và được gọi vào trang HTML thông qua phần <head>:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/wp-content/uploads/2015/05/demo_style.css">
</head>
<body>
 
<h1>Đây là đề mục</h1>
<p>Đây là đoạn văn bản.</p>
 
</body>
</html>

Demo

Kiểu chữ trong CSS

Thuộc tính color trong CSS quy định màu chữ được sử dụng trong các thành phần của HTML.

Thuộc tính font-family trong CSS quy định kiểu chữ được sử dụng trong các thành phần của HTML.

Thuộc tính font-size trong CSS quy định cỡ chữ được sử dụng trong các thành phần của HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:blue;
font-family:Tahoma;
font-size:200%;
 
}
p  {
color:red;
font-family:Arial;
font-size:120%;
}
</style>
</head>
<body>
 
<h1>Đây là đề mục</h1>
<p>Đây là đoạn văn bản.</p>
 
</body>
</html>

Demo

Mô hình hộp trong CSS

Mỗi thành phần trong HTML đều có một khung bao bao quanh, ngay cả khi bạn không nhìn thấy nó.

Thuộc tính border trong CSS quy định cách hiển thị đường viền bao quanh một thành phần HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<style>
p {
border:1px solid grey;
}
</style>
</head>
<body>
 
<h1>Đây là đề mục</h1>
 
<p>Đây là một đoạn văn bản.</p>
<p>Đây là một đoạn văn bản.</p>
<p>Đây là một đoạn văn bản.</p>
 
</body>
</html>

Demo

Thuộc tính padding trong CSS quy định khoảng cách từ đường viền đến các thành phần bên trong:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<style>
p {
border:1px solid grey;
padding:10px;
}
</style>
</head>
<body>
 
<h1>Đây là đề mục</h1>
 
<p>Đây là đoạn văn bản.</p>
<p>Đây là đoạn văn bản.</p>
<p>Đây là đoạn văn bản.</p>
 
</body>
</html>

Demo

Thuộc tính margin trong CSS quy định khoảng cách từ đường viền đến các thành phần bên ngoài:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<style>
p {
border:1px solid grey;
padding:10px;
margin:30px;
}
</style>
</head>
<body>
 
<h1>Đây là đề mục</h1>
 
<p>Đây là một đoạn văn bản.</p>
<p>Đây là một đoạn văn bản.</p>
<p>Đây là một đoạn văn bản.</p>
 
</body>
</html>

Demo

CSS trong các ví dụ ở trên sử dụng đơn vị đo là pixels, ký hiệu là px.

Thuộc tính id

Tất cả các ví dụ bên trên đều sử dụng CSS để trang trí các thành phần trong HTML theo cách thông thường.

Để áp dụng một kiểu trang trí cho một thành phần đặc biệt, đầu tiên ta sẽ thêm thuộc tính id vào thành phần đó:

1
<p id="element1">Đoạn văn bản có thuộc tính id</p>

sau đó ta sẽ định nghĩa kiểu trang trí cho thành phần đó:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<style>
p#element1 {
color: blue;
}
</style>
</head>
<body>
 
<p>Đây là đoạn văn bản.</p>
<p>Đây là đoạn văn bản.</p>
<p>Đây là đoạn văn bản.</p>
<p id="element1">Đoạn văn bản có thuộc tính id</p>
 
</body>
</html>

Demo

Thuộc tính class

Để sử dụng CSS trang trí cho một nhóm các thành phần đặc biệt, đầu tiên ta sẽ thêm thuộc tính class vào những thành phần đó:

1
<p class="classname">Đoạn văn bản có thuộc tính class</p>

Bây giờ bạn đã có thể trang trí tất cả các thành phần có cùng tên class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<style>
p.classname {
color:red;
}
</style>
</head>
<body>
 
<p>Đây là đoạn văn bản.</p>
<p>Đây là đoạn văn bản.</p>
<p class="classname">Đây là đoạn văn bản có thuộc tính class.</p>
<p>Đây là đoạn văn bản.</p>
<p class="classname">Đây là đoạn văn bản có thuộc tính class cùng tên.</p>
 
</body>
</html>

Demo

Giá trị của thuộc tính id là duy nhất trong trang vì vậy bạn chỉ nên sử dụng id khi muốn trang trí CSS cho 1 thành phần. Sử dụng thuộc tính class khi muốn trang trí cho nhiều thành phần.

Những thẻ và thuộc tính bị loại bỏ trong HTML5

Trong các phiên bản HTML thấp hơn, có một vài thẻ và thuộc tính được sử dụng để trang trí các thành phần trong trang.

Những thẻ và thuộc tính này đã không còn được hỗ trợ khi sử dụng HTML5, vì vậy bạn tránh sử dụng:

  • Các thẻ <font>, <center> và <strike>.
  • Các thuộc tính color và bgcolor. (Tránh nhầm lẫn: Đây là thuộc tính cho THẺ, không phải thuộc tính của CSS)

Tổng kết bài học

  • Sử dụng thuộc tính style trong HTML để viết CSS trực tiếp
  • Sử dụng thẻ <style> trong HTML để viết CSS nội bộ
  • Sử dụng thẻ <link> trong HTML gọi một tệp tin CSS ngoài
  • Sử dụng thẻ <head> trong HTML để chứa thẻ <style> và <link>
  • Sử dụng thuộc tính color trong CSS để trang trí màu chữ
  • Sử dụng thuộc tính <

Trịnh Tiến Mạnh

27 chủ đề

6824 bài viết

Có thể bạn quan tâm
0
Các chủ đề đang được quan tâm
phần mềm lập trình php | lập trình web php + mysql | khóa học lập trình php | tự học lập trình php | học php cơ bản thachpham | Code24h | Cho thuê phòng trọ hà nội | Cho thuê phòng trọ bình thạnh | Cho thuê phòng trọ | Cho thuê nhà trọ
Đăng ký

Đăng ký nhận thông báo

Các bài học thú vị sẽ được gửi đến inbox của bạn

HỖ TRỢ HỌC VIÊN
VỀ CODE24H
HỢP TÁC VÀ LIÊN KẾT
KẾT NỐI VỚI CHÚNG TÔI
TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

CCode 24h, code mọi lúc, mọi nơi

© Copy right 2018 - 2024