033.3 Bài 1
Chứng chỉ: |
Web Development Essentials |
---|---|
Phiên bản: |
1.0 |
Chủ đề: |
033 Tạo kiểu Nội dung CSS |
Mục tiêu: |
033.3 Tạo kiểu CSS |
Bài: |
1 trên 1 |
Giới thiệu
CSS cung cấp hàng trăm các đặc tính có thể được sử dụng để sửa đổi giao diện của các phần tử HTML. Chỉ những nhà phát triển có kinh nghiệm mới nhớ hết được chúng. Tuy nhiên, việc biết về các đặc tính cơ bản nào có thể áp dụng cho bất kỳ phần tử nào, cũng như một số đặc tính dành riêng cho từng phần tử sẽ khá hữu ích. Bài học này sẽ nói về một số đặc tính phổ biến mà khả năng cao bạn sẽ phải sử dụng.
Các Đặc tính và Giá trị phổ biến trong CSS
Nhiều đặc tính CSS có cùng loại giá trị với nhau. Ví dụ: các loại màu sắc vẫn có cùng định dạng số liệu như nhau cho dù ta đang thay đổi màu phông chữ hay màu nền. Tương tự, các đơn vị có sẵn để thay đổi kích thước của phông chữ cũng được sử dụng để thay đổi độ dày của đường viền. Tuy nhiên, định dạng của giá trị không phải lúc nào cũng là duy nhất, ví dụ như màu sắc có thể được nhập ở nhiều định dạng khác nhau như chúng ta sẽ thấy tiếp theo đây.
Màu sắc
Việc thay đổi màu sắc của một phần tử có lẽ là một trong những điều đầu tiên mà các nhà phát triển sẽ học để thực hiện với CSS. Ta có thể thay đổi màu của văn bản, màu nền, màu đường viền của các phần tử, v.v.
Giá trị của một màu trong CSS có thể được viết dưới dạng từ khóa màu (tức tên màu) hoặc dưới dạng giá trị số liệt kê từng thành phần màu. Tất cả các tên màu phổ biến, chẳng hạn như black
, white
, red
, purple
, green
, yellow
và blue
đều được chấp nhận làm từ khóa màu. Toàn bộ danh sách các từ khóa màu được CSS chấp nhận hiện có tại trang web W3C. Nhưng để kiểm soát màu sắc một cách tốt hơn, chúng ta nên sử dụng giá trị số của chúng.
Từ khóa Màu
Đầu tiên, chúng ta sẽ sử dụng từ khóa màu vì nó đơn giản hơn. Đặc tính color
sẽ thay đổi màu của văn bản trong phần tử tương ứng. Vì vậy, để đặt tất cả văn bản trên trang thành màu tím, ta có thể viết quy tắc CSS sau:
* {
color: purple;
}
Giá trị Màu Số
Mặc dù có lợi thế trực quan, các từ khóa màu lại không cung cấp đầy đủ các màu có thể có trong màn hình hiện đại. Các nhà thiết kế trang web thường phát triển một bảng màu sử dụng các màu tùy chỉnh bằng cách gán các giá trị cụ thể cho các thành phần màu đỏ, lục và lam.
Mỗi thành phần màu sẽ là một số nhị phân tám bit nằm trong khoảng từ 0 đến 255. Tất cả ba thành phần này phải được chỉ định trong hỗn hợp màu và thứ tự của chúng luôn là đỏ, lục, lam (RGB). Do đó, để thay đổi màu của tất cả văn bản trong trang thành màu đỏ bằng cách sử dụng ký hiệu RGB, hãy sử dụng rgb(255,0,0)
:
* {
color: rgb(255,0,0);
}
Một thành phần được đặt thành 0
có nghĩa là màu cơ bản tương ứng không được sử dụng trong hỗn hợp màu. Tỷ lệ phần trăm cũng có thể được sử dụng thay vì số:
* {
color: rgb(100%,0%,0%);
}
Ký hiệu RGB hiếm khi được nhìn thấy nếu ta sử dụng ứng dụng vẽ để tạo bố cục hoặc chỉ để chọn màu. Thay vào đó, màu sắc trong CSS được biểu thị dưới dạng giá trị thập lục phân thường sẽ phổ biến hơn. Các thành phần màu ở dạng thập lục phân cũng nằm trong khoảng từ 0 đến 255 nhưng lại theo cách ngắn gọn hơn, bắt đầu bằng dấu thăng #
và sử dụng độ dài hai chữ số cố định cho tất cả các thành phần. Giá trị nhỏ nhất 0
sẽ là 00
và giá trị lớn nhất 255
sẽ là FF
. Vì vậy, màu đỏ sẽ là #FF0000
.
Tip
|
Nếu các chữ số trong mỗi thành phần của màu thập lục phân lặp lại, chữ số thứ hai có thể được bỏ qua. Ví dụ: màu đỏ có thể được viết bằng một chữ số cho mỗi thành phần: |
Danh sách sau đây sẽ cho biết ký hiệu RGB và hệ thập lục phân của một số màu cơ bản:
Từ khóa Màu | Ký hiệu RGB | Giá trị Thập lục phân |
---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Từ khóa màu và các chữ cái trong giá trị màu thập lục phân không phân biệt chữ hoa chữ thường.
Độ Mờ của Màu
Ngoài các màu đục, ta cũng có thể đổ màu cho các phần tử trang bằng các màu bán trong suốt. Độ mờ của màu có thể được đặt bằng cách sử dụng thành phần thứ tư trong giá trị màu. Không giống như các thành phần màu khác có các giá trị là các số nguyên nằm trong khoảng từ 0 đến 255, độ mờ là một phân số nằm trong khoảng từ 0
đến 1
.
Giá trị thấp nhất là 0
; giá trị này sẽ khiến cho màu trở nên hoàn toàn trong suốt, khiến ta không thể phân biệt được giữa nó và bất kỳ một màu hoàn toàn trong suốt nào khác. Giá trị cao nhất là 1
; giá trị này sẽ khiến cho màu trở nên đục hoàn toàn, giống như màu gốc nhưng không có độ trong.
Khi bạn sử dụng ký hiệu RGB, hãy chỉ định các màu có thành phần độ mờ thông qua tiền tố rgba
thay vì rgb
. Từ đó, để làm cho màu đỏ trở nên nửa trong suốt, hãy sử dụng rgba(255,0,0,0,5)
. Ký tự a
là viết tắt của kênh alpha - một thuật ngữ thường được sử dụng để chỉ định thành phần độ mờ trong biệt ngữ đồ họa kỹ thuật số.
Độ mờ cũng có thể được đặt bằng ký hiệu thập lục phân. Giống như các thành phần màu khác, độ mờ sẽ nằm trong khoảng từ 00
đến FF
. Do đó, để làm cho màu đỏ trở nên nửa trong suốt bằng ký hiệu thập lục phân, hãy sử dụng #FF000080
.
Nền
Màu nền của các phần tử đơn lẻ hoặc của toàn bộ trang được đặt bằng đặc tính background-color
. Nó sẽ nhận các giá trị giống như đặc tính color
, tức dưới dạng từ khóa hoặc sử dụng ký hiệu RGB/thập lục phân.
Tuy nhiên, nền của các phần tử HTML sẽ không bị hạn chế ở màu sắc. Với thuộc tính background-image
, ta có thể sử dụng hình ảnh để làm nền. Các định dạng hình ảnh được chấp nhận là tất cả các định dạng thông thường được trình duyệt chấp nhận, chẳng hạn như JPEG và PNG.
Đường dẫn đến hình ảnh phải được chỉ định bằng trình chỉ định url()
. Nếu hình ảnh bạn muốn sử dụng nằm trong cùng thư mục với tệp HTML thì chỉ cần sử dụng tên tệp của nó là đủ:
body {
background-image: url("background.jpg");
}
Trong ví dụ này, tệp hình ảnh background.jpg
sẽ được sử dụng làm hình nền cho toàn bộ nội dung của trang. Theo mặc định, hình nền sẽ được lặp lại nếu kích thước của nó không bao phủ toàn bộ trang bắt đầu từ góc trên cùng bên trái của khu vực tương ứng với bộ chọn của quy tắc. Hành vi này có thể được sửa đổi bằng thuộc tính background-repeat
. Nếu bạn muốn hình nền được đặt trong khu vực của phần tử mà không bị lặp lại, hãy sử dụng giá trị no-repeat
:
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
}
Ta cũng có thể làm cho hình ảnh chỉ lặp lại theo chieeuf ngang (background-repeat: repeat-x
) hoặc chỉ chiều dọc (background-repeat: repeat-y
).
Cách đặt nền sử dụng đặc tính background-repeat
.
image::./images/background-repeat.png[width="50%"]
Tip
|
Hai hoặc nhiều đặc tính CSS có thể được kết hợp trong một đặc tính duy nhất được gọi là đặc tính tốc ký nền. Ví dụ: các đặc tính |
Một hình nền cũng có thể được đặt ở một vị trí cụ thể trong khu vực của phần tử bằng cách sử dụng đặc tính background-position
. Năm vị trí cơ bản là top
(trên cùng), bottom
(dưới cùng), left (bên trái)
, right
(bên phải) và center
(giữa), nhưng vị trí trên cùng bên trái của hình ảnh cũng có thể được điều chỉnh bằng phần trăm:
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-position: 30% 10%;
}
Vị trí của hình nền (background-position
) được đo từ các cạnh của phần tử chứa, trong ví dụ này là toàn bộ nội dung của trang. Vị trí có thể được chỉ định theo đơn vị chính xác (ví dụ: 1em
) hoặc theo tỷ lệ phần trăm của phần tử chứa. Do đó, trong ví dụ này, hình nền sẽ bắt đầu bằng 30% chiều rộng của nội dung trang tính từ phía bên trái và 10% chiều cao của nội dung trang tính từ phía trên cùng.
Đường viền
Thay đổi đường viền của phần tử cũng là một tùy chỉnh bố cục phổ biến được thực hiện bằng CSS. Đường viền ở đây là một đường tạo thành hình chữ nhật xung quanh phần tử và có ba đặc tính cơ bản: color
(màu), style
(kiểu) và width
(độ dày).
Màu của đường viền được xác định bằng border-color
theo cùng định dạng mà chúng ta đã thấy đối với các đặc tính màu khác.
Các đường viền có thể được vẽ theo nhiều kiểu khác ngoài một đường liền nét. Ví dụ: chúng ta sẽ sử dụng dấu gạch ngang (dash) cho đường viền với đặc tính border-style: dashed
. Các giá trị kiểu khác là:
dotted
-
Chuỗi các chấm tròn
double
-
Hai đường thẳng
groove
-
Một đường có hình chạm khắc
ridge
-
Một đường có dạng nổi
inset
-
Một đường có dạng chìm
outset
-
Một khung dập nổi
Đặc tính border-width
sẽ đặt độ dày của đường viền. Giá trị của nó có thể là một từ khóa (thin
- mỏng, medium
- trung bình, hoặc thick
- dày) hoặc một giá trị số cụ thể. Nếu muốn sử dụng một giá trị số, ta cũng sẽ cần chỉ định đơn vị tương ứng của nó. Điều này sẽ được nói đến ngày sau đây.
Giá trị Đơn vị
Kích thước và khoảng cách trong CSS có thể được xác định theo nhiều cách khác nhau. Các đơn vị tuyệt đối được dựa trên một số lượng pixel màn hình cố định. Vì vậy, chúng sẽ không quá khác biệt so với kích thước và chiều cố định được sử dụng trong phương tiện in. Ngoài ra còn có các đơn vị tương đối được tính toán động từ một số phép đo được cung cấp bởi phương tiện nơi trang đang được hiển thị, chẳng hạn như không gian có sẵn hoặc một kích thước khác được viết bằng đơn vị tuyệt đối.
Đơn vị Tuyệt đối
Các đơn vị tuyệt đối cũng tương đương với các đối tác vật lý của chúng, như cm hoặc inch. Trên màn hình máy tính thông thường, một inch sẽ rộng 96 pixel (px). Các đơn vị tuyệt đối sau đây thường được sử dụng:
in
(inch)-
1 inch tương đương với 2,54 cm hoặc 96 px.
cm
(xentimét)-
1 cm tương đương với 96 px / 2,54.
mm
(mi-li-mét)-
1 mm tương đương với 1 cm/10.
px
(pixel)-
1 px tương đương với 1/96 inch.
pt
(điểm)-
1pt tương đương với 1/72 inch.
Hãy nhớ rằng tỷ lệ pixel trên inch có thể sẽ khác nhau. Ở màn hình có độ phân giải cao, nơi các điểm ảnh dày đặc hơn thì một inch sẽ tương ứng với hơn 96 điểm ảnh.
Đơn vị Tương đối
Các đơn vị tương đối sẽ khác nhau tùy theo phép đo hoặc theo kích thước khung nhìn. Khung nhìn là khu vực của tài liệu hiện người dùng có thể nhìn thấy trong cửa sổ của nó. Ở chế độ toàn màn hình, khung nhìn sẽ tương ứng với màn hình thiết bị. Các đơn vị tương đối sau đây thường được sử dụng:
%
-
Tỷ lệ phần trăm — nó có liên quan đến phần tử gốc.
em
-
Kích thước của phông chữ được sử dụng trong phần tử.
rem
-
Kích thước của phông chữ được sử dụng trong phần tử gốc.
vw
-
1% chiều rộng của khung nhìn.
vh
-
1% chiều cao của khung nhìn.
Ưu điểm của việc sử dụng các đơn vị tương đối là ta có thể tạo các bố cục có thể điều chỉnh được bằng cách chỉ thay đổi một vài kích thước chủ chốt. Ví dụ: chúng ta sẽ sử dụng đơn vị pt
để đặt kích thước phông chữ trong phần tử nội dung và đơn vị rem
cho phông chữ trong các phần tử khác. Khi thay đổi kích thước phông chữ cho nội dung, tất cả các kích thước phông chữ khác sẽ điều chỉnh tương ứng. Ngoài ra, việc sử dụng vw
và vh
để đặt kích thước cho các phần trang sẽ giúp chúng có thể điều chỉnh theo các màn hình có kích thước khác nhau.
Phông chữ và Đặc tính của Văn bản
Phong cách chữ (hoặc việc nghiên cứu về các loại phông chữ) là một chủ đề thiết kế rất rộng, và phong cách chữ trong CSS cũng rộng không kém. Tuy nhiên, có một vài đặc tính phông chữ cơ bản sẽ đáp ứng được nhu cầu của hầu hết người dùng học CSS.
Đặc tính font-family
sẽ đặt tên của phông chữ được sử dụng. Không có gì đảm bảo được rằng phông chữ đã chọn sẽ có sẵn trong hệ thống nơi trang sẽ được xem. Vì vậy, đặc tính này có thể sẽ không có hiệu lực trong tài liệu. Mặc dù có thể làm cho trình duyệt tải xuống và sử dụng tệp phông chữ được chỉ định, nhưng hầu hết các nhà thiết kế web đều hài lòng với việc sử dụng các loại phông chữ cơ bản trong tài liệu của mình.
Ba họ phông chữ cơ bản phổ biến nhất là serif
, sans-serif
và monospace
. Serif là họ phông chữ mặc định trong hầu hết các trình duyệt. Nếu muốn sử dụng sans-serif
cho toàn bộ trang, hãy thêm quy tắc sau vào biểu định kiểu của bạn:
* {
font-family: sans-serif;
}
Có thể tuỳ chọn đặt một họ phông chữ cụ thể trước tiên, theo sau là họ chung:
* {
font-family: "DejaVu Sans", sans-serif;
}
Nếu thiết bị hiển thị trang có họ phông chữ cụ thể đó, trình duyệt sẽ sử dụng nó. Nếu không, nó sẽ sử dụng phông chữ mặc định phù hợp với họ chung. Trình duyệt tìm kiếm phông chữ theo thứ tự chúng được chỉ định trong đặc tính.
Bất kỳ ai đã từng sử dụng ứng dụng xử lý văn bản cũng sẽ quen thuộc với ba khía cạnh điều chỉnh phông chữ khác: kích thước, độ đậm nhạt và kiểu dáng. Ba điều chỉnh này có các đặc tính CSS tương ứng là font-size
(kích thước chữ), font-weight
(độ đậm nhạt) và font-style
(kiểu chữ).
Đặc tính font-size
chấp nhận các kích thước từ khóa như xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
, xxx -large
. Những từ khóa này có liên quan đến kích thước phông chữ mặc định được sử dụng bởi trình duyệt. Các từ khóa larger
(lớn hơn) và smaller
(nhỏ hơn) sẽ thay đổi kích thước phông chữ tương ứng với kích thước phông chữ của phần tử gốc. Ta cũng có thể biểu thị kích thước của phông chữ bằng các giá trị số (bao gồm đơn vị sau giá trị) hoặc bằng tỷ lệ phần trăm.
Nếu không muốn thay đổi kích thước phông chữ nhưng lại muốn thay đổi khoảng cách giữa các dòng, hãy sử dụng thuộc tính line-height
(chiều cao của dòng). line-height
có giá trị 1
sẽ làm cho chiều cao của dòng có cùng kích thước với phông chữ của phần tử, điều này có thể làm cho các dòng văn bản hơi quá gần nhau. Do đó, giá trị lớn hơn 1 sẽ phù hợp hơn cho văn bản. Giống như thuộc tính font-size
, các đơn vị khác cũng có thể được sử dụng cùng với giá trị số.
font-weight
sẽ chỉ định độ đậm nhạt của phông chữ với các từ khóa quen thuộc là normal
(bình thường) và bold
(đậm). Các từ khóa lighter
(nhạt hơn) và bolder
(đậm hơn) sẽ thay đổi độ đậm của phông chữ của phần tử so với phần tử mẹ của nó.
Đặc tính font-style
có thể được đặt thành italic
để chọn phiên bản in nghiêng của họ phông chữ hiện tại. Giá trị oblique
sẽ chọn phiên bản nghiêng đậm của phông chữ. Hai tùy chọn này gần như giống hệt nhau, nhưng phiên bản in nghiêng của phông chữ thường sẽ hẹp hơn một chút so với phiên bản in nghiêng đậm. Nếu trong trình duyệt không tồn tại các phiên bản in nghiêng hoặc nghiêng đậm, phông chữ sẽ bị trình duyệt tự nghiêng.
Có các đặc tính khác để thay đổi cách hiển thị văn bản trong tài liệu. Ví dụ: ta có thể thêm gạch chân vào một số phần của văn bản mà mình muốn nhấn mạnh. Đầu tiên, hãy sử dụng thẻ <span>
để phân định văn bản:
<p>CSS is the <span class="under">proper mechanism</span> to style HTML documents.</p>
Sau đó, chúng ta sẽ sử dụng bộ chọn .under
để thay đổi đặc tính text-decoration
:
.under {
text-decoration: underline;
}
Theo mặc định, tất cả các phần tử a
(liên kết) đều sẽ được gạch dưới. Nếu muốn xóa nó, hãy sử dụng giá trị none
cho text-decoration
của tất cả các phần tử a
:
a {
text-decoration: none;
}
Khi xem xét nội dung, một số tác giả sẽ muốn gạch bỏ những phần không chính xác hoặc lỗi thời của văn bản để người đọc biết văn bản đã được cập nhật và những gì đã bị xóa. Để làm như vậy, hãy sử dụng giá trị line-through
của đặc tính text-decoration
:
.disregard {
text-decoration: line-through;
}
Một lần nữa, thẻ <span>
có thể được sử dụng để áp dụng kiểu:
<p>Netscape Navigator <span class="disregard">is</span> was one of the most popular Web browsers.</p>
Các kiểu trang trí khác có thể là dành riêng cho từng phần tử cụ thể. Các hình tròn trong danh sách dấu đầu dòng có thể được tùy chỉnh bằng cách sử dụng đặc tính list-style-type
. Ví dụ: để thay đổi chúng thành hình vuông (square), hãy sử dụng list-style-type: square
. Để xóa chúng, hãy đặt giá trị của list-style-type
thành none
.
Bài tập Hướng dẫn
-
Làm cách nào để có thể thêm độ nửa trong suốt vào màu xanh lam (có ký hiệu RGB
rgb(0,0,255)
) để sử dụng nó trong đặc tínhcolor
trong CSS? -
Màu gì sẽ tương ứng với giá trị thập lục phân
#000
? -
Giả sử
Times New Roman
là một phông chữserif
và nó không khả dụng trên tất cả các thiết bị, làm cách nào để có thể viết quy tắc CSS yêu cầuTimes New Roman
trong khi đặt họ phông chữ chungserif
làm dự phòng ? -
Làm cách nào để có thể sử dụng từ khóa kích thước tương đối để đặt kích thước phông chữ của phần tử
<p class="disclaimer">
thành nhỏ hơn so với phần tử gốc của nó?
Bài tập Mở rộng
-
Đặc tính
background
là tốc ký để đặt nhiều đặc tínhbackground-*
cùng một lúc. Hãy viết lại quy tắc CSS sau dưới dạng một đặc tính tốc kýbackground
duy nhất.body { background-image: url("background.jpg"); background-repeat: repeat-x; }
-
Hãy viết một quy tắc CSS cho phần tử
<div id="header"></div>
để chỉ thay đổi chiều rộng đường viền dưới cùng thành4px
. -
Hãy viết một đặc tính
font-size
để tăng gấp đôi kích thước phông chữ được sử dụng trong phần tử gốc của trang. -
Cách dòng đôi (Double-spacing) là một tính năng định dạng văn bản phổ biến trong trình xử lý văn bản. Làm cách nào để có thể đặt định dạng tương tự bằng CSS?
Tóm tắt
Bài học này đã nói về việc áp dụng các kiểu đơn giản cho các phần tử của tài liệu HTML. CSS cung cấp hàng trăm đặc tính và hầu hết các nhà thiết kế web sẽ cần đến các tài liệu tham khảo để có thể ghi nhớ. Tuy thế, một tập hợp nhỏ các đặc tính và giá trị tương đối được sử dụng khá nhiều và điều quan trọng là ta phải thuộc lòng chúng. Bài học đã đi qua các khái niệm và quy trình sau:
-
Các đặc tính CSS cơ bản xử lý màu sắc, hình nền và phông chữ.
-
Các đơn vị tuyệt đối và tương đối mà CSS có thể sử dụng để đặt kích thước và khoảng cách, chẳng hạn như
px
,em
,rem
,vw
,vh
, v.v.
Đáp án Bài tập Hướng dẫn
-
Làm cách nào để có thể thêm độ nửa trong suốt vào màu xanh lam (có ký hiệu RGB
rgb(0,0,255)
) để sử dụng nó trong đặc tínhcolor
trong CSS?Sử dụng tiền tố
rgba
và thêm0,5
làm giá trị thứ tư:rgba(0,0,0,0,5)
. -
Màu gì sẽ tương ứng với giá trị thập lục phân
#000
?Màu
đen
. Giá trị thập lục phân#000
là cách viết tắt của#000000
. -
Giả sử
Times New Roman
là một phông chữserif
và nó sẽ không khả dụng trên tất cả các thiết bị, làm cách nào để có thể viết quy tắc CSS yêu cầuTimes New Roman
trong khi đặt họ phông chữ chungserif
làm dự phòng ?* { font-family: "Times New Roman", serif; }
-
Làm cách nào để có thể sử dụng từ khóa kích thước tương đối để đặt kích thước phông chữ của phần tử
<p class="disclaimer">
thành nhỏ hơn so với phần tử gốc của nó?Sử dụng từ khóa
smaller
:p.disclaimer { font-size: smaller; }
Đáp án Bài tập Mở rộng
-
Đặc tính
background
là tốc ký để đặt nhiều đặc tínhbackground-*
cùng một lúc. Hãy viết lại quy tắc CSS sau dưới dạng một đặc tính tốc kýbackground
duy nhất.body { background-image: url("background.jpg"); background-repeat: repeat-x; }
body { background: repeat-x url("background.jpg"); }
-
Hãy viết một quy tắc CSS cho phần tử
<div id="header"></div>
để chỉ thay đổi chiều rộng đường viền dưới cùng thành4px
.#header { border-bottom-width: 4px; }
-
Hãy viết một đặc tính
font-size
để tăng gấp đôi kích thước phông chữ được sử dụng trong phần tử gốc của trang.Đơn vị
rem
tương ứng với kích thước phông chữ được sử dụng trong phần tử gốc. Vì vậy, đặc tính sẽ phải làfont-size: 2rem
. -
Cách dòng đôi (Double-spacing) là một tính năng định dạng văn bản phổ biến trong trình xử lý văn bản. Làm cách nào để có thể đặt định dạng tương tự bằng CSS?
Đặt đặc tính
line-height
thành giá trị2em
vì đơn vịem
sẽ tương ứng với kích thước phông chữ của phần tử hiện tại.