Khóa học IT CSS Cơ bản 022_Văn bản, Phông chữ, Liên kết

Văn bản

Kiểm soát văn bản CSS có thể giúp chúng ta hiển thị thông tin văn bản trên trang web tốt hơn và cải thiện hiệu ứng hình ảnh của trang web.

Thụt đầu dòng

Dùng để đặt thụt đầu dòng đầu tiên của văn bản, phù hợp cho các tình huống thụt đầu dòng đầu tiên của đoạn văn, tránh sử dụng trên các phần tử inline. Thuộc tính có thể chấp nhận giá trị tuyệt đối hoặc tương đối. Đơn vị giá trị tuyệt đối bao gồm pixel (px), inch (in), centimet (cm), milimet (mm), v.v. Đơn vị giá trị tương đối bao gồm em, rem, vw, vh, v.v.

Ví dụ:

1
p {
2
  text-indent: 2em;
3
}

Hiệu ứng:

Chế độ viết

Chế độ viết trong CSS đề cập đến hướng sắp xếp văn bản, bao gồm chế độ ngang, dọc và hỗn hợp. Thực tế nó đặt hướng hiển thị của các phần tử cấp khối trên trang—từ trên xuống dưới, từ phải sang trái, hoặc từ trái sang phải. Điều này quyết định hướng của văn bản.

• horizontal-tb: Dòng khối từ trên xuống dưới. Hướng văn bản tương ứng là ngang.
• vertical-rl: Dòng khối từ phải sang trái. Hướng văn bản tương ứng là dọc.
• vertical-lr: Dòng khối từ trái sang phải. Hướng văn bản tương ứng là dọc.

Ví dụ:

1
body {
2
  writing-mode: vertical-rl;
3
}

Hiệu ứng: Khi chúng ta chuyển đổi chế độ viết, chúng ta cũng đang thay đổi hướng của văn bản khối và inline. Trong chế độ viết horizontal-tb, hướng khối là ngang từ trên xuống dưới, trong khi trong chế độ viết vertical-rl, hướng khối là dọc từ phải sang trái. Do đó, chiều khối luôn đề cập đến hướng hiển thị của các khối trong chế độ viết của trang. Chiều inline luôn đề cập đến hướng văn bản.

Sơ đồ này cho thấy hai chiều trong chế độ viết ngang.

Hình ảnh này cho thấy hai chiều trong chế độ viết dọc.

Hướng văn bản

Sử dụng thuộc tính direction để đặt hướng đọc của văn bản, từ trái sang phải (ltr), từ phải sang trái (rtl). Phù hợp cho các trang web đa ngôn ngữ, đặt hướng đọc dựa trên ngôn ngữ văn bản. Một số ngôn ngữ (như tiếng Ả Rập) được viết theo chiều ngang nhưng từ phải sang trái.

Ví dụ:

1
html {
2
  direction: rtl;
3
}

Hiệu ứng:

Trang trí văn bản

Sử dụng thuộc tính text-decoration để đặt hiệu ứng trang trí đường kẻ cho văn bản.

• none: Không có đường kẻ
• overline: Đường kẻ trên
• underline: Đường kẻ dưới
• line-through: Đường gạch ngang

Ví dụ:

1
<p style="text-decoration: none;">Không có đường kẻ văn bản</p>
2
<p style="text-decoration: overline;">Tôi có đường kẻ trên</p>
3
<p style="text-decoration: underline;">Tôi có đường kẻ dưới</p>
4
<p style="text-decoration: line-through;">Tôi có đường gạch ngang</p>

Hiệu ứng:

Căn chỉnh văn bản

Đặt căn chỉnh ngang của văn bản.

• left: Văn bản căn trái, đây là mặc định cho hầu hết các ngôn ngữ.
• center: Văn bản căn giữa ngang
• right: Văn bản căn phải
• justify: Văn bản căn đều hai bên, lấp đầy bằng cách thêm khoảng trắng giữa các dòng. Do sự sắp xếp văn bản và chiều rộng container (văn bản ngắn, thiếu khoảng trắng, quá ít dòng, ngôn ngữ đơn), trong một số trường hợp, hiệu ứng căn đều có thể không dễ nhìn thấy.
• justify-all (ít phổ biến): Tương tự như justify, nhưng thay vì chỉ thêm khoảng trắng ở cuối dòng, nó phân bố đều ở cả đầu và cuối dòng.
• start: Tùy thuộc vào hướng văn bản của trình duyệt, chỉ ra văn bản căn chỉnh ở đầu (thường là bên trái).
• end: Tùy thuộc vào hướng văn bản của trình duyệt, chỉ ra văn bản căn chỉnh ở cuối (thường là bên phải).

Ví dụ:

1
<p style="text-align: left;">Văn bản này căn trái</p>
2
<p style="text-align: right;">Văn bản này căn phải</p>
3
<p style="text-align: center;">Văn bản này căn giữa</p>

Hiệu ứng:

Chiều cao dòng

Sử dụng thuộc tính line-height, bạn có thể đặt chiều cao giữa các dòng văn bản. Điều chỉnh chiều cao dòng dựa trên kích thước phông chữ và yêu cầu thiết kế có thể cải thiện khả năng đọc.

Ví dụ:

1
<p>Đây là chiều cao dòng bình thường<br>Đây là chiều cao dòng bình thường</p>
2
<p style="line-height: 3;">Xem chiều cao dòng này<br>Xem chiều cao dòng này</p>

Hiệu ứng:

Khoảng cách

Đặt khoảng cách giữa nội dung văn bản.

• letter-spacing đặt khoảng cách giữa các chữ cái, ký tự tiếng Trung và số.
• word-spacing đặt khoảng cách giữa các từ (ký tự ở hai bên khoảng trắng).

Ví dụ:

1
<p style="letter-spacing: 10px;">Xem khoảng cách văn bản CSS của tôi</p>
2
<p style="word-spacing: 10px;">Xem khoảng cách văn bản CSS 123 của tôi</p>

Hiệu ứng:

Ngắt dòng

Kiểm soát cách văn bản ngắt dòng.

word-wrap: Chủ yếu được sử dụng để kiểm soát cách các từ dài hoặc URL ngắt dòng, phù hợp hơn cho các tình huống tiếng Anh.

• normal (mặc định): Theo quy tắc ngắt dòng bình thường, không cho phép ngắt trong từ.
• break-word: Cho phép ngắt trong từ, có thể buộc các từ dài hoặc URL ngắt dòng.

Ví dụ:

1
.base{
2
    background: #d7d8d9;
3
    width: 60px;
4
}
5
.example1{
6
    word-wrap: normal;
7
}
8
.example2{
9
    word-wrap: break-word;
10
}

1
    <p class="base example1">Xem cách tôi ngắt dòng HelloCSS Hello-CSS</p>
2
    <p class="base example2">Xem cách tôi ngắt dòng HelloCSS Hello-CSS</p>

Hiệu ứng:

white-space: Được sử dụng để kiểm soát cách xử lý các ký tự khoảng trắng bên trong phần tử, bao gồm khoảng trắng, ngắt dòng, v.v.

• normal (mặc định): Xử lý khoảng trắng bình thường, gộp các ký tự khoảng trắng liên tiếp và ngắt dòng dựa trên ngắt dòng.
• nowrap: Không cho phép văn bản ngắt dòng, bỏ qua ngắt dòng.
• pre: Giữ nguyên các ký tự khoảng trắng mà không gộp các ký tự liên tiếp, văn bản hiển thị theo định dạng mã nguồn.
• pre-line: Giữ nguyên ngắt dòng, gộp các ký tự khoảng trắng liên tiếp, các khoảng trắng khác được xử lý theo quy tắc bình thường.
• pre-wrap: Giữ nguyên các ký tự khoảng trắng, gộp các ký tự khoảng trắng liên tiếp, giữ nguyên ngắt dòng.

Ví dụ:

1
.base{
2
    background: #d7d8d9;
3
    width: 60px;
4
}
5
.example1{
6
    white-space: normal;
7
}
8
.example2{
9
    white-space: nowrap;
10
}
11
.example3{
12
    white-space: pre;
13
}

1
    <p class="base example1">Xem cách tôi ngắt dòng HelloCSS Hello-CSS</p>
2
    <p class="base example2">Xem cách tôi ngắt dòng HelloCSS Hello-CSS</p>
3
    <p class="base example3">Xem cách tôi ngắt dòng HelloCSS Hello-CSS</p>

Hiệu ứng:

Bóng

Bạn có thể thêm một hoặc nhiều (phân cách bằng dấu phẩy) hiệu ứng bóng cho văn bản để tăng khả năng đọc của văn bản hoặc tạo hiệu ứng thiết kế độc đáo.

• h-shadow: Vị trí bóng ngang. Có thể là giá trị dương (dịch sang phải) hoặc âm (dịch sang trái).
• v-shadow: Vị trí bóng dọc. Có thể là giá trị dương (dịch xuống) hoặc âm (dịch lên).
• blur: Tùy chọn. Chỉ ra mức độ mờ của bóng, giá trị lớn hơn thì mờ hơn. Có thể bỏ qua.
• color: Màu bóng. Có thể là giá trị màu cụ thể, từ khóa, hoặc giá trị RGBA.

Ví dụ:

1
<p style="text-shadow: 2px 2px black;">Xem bóng của tôi</p>
2
<p style="text-shadow: 1px 1px 1px red;">Xem bóng của tôi</p>
3
<p style="text-shadow: 3px 3px 5px darkgrey;">Xem bóng của tôi</p>
4
<p style="text-shadow: 2px 2px 2px black, -2px -2px 2px white;">Xem bóng của tôi</p>

Hiệu ứng:

Chuyển đổi

Được sử dụng để kiểm soát hiệu ứng chuyển đổi chữ hoa chữ thường của văn bản.

• none: Mặc định, giữ nguyên chữ hoa chữ thường ban đầu của văn bản.
• capitalize: Chuyển đổi chữ cái đầu tiên của mỗi từ thành chữ hoa.
• uppercase: Chuyển đổi tất cả văn bản thành chữ hoa.
• lowercase: Chuyển đổi tất cả văn bản thành chữ thường.

Ví dụ:

1
<p style="text-transform: none;">Xem cách tôi chuyển đổi hello CSS</p>
2
<p style="text-transform: capitalize;">Xem cách tôi chuyển đổi hello CSS</p>
3
<p style="text-transform: uppercase;">Xem cách tôi chuyển đổi hello CSS</p>
4
<p style="text-transform: lowercase;">Xem cách tôi chuyển đổi hello CSS</p>

Hiệu ứng:

Tràn văn bản

Trong CSS, bạn có thể sử dụng thuộc tính overflow để xử lý tràn văn bản.

• visible: Văn bản sẽ không tràn, sẽ được hiển thị đầy đủ.
• hidden: Khi văn bản tràn, nó sẽ bị ẩn.
• scroll: Khi văn bản tràn, thanh cuộn sẽ được hiển thị, người dùng có thể cuộn để xem tất cả nội dung.
• auto: Khi văn bản tràn, nó sẽ quyết định có hiển thị thanh cuộn hay không dựa trên chiều rộng và chiều cao của phần tử.

Ví dụ:

1
.base{
2
    white-space: nowrap;
3
    background: #d7d8d9;
4
    width: 120px;
5
}
6
.example1{
7
    overflow: visible;
8
}
9
.example2{
10
    overflow: hidden;
11
}
12
.example3{
13
    overflow: scroll;
14
}
15
.example4{
16
    overflow: auto;
17
}

1
    <p class="base example1">Kiểm tra xem nội dung văn bản của tôi có tràn không</p>
2
    <p class="base example2">Kiểm tra xem nội dung văn bản của tôi có tràn không</p>
3
    <p class="base example3">Kiểm tra xem nội dung văn bản của tôi có tràn không</p>
4
    <p class="base example4">Kiểm tra xem nội dung văn bản của tôi có tràn không</p>

Hiệu ứng:

Phông chữ

Cách kiểm soát và định nghĩa phông chữ là một phần quan trọng của thiết kế web.

Họ phông chữ

Định nghĩa phông chữ thông qua thuộc tính font-family. font-family có thể chỉ định một phông chữ, khuyến nghị cung cấp nhiều phông chữ dự phòng. Trình duyệt sẽ thử các phông chữ này theo thứ tự ưu tiên cho đến khi tìm thấy phông chữ phù hợp có sẵn. Nếu tên phông chữ chứa khoảng trắng, ký tự đặc biệt hoặc ký tự tiếng Trung, khuyến nghị sử dụng dấu ngoặc kép. Có thể sử dụng dịch vụ phông chữ web, nhưng hãy chú ý đến bản quyền phông chữ.

Ví dụ:

1
<p style="font-family: Arial, sans-serif;">hello CSS hello CSS</p>
2
<p style="font-family: Gabriola; ">hello CSS hello CSS</p>

Hiệu ứng:

Kích thước

Kích thước phông chữ trong CSS có thể được đặt bằng thuộc tính font-size. Được sử dụng để đặt kích thước phông chữ văn bản. Kích thước phông chữ có thể được chỉ định bằng giá trị tuyệt đối hoặc tương đối. Khi sử dụng giá trị tuyệt đối, kích thước phông chữ là cố định và sẽ không thay đổi theo độ phân giải màn hình. Đơn vị giá trị tuyệt đối bao gồm: pixel (px), inch (in), centimet (cm), milimet (mm), v.v. Khi sử dụng giá trị tương đối, kích thước phông chữ là tương đối với kích thước phông chữ của phần tử cha. Đơn vị giá trị tương đối bao gồm: em, rem, vw, vh, v.v. Sử dụng từ khóa để chỉ định kích thước phông chữ có thể cải thiện khả năng đọc và tính nhất quán. Từ khóa bao gồm: xx-small, x-small, small, medium, large, x-large, xx-large.

Ví dụ:

1
body {
2
  font-size: 16px;
3
}

Thiết kế responsive:

• Kích thước phông chữ trong thiết kế responsive nên là tương đối để đảm bảo trải nghiệm đọc tốt trên các kích thước màn hình và thiết bị khác nhau.

Khả năng tiếp cận:

• Đảm bảo kích thước phông chữ đủ lớn để đáp ứng tiêu chuẩn khả năng tiếp cận. Khuyến nghị sử dụng kích thước phông chữ ít nhất 16px trong văn bản chính.

Lựa chọn đơn vị phông chữ:

• Sử dụng đơn vị tương đối (em, rem, %) có thể thích ứng tốt hơn với tùy chọn kích thước phông chữ của người dùng được đặt trong trình duyệt, tăng khả năng tiếp cận của trang web.

Cài đặt chiều cao dòng:

• Đặt chiều cao dòng phù hợp dựa trên kích thước phông chữ để cải thiện khả năng đọc văn bản. Thông thường, chiều cao dòng có thể được đặt từ 1.4 đến 1.6 lần kích thước phông chữ.

Độ đậm

Độ đậm phông chữ trong CSS có thể được đặt bằng thuộc tính font-weight.

• normal: Độ đậm phông chữ mặc định.
• bold: Phông chữ đậm.
• bolder: Phông chữ đậm hơn so với phần tử cha.
• lighter: Phông chữ nhẹ hơn so với phần tử cha.
• Giá trị số: Sử dụng giá trị số để đặt độ đậm phông chữ, thường từ 100 đến 900.

Ví dụ:

1
<div style="font-weight: normal;">Độ đậm phông chữ mặc định</div>
2

3
<div style="font-weight: bold;">
4
    Phông chữ đậm
5
    <div style="font-weight: bolder;">Phông chữ đậm hơn so với cha</div>
6
</div>
7

8
<div style="font-weight: 700;">
9
    Phông chữ đậm bằng giá trị số
10
    <div style="font-weight: lighter;">Phông chữ nhẹ hơn so với cha</div>
11
</div>

Hiệu ứng:

Kiểu

Kiểu phông chữ trong CSS có thể được đặt bằng thuộc tính font-style.

• normal: Kiểu phông chữ mặc định.
• italic: Kiểu phông chữ nghiêng, sử dụng hiệu ứng nghiêng được thiết kế đặc biệt từ tệp phông chữ.
• oblique: Kiểu phông chữ xiên, tương tự như nghiêng, khi tệp phông chữ không có hiệu ứng nghiêng được thiết kế đặc biệt, nó có thể buộc phông chữ bình thường xiên.

Ví dụ:

1
<div style="font-style: normal;">Kiểu phông chữ mặc định 123 ABC</div>
2
<div style="font-style: italic;">Kiểu nghiêng 123 ABC</div>
3
<div style="font-style: oblique;">Kiểu xiên 123 ABC</div>

Hiệu ứng:

Màu sắc

Màu phông chữ trong CSS có thể được đặt bằng thuộc tính color.

• Tên màu được định nghĩa trước: Ví dụ, red, green, blue, v.v.
• Giá trị màu thập lục phân: Ví dụ, #FF0000, #00FF00, #0000FF, v.v.
• Giá trị màu RGB, RGBA: Ví dụ, rgb(255, 0, 0), rgba(0, 255, 0, 0.5), v.v.
• Giá trị màu HSL, HSLA: Ví dụ, hsl(0, 100%, 50%), hsla(120, 100%, 50%, 0.7), v.v.

Ví dụ:

1
<div style="color: blue;">Màu phông chữ</div>
2
<div style="color: #ff6a00;">Màu phông chữ</div>
3
<div style="color: rgba(0, 128, 0);">Màu phông chữ</div>
4
<div style="color: rgba(0, 128, 0, 0.5);">Màu phông chữ</div>
5
<div style="color: hsla(0, 100%, 50%);">Màu phông chữ</div>
6
<div style="color: hsla(0, 100%, 50%, 0.7);">Màu phông chữ</div>
7
<div style="color: transparent;">Màu phông chữ</div>

Hiệu ứng:

Liên kết

Trong CSS, bạn có thể sử dụng thuộc tính color để đặt màu phông chữ cho các liên kết (siêu liên kết).

Đặt màu liên kết

• a - Đặt màu liên kết toàn cục
• a:link - Liên kết bình thường, chưa truy cập
• a:visited - Liên kết người dùng đã truy cập
• a:hover - Khi chuột của người dùng ở trên liên kết
• a:active - Khoảnh khắc liên kết được nhấp

Ví dụ:

1
/* Liên kết toàn cục */
2
a {
3
  color: #3498db; /* Xanh dương */
4
}
5

6
/* Liên kết chưa truy cập */
7
a:link {
8
    color: #3498db; /* Xanh dương */
9
}
10

11
/* Liên kết đã truy cập */
12
a:visited {
13
    color: #884dff; /* Tím */
14
}
15

16
/* Liên kết khi di chuột */
17
a:hover {
18
    color: #ff6600; /* Cam */
19
}
20

21
/* Liên kết khi được nhấp */
22
a:active {
23
    color: #ff0000; /* Đỏ */
24
}

Đặt gạch chân liên kết

Ví dụ:

1
a {
2
    text-decoration: none; /* Xóa gạch chân */
3
}
4

5
a:hover {
6
    text-decoration: underline; /* Hiển thị gạch chân khi di chuột */
7
}