Cách sử dụng các thuộc tính HTML

Các thuộc tính HTML được dùng để thay đổi màu sắc, kích thước và các tính năng khác của các phần tử HTML. Ví dụ: bạn có thể sử dụng một thuộc tính để thay đổi màu sắc hoặc kích thước của phông chữ cho phần tử văn bản hoặc chiều rộng và chiều cao cho phần tử hình ảnh. Trong hướng dẫn này, ta sẽ học cách sử dụng các thuộc tính HTML để đặt giá trị cho các thuộc tính kích thước và màu sắc của các phần tử văn bản HTML.

Thuộc tính HTML được đặt trong thẻ mở như sau:

<element attribute="property:value;">

Một thuộc tính phổ biến là style , cho phép bạn thêm các thuộc tính style vào một phần tử HTML. Mặc dù việc sử dụng một biểu định kiểu riêng để xác định kiểu của trang HTML phổ biến hơn, nhưng ta sẽ sử dụng thuộc tính style trong trang HTML cho hướng dẫn này.

Sử dụng thuộc tính kiểu

Ta có thể thay đổi nhiều thuộc tính của phần tử <h1> bằng thuộc tính style. Xóa file “index.html” của bạn và dán mã bên dưới vào trình duyệt của bạn. (Nếu bạn chưa theo dõi loạt bài hướng dẫn, bạn có thể xem lại hướng dẫn cài đặt index.html trong hướng dẫn Cài đặt Dự án HTML của bạn của ta .

<h1 style="font-size:40px;color:green;">This text is 40 pixels and green.</h1>

Trước khi ta tải file trong trình duyệt của bạn , hãy xem xét từng phần của phần tử HTML này:

• h1 là tên của thẻ. Nó đề cập đến phần tử Tiêu đề có kích thước lớn nhất.
• style là thuộc tính. Thuộc tính này có thể có nhiều thuộc tính khác nhau.
• font-size là thuộc tính đầu tiên ta đặt cho thuộc tính style .
• 40px; là giá trị cho font-size , đặt nội dung văn bản của phần tử thành 40 pixel.
• color là thuộc tính thứ hai mà ta đang đặt cho thuộc tính style .
• green là giá trị của color thuộc tính, đặt màu nội dung văn bản thành màu xanh lục

Lưu ý các thuộc tính và giá trị được chứa trong dấu ngoặc kép và mỗi cặp thuộc property:value kết thúc bằng dấu chấm phẩy ; .

Lưu file và reload trong trình duyệt của bạn. (Để biết hướng dẫn về cách tải file trong trình duyệt của bạn, hãy xem hướng dẫn tại đây .) Bạn sẽ nhận được thông tin như sau:

Văn bản này là 40 pixel và màu xanh lá cây.

Đến đây bạn đã học cách sử dụng thuộc tính style để thay đổi kích thước phông chữ và màu phông chữ của phần tử văn bản. Lưu ý một số phần tử nhất định yêu cầu thuộc tính, chẳng hạn như phần tử <a> cho phép bạn thêm liên kết vào văn bản hoặc hình ảnh và phần tử <img> , cho phép bạn thêm hình ảnh vào tài liệu. Ta sẽ đề cập đến hai yếu tố đó trong các hướng dẫn tiếp theo và tìm hiểu về cách sử dụng thuộc tính bổ sung cho containers <div> và các phần tử HTML khác trong loạt bài hướng dẫn sau.

Các tin liên quan