CSS - Trích dẫn: Thêm cá tính cho văn bản của bạn

Xin chào các bạn thiết kế web đang theo đuổi! Hôm nay, chúng ta sẽ cùng khám phá một tính năng CSS thú vị và thường bị bỏ qua: trích dẫn. Là giáo viên máy tính gần gũi của bạn, tôi rất vui được chia sẻ viên ngọc nhỏ này với các bạn. Tin tôi đi, đến cuối bài hướng dẫn này, bạn sẽ trích dẫn như một chuyên gia!

Trích dẫn trong CSS là gì?

Trước khi chúng ta bắt đầu, hãy hiểu trích dẫn là gì trong CSS. Chúng không chỉ để nhấn mạnh lời nói hoặc trích dẫn nguồn; trong CSS, trích dẫn là một công cụ mạnh mẽ để tự động thêm dấu trích dẫn vào nội dung của bạn. Nó giống như có một robot nhỏ theo sau văn bản của bạn, thêm những dấu trích dẫn nhỏ xinh wherever bạn bảo nó!

Giá trị có thể sử dụng

Hãy bắt đầu với các giá trị khác nhau mà chúng ta có thể sử dụng với thuộc tính quotes. Dưới đây là bảng tóm tắt tiện lợi:

Giá trị	Mô tả
none	Không sử dụng trích dẫn
<chuỗi>	Chỉ định trích dẫn để sử dụng
initial	Đặt về giá trị mặc định
inherit	Kế thừa từ phần tử cha
auto	Trình duyệt quyết định dựa trên ngôn ngữ

Bây giờ, hãy phân tích từng giá trị một.

Áp dụng cho

Trước khi chúng ta đi sâu hơn, điều quan trọng cần lưu ý là thuộc tính quotes áp dụng cho tất cả các phần tử. Tuy nhiên, nó thường được sử dụng với các phần tử <q> và <blockquote>. Hãy nghĩ của nó như một loại gia vị phổ biến - bạn có thể thêm nó vào bất kỳ phần tử nào, nhưng nó sẽ ngon nhất với một số món ăn cụ thể!

Cú pháp

Cú pháp cơ bản để sử dụng trích dẫn rất đơn giản:

selector {
quotes: value;
}

Đơn giản phải không? Bây giờ, hãy xem xét từng giá trị chi tiết.

CSS quotes - Giá trị none

Khi bạn đặt quotes: none, bạn đang thực sự nói với CSS, "Không cần trích dẫn, xin đừng!" Điều này rất hữu ích khi bạn muốn取代默认的引号。让我们看一个例子：

q {
quotes: none;
}

<p> Cô ấy nói <q>Chào thế giới! </q> </p>

Trong trường hợp này, văn bản trong thẻ <q> sẽ không có bất kỳ dấu trích dẫn nào. Nó giống như thì thầm mà không thực sự giảm giọng!

CSS quotes - Giá trị <chuỗi>

Đây là nơi bắt đầu thú vị! Bạn có thể chỉ định chính xác các ký tự bạn muốn cho trích dẫn của mình. Cú pháp như sau:

selector {
quotes: "open-quote1" "close-quote1" "open-quote2" "close-quote2";
}

Hãy thử một ví dụ:

q {
quotes: "<<" ">>" "(" ")";
}

<p> Cô ấy喊道 <q>What a <q>wonderful</q> day!</q></p>

Điều này sẽ hiển thị như sau: She exclaimed <<What a (wonderful) day!>>

Đó có phải không? Nó giống như cho văn bản của bạn một cuộc đại变身!

CSS quotes - Giá trị initial

Giá trị initial đặt thuộc tính về giá trị mặc định. Nó giống như nhấn nút复位 trên trích dẫn của bạn. Đối với hầu hết các trình duyệt, điều này tương đương với:

q {
quotes: '"' '"' "'" "'";
}

Điều này cung cấp cho bạn dấu trích dẫn tiếng Anh tiêu chuẩn: dấu kép cho cấp độ ngoài, dấu đơn cho cấp độ trong.

CSS quotes - Giá trị auto

Giá trị auto giống như một trợ lý thông minh cho trích dẫn của bạn. Nó chọn dấu trích dẫn phù hợp dựa trên ngôn ngữ của tài liệu của bạn. Ví dụ:

:root {
quotes: auto;
}

Bây giờ, nếu HTML của bạn có lang="fr", nó có thể sử dụng «guillemets» cho văn bản tiếng Pháp. Nó giống như có một chuyên gia trích dẫn đa ngôn ngữ trong đội ngũ của bạn!

CSS quotes - Sử dụng :lang pseudo-class

Đây là nơi chúng ta có thể làm rất tinh tế. Pseudo-class :lang cho phép chúng ta chỉ định các trích dẫn khác nhau cho các ngôn ngữ khác nhau. Hãy xem xét điều này:

:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }

Điều này thiết lập các phong cách trích dẫn khác nhau cho tiếng Anh, tiếng Pháp và tiếng Đức. Nó giống như dạy website của bạn nói nhiều ngôn ngữ!

Kết hợp tất cả lại với nhau

Hãy tạo một ví dụ phức tạp hơn để xem tất cả những điều này hoạt động cùng nhau:

<p lang="en"> She said, <q> I love <q>CSS</q>! </q></p>
<p lang="fr"> Elle a dit, <q> J'adore <q>CSS</q> ! </q></p>
<p lang="de"> Sie sagte, <q> Ich liebe <q>CSS</q>! </q></p>

:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }

q::before { content: open-quote; }
q::after { content: close-quote; }

Điều này sẽ hiển thị mỗi câu với dấu trích dẫn phù hợp với ngôn ngữ. Nó giống như có một nhà thiết kế đa ngôn ngữ làm việc trên website của bạn!

Kết luận

Và thế là bạn đã có, các bạn! Chúng ta đã cùng nhau khám phá thế giới của trích dẫn CSS, từ đơn giản đến phức tạp. Nhớ rằng, trích dẫn không chỉ là về dấu câu; chúng là về việc thêm cá tính và bối cảnh văn hóa vào văn bản của bạn. Chúng là gia vị trong món ăn văn bản của bạn!

Trong khi bạn tiếp tục hành trình thiết kế web của mình, đừng quên thử nghiệm với trích dẫn. Thử các phong cách khác nhau, kết hợp ngôn ngữ, và xem điều gì hoạt động tốt nhất cho trang web của bạn. Ai biết được? Bạn có thể sẽ trích dẫn đến danh tiếng thiết kế web!

Chúc các bạn may mắn trong việc mã hóa, và mong rằng trích dẫn của bạn luôn chính xác!

Credits: Image by storyset