Cơ bản về background trong CCS
Thứ Ba, 10 tháng 3, 2009
Cơ bản về background trong CCS
Bài viết sưu tầm trên VWG nhằm lưu trữ để học hỏi
Trước khi chưa có sự ra đời của CSS, chúng ta chỉ có thể tạo được màu nền cho toàn trang hoặc cho một table nào đấy thôi. Công nghệ web phát triển cho phép ta có thể tạo màu nền bất cứ thành phần nào trên trang. Thuộc tính này trong CSS có cấu trúc giống nhau cho mọi tag là: background-color.
Ví dụ:
- cho một lớp:
- lớp nằm trong một tag, ví dụ
- Một tag nào đấy, ví dụ
Hình nền:
Với CSS, bạn cũng có thể tạo một hình nền cho bất cứ thành phần nào trên trang. Ví dụ:
Nếu như trong cùng một lớp hoặc tag bạn định nghĩa đồng thời cả hình nền và màu nền thì theo thứ tự hình nền sẽ hiển thị trước và sau đó sẽ tới màu nền. Màu nền sẽ có tác dụng khi user tắt chế độ xem ảnh khi duyệt web.Ví dụ:
Điều chỉnh hình nền:
Với một hình nền bất kì, bạn có thể cho phép ảnh đó lặp lại hay không, định vị trí, khóa hình nền,... Sau đây là một vài ví dụ:
- Hình nền không lặp lại (chỉ hiện 1 lần ở top left):
- Lặp lại theo chiều ngang:
- Lặp lại theo chiều dọc:
- Hình nền bị khóa, sẽ không trượt theo khi bạn scroll:
- Định vị trí cho hình nền. Ví dụ ở đây là góc bên phải phía dưới:
- Định tọa độ đặc biệt cho hình nền, tính từ góc trên trái (top left):
Câu lệnh rút gọn:
Bạn có thể kết hợp những thứ linh tinh ở trên thành 1 câu lệnh duy nhất. Việc làm này giúp ta tiết kiệm thời gian hơn và code cũng sẽ đẹp hơn. Ví dụ:
Các thành phần trên cũng không nhất thiết phải theo thứ tự như vậy, hoàn toàn có thể thay đổi được:
Tags:
CSS
Bài viết sưu tầm trên VWG nhằm lưu trữ để học hỏi
Trước khi chưa có sự ra đời của CSS, chúng ta chỉ có thể tạo được màu nền cho toàn trang hoặc cho một table nào đấy thôi. Công nghệ web phát triển cho phép ta có thể tạo màu nền bất cứ thành phần nào trên trang. Thuộc tính này trong CSS có cấu trúc giống nhau cho mọi tag là: background-color.
Ví dụ:
- cho một lớp:
.lop { background-color:blue; }- lớp nằm trong một tag, ví dụ
div.lop { background-color:blue; }- Một tag nào đấy, ví dụ
P { background-color:blue; }
Bạn có thể định nghĩa màu theo mã HEXA hoặc RGB.Hình nền:
Với CSS, bạn cũng có thể tạo một hình nền cho bất cứ thành phần nào trên trang. Ví dụ:
td.tieude {background-image: url(http://host.com/images/tile.gif); }
.myclass {background-image: url(http://host.com/images/xyz.gif); Nếu như trong cùng một lớp hoặc tag bạn định nghĩa đồng thời cả hình nền và màu nền thì theo thứ tự hình nền sẽ hiển thị trước và sau đó sẽ tới màu nền. Màu nền sẽ có tác dụng khi user tắt chế độ xem ảnh khi duyệt web.Ví dụ:
.myclass {background-color:#FF0000; }
.myclass {background-image: url(http://host.com/images/xyz.gif); Điều chỉnh hình nền:
Với một hình nền bất kì, bạn có thể cho phép ảnh đó lặp lại hay không, định vị trí, khóa hình nền,... Sau đây là một vài ví dụ:
- Hình nền không lặp lại (chỉ hiện 1 lần ở top left):
p { background-image: url(../images/bg.gif);
background-repeat: no-repeat; }- Lặp lại theo chiều ngang:
p {background-image: url(../images/bg.gif);
background-repeat: repeat-x; }- Lặp lại theo chiều dọc:
p {background-image: url(../images/bg.gif);
background-repeat: repeat-y; }- Hình nền bị khóa, sẽ không trượt theo khi bạn scroll:
body {background-image: url(../images/bg.gif);
background-attachment: fixed; }- Định vị trí cho hình nền. Ví dụ ở đây là góc bên phải phía dưới:
p {background-image: url(../img/bga.gif);
background-position: right bottom; }- Định tọa độ đặc biệt cho hình nền, tính từ góc trên trái (top left):
p {background-position: 20px 15px; }Câu lệnh rút gọn:
Bạn có thể kết hợp những thứ linh tinh ở trên thành 1 câu lệnh duy nhất. Việc làm này giúp ta tiết kiệm thời gian hơn và code cũng sẽ đẹp hơn. Ví dụ:
body {background: #cc33ff url(images/background.gif) repeat-x top right; }Các thành phần trên cũng không nhất thiết phải theo thứ tự như vậy, hoàn toàn có thể thay đổi được:
body {background: url(images/background.gif)#cc33ff repeat-x top right; }
- Bo góc với CSS : Bo 4 góc, 2 góc trên, 2 góc dưới... dùng hình ảnh
- Bo góc với lệnh CSS
- Làm cho nút "Read More..." (Đọc thêm) trông pro hơn
- Thủ thuật cơ bản : xóa đường viền của ảnh
- 1 Thủ thuật nhỏ cho các liên kết bằng hình ảnh
- Tạo các Tab nội dung
- CCS trong định dạng văn bản
- Những lưu ý khi viết mã CSS
- Bo góc với CSS3
- Tạo thumbnail cho ảnh với CSS
- Kỹ thuật tạo bóng đổ cho ảnh hoặc cho các khối nội dung
- Kỹ thuật load ảnh trước bằng CSS
Comments[ 0 ]
Đăng nhận xét