Cách sử dụng thuộc tính style, thuộc tính style là gì, định dạng cho phần tử HTML bằng style, Thuộc tính Style trong HTML

Cách sử dụng thuộc tính style, thuộc tính style là gì, định dạng cho phần tử HTML bằng style, Thuộc tính Style trong HTML

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 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 width 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://webcoban.vn/public/home/img_demo/h2.jpg" width="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,....)

Ví dụ

Giá trị của thuộc tính style của thẻ <img> là hai cặp thuộc tính: width:200px và height:100px


<img src="http://webcoban.vn/public/home/img_demo/h2.jpg" style="width: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:

  • 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),....)
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.
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)
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
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)
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.
width, 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 %

Thuộc tính Style trong HTML

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi