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ênunderline: gạch dướiline-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
![[Học CSS] Bài 12: Làm việc với margin trong CSS](https://hocban.vn/wp-content/uploads/2017/05/Hoc-CSS-211x150.jpg "[Học Css] Bài 12: Làm Việc Với Margin Trong Css")
