You are on page 1of 6

1 color

Trong CSS, một màu có thể được chỉ định bằng cách sử dụng tên màu được xác định
trước. CSS/HTML hỗ trợ 140 màu cơ bản
Màu văn bản CSS : Bạn có thể đặt màu của văn bản.
VD: <h1 style="color:red;">Hello World</h1>
 Hello World

Màu viền CSS : Bạn có thể đặt màu của đường viền:
VD: <h1 style="border:2px solid Tomato;">Hello World</h1>

Giá trị màu CSS: Trong CSS, màu sắc cũng có thể được chỉ định bằng các giá trị
RGB, giá trị HEX, giá trị HSL, giá trị RGBA và giá trị HSLA:
VD: Tương tự như tên màu "Tomato":

2 font-size
Thuộc tính front-size dùng để đặt kích thước của văn bản
Giá trị kích thước phông chữ có thể là kích thước tuyệt đối hoặc tương đối
Đặt kích thước văn bản bằng pixel cung cấp cho bạn quyền kiểm soát kích thước văn
bản:

VD:

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

3 background-color
Là một trong những thuộc tình phổ biến của css và nó được sử dụng để xác định màu
nền cho một phần tử trong trang web
Giá trụ của color có thể được xác định bằng tên màu, mã màu hex hoặc giá trị RGB
VD:
background-color: <red> ; tên màu
background-color: <#ff0000> ; mã hex
background-color: <rgb(255,0,0)> ; mã RGB

4 border
Thuộc tính border-style chỉ định loại đường viền sẽ hiển thị

Các giá trị sau đây được cho phép:

 dotted- Xác định một đường viền chấm


 dashed- Xác định đường viền nét đứt
 solid- Xác định một đường viền vững chắc
 double- Xác định đường viền kép
 groove- Xác định đường viền có rãnh 3D. Hiệu ứng phụ thuộc vào giá trị màu
viền
 ridge- Xác định đường viền có gờ 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
 inset- Xác định đường viền chèn 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
 outset- Xác định đường viền đầu 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
 none- Xác định không có biên giới
 hidden- Xác định một đường viền ẩn

thuộc tính border-style có thể có từ một đến bốn giá trị(đối với đường viền trên cùng,
đường viền bên phải, đường viền dưới cùng và đường viền bên trái).

Hiển thị
5 margin

Thuộc tính margin dùng để tạo không gian xung quanh cho các phần tử, bên ngoài bất kì
đường viền đã xác định

Vd

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}
Rút ngắn
p {
  margin: 25px 50px 75px 100px;
}

6 padding
Thuộc tính padding được sử dụng để tạo không gian xung quanh phần nội dung của 1
phần tử, bên trong bất kỳ đường viền đã xác định nào đó
Vd
div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
rút ngắn
div {
  padding: 25px 50px 75px 100px;
}
7 text-align
Thuộc tính text-align sắp xếp các nội dung theo chiều ngang

Vd

8 display
Thuộc tính display trong CSS cho phép chúng ta xác định kiểu hiển thị của các thẻ HTML
trên website
+ display block : thuộc tính này có tác dụng xác định thành phần hiển thị theo các hàng
độc lập
+ display inline : thuộc tính này có tác dụng xác định thành phần được hiển thị theo
chiều ngang
+ display inline-block : thuộc tính này có tác dụng xác định thành phần sẽ được hiển thị
theo khối nhưng là các khối inline
Ngoài ra còn một số các giá trị khác của display :

Thuộc tính Mô tả

display: table-caption -Xác định như một thẻ <caption> trong table.

display: table-column-group -Xác định như thẻ <colgroup> trong table.

display: table-header-group -Xác định như thẻ <thead> trong table.

display: table-footer-group -Xác định như thẻ <tfoot> trong table.

display: table-row-group -Xác định như thẻ <tbody> trong table.

display: table-cell -Xác định như thẻ <td> trong table.

display: table-column -Xác định như thẻ <col> trong table.

display: table-row -Xác định như thẻ <tr> trong table.

9 Height và width

Đây là thuộc tính chiều cao và chiều rộng được sử dụng để đặt chiều cao và chiều rộng
của 1 phần tử

Thuộc tính của Height và width không bao gồm padding, border, margin

Giá trị Height và width:

+ auto: Mặc định.


+length: Xác định Height / Width bằng px, cm, v.v.
+%: Xác định Height / Width theo phần trăm của khối chứa nó.
+initial: Đặt Height / Width thành giá trị mặc định của nó.
+inherit: Height / Width sẽ được kế thừa từ giá trị cha của nó.
Vd
Thiết lập chiều rộng và cao lớn nhất và nhỏ nhất của phần tử:
+max-height: thiết lập chiều cao tối đa của 1 phần tử.
+min-height: thiết lập chiều cao tối thiểu của 1 phần tử.
+max-width: thiết lập chiều rộng tối đa của 1 phần tử.
+min-width: thiết lập chiều rộng tối thiểu của 1 phần tử.
Vd

You might also like