1. Thuộc tính Style
Định dạng một văn bản trong HTML, có thể được thực hiện với thuộc tính style.
Thuộc tính style trong HTML có cú pháp sau:
<tên thẻ style=”tên thuộc tính:giá trị;”>
Tên thuộc tính là tên thuộc tính CSS và giá trị là một giá trị CSS. Cái này sẽ nói rõ hơn trong Series bài viết về CSS của tôi.
1.1 Màu nền (background-color)
Thuộc tính background-color xác định màu nền cho một phần tử trong HTML.
Ví dụ: Thiết lập màu nền cho một trang với màu đỏ (red)
1.2 Màu văn bản (Color)
Thuộc tính color xác định màu (color) văn bản cho một phần tử HTML.
1.3 Phông chữ (font-family)
Thuộc tính font-family xác định phông chữ sẽ được sử dụng cho một phần tử HTML.
1.4 Cỡ chữ (font-size)
Thuộc tính font-size xác định cỡ chữ văn bản cho một phần tử HTML
1.5 Canh lề văn bản (text-align)
Thuộc tính text-align có các giá trị left, center, right và justify (trái, giữa, phải và canh đều 2 bên), được dùng như hình dưới
2. Tóm tắt bài viết
– Sử dụng thuộc tính Style cho kiểu dáng các phần tử HTML
– Sử dụng background-color cho màu nền
– Sử dụng color cho màu chữ
– Sử dụng font-family cho phông chữ văn bản
– Sử dụng font-size cho cỡ chữ
– Sử dụng text-align để căn chỉnh văn bản
3. Các bài tập
3.1 Bài tập 1
Thay đổi màu đoạn văn dưới đến màu xanh (blue)
<!DOCTYPE html> <html> <body> <p style="color:red">Đây là một đoạn văn bản.</p> </body> </html>
Gợi ý của bài tập 1
Gợi ý: Thay đổi thuộc tính Style
Câu trả lời của bài tập 1
<!DOCTYPE html> <html> <body> <p style="color:blue">Đây là một đoạn văn bản.</p> </body> </html>
3.2 Bài tập 2
Thay đổi phông chữ đoạn văn dưới thành phông “courier”
<!DOCTYPE html> <html> <body> <p>Đây là một đoạn văn bản.</p> </body> </html>
Gợi ý của bài tập 2
Gợi ý: Thêm thuộc tính style và sử dụng thuộc tính font-family.
Câu trả lời của bài tập 2
<!DOCTYPE html> <html> <body> <p style="font-family:courier">Đây là một đoạn văn bản.</p> </body> </html>
3.3 Bài tập 3
Chỉnh đoạn văn dưới đây nằm ở giữa.
<!DOCTYPE html> <html> <body> <p>Đây là một đoạn văn bản.</p> </body> </html>
Gợi ý của bài tập 3
Gợi ý: Thêm thuộc tính style và sử dụng thuộc tính text-align.
Câu trả lời của bài tập 3
<!DOCTYPE html> <html> <body> <p style="text-align:center">Đây là một đoạn văn bản.</p> </body> </html>
3.4 Bài tập 4
Thay đổi cỡ chữ văn bản dưới đây đến 50px.
<!DOCTYPE html> <html> <body> <p>Đây là một đoạn văn bản.</p> </body> </html>
Gợi ý của bài tập 4
Gợi ý: Thêm thuộc tính style và sử dụng thuộc tính font-size.
Câu trả lời của bài tập 4
<!DOCTYPE html> <html> <body> <p style="font-size:50px">Đây là một đoạn văn bản.</p> </body> </html>
3.5 Bài tập 5
Thay đổi màu nền của trang dưới đây sang màu vàng(yellow).
<!DOCTYPE html> <html> <body> <h1>Đây là tiêu đề</h1> <p>Đây là một đoạn văn bản.</p> </body> </html>
Gợi ý của bài tập 5
Gợi ý: Thêm thuộc tính style vào <body> và sử dụng thuộc tính background-color.
Câu trả lời của bài tập 5
<!DOCTYPE html> <html> <body style="background-color:yellow"> <h1>Đây là tiêu đề</h1> <p>Đây là một đoạn văn bản.</p> </body> </html>
3.6 Bài tập 6
Căn giữa tất cả nội dung trên trang.
<!DOCTYPE html> <html> <body> <h1>Đây là tiêu đề lớn</h1> <h2>Đây là tiêu đề khác</h2> <p>Đây là một đoạn văn bản.</p> <p>Đây là một đoạn văn bản khác.</p> </body> </html>
Gợi ý của bài tập 6
Gợi ý: Thêm thuộc tính style vào <body> và sử dụng thuộc tính text-align.
Câu trả lời của bài tập 6
<!DOCTYPE html> <html> <body style="text-align:center"> <h1>Đây là tiêu đề lớn</h1> <h2>Đây là tiêu đề khác</h2> <p>Đây là một đoạn văn bản.</p> <p>Đây là một đoạn văn bản khác.</p> </body> </html>
4. Lời cuối bài
Bài viết này nhằm giúp các bạn biết thêm về định dạng văn bản với thuộc tính Style trong HTML. Bài viết sau chúng ta sẽ cùng tìm hiểu về các thẻ định dạng văn bản trong HTML.
The post [HTML bài 10] Định dạng văn bản với thuộc tính Style appeared first on Học online.
from WordPress http://ift.tt/2wzmsII
via IFTTT
Không có nhận xét nào:
Đăng nhận xét