Thuộc tính Style trong HTML
Nhắc lại khái niệm THUỘC TÍNH Thuộc tính (Attributes) dùng để thiết lập thêm thông số cho phần tử HTML. Thuộc tính được đặt bên trong thẻ mở của phần tử dưới dạng cặp thuộc tính="giá trị thuộc tính" Một phần tử có thể có nhiều thuộc tính. Ví dụ Phần tử <img> bên dưới ...
Nhắc lại khái niệm THUỘC TÍNH
Thuộc tính (Attributes) dùng để thiết lập thêm thông số cho phần tử HTML.
Thuộc tính được đặt bên trong thẻ mở của phần tử dưới dạng cặp thuộc tính="giá trị thuộc tính"
Một phần tử có thể có nhiều thuộc tính.
Phần tử <img> bên dưới có ba thuộc tính:
- Thuộc tính src dùng để thiết lập thông số là đường dẫn đến tập tin hình ảnh mà bạn muốn hiển thị
- Thuộc tính awidth dùng để thiết lập thông số chiều rộng mà tấm hình sẽ hiển thị là 200 pixel
- Thuộc tính height dùng để thiết lập thông số chiều cao mà tấm hình sẽ hiển thị là 100 pixel
<img src="http://code24h.com/public/home/img_demo/h2.jpg" awidth="200px" height="100px">
Thuộc tính style
Thuộc tính style là một loại thuộc tính đặc biệt. Giá trị của nó là một hoặc nhiều cặp thuộc tính:giá trị thuộc tính
Thông thường, giá trị của thuộc tính style là các thuộc tính định dạng (Ví dụ: màu sắc, font chữ, màu nền, kích thước,....)
Giá trị của thuộc tính style của thẻ <img> là hai cặp thuộc tính: awidth:200px và height:100px
<img src="http://code24h.com/public/home/img_demo/h2.jpg" style="awidth:200px;height:100px">
Giữa các cặp thuộc tính phải được ngăn cách bởi dấu chấm phẩy (;)
|
Một số thuộc tính style quan trọng
Thuộc tính | Ý nghĩa | Xem ví dụ |
---|---|---|
color |
Thiết lập màu chữ cho phần tử. Giá trị của thuộc tính color có thể xác định theo:
|
Xem ví dụ
|
background-color | Thiết lập màu nền cho phần tử. Giá trị của thuộc tính background-color có thể xác định theo tên màu, giá trị Hex, giá trị RGB giống như thuộc tính color. |
Xem ví dụ
|
font-size |
Thiết lập kích cỡ chữ cho phần tử. Giá trị của thuộc tính font-size có thể xác định theo:
|
Xem ví dụ
|
font-family |
Thiết lập kiểu chữ cho phần tử. Dưới đây là một số kiểu chữ phổ biến:
|
Xem ví dụ
|
text-align |
Canh lề cho nội dung của phần tử. Thuộc tính text-align có ba giá trị:
|
Xem ví dụ
|
border |
Tạo đường viền bao xung quanh phần tử. Giá trị của thuộc tính border có 3 tham số:
|
Xem ví dụ
|
awidth, height | Thiết lập chiều rộng và chiều cao cho phần tử. Có thể xác định theo đơn vị px hoặc % |
Xem ví dụ
|