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 văn bản thứ nhất được in đậm, nhưng không in nghiêng.
- Đoạn văn bản thứ hai không in đậm, nhưng được in nghiêng.
- Đoạn văn bản cuối cùng sử dụng một font
mono-spacethường dùng để hiển thị code.
font.html
<!doctypehtml><html><head><metacharset="utf-8"><title>Font Properties</title><linkrel="stylesheet"href="font.css"></head><body><pid="first">
This text looks bold and straight.
</p><pid="second">
This text looks thin and italicilized.
</p><pid="third">
- I<br>
- am<br>
-Where are you ?<br>
- !
</p></body></html>font-css
body{font-size: 30px;}#first{font-weight: bold;/* font-weight: normal; is set by default */}#second{font-style: italic;/* font-style: normal; is set by default */}#third{font-family:'Consolas','Monaco', monospace;}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.
freefont.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Free Font</title>
<link rel="stylesheet" href="freefont.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>
freefont.css
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ể nhanh chóng 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:
- underline – gạch nang dưới chân chữ
- overline – gạch ngang trên đầu chữ
- line-through – được dùng để…
a train - none – xóa các hiệu ứng
decoration(nếu có)
Để đả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:
align.html
<!doctypehtml><html><head><metacharset="utf-8"><title>Align</title><linkrel="stylesheet"href="align.css"></head><body><pclass="text-left">
When we don't know<br>
what we want<br>
we choose Left
</p><pclass="text-center">
When we just live<br>
we do not choose
</p><pclass="text-right">
When we realy know<br>
what we want<br>
we choose Right
</p></body></html>align.css
html{font-size: 33px;}body{font-family: Georgia, sans-serif;}.text-left{text-align: left;}.text-center{text-align: center;}.text-right{text-align: right;}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ử.
space.css
html { font-size: 20px; }
body { font-family: Georgia, sans-serif; }
p { line-height: 240%; }
space.html
<!doctypehtml><html><head><metacharset="utf-8"><title>Space</title><linkrel="stylesheet"href="space.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é.
Bài viết: [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.
Nguồn: viblo.asia