[CSS 03] Các thuộc tính CSS thông dụng nhất

Hôm nay chúng ta sẽ làm quen với các thuộc tính CSS thông dụng nhất mà hầu như các bạn sẽ phải đối mặt để có thể trang trí website theo ý muốn.

Thuộc tính CSS Font (font chữ)

• font-family: font chữ.
  Cấu trúc: font-family: font-name1, font-name2; Ví dụ font-family: tahoma, arial, “Time New Roman”, sans-serif;
  Trình duyệt sẽ tự đọc các font và nó sẽ hiển thị font nó có theo độ ưu tiên viết trước là ưu tiên cao nhất. Chú ý: Đối với các font có khoảng trắng trong tên như Times New Roman cần được đặt trong dấu ngoặc kép.
• font-style: Style của font
  Cấu trúc: font-style: value;
  Thuộc tính này có 3 giá trị là normal (bình thường), italic (in nghiêng), oblique (xiên chéo)
• font-weight: Độ đậm font:
  Cấu trúc: font-weight: value;
  Thuộc tính này có các giá trị:  normal (thường) + bold (đậm) hoặc 100, 200, …900 để thể hiện mức độ đậm nhạt
• font-variant: 
  Cấu trúc: font-variant: value;
  Các giá trị: + normal (thường – mặc định) + small-caps (in hoa nhỏ)
• font-size : Kích cỡ font
  Cấu trúc: font-size: value; Ví dụ: font-size:24px; font-size: 2em;

Thuộc tính CSS cho Background (nền)

• background-color: Màu nền
  Cấu trúc: background-color: value;
  Giá trị có thể là tên (red, green, blue…) hoặc theo mã màu RGB (#333333, #421333…) Chi tiết về màu sắc có thể tham khảo tại đây
• background-image: Ảnh nền
  Cấu trúc: background-image: url;
  Ví dụ:
• background-repeat: Lặp ảnh nền
  Cấu trúc: background-repeat: value;
  Các giá trị:  repeat-x: Chỉ lặp lại ảnh theo phương ngang.  repeat-y: Chỉ lặp lại ảnh theo phương dọc.  repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.  no-repeat: Không lặp lại ảnh.
• background-attachment : Khóa ảnh nền
  Cấu trúc: background-attachment: value;
  Các giá trị: scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định. fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web.
• background-position: định vị ảnh nền
  Cấu trúc: background-position: value_left value_top; Trong đó Value_left là vị trí so với lề trái Value_top là vị trí so với lề trên
  Ví dụ: background-position:5cm 2cm; : Ảnh được định vị 5cm từ trái qua và 2cm từ trên xuống. background-position: 20% 30% ; :Ảnh được định vị 20% từ trái qua và 30% từ trên xuống. Background-position: left bottom; : Ảnh được định vị ở góc trái phía dưới
• Khai báo đồng loạt thuộc tính background:
  Chúng ta có thể nhóm lại đoạn CSS sau:

  #selector {
  background-color:transparent;
  background-image: url(logo.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right bottom;
  }

  thành một dòng ngắn gọn: #selector {background:transparent url(logo.png) no-repeat fixed right bottom;} Từ ví dụ trên chúng ta có thể khái quát cấu trúc rút gọn cho nhóm background: background: | | | | Các thuộc tính không được đề cập sẽ nhận các giá trị mặc định.

Thuộc tính CSS cho Text (văn bản)

• color: Màu chữ
  Cấu trúc:color: value; Ví dụ: p { color: #5656463; }
• text-indent : khoảng thụt đầu dòng cho dòng đầu tiên trong đoạn văn bản
  Cấu trúc: text-indent: value;
  Ví dụ: p {text-indent: 30px;}
• text-align: Căn lề chữ:
  Cấu trúc: text-align: value;
  Các giá trị:  left : căn trái, right : căn phải, center : căn giữa, justify : căn đều 2 bên
• text-decoration: hiệu ứng cho văn bản
  Cấu trúc: text-decoration: value;
  Các giá trị: underline : gạch chân line-through : gạch xiên, overline : gạch đầu, blink : chữ nháy, none : không hiệu ứng.
• text-transform: Các chế độ viết hoa
  Cấu trúc: text-transform: value;
  Các giá trị: uppercase : in hoa, lowercase: in thường, capitalize : in hoa ký tự đầu
• height / width : Kích thước
  Cấu trúc: height: value; width: value; Ví dụ: div { height: 30px; width: 50px; }
  Ngoài ra còn có các thuộc tính: max-height chiều cao tối đa  min-height: chiều cao tối thiểu, max-width:chiều rộng tối đa, min-width: chiều rộng tối thiểu

Thuộc tính CSS Border (viền)

• border-width: Độ rộng viền:
  Cấu trúc: Border-width: value;
• border-color: Màu viền
  Cấu trúc: border-color: value;
• border-style : Kiểu viền:
  Cấu trúc: border-style: value;
  Các giá trị phổ biến: solid : kiểu viền liền, dotted: kiểu chấm chấm, dashed: kiểu gạch gạch, double: kiểu viền liền đôi…
  Ví dụ rút gọn:
  div { border: 1px solid #fafafa; }

Thuộc tính CSS Margin

Margin là thuộc tính để căn lề đối tượng với thành phần chứa nó
Cấu trúc: margin: value_1 value_2; Trong đó value_1 là cách trên – dưới. Value_2 là cách trái – phải
hoặc: margin: value; Trong đó value là giá trị 4 chiều, giá trị sẽ ưu tiên cho phía trên và trái nếu bị xung đột về kích thước

Ngoài ra còn có các thuộc tính: margin-top, margin-right, margin-bottom, margin-left

Để phân biệt các thuộc tính Margin. Padding và Boder có thể xem hình sau:

Thuộc tính CSS Padding

Padding là vùng đệm trong, toàn bộ content trong phần tử sẽ cách viền phần tử một khoảng mà giá trị padding định nghĩa
Các thành phần và cách gọi padding giống margin

Cấu trúc: padding: value_1 value_2; Trong đó value_1 là cách trên – dưới. Value_2 là cách trái – phải
hoặc: padding: value; Trong đó value là giá trị 4 chiều, giá trị sẽ ưu tiên cho phía trên và trái nếu bị xung đột về kích thước

Ngoài ra còn có các thuộc tính: padding-top, padding-right, padding-bottom, padding-left