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

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í web site 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ư Occasions New Roman cần được đặt trong dấu ngoặc kép.
• font-style: Model của font Cấu trúc: font-style: worth; Thuộc tính này có three giá trị là regular (bình thường), italic (in nghiêng), indirect (xiên chéo)
• font-weight: Độ đậm font: Cấu trúc: font-weight: worth; Thuộc tính này có các giá trị: regular (thường) + daring (đậm) hoặc 100, 200, …900 để thể hiện mức độ đậm nhạt
• font-variant: Cấu trúc: font-variant: worth; Các giá trị: + regular (thường – mặc định) + small-caps (in hoa nhỏ)
• font-size : Kích cỡ font Cấu trúc: font-size: worth; 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: worth; Giá trị có thể là tên (purple, inexperienced, 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: worth; 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: worth; Các giá trị: scroll: Ảnh nền sẽ cuộn cùng nội dung trang net, đây là giá trị mặc định. mounted: Cố định ảnh nền so với nội dung trang net. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang net.
• 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 backside; : Ả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:clear; background-image: url(emblem.png); background-repeat: no-repeat; background-attachment: mounted; background-position: proper backside; }

  thành một dòng ngắn gọn: #selector {background:clear url(emblem.png) no-repeat mounted proper backside;} 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 Textual content (văn bản)

• coloration: Màu chữ Cấu trúc:coloration: worth; Ví dụ: p { coloration: #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: worth; Ví dụ: p {text-indent: 30px;}
• text-align: Căn lề chữ: Cấu trúc: text-align: worth; Các giá trị: left : căn trái, proper : căn phải, middle : 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: worth; 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: worth; Các giá trị: uppercase : in hoa, lowercase: in thường, capitalize : in hoa ký tự đầu
• peak / width : Kích thước Cấu trúc: peak: worth; width: worth; Ví dụ: div { peak: 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: worth;
• border-color: Màu viền Cấu trúc: border-color: worth;
• border-style : Kiểu viền: Cấu trúc: border-style: worth; Các giá trị phổ biến: stable : 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 stable #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: worth; Trong đó worth là giá trị four 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 material 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: worth; Trong đó worth là giá trị four 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