| Định dạng văn bản bằng CSS |
 |
 |
 |
|
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> |
