CSS3 Emphasis Marks - Học CSS3 căn bản & nâng cao
Các bạn thân mến, chúng ta lại gặp nhau. Hôm nay, Zaidap.com xin gửi đến các bạn chủ đề về "Emphasis Marks" trong CSS. Đối với trình nâng cao thì đây cũng là một chủ đề thú vị. Nào chúng ta hãy bắt đầu tìm hiểu nhé. 1. Giới thiệu Emphasis marks trong CSS Trước khi bạn học một kiến thức gì, thì ...
Các bạn thân mến, chúng ta lại gặp nhau. Hôm nay, Zaidap.com xin gửi đến các bạn chủ đề về "Emphasis Marks" trong CSS. Đối với trình nâng cao thì đây cũng là một chủ đề thú vị. Nào chúng ta hãy bắt đầu tìm hiểu nhé.
1. Giới thiệu Emphasis marks trong CSS
Trước khi bạn học một kiến thức gì, thì cũng nên tìm hiểu lịch sử hình thành của nó. Một khi đã nắm bắt được hoàn cảnh ra đời, bạn sẽ hiểu rõ được tại sao lại phải dùng và dùng trong hoàn cảnh nào. Các bạn hãy xem hình bên dưới:
Trong các trang web giảng dạy về ngoại ngữ, đặc biệt đối với các ngôn ngữ có thanh âm hoặc tượng hình, ta cần những ký hiệu để biểu hiện tính cao, tính trầm của các âm tiết. Chính vì vậy mà khái niệm "Emphasis Marks" ra đời.
Các nhà biên soạn CSS nhận ra rằng, tầm ảnh hưởng của người châu Á và đặc biệt là người Á Đông chúng ta, nơi mà dân số chiếm phần lớn trên thế giới. Do đó, việc hỗ trợ thanh âm này là việc rất cần thiết.
Để tạo nên những ký hiệu trên, ta dùng thuộc tính text-emphasis. Xem ví dụ bên dưới:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Emphasis Marks</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
span {
text-emphasis: double-circle filled;
text-emphasis-color: blue;
}
</style>
</head>
<body>
<div>
<p>W<span>o</span>rld W<span>ide</span> Web</p>
</div>
</body>
</html>2. Các thuộc tính của Emphasis marks
Để cấu hình cho Emphasis marks, thì ta dùng hai thuộc tính sau:
text-emphasis-style
- none: không cấu hình emphasis marks.
- filled: tô đầy màu cho ký hiệu.
- open: chỉ tô đường viền ký hiệu.
- dot: ký hiệu vòng tròn nhỏ.
- circle: ký hiệu vòng tròn lớn.
- double-circle: ký hiệu vòng tròn lớn và nhỏ kết hợp.
- triangle: ký hiệu hình tam giác.
- sesame: ký hiệu như dấu huyền nhưng nét đậm.
- <string>: bất cứ ký tự hoặc chữ cái nào, lưu ý không được nhiều hơn quá 1 ký tự.
Chú ý rằng filled và open sẽ kết hợp được với những giá trị khác. Nếu filled và open không được chỉ định thì filled sẽ là giá trị mặc định.
text-emphasis-color
Thuộc tính này chỉ việc cho màu sắc của các emphasis theo bảng màu có sẵn của CSS.
Xem ví dụ về các giá trị:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Emphasis Marks</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
text-align: center;
border: 1px solid royalblue;
}
span {
text-emphasis-color: blue;
}
.filled span {
text-emphasis-style: filled;
}
.open span {
text-emphasis-style: open;
}
.dot span {
text-emphasis-style: dot;
}
.circle span {
text-emphasis-style: circle;
}
.double-circle span {
text-emphasis-style: double-circle;
}
.triangle span {
text-emphasis-style: triangle;
}
.sesame span {
text-emphasis-style: sesame;
}
.string span {
text-emphasis-style: '$';
}
</style>
</head>
<body>
<div class="filled">
<p>filled</p>
<p>W<span>o</span>rld W<span>ide</span> Web</p>
</div>
<div class="open">
<p>open</p>
<p>W<span>o</span>rld W<span>ide</span> Web</p>
</div>
<div class="dot">
<p>dot</p>
<p>W<span>o</span>rld W<span>ide</span> Web</p>
</div>
<div class="circle">
<p>circle</p>
<p>W<span>o</span>rld W<span>ide</span> Web</p>
</div>
<div class="double-circle">
<p>double-circle</p>
<p>W<span>o</span>rld W<span>ide</span> Web</p>
</div>
<div class="triangle">
<p>triangle</p>
<p>W<span>o</span>rld W<span>ide</span> Web</p>
</div>
<div class="sesame">
<p>sesame</p>
<p>W<span>o</span>rld W<span>ide</span> Web</p>
</div>
<div class="string">
<p>string</p>
<p>W<span>o</span>rld W<span>ide</span> Web</p>
</div>
</body>
</html>Ngoài ra, các bạn còn có thể biển diễn dưới dạng vắn tắt thông qua thuộc tính text-emphasis . Cấu trúc như bên dưới:
{
text-emphasis: <‘text-emphasis-style’> || <‘text-emphasis-color’>
}Còn đây là ví dụ trong mô tả vắn tắt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Emphasis Marks</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
text-align: center;
border: 1px solid royalblue;
}
span {
text-emphasis:open triangle red;
}
</style>
</head>
<body>
<div>
<p>Short description</p>
<p>W<span>o</span>rld W<span>ide</span> Web</p>
</div>
</body>
</html>3. Lời kết
Qua bài viết này, các bạn đã học được cách tạo Emphasis marks. Trong tương lai, nếu các bạn mở một trang web dạy ngoại ngữ thì những điều học hôm nay sẽ rất hữu ít. Bởi cách biểu diễn này giúp cho học viên tiếp thu nhanh hơn với bài học đặc biết là phần phát âm điều mà rất quan trọng trong việc học ngoại ngữ.
Cảm ơn các bạn, Zaidap.com hẹn gặp lại trong các bài viết tiếp theo.
Chuyên đề học lập trình web: Học phần HTML / CSS
Đây là chương thứ nhất trong chuyên đề tự học lập trình web với PHP. Trong chương này chúng ta sẽ học HTML và CSS trước.
Các bạn hãy sub kênh để ủng hộ mình nhé. Link chuyên đê tại đây.
