ANHPHUONGIT.com

Bài 2. Các CSS cơ bản

---

1. Đơn vị trong css

Đơn vị	Miêu tả	Ví dụ
%	Đơn vị %, là đơn vị tham chiếu tỉ lệ so với một phần tử mẹ dựa vào kích thước. Ví dụ: bạn có một khung mẹ có kích thước là 400px và bạn muốn đặt một khung khác vào bên trong khung mẹ này. Tùy theo lựa chọn thì khung con này sẽ có nhiều kích thước, và tương ứng với kích thước khung mẹ thì bạn sẽ có tỉ lệ tương ứng. Ví dụ: nếu là 50% thì khung con có kích thước là 200px	p {font-size: 16pt; line-height: 125%;}
cm	Đơn vị centimet	div {margin-bottom: 2cm;}
em	Một đơn vị được sử dụng cho chiều cao của font. Một đơn vị em tương đương với kích cỡ của một font đã cho, nếu bạn gán kích cỡ của font là 12pt thì mỗi đơn vị em sẽ là 12pt, do đó 2em sẽ là 24pt	p {letter-spacing: 7em;}
ex	Đơn vị được sử dụng cho chiều cao của chữ cái x thường (hay là x-height)	p {font-size: 24pt; line-height: 3ex;}
in	Đơn vị inch (=2.54 cm)	p {word-spacing: .15in;}
mm	Đơn vị milimet	p {word-spacing: 15mm;}
pc	Đơn vị pica. Một pica = 12 point và do đó 1 inch = 6 pica	p {font-size: 20pc;}
pt	Đơn vị point. 1 inch = 72 point	body {font-size: 18pt;}
px	Đơn vị được sử dụng trên màn hình hiển thị, một px sẽ tương đương với một điểm ảnh trên màn hình. Chất lượng của điểm ảnh sẽ hoàn toàn khác nhau trên một số thiết bị, ví dụ như một điểm ảnh trên các thiết bị in ấn sẽ khác một điểm ảnh trên các thiết bị màn hình có độ phân giải thấp.	p {padding: 25p

 

2. Màu sắc

Cú pháp : color: <giá trị màu sắc>

Để xác định màu trong CSS, bạn có thể sử dụng một trong các cách sau:

Định dạng	Cú pháp	Ví dụ
Hex Code	#RRGGBB	p{color:#FF0000;}
Short Hex Code	#RGB	p{color:#6A7;}
RGB(dạng %)	rgb(rrr%,ggg%,bbb%)	p{color:rgb(50%,50%,50%);}
RGB (tuyệt đối)	rgb(rrr,ggg,bbb)	p{color:rgb(0,0,255);}
Tên màu	aqua, black, etc.	p{color:teal;}

3. Nền (Background )

• Thuộc tính background-color: thuộc tính này được sử dụng để thiết lập màu nền của một phần tử. 

• Thuộc tính background-image: thuộc tính này được sử dụng để thiết lập hình nền cho một phần tử.

• Thuộc tính background-repeat: thuộc tính này được sử dụng để điều khiển sự lặp đi lặp lại của một hình ảnh nền theo chiều dọc hoặc chiều ngang.

  • no-repeat: Không lặp lại

  • repeat: Lặp lại

• Thuộc tính background-position: thuộc tính này được sử dụng để điều khiển vị trí của một hình ảnh nền.

  • left top
    left center
    left bottom
    right top
    right center
    right bottom
    center top
    center center
    center bottom

• Thuộc tính background-attachment: thuộc tính này được sử dụng để xác định xem có hay không một hình nền là cố định hoặc có thể scroll với phần còn lại của trang.

  • fixed: Cố định không theo lăn chuột

• Thuộc tính background: sử dụng thuộc tính này nếu bạn muốn viết ít code hơn mà vẫn xác định được tất cả các thuộc tính liên quan tới background ở trên cho hình nền.

4. Kích thước

• Chiều rộng: width: <giá trị kích thước>
• Chiều cao: height: <giá trị kích thước>

5. Font chữ

• Thuộc tính font-family: được sử dụng để thay đổi bề mặt font

• Thuộc tính font-style: được sử dụng để tạo một font chữ nghiêng hoặc chếch

  • normal : Thường

  • italic : Nghiêng

• Thuộc tính font-transform: được sử dụng để tạo những chữ hoa nhỏ (small-cap)

  • uppercase: Đổi hết thành chữ hoa

  • lowercase: Đổi hết thành chữ thường

  • capitalize: Chữ hoa cái chữ cái đầu

• Thuộc tính font-weight: được sử dụng để tăng giảm độ đậm của font

  • bold: Chữ đâm

  • 100 , 200... 700 (bold)

• Thuộc tính font-size: được sử dụng để xác định kích cỡ font

• Thuộc tính font: sử dụng thuộc tính này nếu bạn muốn viết ít code hơn mà vẫn xác định được các thuộc tính liên quan tới font ở trên.