Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng CSS3 Emphasis Marks
Các bạn thân mến, chúng ta lại gặp nhau. Hôm nay, freetuts 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.
Bài viết này được đăng tại [free tuts .net]
Để 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, freetuts hẹn gặp lại trong các bài viết tiếp theo.
