Sử dụng thuộc tính style trong HTML
Giới thiệu nội dung bài viết
Trong quá trình làm với lập trình web HTML, để giúp cho trang web trở nên bắt mắt, đẹp hơn. Lúc này, các lập trình viên sẽ sử dụng thuộc tính style để thêm màu sắc, font chữ và kích thước cho các thành phần web.
Bài viết dưới đây sẽ hướng dẫn cho các bạn biết được cách thực hiện cú pháp khai báo thuộc tính Style trong HTML, cách để thao tác với màu nền cho trang web, màu sắc và font chữ, thiết lập kích thước chữ cũng như cách để canh giữa cho chữ và đoạn văn bản.
1. Thuộc tính Style trong HTML
Chúng ta sử dụng thuộc tính style trong các thành phần web để thêm màu sắc, font chữ và kích thước cho các thành phần web giúp trang web trở nên đẹp hơn.
Ví dụ chúng ta sử dụng thuộc tính style trong thẻ p như sau. Ta sẽ thấy các chữ trong thẻ p sẽ được in màu xanh, đỏ
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
2. Cú pháp khai báo thuộc tính Style
1
<tagname style="property:value;">
- tagname : là tên các thành phần web có thể là thẻ p, div và các thẻ khác
- style : ta khai báo thuộc tính style sẽ được sử dụng trong thẻ HTML
- property và value : ta khai báo thuộc tính và giá trị cho thuộc tính đó. Ở ví dụ trên ta có <p style="color:red;"> nghĩa là ta khai báo màu sắc các chữ trong thẻ p sẽ có màu đỏ. Hoặc <p style=”font-size:50px > nghĩa là kích thước chữ sẽ là 15px.
3. Màu nền cho trang web
Chúng ta có thể chọn màu nền cho trang web bằng thuộc tính background-color như sau.
1
2
3
4
5
6
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
4. Màu sắc cho chữ
Chúng ta có thể thay đổi màu sắc cho chữ bằng cách sử dụng thuộc tính color như sau
1
2
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
5. Sử dụng font chữ
Để thiết lập font chữ ta sử dụng thuộc tính font-family như sau
1
2
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
6. Thiết lập kích thước font chữ
Chúng ta sử dụng thuộc tính font-size như sau
1
2
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
7. Canh giữa cho chữ và đoạn văn bản
Chúng ta sử dụng thuộc tính text-align để canh giữa cho văn bản
1
2
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
8. Kết luận
Chúng ta sử dụng thuộc tính style trong các thành phần của HTML nhằm trang trí cho website trở nên đẹp hơn. Chúng ta sử dụng background-color để tạo ra màu nền cho website và các phần tử web. Sử dụng color để tạo màu cho các chữ. Sử dụng font-family để thiết lập kiểu font. Sử dụng font-size để thiết lập kích thước nội dung trong website và text-align để canh giữa các đoạn văn bản.
9. Video Demo
10. Thực hành online và source code
Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm
Các khoá học lập trình MIỄN PHÍ tại đây
Comments
