Khi bạn đang thiết kế văn bản cho một trang web, bạn có thể muốn thêm trang trí vào văn bản. Ví dụ:bạn có thể muốn thêm gạch dưới cho công việc quan trọng hoặc một dòng trong văn bản cũ.
Đó là nơi xuất hiện thuộc tính trang trí văn bản CSS. Thuộc tính trang trí văn bản cho phép bạn thêm gạch chân, gạch ngang và dòng xuất hiện trong một khối văn bản.
Hướng dẫn này sẽ thảo luận, với các ví dụ, cách sử dụng thuộc tính text-decoration và ba thuộc tính phụ của nó, để thêm trang trí vào một khối văn bản trong CSS. Khi đọc xong hướng dẫn này, bạn sẽ trở thành chuyên gia trang trí văn bản bằng cách sử dụng thuộc tính trang trí văn bản.
Trang trí văn bản CSS
Trang trí văn bản bằng cách thêm gạch dưới, dòng xuất hiện xuyên qua văn bản và gạch ngang, là một cách quan trọng để bạn có thể thu hút sự chú ý vào nội dung chính trên trang web.
Ví dụ, khi văn bản được gạch chân, nó cho người dùng biết rằng những gì đã được gạch chân là đáng đọc. Ngoài ra, trang trí văn bản là một phần quan trọng trong việc thiết kế trải nghiệm có thể truy cập được trên trang web.
Điều này là do chỉ dựa vào các chỉ số thị giác như màu sắc sẽ không thể tiếp cận được với tất cả người dùng, chẳng hạn như những người bị mù màu hoặc bị khiếm thị tương tự. Thêm gạch dưới, gạch ngang hoặc gạch ngang sẽ làm cho người dùng có nhiều khả năng nhận thấy rằng một phần văn bản đã được đánh dấu.
Trong CSS, thuộc tính viết tắt trang trí văn bản cho phép bạn chỉ định trang trí được thêm vào văn bản. Thuộc tính này là viết tắt của ba thuộc tính khác, đó là:
- text-decoration-line (bắt buộc)
- văn bản-trang trí-màu (tùy chọn)
- văn bản-kiểu trang trí (tùy chọn)
Các thuộc tính này có thể được kết hợp khi sử dụng thuộc tính text-decoration để làm cho mã của bạn hiệu quả hơn. Thay vì chỉ định từng cái riêng lẻ, bạn có thể sử dụng cú pháp sau để xác định kiểu trang trí văn bản:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
text-decoration: line color style;
Không có thứ tự cụ thể nào trong đó các kiểu cho thuộc tính trang trí văn bản sẽ xuất hiện.
Bây giờ chúng ta đã biết những kiến thức cơ bản về thuộc tính tốc ký trang trí văn bản, hãy cùng xem qua một ví dụ về cách hoạt động của thuộc tính này. Đối với hướng dẫn này, chúng tôi sẽ sử dụng ví dụ về một tiệm bánh mì địa phương đang tìm cách xây dựng trang web của riêng họ.
Ví dụ về trang trí văn bản CSS
Tiệm bánh địa phương mà chúng tôi đang phát triển một trang web đã yêu cầu chúng tôi đánh dấu các tiêu đề trên mỗi trang.
Ví dụ:trên About trang, tiêu đề About Us phải có gạch chân để thu hút sự chú ý của người dùng vào tiêu đề. Mỗi tiêu đề phải có một gạch chân màu xanh nhạt và mỗi dòng phải rộng 2px. Chúng tôi có thể tạo một tiêu đề như vậy bằng cách sử dụng mã sau:
<html>
<h1>About Us</h1>
<style>
h1 {
text-decoration: lightblue solid underline;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong mã HTML của mình, chúng tôi đã xác định tiêu đề bằng thẻ
hiển thị văn bản About Us trên trang web. Sau đó, trong mã CSS của chúng tôi, chúng tôi đã tạo một quy tắc áp dụng cho tất cả các phần tử trên trang web của chúng tôi. Quy tắc này sử dụng thuộc tính text-decoration để tạo gạch chân:
- Xuất hiện với màu xanh lam nhạt (ký hiệu là
lightblue )
- Có một dòng (ký hiệu là
solid )
- Sử dụng kiểu gạch dưới (được biểu thị bằng
underline )
- Xuất hiện với màu xanh lam nhạt (ký hiệu là
lightblue) - Có một dòng (ký hiệu là
solid) - Sử dụng kiểu gạch dưới (được biểu thị bằng
underline)
Đây là một ví dụ đơn giản về một gạch dưới được tạo bằng cách sử dụng thuộc tính text-decoration. Bây giờ, hãy khám phá từng thuộc tính tạo nên thuộc tính trang trí văn bản.
Dòng trang trí văn bản (text-decoration-line)
Thuộc tính text-decoration-line cho phép bạn đặt loại dòng sẽ xuất hiện trên văn bản mà thuộc tính được áp dụng. Các giá trị mà thuộc tính này chấp nhận là:
- gạch dưới:Tạo một dòng xuất hiện dưới một khối văn bản.
- overline:Tạo một dòng xuất hiện phía trên một khối văn bản.
- line-through:Tạo một đường gạch ngang xuất hiện ở giữa khối văn bản.
- nhấp nháy:Làm cho văn bản mà kiểu được áp dụng nhấp nháy (kiểu này không được dùng nữa).
Nếu thuộc tính này được sử dụng mà không có bất kỳ trang trí văn bản nào khác, một gạch chân màu đen liền khối sẽ xuất hiện.
Hãy quay lại ví dụ về tiệm bánh để minh họa cách hoạt động của thuộc tính này. Giả sử tiệm bánh, có tên là Jefferson’s Family Bakery, đã yêu cầu chúng tôi tạo kiểu văn bản trên About Us của họ trang. Họ đã yêu cầu chúng tôi gạch dưới một số phần nhất định trong văn bản của họ.
Chúng ta có thể sử dụng thuộc tính text-decoration-line để thực hiện nhiệm vụ này. Đây là mã chúng tôi sẽ sử dụng:
<html>
<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.
Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>
<style>
.underline {
text-decoration-line: underline;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Hãy chia nhỏ mã của chúng ta. Trong mã HTML của chúng tôi, chúng tôi đã tạo một đoạn văn bản nằm trong các thẻ
.
Bên trong đoạn này là mô tả về Tiệm bánh Gia đình của Jefferson. Ngoài ra, hai thuật ngữ - most well-known for our bagels và come to Jeffersons —Được bao bọc trong các thẻ , được sử dụng để phân tách văn bản kèm theo trong phần còn lại của đoạn văn.
Trong mã CSS của chúng tôi, chúng tôi xác định một quy tắc áp dụng cho tất cả các phần tử có lớp underline . Vì vậy, trong trường hợp của chúng tôi, tất cả các thẻ của chúng tôi đều sử dụng kiểu mà chúng tôi đã xác định, vì mỗi thẻ cũng được gán cho lớp underline . Quy tắc chúng tôi đã xác định sử dụng văn bản-trang trí-dòng để thêm một gạch chân màu đen duy nhất vào văn bản mà chúng tôi muốn đánh dấu.
Màu trang trí văn bản (chữ-trang trí-màu)
Thuộc tính text-decoration-color cho phép bạn xác định màu của trang trí văn bản được áp dụng cho một kiểu. Giả sử chúng ta muốn làm cho các gạch dưới mà chúng ta đã xác định trong ví dụ cuối cùng của chúng ta xuất hiện với màu xanh lục. Chúng tôi có thể thực hiện điều này bằng cách sử dụng kiểu sau:
<html>
<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.
Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>
<style>
.underline {
text-decoration-line: underline;
text-decoration-color: green;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong mã CSS của chúng tôi, chúng tôi đã thêm quy tắc kiểu văn bản-trang trí-màu sắc có giá trị green . Điều này đặt màu của gạch chân mà chúng tôi đã xác định bằng cách sử dụng văn bản-trang trí-dòng thành màu xanh lá cây.
Chúng tôi cũng chỉ định một giá trị cho dòng trang trí văn bản, giá trị này được yêu cầu để tạo kiểu dòng của chúng tôi.
Kiểu trang trí văn bản (kiểu trang trí văn bản)
Thuộc tính kiểu trang trí văn bản cho phép bạn đặt kiểu trang trí văn bản sẽ xuất hiện trong một khối văn bản. Thuộc tính kiểu trang trí văn bản chấp nhận bất kỳ giá trị nào sau đây:
- solid:Tạo một dòng duy nhất.
- double:Tạo một đường đôi.
- nét đứt:Tạo một đường đứt nét.
- chấm chấm:Tạo một đường chấm.
- gợn sóng:Tạo đường gợn sóng.
Hãy quay lại ví dụ về tiệm bánh. Giả sử tiệm bánh đã yêu cầu chúng tôi thêm dấu gạch dưới vào tiêu đề About the Jeffersons trên About Us trang. Gạch chân này phải xuất hiện bằng màu xanh lam nhạt và nên sử dụng kiểu chấm. Chúng tôi có thể tạo gạch chân này bằng cách sử dụng mã sau:
<html>
<h2>About the Jeffersons</h2>
<style>
h2 {
text-decoration-line: underline;
text-decoration-color: lightblue;
text-decoration-style: dotted;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong mã của chúng tôi, chúng tôi đã sử dụng kiểu văn bản-trang trí-dòng và văn bản-trang trí-màu sắc để xác định gạch chân của chúng tôi và đặt màu gạch chân tương ứng thành màu xanh lam nhạt. Sau đó, chúng tôi sử dụng thuộc tính kiểu trang trí văn bản để đặt kiểu gạch chân của chúng tôi thành dấu chấm.
Xóa gạch chân khỏi siêu kết nối
Thuộc tính text-decoration thường được sử dụng để xóa các gạch dưới xuất hiện trong liên kết HTML truyền thống. Điều này là do thuộc tính text-decoration chấp nhận giá trị none , được sử dụng để xóa các kiểu văn bản mặc định được áp dụng cho một phần tử.
Theo mặc định, khi bạn xác định một liên kết bằng thẻ , một gạch dưới sẽ xuất hiện. Tuy nhiên, không phải tất cả các trang web đều muốn hiển thị gạch chân bên dưới liên kết của họ.
Giả sử trang web của Jefferson’s Family Bakery có siêu liên kết với nhãn Contact Us , liên kết đến trang /contact.html trên trang web của họ. Đây là mã HTML cho siêu liên kết:
<a href="/contact.html">Contact Us</a>
Khi chúng tôi kết xuất thành phần này, phản hồi sau được trả về: nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Như bạn có thể thấy, liên kết xuất hiện màu xanh lam và có gạch chân. Nếu chúng tôi muốn xóa gạch chân này, chúng tôi có thể sử dụng mã sau:
<html>
<a href="/contact.html">Contact Us</a>
<style>
a {
text-decoration: none;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Như bạn có thể thấy, trong ví dụ thứ hai của chúng tôi, phần gạch chân bên dưới liên kết của chúng tôi đã bị xóa. Trong mã CSS của mình, chúng tôi đã sử dụng quy tắc text-decoration:none và áp dụng quy tắc đó cho mọi thẻ . Thao tác này sẽ xóa mọi trang trí văn bản khỏi các phần tử mà nó được áp dụng, trong trường hợp này là mọi thẻ .
Kết luận
Trang trí văn bản là một cách mà bạn có thể thu hút sự chú ý đến văn bản cụ thể trên trang web và làm cho văn bản xuất hiện theo cách thẩm mỹ hơn.
Thuộc tính trang trí văn bản CSS và các thuộc tính liên quan của nó, cho phép bạn xác định kiểu trang trí được sử dụng bởi một khối văn bản trên trang web.
Hướng dẫn này đã thảo luận, có tham chiếu đến các ví dụ, cách sử dụng thuộc tính text-decoration và các thuộc tính liên quan của nó để trang trí văn bản trên trang web. Giờ đây, bạn đã được trang bị kiến thức cần thiết để bắt đầu trang trí văn bản như một nhà thiết kế web chuyên nghiệp!