CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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:

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

tieng nhat JPG

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:

Xem demo RUN
<!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 open sẽ kết hợp được với những giá trị khác. Nếu filled 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ị:

Xem demo RUN
<!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:

Xem demo RUN
<!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.

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top