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>
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 lcolor
dùng để áp dụng màu sắc cho phần tử, tên đặc tínhfont-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>
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>
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>
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>
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>
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>