Home
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 .
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.
n dưới là các thuộc tính bạn có thể gắng vào class hoặc id..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.
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:
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);2. Border (Đường viền cho một module)
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
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.
3. Border-radius (bo góc 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.
» 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
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ả:
4. Box-shadow (Bóng đổ cho module)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
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.
5. Clear (Dừng float 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)
» 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
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.
Không có nhận xét nào:
Đăng nhận xét