18/08/2018, 10:36

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.

Ví dụ

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">
Xem ví dụ

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,....)

Ví dụ

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">
Xem ví dụ
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:

  • Tên màu (Ví dụ: green, blue, red, yellow, pink, black, white,....)
  • Giá trị Hex (Ví dụ: #00FF00, #99FF66, #66CC99,....)
  • Giá trị RGB (Ví dụ: rgb(255,0,0), rgb(120,0,150),....)
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:

  • px
  • em (1em = 16px)
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:

  • Times New Roman
  • Book Antiqua
  • Arial Black
  • Lucida Sans Unicode
  • Palatino Linotype
  • Georgia
  • Lucida Console
  • Arial
  • Tahoma
  • Impact
  • Verdana
  • monospace
  • Courier
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ị:

  • left (canh cho nội dung nằm bên trái)
  • center (canh cho nội dung nằm ở giữa)
  • right (canh cho nội dung nằm bên phải)
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ố:

  • Tham số thứ nhất là độ dày của đường viền
  • Tham số thứ hai là kiểu đường viền (Có một số kiểu như: groove, ridge, inset, outset, none, hidden, dotted, dashed, solid, double,....)
  • Tham số thứ ba là màu của đường viền.
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ụ
0