Mình xin giới thiệu về một số thuộc tính căn bản của css để phục vụ cho quá trình thiết kế.
Cách tạo class, Id và cách gọi ra một module.
Class có dạng:
Còn phần gọi ra module được đặt bên trong thẻ <body> và </body>
Cách gọi ra một module
Class là module có thể sử dụng nhiều lần.
Id là module chỉ dùng 1 lần duy nhất.
.Ten-Class{Id có dạng:
thuộc tính 1;
thuộc tính 2;
...;
}
#Ten-Id{Chú ý: class và ID thường được đặt trước thẻ ]]></b:skin>
thuộc tính 1;
thuộc tính 2;
...;
}
Còn phần gọi ra module được đặt bên trong thẻ <body> và </body>
Cách gọi ra một module
<div class='Ten-Class'> Nội dung bên trong module </div>Hoặc
<div id='Ten-Id'> Nội dung bên trong module </div>Có thể thay thẻ div bằng thẻ span.
Class là module có thể sử dụng nhiều lần.
Id là module chỉ dùng 1 lần duy nhất.
Bên dưới là các thuộc tính bạn có thể gắng vào class hoặc id.
1. Background (nền module)
Background qui định màu nền hoặc hình nền của module.
Màu nền:
Màu nền:
Dạng thuộc tính: background: #fff;Hình nền
#fff: là màu nền của module.
Đây là kết quả của thuộc tính trên.
Màu nền cho module là màu trắng
Dạng thuộc tính: background: url(Link Ảnh);
Link ảnh: là liên kết đến ảnh nền của module
Đây là kết quả của thuộc tính trên với link ảnh này
Sử dụng hình nền cho module
2. Border (Đường viền cho một module)
Border qui định thuộc tính về đường viền của một module.
Border có dạng như sau: border: 2px dash #aaa;
Ý nghĩa các giá trị:
» 2px: độ dầy của đường viền
» dash: kiểu đường viền. Bao gồm các dạng sau.
Border có dạng như sau: border: 2px dash #aaa;
Ý nghĩa các giá trị:
» 2px: độ dầy của đường viền
» dash: kiểu đường viền. Bao gồm các dạng sau.
» dotted
» #aaa: màu đường viền
Nội dung
» dashed
Nội dung
» solid
Nội dung
» double
Nội dung
» groove
Nội dung
» ridge
Nội dung
» inset
Nội dung
» outset
Nội dung
3. Border-radius (bo góc module)
Thuộc tính border-radius có tác dụng bo góc cho một module.
Dạng thuộc tính: border-radius: 10px 10px 10px 10px;
Ý nghĩa từng thông số:
Ví dụ: border-radius: 50% 50% 50% 50%;
Và đây là kết quả:
Dạng thuộc tính: border-radius: 10px 10px 10px 10px;
Ý nghĩa từng thông số:
» 10px: là góc trên bên trái.Đây là kết quả đoạn code trên:
» 10px: là góc trên bên phải
» 10px: là góc dưới bên phải
» 10px: là góc dưới bên trái
Code bo góc cho module
Bạn có thể thay giá trị tuyệt đối (dạng px) thành giá trị tương đối (%)Ví dụ: border-radius: 50% 50% 50% 50%;
Và đây là kết quả:
Code bo góc cho module
4. Box-shadow (Bóng đổ cho module)
Box-shadow là thuộc tính về bóng đổ cho module.
Dạng thuộc tính: box-shadow:2px 2px 2px 3px #333 inset;
Ý nghĩa thuộc tính: (lần lượt từ trái qua phải)
Kết quả của đoạn code trên khi không có inset.
Dạng thuộc tính: box-shadow:2px 2px 2px 3px #333 inset;
Ý nghĩa thuộc tính: (lần lượt từ trái qua phải)
» 2px: là bóng đổ về phía phải (giá trị âm sẽ đổ về phía trái)Và đây là kết quả của đoạn code trên khi có inset.
» 2px: là bóng đổ về phía dưới (giá trị âm sẽ đổ về phía trên)
» 2px: là độ nhòe của bóng.
» 3px: là độ lan tỏa của bóng.
» #333: là màu của bóng đổ.
» inset: là bóng đổ chìm vào trong (nếu muốn làm khối nổi thì bỏ cái này)
Đổ bóng cho module
Kết quả của đoạn code trên khi không có inset.
Đổ bóng cho module
5. Clear (Dừng float module)
Thông thường khi có 1 module (ví dụ là module A) sử dụng thuộc tính float thì những module tiếp theo nó sẽ có xu hướng chiếm phần không gian mà module A không sử dụng. Để ngăn không cho các module còn lại chiếm không gian mà module A không sử dụng người ta thường dùng thuộc tính clear để giải quyết vấn đề này.
Dạng thuộc tính:
Clear: left; (không cho chiếm không gian bên trái của module A)
Clear: right; (không cho chiếm không gian bên phải của module A)
Clear: both; (không cho chiếm không gian cả 2 bên của module A)
Thông thường người ta ít dùng thuộc tính này vào css mà thường dùng đoạn code <div style='clear:both'/> bên dưới module để dừng việc float module.
Dạng thuộc tính:
Clear: left; (không cho chiếm không gian bên trái của module A)
Clear: right; (không cho chiếm không gian bên phải của module A)
Clear: both; (không cho chiếm không gian cả 2 bên của module A)
Thông thường người ta ít dùng thuộc tính này vào css mà thường dùng đoạn code <div style='clear:both'/> bên dưới module để dừng việc float module.
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:
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 */Đây là kết quả khi gọi module trên ra.
.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. */
Blogger: K3nvil
Homepage: http://k3nvil.blogspot.com
Homepage: http://k3nvil.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 có một trong những dạng sau:
display: inline; (module sắp xếp cùng 1 hàng)
Display có một trong những dạng sau:
display: inline; (module sắp xếp cùng 1 hàng)
display: block; (module sắp xếp thành nhiều block chồng lên nhau)
Module 1Module 2Module 3
display: none; (module sẽ bị ẩn khi dùng thuộc tính này)Module 1Module 2Module 3
8. Float (Sắp xếp vị trí module)
Float qui định về cách sắp xếp vị trí module. (trái, phải.)
Bình thường khi gắng 1 module thì mặc định module mới đó sẽ chiếm 100% chiều ngang. Tất cả các module khác sẽ bị đẩy xuống dưới. Xem ví dụ bên dưới.
Mặc dù module ảnh có chiều ngang là 160px nhưng nó vẫn chiếm 100% chiều ngang và đẩy module text xuống dưới. Gây lãng phí không gian.
Blogger: K3nvil
Homepage: http://k3nvil.blogspot.com
Dạng thuộc tính:
float:left; (module nằm bên trái). float:right; làm tương tự nhưng thay left thành right.
Trong trường hợp này module ảnh đã được đẩy qua trái (float:left). Module text sẽ được đưa lên trên như thế này.
Blogger: K3nvil
Homepage: http://k3nvil.blogspot.com
Chú ý:
1. Không có tình trạng float ảnh vào giữa (center). Để đẩy ảnh vào giữa bạn cần kết hợp 2 lần float trái cho 2 module. Qui định chiều rộng cho module thứ nhất để xác định được vị trí module thứ 2. Xem ví dụ bên dưới.
Blogger: K3nvil
Homepage: http://k3nvil.blogspot.com
2. Thuộc tính float thường đi chung với thuộc tính clear để gỡ bỏ thuộc tính float của module
Bình thường khi gắng 1 module thì mặc định module mới đó sẽ chiếm 100% chiều ngang. Tất cả các module khác sẽ bị đẩy xuống dưới. Xem ví dụ bên dưới.
Blogger: K3nvil
Homepage: http://k3nvil.blogspot.com
float:left; (module nằm bên trái). float:right; làm tương tự nhưng thay left thành right.
Blogger: K3nvil
Homepage: http://k3nvil.blogspot.com
1. Không có tình trạng float ảnh vào giữa (center). Để đẩy ảnh vào giữa bạn cần kết hợp 2 lần float trái cho 2 module. Qui định chiều rộng cho module thứ nhất để xác định được vị trí module thứ 2. Xem ví dụ bên dưới.
Đây là module 1 đã float:left với chiều rộng 150px.
Homepage: http://k3nvil.blogspot.com
9. 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;
Chú ý: Chữ có gạch chân không sử dụng thuộc tính này mà dùng text-decoration:underline;
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:italic: Chữ in nghiêng (có thể bỏ)
bold: chữ in đậm (có thể bỏ)
30px: cỡ chữ
georgia: kiểu chữ
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)
10. 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
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Ý 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%;
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;
Ý 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;
11. 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:
Dạng thuộc tính:
line-height:2;
line-height:2;
line-height:2;
line-height:2;
line-height:2;
line-height:4;
line-height:4;
line-height:4;
line-height:4;
line-height:4;
line-height:25px;
line-height:25px;
line-height:25px;
line-height:25px;
line-height:25px;
line-height:200%;
line-height:200%;
line-height:200%;
line-height:200%;
line-height:200%;
12. list-style (dấu • định dạng đầu link)
Thông thường trong các thủ thuật hoặc trong 1 template hay tiện ích linklist thường có các code dạng như sau:
<ul>
<li><a href="http://k3nvil.blogspot.com/">K3nvil Blog</a></li>
<li><a href="http://k3nvil.blogspot.com/p/tong-hop.html">Tổng hợp</a></li>
<li><a href="http://k3nvil.blogspot.com/p/chuyen-ma-code.html">Convert</a></li>
<li><a href="Liên Kết...">Nội dung...</a></li>
</ul>
Và khi hiển thị ra ngoài thì đoạn code trên sẽ có dạng như sau:
Bạn thấy đầu mỗi dòng link có 1 cái chấm tròn không được đẹp lắm. Và dấu chấm tròn này do thuộc tính list-style qui định.
Dạng thuộc tính
list-style:none; (không hiển thị dấu chấm tròn.)
list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQOJL8tiiWbCl0NQ7fCLfPIzJqZMuzsjh3I-EWKKeWRydn7UtfSKBEZhbceEQCqqzMhZwHow9A9dlZ6J1uqaLvlgigoVSIqHaIfPawsvEvE1WzD3jpf2tHZ9iWTj_Ku1cvUqDitFnyJNrj/s1600/iconhover.png); (dùng ảnh ở liên kết làm dấu chấm)
list-style:upper-alpha; (thay dấu chấm bằng ký tự ABC)
list-style:decimal; (thay dấu chấm bằng số 1-2-3-4)
Thật ra còn một số dạng khác nữa nhưng ít khi dùng đến nên mình sẽ không đề cập ở đây.
<ul>
<li><a href="http://k3nvil.blogspot.com/">K3nvil Blog</a></li>
<li><a href="http://k3nvil.blogspot.com/p/tong-hop.html">Tổng hợp</a></li>
<li><a href="http://k3nvil.blogspot.com/p/chuyen-ma-code.html">Convert</a></li>
<li><a href="Liên Kết...">Nội dung...</a></li>
</ul>
Và khi hiển thị ra ngoài thì đoạn code trên sẽ có dạng như sau:
- • K3nvil Blog
- • Sitemap
- • Hỏi - Đáp
- • Nội dung...
Dạng thuộc tính
list-style:none; (không hiển thị dấu chấm tròn.)
list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQOJL8tiiWbCl0NQ7fCLfPIzJqZMuzsjh3I-EWKKeWRydn7UtfSKBEZhbceEQCqqzMhZwHow9A9dlZ6J1uqaLvlgigoVSIqHaIfPawsvEvE1WzD3jpf2tHZ9iWTj_Ku1cvUqDitFnyJNrj/s1600/iconhover.png); (dùng ảnh ở liên kết làm dấu chấm)
list-style:upper-alpha; (thay dấu chấm bằng ký tự ABC)
- A. K3nvil Blog
- B. Tổng hợp
- C. Convert
- D. Nội dung...
- 1. K3nvil Blog
- 2. Tổng hợp
- 3. Convert
- 4. Nội dung...
13. 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)
auto: cách đều trái phải.
Đây là kết quả:
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
14. Max-height (Chiều cao tối đa module)
Max-height (Min-height) là thuộc tính qui định chiều cao tối đa (tối thiểu) cho một module.
Dạng thuộc tính:
Dạng thuộc tính:
Max-height:150px;
Min-height:100px;
Kết quả của thuộc tính trên đây:
Khi chiều cao nội dung nhỏ hơn chiều cao module thì chiều cao module sẽ bằng min-height
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Thuộc tính max-height thường đi kèm với thuộc tính overflow để giải quyết vấn đề cho phần nội dung bị thừa ra ngoài. Ví dụ:Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
15. Opacity (Độ trong suốt của một module)
Opacity là thuộc tính qui định về độ trong suốt của module.
Dạng thuộc tính: opacity:0.5;
0.5: độ trong suốt của module. Giá trị của thuộc tính nằm trong đoạn từ 0 đến 1
Đây là kết quả mình áp dụng thuộc tính opacity cho module A.
Dạng thuộc tính: opacity:0.5;
0.5: độ trong suốt của module. Giá trị của thuộc tính nằm trong đoạn từ 0 đến 1
Đây là kết quả mình áp dụng thuộc tính opacity cho module A.
Module B
Module A
16. Overflow (Nội dung vượt ngoài module)
Overflow là thuộc tính qui định cách hiển thị cho phần nội dung ngoài module.
Dạng thuộc tính:
Dạng thuộc tính:
Overflow:auto;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:hidden;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
17. Padding (Khoãng cách từ biên module đến phần nội dung bên trong)
Padding qui định về khoảng cách từ phần nội dung đến biên của module.
Dạng thuộc tính (tương tự như margin)
Padding: 10px 10px 10px 10px;
Kết quả:
70px: khoãng cách từ nội dung đến biên trên module
10px: khoãng cách từ nội dung đến biên trái module
30px: khoãng cách từ nội dung đến biên dưới module
50px: khoãng cách từ nội dung đến biên phải module
Dạng thuộc tính (tương tự như margin)
Padding: 10px 10px 10px 10px;
Kết quả:
Padding: 10px 10px 10px 10px;
Padding: 70px 10px 30px 50px;
Padding: 70px 10px 30px 50px;
Ý nghĩa các thuộc tính:70px: khoãng cách từ nội dung đến biên trên module
10px: khoãng cách từ nội dung đến biên trái module
30px: khoãng cách từ nội dung đến biên dưới module
50px: khoãng cách từ nội dung đến biên phải module
18. Position (Vị trí tương đối của một module)
position có khá nhiều thuộc tính nhưng thông thường mình chỉ sử dụng 1 thuộc tính là position:fixed; để cố định vị trí của một module trên trang web (ví dụ cụ thể là thanh menu trang chủ, sơ đồ blog... trên đầu blog mình). Những thuộc tính khác mình hok tìm hiểu nên cũng không rành lắm.
Khi dùng position:fixed; người ta thường dùng kèm với 2 thuộc tính sau để định vị vị trí module
» top:10px; (cách đỉnh giao diện 10px) hoặc bottom:10px; (cách chân giao diện 10px)
» left: 10px; (cách lề trái 10px) hoặc right:10px; (cách lề phải giao diện 10px)
Bạn có thể thay giá trị tuyệt đối (dạng px) thành giá trị tương đối (dạng %)
Khi dùng position:fixed; người ta thường dùng kèm với 2 thuộc tính sau để định vị vị trí module
» top:10px; (cách đỉnh giao diện 10px) hoặc bottom:10px; (cách chân giao diện 10px)
» left: 10px; (cách lề trái 10px) hoặc right:10px; (cách lề phải giao diện 10px)
Bạn có thể thay giá trị tuyệt đối (dạng px) thành giá trị tương đối (dạng %)
19. Text (Thuộc tính về chữ của module)
Text là thuộc tính qui định về chữ của module. Bao gồm các vấn đề sau:
text-align:left; chữ canh lề trái
text-align:right; chữ canh lề phải
text-align:center; chữ canh giữa
text-align:justify; chữ canh đều 2 bên
text-decoration:underline;
text-align:left; chữ canh lề trái
text-align:right; chữ canh lề phải
text-align:center; chữ canh giữa
text-align:justify; chữ canh đều 2 bên
text-decoration:underline;
gạch chân dòng chữ
text-decoration:overline;
gạch trên dòng chữ
text-decoration:line-through;
gạch ngang dòng chữ
text-decoration:blink;
chữ nhấp nháy (cái này hình như chrome ko hỗ trợ)
text-transform:lowercase;
chuyển tất cả về chữ thường
text-transform:uppercase;
chuyển tất cả về chữ hoa
text-transform:capitalize;
Viết hoa chữ đầu
20. Z-index (Sắp xếp module trên dưới)
z-index là thuộc tính qui định về cách sắp xếp các module.
dạng thuộc tính: z-index:5;
module có giá trị z-index cao hơn sẽ nằm trên. (thường áp dụng cho các module có thuộc tính position:fixed)
dạng thuộc tính: z-index:5;
module có giá trị z-index cao hơn sẽ nằm trên. (thường áp dụng cho các module có thuộc tính position:fixed)
Chú ý: Bạn có thể kết hợp nhiều thuộc tính khác nhau vào một module theo dạng
.module_name{Ví dụ mình có 1 class sau:
thuộc tính thứ nhất;
thuộc tính thứ 2;
thuộc tính thứ 3;
...
}
.k3nvil {Và đây là kết quả khi gọi module ra
background: #ccc;border: 1px solid #aaa;border-radius: 30px 0px 30px 0px;box-shadow:1px 1px 2px 2px #333;color:#991177;font: italic bold 16px Georgia;height: 100px;width: 300px;Margin: 10px 10px 10px 10px;Padding: 10px 10px 10px 10px;text-decoration:blink;text-align:center;text-transform:uppercase;
}
Xin chào bạn.
Rất cám ơn bạn đã ghé thăm blog của mình.
Chúc bạn có một ngày thật nhiều may mắn
Rất cám ơn bạn đã ghé thăm blog của mình.
Chúc bạn có một ngày thật nhiều may mắn
--- --- --- --- --- ---
Cơ bản về css thì đã hoàn thành. Tất nhiên còn rất nhiều css khác nhưng không thường xuyên sử dụng nên mình không đề cập ở đây. Nếu bạn gặp khó khăn gì trong việc viết ra các đoạn css này thì để lại comments bên dưới, mình sẽ cố gắng trả lời trong thời gian sớm nhất có thể. Chúc bạn thành công!
0 nhận xét:
|» Đăng hình ảnh | code chèn sẽ là [img] Link ảnh [/img]
|» Đăng nhạc của tui | code sẽ là [nct] Link bài hát [/nct]
|» Đăng Video Youtube | code sẽ là [youtube] Link Video Youtube [/youtube]
|» <b> Chữ in đậm <\/b>
|» <i> Chữ in nghiêng <\/i>