Chúng ta đã sử dụng thuộc tính font-size vài lần để thay đổi kích thước của nội dung văn bản trước đó. Hãy cùng gặp gỡ một vài thuộc tính hỗ trợ trang trí nội dung chữ trong CSS. Sau đó, chúng ta sẽ cùng xây dựng một thanh điều hướng đơn giản.
Thay đổi phong cách hiển thị chữ
Chúng ta đã sử dụng thuộc tính font-size để thay đổi kích cỡ chữ của các nội dung văn bản. Và ở đây là một vài thuộc tính font phổ biến khác:
font-weight- hiển thị chữ in đậm/bình thường.font-style- hiển thị chữ in nghiêng/bình thường.font-family- chỉ định họ font sử dụng để hiển thị.
Hãy cùng viết một đoạn code CSS để xem các thuộc tính này hoạt động như thế nào. Chúng ta sẽ tạo ra một vài đoạn văn bản:
- Đoạn thứ nhất được in đậm, nhưng không in nghiêng.
- Đoạn thứ hai không in đậm, nhưng được in nghiêng.
- Đoạn cuối cùng sử dụng font
mono-spacethường dùng để hiển thị code.
body {
font-size: 32px;
}
.text-bold {
font-weight: bold;
/* font-weight: normal; is set by default */
}
.text-italic {
font-style: italic;
/* font-style: normal; is set by default */
}
.font-mono {
font-family: 'Consolas', 'Monaco', monospace;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Font Properties</title>
<link rel="stylesheet" href="font.css">
</head>
<body>
<p class="text-bold">
This text looks bold and straight.
</p>
<p class="text-italic">
This text looks thin and italicilized.
</p>
<p class="font-mono">
wHere are you ?<br>
.I<br>
.Am<br>
.!
</p>
</body>
</html>
Như bạn đã thấy thì chúng ta có thể chỉ định nhiều hơn 1 họ font trong font-family để đảm bảo rằng ít nhất có 1 font được tìm thấy và sử dụng.
Tìm và sử dụng các font miễn phí
Chúng ta có thể sử dụng các font chưa có sẵn trên thiết bị của người dùng bằng cách nhúng các font này vào trang web. Có nhiều trang web đang hỗ trợ chia sẻ các font miễn phí để bạn có thể sử dụng cho thiết kế của mình. Một trong số những trang web đó là Google Fonts.
Đầu tiên thì bạn cần truy cập Google Fonts và tìm một font muốn sử dụng. Sau đó, bạn click chuột vào biểu tượng dấu hình dấu cộng + ở góc phía trên bên phải.
Sau đó bạn chọn vào thanh selected ở phía dưới của cửa sổ trình duyệt web, copy/paste mã HTML được cung cấp vào trang đơn của bạn.
Bây giờ thì bạn đã có thể sử dụng font vừa chọn trong code CSS.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Free Font</title>
<link rel="stylesheet" href="free.css">
<link href="https://fonts.googleapis.com/css?family=Megrim" rel="stylesheet">
</head>
<body>
<h1>
Almost before we knew it,<br>
we had left the ground.
</h1>
</body>
</html>
h1 {
font-family: 'Megrim', cursive;
}
Trang trí và biến đổi nội dung chữ
Bên cạnh hiệu ứng in đậm và in nghiêng, chúng ta cũng có thể nhấn mạnh một đoạn nội dung chữ bằng cách sử dụng thuộc tính text-decoration. Thuộc tính này có thể được sử dụng cùng với 1 trong các giá trị sau:
overline- gạch ngang trên đầu chữunderline- gạch nang dưới chân chữline-through- được dùng để...a trainnone- xóa các hiệu ứngdecoration(nếu có)
.text-overline {
text-decoration: overline;
}
.text-underline {
text-decoration: underline;
}
.text-linethrough {
text-decoration: line-through;
}
.no-decoration {
text-decoration: none;
}
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="deco.css">
</head>
<body>
<p class="text-overline">heaven</p>
<p class="text-underline">earth</p>
<p class="text-linethrough">a train</p>
<a class="no-decoration" href="#">a link</a>
</body>
</html>
Để đảm bảo rằng kết quả hiển thị cuối cùng của các nội dung chữ được đồng nhất
trong một số phần đặc biệt của trang web ví dụ như thanh điều hướng, chúng ta
có thể sử dụng thuộc tính text-transform. Thuộc tính này có thể được sử dụng
cùng với một trong các giá trị sau:
capitalized- Chữ Cái Đầu Tiên Của Mỗi Từ Nên Được Viết Hoalowercase- tất cả mọi thứ trên thế giới nên được viết chữ thườnguppercase- TẤT CẢ MỌI THỨ TRONG VŨ TRỤ NÊN ĐƯỢC VIẾT IN HOAnone- xóa các hiệu ứngtransform(nếu có)
Canh chỉnh chữ và thay đổi chiều cao dòng
Để canh giữa nội dung chữ theo phương ngang, chúng ta có thể sử dụng thuộc tính
text-align. Thuộc tính này có thể được sử dụng với 1 trong 3 giá trị sau:
left- canh sát lề trái (được thiết lập mặc định)center- canh chính giữa dòngright- canh sát lề phải
Đưới đây là một ví dụ sử dụng text-align với 3 đoạn văn bản:
html { font-size: 32px; }
body { font-family: Georgia, serif; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Align</title>
<link rel="stylesheet" href="align.css">
</head>
<body>
<p class="text-left">
when we don't know<br>
what we want<br>
we choose Left
</p>
<p class="text-center">
when we just live<br>
we do not choose
</p>
<p class="text-right">
when we realy know<br>
what we want<br>
we choose Right
</p>
</body>
</html>
Bên cạnh việc canh chỉnh chữ theo phương ngang, việc kiểm soát chiều cao dòng line-height cũng rất quan trọng để giúp cho các nội dung văn bản của chúng ta được hiển thị trực quan, dễ đọc.
Thuộc tính line-height thường được sử dụng với một giá trị px hoặc %. Nếu như bạn sử dụng một giá trị %, giá trị này sẽ được tính dựa trên kích thước font-size hiện tại của phần tử.
html { font-size: 16px; }
body { font-family: Georgia, sans-serif; }
p { line-height: 240%; }
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Line</title>
<link rel="stylesheet" href="line.css">
</head>
<body>
<p>
When we don't know what we want, we choose Left.<br>
When we realy know what we want, we choose Right.<br>
When we just live, we do not choose.
</p>
</body>
</html>
Thuộc tính line-height cũng rất hữu dụng khi chúng ta muốn canh giữa nội dung chữ theo phương dọc. Nếu như nội dung chữ chỉ có một dòng thì chúng ta chỉ cần đặt giá trị line-height bằng với chiều cao của phần tử HTML đó.
Xây dựng một thanh điều hướng đơn giản
Vì lý do bài viết hiện tại của chúng ta đã khá dài ở thời điểm hiện tại, mình quyết định di chuyển phần này tới một bài viết tách rời để bạn tiện theo dõi. Vì vậy nên bạn hãy giữ Tab web này mở và click vào liên kết bên dưới nhé.
[HTML + CSS] Xây dựng một thanh điều hướng tối giản
Bạn đã hoàn thành việc xây dựng thanh điều hướng cho trang web của mình chưa? 
Khá dễ dàng phải không?
Vẫn còn nhiều công cụ hữu ích khác (các bộ chọn & các thuộc tính) đang chờ đọi chúng ta khám phá. Trong bài viết tiếp theo, chúng ta sẽ gặp lại các bộ chọn của CSS.
