Trong bài này chúng ta sẽ tìm hiểu về color và backgrounds cho việc thiết kế web của bạn.
1.Color (màu của chữ):
Giả sử bạn muốn thiết kế web với toàn bộ headlines (đề mục) trong trang web của bạn đều có kích thước và màu của chữ là màu #990000, màu nền là #FC9804. Bạn làm như sau:
Trong file CSS bạn thêm vào như sau : (để không phài dài dòng tôi xin viết tiếp theo bài trước, file html va file css tôi cũng dùng lại và chỉ thêm vào)
h1 {
color: #990000;
background-color: # FC9804;
}
Tất cả đoạn text nào bạn sử dụng tag
thì màu nền sẽ là # FC9804và màu chữ sẽ là : #990000.
Như vậy bạn có thể áp dụng cho các tag còn lại rồi đúng không các bạn, Chờ gì nữa nào ? thử làm một ví dụ xem nào các bạn.
2.Background:
Bao gồm 5 thuộc tính chính mà tôi cho là quan trong , bây giờ ta đi vào từng mục nhỏ.
a.backgrounds-color:
Từ này chắc các bạn cũng biết ý nghĩa nó rồi đúng không ? Vậy chúng ta thử xem dùng nó trong CSS có gì khác không nha:
body {
background-color: #FFCC66;
}
Chạy trình duyệt lên xem nào các bạn.
b.background-image
Giờ ta thử chèn một bức ảnh vào làm ảnh nền cho trang web của ta xem sao nha. Dùng thuộc tính background-image:url.
body {
background-color: #FFCC66;
background-image: url(../demo.jpg)
}
Vậy là hình nền đã được hiện lên rồi đó bạn.
c.background-repeat
Thuộc tính này cũng quan trọng lắm đó bạn. Ví dụ bạn chèn hình nền cho trang web của bạn nhưng khổ nỗi kích thước hình nhỏ quá làm sao đây ? đây là lúc bạn cần đến thuộc tính này đây. Trong thuộc tính này có các giá trị như sau :
background-repeat: repeat-x -> lặp lại theo chiều ngang
background-repeat: repeat-y -> lặp lại theo chiều dọc
background-repeat: repeat -> cho phép lặp lại cả chiều dọc và ngang
background-repeat: no-repeat -> không cho lặp lại
body {
background-color: #FFCC66;
background-image: url(../demo.jpg)
background-repeat: no-repeat;
}
d.background-attachment
Bạn muốn cố định background-image của trang web không ? và nếu muốn thì làm thế nào ? câu trả lời đó là thuộc tính background-attachment. Có hai giá trị cho bạn lựa chọn : background-attachment: scroll àbức ảnh sẽ trược theo trang web (unlocked)
background-attachment: fixed à bức ảnh sẽ nằm im (locked)
body {
background-color: #FFCC66;
background-image: url(../demo.jpg)
background-repeat: no-repeat;
background-attachment: fixed
}
e.background-position
Các bạn có thấy bức ảnh ta chèn vào nằm vị trí nào không ? luôn nằm ở vị trí trên- bên trái đúng không các bạn. Vậy muốn nó nằm nơi nào mình mong muốn thì sao, câu trả lời ở trên ở ngay đầu muc, đó chính là background-position . ta có các giá trị sau :
background-position: 2cm 2cm
background-position: 50% 50%
background-position: right bottom
body {
background-color: #FFCC66;
background-image: url(../demo.jpg)
background-repeat: no-repeat;
background-attachment: fixed
background-position: right bottom
}
f.background
Tất cả 5 thuộc tính vậy bạn nghĩ xem ta thử gop lại thành một được không ? Hãy cùng thử:
body {
background : #FFCC66 url(../demo.jpg) no-repeat fixed right bottom;
}
Mặc định các giá trị ta điền vô sẽ theo thứ tự sau.
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Nếu ta chi điền 2 giá trị thì mặc định hai giá trị đó sẽ gán cho [background-color] | [background-image].
Bài sau chúng ta sẽ qua những thuộc tính về font và Text
| < Prev | Next > |
|---|