Căn Bản CSS Phần 2

Hôm nay Phúc sẽ giới thiệu về bài CSS, để tiện cho các bạn làm Blog muốn điều chỉnh lại Blog của mình.

Nếu có gì sai các bạn cứ nhận xét sau bài này, Phúc sẽ sửa lại .


Phúc sẽ tiếp Phần 2 Căn bản CSS












6. Color (Màu chữ)

Color qui định màu chữ trong module bao gồm màu chữ, màu liên kết, màu liên kết khi rê chuột vào...
Dạng thuộc tính: color: #cc0000;
Với #cc0000 là màu chữ.
Ví dụ mình có đoạn css sau:

.module{ color:#779933 }  /* Màu chữ trong module */
.module a{ color:#991177 }  /* Màu liên kết trong module */
.module a:hover{ color:#aa8822 }  /* Màu liên kết khi rê chuột vào. */

Đây là kết quả khi gọi module trên ra.

Blogger: Nguyễn Văn Phúc
Homepage: http://sanpham-google.blogspot.com/

7. Display (Sắp xếp hoặc ẩn module)Display qui định về cách sắp xếp module hoặc ẩn module.

Display qui định về cách sắp xếp module hoặc ẩn module.
Display có một trong những dạng sau:
display: inline; (module sắp xếp cùng 1 hàng)

Module 1

Module 2

Module 3

display: block; (module sắp xếp thành nhiều block chồng lên nhau)

Module 1

Module 2

Module 3

display: none; (module sẽ bị ẩn khi dùng thuộc tính này)

8. Font (Kiểu chữ trong module)

Font qui định về những thuộc tính liên quan đến chữ như kiểu chữ, cỡ chữ, im đậm, in nghiêng...
Dạng thuộc tính:
Sử dụng kết hợp font: italic bold 30px Georgia;

Ý nghĩa từng thuộc tính:
italic: Chữ in nghiêng (có thể bỏ)
bold: chữ in đậm (có thể bỏ)
30px: cỡ chữ
georgia: kiểu chữ

Sử dụng đơn lẻ từng thuộc tính:

font-family: arial; (qui định kiểu chữ)

font-size: 30px; (qui định cỡ chữ)

font-style: italic; (in nghiêng)

font-weight:bold; (in đậm)

Chú ý: Chữ có gạch chân không sử dụng thuộc tính này mà dùng text-decoration:underline;

9. Height - Width (Chiều cao - rộng module)

Thuộc tính height (width) qui định về chiều cao (rộng) của module.
Height: chiều cao

Dạng thuộc tính: height:150px;
Ý nghĩ thuộc tính:
150px là chiều cao của module.
Bạn có thể thay địa chỉ tuyệt đối (dạng px) thành địa chỉ tương đối (dạng %)
Ví dụ: height:30%;

Width: chiều rộng

Dạng thuộc tính: width:50%;
Ý nghĩ thuộc tính:
50% là chiều rộng của module.
Bạn có thể thay địa chỉ tương đối (dạng %) thành địa chỉ tuyệt đối (dạng px)
Ví dụ: width:300px;

10. Line-height (Chiều cao dòng chữ)

Thuộc tính line-height qui định về chiều cao dòng chữ.
Dạng thuộc tính:

line-height:2;
line-height:2;
line-height:2;

line-height:4;
line-height:4;
line-height:4;

line-height:25px;
line-height:25px;
line-height:25px;

line-height:200%;
line-height:200%;
line-height:200%;

12. Margin (khoảng cách giữa các module)

Margin qui định khoảng cách từ module hiện tại đến module kề với nó.
Dạng thuộc tính:
Margin: 10px 20px 30px 40px;
Ý nghĩa các thuộc tính:
10px: khoãng cách từ module đến module bên trên
20px: khoãng cách từ module đến module bên trái
30px: khoãng cách từ module đến module bên dưới
40px: khoãng cách từ module đến module bên phải
Đây là kết quả: (bạn chú ý khoảng cách từ module đến những module xung quanh)

Module A

Chú ý: Bạn có thể thay giá trị tuyệt đối (dạng px) bằng giá trị tương đối (dạng %)

Margin: 0 auto;

0: khoãng cách từ module đến phía trên và dưới.
auto: cách đều trái phải.
Đây là kết quả:

Module A