HTML Thuộc Tính Style

Thuộc tính style được sử dụng để áp dụng kiểu (style) hiển thị cho phần tử.

<h1 style="color: red;">Đây Là Một Đề Mục</h1>
<p style="color: green;">Đây là đoạn văn bản thứ nhất.</p>
<p style="color: yellow;">Đây là đoạn văn bản thứ hai.</p>

Chạy Thử

Thuộc Tính Style

Giống các thuộc tính khác của phần tử thì thuộc tính style cũng được đặt trong thẻ mở. Tuy nhiên thuộc tính style được viết với cú pháp hơi khác so với các thuộc tính khác:

<tag_name style="property: value;">...</tag_name>

Trong đó tag_name là tên thẻ ứng với phần tử và:

  • property (hay đặc tính CSS) là tên của kiểu hiển sẽ áp dụng cho phần tử, ví dụ như với tên đặc tính l color dùng để áp dụng màu sắc cho phần tử, tên đặc tính font-size dùng để áp dụng kích thước phông chữ...
  • value là giá trị của đặc tính tương ứng với tên của đặc tính đó.

Màu Chữ

Màu chữ của các phần tử HTML được hiển thị mặc định là màu đen. Để thiết lập các màu sắc khác cho phần nội dung là chữ viết của phần tử HTML chúng ta sử dụng đặc tính CSS là color với giá trị màu sắc tương ứng với màu bạn muốn sử dụng:

<h1 style="color: red;">Đây Là Một Đề Mục</h1>
<p style="color: green;">Đây là đoạn văn bản thứ nhất.</p>
<p style="color: yellow;">Đây là đoạn văn bản thứ hai.</p>

Chạy Thử

Màu Nền

Màu nền mặc định của các phần tử HTML là màu trắng. Để thiết lập các màu nền khác cho phần tử HTML chúng ta sử dụng đặc tính CSS là background-color:

<body style="background-color: orange;">
    <h1>Đây Là Một Đề Mục</h1>
    <p>Đây là đoạn văn bản.</p>
</body>

Chạy Thử

Phông Chữ

Để thiết lập phông chữ cho phần tử HTML chúng ta sử dụng đặc tính font-family:

<h1 style="font-family: verdana;">Đây Là Một Đề Mục</h1>
<p style="font-family: courier;">Đây là một đoạn văn bản...</p>

Chạy Thử

Cỡ Chữ

Để thiết lập cỡ chữ cho phần tử HTML chúng ta sử dụng đặc tính font-size:

<h1 style="font-size: 25px;">Đây Là Một Đề Mục</h1>
<p style="font-size: 13px;">Đây là một đoạn văn bản...</p>

Chạy Thử

Căn Chỉnh Chữ

Để căn chỉnh chữ viết trong phần tử HTML chúng ta sử dụng thuộc tính text-align:

<h1 style="text-align: center">Đây Là Một Đề Mục</h1>
<p style="text-align: right">Đây là một đoạn văn bản thứ nhất...</p>
<p style="text-align: left">Đây là một đoạn văn bản thứ hai...</p>

Chạy Thử

Kết Hợp Các Thuộc Tính

Chúng ta có thể kết hợp các thuộc tính lại với nhau trong cùng một thẻ mở của phần tử HTML:

<h1 style="color: red; font-size: 25px; text-align: center;">Đây Là Một Đề Mục</h1>
<p style="color: green; font-size: 13px; text-align: center;">Đây là một đoạn văn bản...</p>

Chạy Thử

HTML Frontend Thiết Kế Web
Thêm Bình Luận: