[Học CSS] Bài 08: Định dạng văn bản trong CSS – phần 2

Trong bài này chúng ta tiếp tục với định dạng văn bản trong CSS, cụ thể ở đây chúng ta sẽ định dạng các kiểu hiển thị văn bản như: gạch chân, canh lề, in hoa,… sau đây là nội dung chi tiết.

Canh lề trong CSS

Để canh lề trong văn bản chúng ta sẽ sử dụng thuộc tính text-align và các giá trị của thuộc tính này bao gồm:

  • left: canh lề bên trái;
  • right: canh lề bên phải;
  • center:  canh chính giữa;
  • justify: canh đều hai bên;

Ví dụ mình canh lề văn bản bên phải như sau, các bạn chú ý cái đoạn text-align: right đó nhé ! có thể thay đổi bằng các giá trị ở trên để xem sự thay đổi.

<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề webiste</title>
        <style type="text/css">
            h1 {
            color: red;                                                                   
            }
            p {
            font-size: 16px;
            text-align: right;
            }
        </style>
    </head>
    <body>
        <h1> Tiêu đề bài viết </H1>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
        </p>
    </body>
</html>

Gạch chân văn bản trong CSS

Để gạch chân văn bản trong CSS chúng ta sử dụng thuộc tính text-decoration gọi là gạch chân cho dễ hiểu thôi chứ nó còn có các giá trị khác như:

  • overline: gạch trên
  • underline: gạch dưới
  • line-through: gạch ngang

Ví dụ để các bạn tham khảo đây, chỉ cần xem đoạn text-decoration: underline;:sau đó thay thế giá trị underline;: bằng các giá trị ở trên và bạn sẽ thấy sự khác biệt.

<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề webiste</title>
        <style type="text/css">
            h1 {
            color: red;                                                                   
            }
            p {
            font-size: 16px;
            text-align: right;
            text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <h1> Tiêu đề bài viết </H1>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
        </p>
    </body>
</html>

In hoa văn bản trong CSS

Để in hoa văn bản trong CSS thì chúng ta sử dụng thuộc tính text-transform, và nó có giá trị là normal và uppercase, để xem nó như thế nào thì bạn chèn thêm đoạn CSS này vào dưới đoạn  text-decoration: underline; bằng ví dụ ở trên nhé.

Oke, như vậy là chúng ta vừa tìm hiểu xong phần định dạng văn bản trong CSS rồi đó, nó cũng khá là đơn giản đúng không nào ? Trong những bài học sau nội dung sẽ khó hơn và phức tạp hơn, các bạn cố gắng theo dõi nhé !

Bài học trước đó và tiếp theo

1/5 - (1 vote)




Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
KHUYẾN MÃI Black Friday 2023: Ưu đãi Hosting, VPS lên đến 99%XEM CHI TIẾT
+