Ngôn ngữ CSS - CSS Font
Thuộc tính font CSS
Thuộc tính Font CSS được sử dụng để định văn bản. Bằng cách sử dụng thuộc tính font CSS, bạn có thể thay đổi kích thước, màu sắc, kiểu dáng…
Đây là một số thuộc tính phông chữ quan trọng:
- CSS Font family: có công dụng định nghĩa một danh sách ưu tiên các font.
- CSS Font style: Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal), in nghiêng (italic) hay xiên (oblique) lên các thành phần trang web bold, italic or oblique.
- CSS Font variant: Thuộc tính font-variant được dùng để chọn giữa chế độ bình thường và small-caps của một font chữ.
- CSS Font weight: Thuộc tính font-weight mô tả cách thức thể hiện của font chữ là ở dạng bình thường (normal) hay in đậm (bold).
- CSS Font size: Dùng để tăng hoặc giảm kích thước font chữ.
- CSS Font color: Thay đổi màu văn bản.
1. Thuộc tính font-family
Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần trang web.
Có hai loại tên font được dùng trong font-family: family-names và generic families.
+ Family-names: Tên cụ thể của một font. Ví dụ: Arial, Verdana, Tohama,…
+ Generic families: Tên của một họ gồm nhiều font. Ví dụ: sans-serif, serif,…
Ví dụ: Chúng ta sẽ viết CSS để quy định font chữ dùng cho cả trang web là Times New Roman, Tohama, sans-serif, và font chữ dùng để hiển thị các tiêu đề h1, h2, h3 sẽ là Arial, Verdana và các font họ serif.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { font-family:"Times New Roman",Tohama,sans-serif }
h1, h2, h3 { font-family:arial,verdana,serif }
</style>
</head>
<body>
Thẻ tiêu đề của HTML dùng để định nghĩa các tiêu đề hoặc
phụ đề muốn hiển thị trên trang web. Khi đặt văn bản trong thẻ tiêu đề
<h1> Nội dung </ h1>, nó được hiển thị trên trình duyệt ở dạng đậm và kích thước của văn bản
phụ thuộc thẻ tiêu đề đang sử dụng.
<h1>Đây là tiêu đề quan trọng nhất (lớn nhất)</h1>
<h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2>
<h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3>
</body>
</html>
2. Thuộc tính font-style:
Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal), in nghiêng (italic) hay xiên (oblique) lên các thành phần trang web. Ví dụ thực hiện áp dụng kiểu in nghiêng cho thành phần h1 và kiểu xiên cho h2.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1 { font-style:italic; }
h2 { font-style:oblique; }
</style>
</head>
<body>
Thẻ tiêu đề của HTML dùng để định nghĩa các tiêu đề hoặc
phụ đề muốn hiển thị trên trang web. Khi đặt văn bản trong thẻ tiêu đề
<h1> Nội dung </ h1>, nó được hiển thị trên trình duyệt ở dạng đậm và kích thước của văn bản
phụ thuộc thẻ tiêu đề đang sử dụng.
<h1>Đây là tiêu đề quan trọng nhất (lớn nhất)</h1>
<h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2>
<h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3>
</body>
</html>
Xem ví dụ
3. Thuộc tính font-variant:
Thuộc tính font-variant được dùng để chọn giữa chế độ bình thường và small-caps của một font chữ. Một font small-caps là một font sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa chuẩn để thay thế những chữ in thường. Nếu như font chữ dùng để hiển thị không có sẵn font small-caps thì trình duyệt sẽ hiện chữ in hoa để thay thế. Trong ví dụ sau chúng ta sẽ sử dụng kiểu small-caps cho phần h1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1 { font-variant:small-caps }
</style>
</head>
<body>
Thẻ tiêu đề của HTML dùng để định nghĩa các tiêu đề hoặc
phụ đề muốn hiển thị trên trang web. Khi đặt văn bản trong thẻ tiêu đề
<h1> Nội dung </ h1>, nó được hiển thị trên trình duyệt ở dạng đậm và kích thước của văn bản
phụ thuộc thẻ tiêu đề đang sử dụng.
<h1>Đây là tiêu đề quan trọng nhất (lớn nhất)</h1>
<h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2>
<h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3>
</body>
</html>
Xem ví dụ
4. Thuộc tính font-weight:
Thuộc tính font-weight mô tả cách thức thể hiện của font chữ là ở dạng bình thường (normal) hay in đậm (bold). Thử in đậm phần p:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p { font-weight:bold }
</style>
</head>
<body>
<p>
Thẻ tiêu đề của HTML dùng để định nghĩa các tiêu đề hoặc
phụ đề muốn hiển thị trên trang web. Khi đặt văn bản trong thẻ tiêu đề
<h1> Nội dung </ h1>, nó được hiển thị trên trình duyệt ở dạng đậm và kích thước của văn bản
phụ thuộc thẻ tiêu đề đang sử dụng.</p>
<h1>Đây là tiêu đề quan trọng nhất (lớn nhất)</h1>
<h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2>
<h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3>
</body>
</html>
Xem ví dụ
5. Thuộc tính font-size:
Kích thước của một font được định bởi thuộc tính font-size. Thuộc tính này nhận các giá trị đơn vị đo hỗ trợ bởi CSS bên cạnh các giá trị xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger. Tùy theo mục đích sử dụng của website bạn có thể lựa chon những đơn vị phù hợp.
Ở ví dụ trang web có kích cỡ font là 20px, h1 là 3 em = 3 x 20 = 60px, h2 là 2em = 40px.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { font-size:20px }
h1 { font-size:3em }
h2 { font-size:2em}
</style>
</head>
<body>
Thẻ tiêu đề của HTML dùng để định nghĩa các tiêu đề hoặc
phụ đề muốn hiển thị trên trang web. Khi đặt văn bản trong thẻ tiêu đề
<h1> Nội dung </ h1>, nó được hiển thị trên trình duyệt ở dạng đậm và kích thước của văn bản
phụ thuộc thẻ tiêu đề đang sử dụng.
<h1>Đây là tiêu đề quan trọng nhất (lớn nhất)</h1>
<h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2>
<h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3>
</body>
</html>
Xem ví dụ
Thuộc tính font rút gọn
Tương tự như các thuộc tính background, chúng ta cũng có thể rút gọn các thuộc tính font lại thành một thuộc tính đơn như ví dụ sau:
h1 { font-style: italic; font-variant:small-caps; font-weight: bold; font-size: 35px;
font-family: arial,verdana,sans-serif; }
Thành:
h1 { font: italic bold 35px arial,verdana,sans-serif; }
Cấu trúc rút gọn cho các thuộc tính nhóm font:
Font :<font-style> | < font-variant> | <font-weight> | <font-size> |< font-family>
6. Màu chữ (thuộc tính color)
Để định màu chữ cho một thành phần nào đó trên trang web chúng ta sử dụng thuộc tính color. Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ. Ví dụ sau chúng ta sẽ viết CSS để định màu chữ chung cho một trang web là đen, cho tiêu đề h1 màu xanh da trời, cho tiêu đề h2 màu xanh lá chúng ta sẽ làm như
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { color:#000 }
h1 { color:#0000FF }
h2 { color:#00FF00 }
</style>
</head>
<body>
Thẻ tiêu đề của HTML dùng để định nghĩa các tiêu đề hoặc
phụ đề muốn hiển thị trên trang web. Khi đặt văn bản trong thẻ tiêu đề
<h1> Nội dung </ h1>, nó được hiển thị trên trình duyệt ở dạng đậm và kích thước của văn bản
phụ thuộc thẻ tiêu đề đang sử dụng.
<h1>Đây là tiêu đề quan trọng nhất (lớn nhất)</h1>
<h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2>
<h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3>
</body>
</html>
Xem ví dụ
Một số thuộc tính khác:
1. Thuộc tính text-indent :
Thuộc tính text-indent cung cấp khả năng tạo ra khoảng thụt đầu dòng cho dòng đầu tiên trong đoạn văn bản. Giá trị thuộc tính này là các đơn vị đo cơ bản dùng trong CSS. Trong ví dụ sau chúng ta sẽ định dạng thụt đầu dòng một khoảng 30px cho dòng văn bản đầu tiên trong mỗi đoạn văn bản đối với các thành phần <p>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p { text-indent:30px }
</style>
</head>
<body>
<p>Sau khi tiễn Myanmar rời khỏi cuộc chơi, thầy trò HLV
Mai Đức Chung sẵn sàng làm buồn lòng một đối thủ khác
nữa là Thái Lan để hoàn thành chỉ tiêu chinh phục Vàng tại SEA Games 2017.</p>
</body>
</html>
Xem ví dụ
2. Thuộc tính text-align :
Thuộc tính text-align giúp canh chỉnh văn bản cho các thành phần trong trang web. Thuộc tính này có tất cả 4 giá trị : left (canh trái – mặc định), right (canh phải), center (canh giữa) và justify (canh đều). Trong ví dụ sau chúng ta sẽ thực hiện canh phải các thành phần h1, h2 và canh đều đối với thành phần <p>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1, h2 { text-align:right }
p { text-align:justify }
</style>
</head>
<body>
<p>Sau khi tiễn Myanmar rời khỏi cuộc chơi, thầy trò HLV
Mai Đức Chung sẵn sàng làm buồn lòng một đối thủ khác
nữa là Thái Lan để hoàn thành chỉ tiêu chinh phục Vàng tại SEA Games 2017.</p>
<h1>Đây là tiêu đề quan trọng thứ nhất(lớn thứ nhất)</h1>
<h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2>
<h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3>
</body>
</html>
Xem ví dụ
3. Thuộc tính letter-spacing:
Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong một đoạn văn bản. Muốn định khoảng cách giữa các ký tự trong thành phần h1, h2 là 7px và thành phần <p> là 5px chúng ta sẽ viết CSS sau:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1, h2 { letter-spacing:7px }
p { letter-spacing:5px }
</style>
</head>
<body>
<p>Sau khi tiễn Myanmar rời khỏi cuộc chơi, thầy trò HLV
Mai Đức Chung sẵn sàng làm buồn lòng một đối thủ khác
nữa là Thái Lan để hoàn thành chỉ tiêu chinh phục Vàng tại SEA Games 2017.</p>
<h1>Đây là tiêu đề quan trọng thứ nhất(lớn thứ nhất)</h1>
<h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2>
<h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3>
</body>
</html>
Xem ví dụ
4. Thuộc tính text-decoration:
Thuộc tính text-decoration giúp bạn thêm các hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nhấp nháy (blink). Ví dụ sau chúng ta sẽ định dạng gạch chân cho thành phần h1, gạch đầu thành phần h2
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1 { text-decoration:underline }
h2 { text-decoration:overline }
</style>
</head>
<body>
<h1>Đây là tiêu đề quan trọng thứ nhất(lớn thứ nhất)</h1>
<h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2>
<h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3>
</html>
5. Thuộc tính text-transform:
Text-transform là thuộc tính qui định chế độ in hoa hay in thường của văn bản mà không phụ thuộc vào văn bản gốc trên HTML. Thuộc tính này có tất cả 4 giá trị: uppercase (in hoa), lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên trong mỗi từ) và none (không áp dụng hiệu ứng – mặc định). Trong ví dụ dưới đây chúng ta sẽ định dạng cho thành phần h1 là in hoa, h2 là in hoa đầu mỗi ký tự.
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1 { text-transform:uppercase }
h2 { text-transform:capitalize }
</style>
</head>
<body>
<h1>Đây là tiêu đề quan trọng thứ nhất(lớn thứ nhất)</h1>
<h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2>
<h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3>
</html>
