Hướng dẫn định dạng văn bản bằng CSS pptx

Hướng dẫn định dạng văn bản bằng CSS Có nhiều cách để tạo định dạng cho văn bản của tài liệu HTML.. Bài viết này sẽ giúp các bạn tạo định dạng cho văn bản của mình.. Để tạo màu bạn dùng

Hướng dẫn định dạng văn bản bằng CSS

Có nhiều cách để tạo định dạng cho văn bản của tài liệu HTML Trong

đó định dạng bằng CSS là cách được các Lập Trình Viên thường xuyên dùng nhất

Bài viết này sẽ giúp các bạn tạo định dạng cho văn bản của mình

Tạo màu cho văn bản

Để tạo màu bạn dùng đến thuộc tính color:màu;

Cú pháp như sau:

Ví dụ 1

p{

background:#FFFFFF;

color:#FF0000;

}

Đoạn code trên định dạng cho toàn bộ khối văn bản nằm trong thẻ

<p></p>

Dòng 1 tạo màu nền là màu trắng

Dòng 2 tạo màu chữ là màu đỏ

Khoảng cách giữa các ký tự trong một đoạn văn bản

Bạn có thể tăng hoặc giảm khoảng cách mặc định của các ký tự trong

đoạn văn bằng cách sử dụng thuộc tính: letter-spacing: giá trị;

Thuộc tính này có tác dụng định dạng lại khoảng cách của các ký tự trong tài liệu HTML của bạn Giá trị bạn truyền vào chính là khoảng cách giữa các ký tự

Cú pháp như sau:

Ví dụ 2:

h1 {

letter-spacing: 2px;

}

h2 {

letter-spacing: 4px;

}

Căn chỉnh khoảng cách giữa các dòng

Thuộc tính line-height: khoảng cách; sẽ giúp bạn căn chỉnh khoảng

cách giữa các dòng trong một đoạn văn bản Giá trị bạn truyền vào chính

là khoảng cách giữa các dòng mà tài liệu HTML sẽ dùng

Cú pháp như sau:

Ví dụ 3:

h2{

line-height: 120%;

}

Gạch chân cho văn bản

Trong một số trường hợp bạn muốn tăng sự chú ý của một đoạn văn bản

nào đó Lúc này bạn cần đến thuộc tính text-decoration: của CSS

Thuộc tính text-decoration: có tác dụng tạo ra gạch chân, gạch ngang,

gạch trên cho tài liệu HTML

Thuộc tính này nhận vào 6 giá trị:

Cú pháp như sau:

Ví dụ 4:

Đoạn code sau tạo gạch chân cho đoạn text nằm trong thẻ div có id =

"test"

<style>

#test { text-decoration: underline; }

</style>

<div id="test">Chữ gạch dưới.</div>

Đoạn code này tạo gạch trên cho văn bản nằm trong thẻ Div

<style>

#test2 { text-decoration: overline; }

</style>

<div id="test2">Chữ gạch trên</div>

{xtypo_code}

{xtypo_code}

Đoạn code này tạo gạch giữa cho văn bản

<style>

#test3 { text-decoration: line-through; }

</style>

<div id="test3">Chữ gạch giữa</div>

Đoạn code này làm cho văn bản nhấp nháy Có tác dụng trên Firefox

<style>

#test4 { text-decoration: blink; }

</style>

<div id="test4">Chữ nhấp nháy.</div>