Màu sắc và phông nền
Trong bài hướng dẫn này, bạn sẽ được học cách làm thế nào để định dạng màu sắc và phông nền trên trang web. Chúng ta sẽ cùng xem xét các phương pháp để định vị trí và kiểm soát các hình ảnh dùng làm nền qua các thuộc tính CSS sau đây:
- color (màu áp dụng trên trang)
- background-color (màu áp dụng cho nền)
- background-image (hình ảnh áp dụng cho nền)
- background-repeat (sự lập lại các ảnh trên nền)
- background-attachment (nhúng ảnh vào nền)
- background-position (vị trí ảnh nền)
- background (thuộc tính rút gọn của nền)
Màu: thuộc tính ‘color’
Thuộc tính color
dùng để mô tả màu sắc của các phần tử HTML phía trên nền (foreground elements)
HTML elements sẽ được tạm dịch là những phần tử bao gồm thẻ HTML và nội dung bên trong của nó. Ví dụ
<p>đây là phần tử HTML</p>
Ví dụ bạn muốn tất cả tiêu đề đều có màu đỏ. Các tiêu đề này đều thuộc phần tử HTML <h1>
. Đoạn code bên dưới định nghĩa phần tử <h1>
có màu đỏ.
h1 {color: #ff0000;}
Giá trị thuộc tính colors có thể sử dụng hệ thập lục phân như ví dụ trên (#ff0000), hoặc sử dụng tên chuẩn (“red”) hoặc giá trị theo hệ màu rgb (rgb(255,0,0)).
Thuộc tính ‘background-color’
Thuộc tính background-color
dùng để xác định màu nền của các phần tử HTML.
Thẻ <body>
chứa tất cả nội dung của tài liệu HTML. Do vậy, để thay đổi màu nền của toàn trang HTML, chúng ta sẽ áp dụng thuộc tính background-color
cho nó.
Bạn cũng có thể sử dụng màu nền cho các tiêu đề và chữ. Trong ví dụ dưới đây hai màu khác nhau được áp dụng cho các phần tử <body>
và <h1>
.
body {background-color: #FFCC66;} h1 {color: #990000; background-color: #FC9804;}
Bạn lưu ý nếu có trên 2 thuộc tính, các thuộc tính phải kết thúc bằng dấu chấm, phẩy (;) như ví dụ như thẻ <h1>
ở trên.
Thuộc tính ảnh nền [background-image]
Thuộc tính CSS background-image
thường được sử dụng để nhúng ảnh vào nền.
Bạn có thể sử dụng ảnh dưới đây để thử, click chuột phải và chọn “save image as”
body { background-color: #FFCC66; background-image: url("css3-logo-300x300.png"); } h1 { color: #990000; background-color: #FC9804; }
Lưu ý ví dụ trên, ảnh css3-logo-300×300.png được lưu cùng thư mục chứa tập tin CSS, bạn có thể sử dụng đường dẫn tương đối nếu ảnh nằm ở thư mục khác, vi dụ: ../images/ss3-logo-300×300.png hoặc dùng đường dẫn tuyệt đối, ví dụ http://thietke.website/images/css3-logo-300×300.png
Kêt quả (Bạn có thể nhấp chuột vào tab HTML hay CSS để xem lại code)
Tùy chỉnh lập lại ảnh nền [background-repeat]
Ở ví dụ trên, bạn có nhận thấy rằng ảnh nền được lập lại theo chiều dọc và chiều ngang trên toàn trang, làm thế nào để kiểm soát nó? Thuộc tính background-repeat
chính là cách để bạn xác định ảnh nền sẽ lập lại như thế nào hoặc không cho phép lập lại.
Bản bên dưới mô tả các giá trị khác nhau của thuộc tính background-repeat
.
Value | Description | Example |
---|---|---|
background-repeat: repeat-x | Ảnh nền lập lại theo chiều ngang | Xem ví dụ |
background-repeat: repeat-y | Ảnh nền lập lại theo chiều dọc | Xem ví dụ |
background-repeat: repeat | Ảnh nền lập lại theo cả chiều ngang và dọc | Xem ví dụ |
background-repeat: no-repeat | Ảnh nền không được lập lại | Xem ví dụ |
Ví dụ để tránh ảnh nền lập lại, đoạn code sẽ như dưới đây:
body { background-color: #FFCC66; background-image: url("css3-logo-300x300.png"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }
Kết quả (Bạn có thể nhấp chuột vào tab HTML hay CSS để xem lại code)
Cố định vị trí ảnh nền [background-attachment]
Thuộc tính background-attachment
dùng để khai báo cố định vị trí ảnh nền hoặc phụ thuộc theo vị trí phần tử chứa nó.
Một ảnh nền được xác định vị trí cố định sẽ không di chuyển theo các đoạn văn bản khi người dùng di chuyển thanh cuộn của trang HTML
Bảng dưới đây mô tả 2 giá trị khác nhau của thuộc tính background-attachment
.
Giá trị | Mô tả |
---|---|
Background-attachment: scroll | Ảnh sẽ di chuyển theo văn bản khi di chuyển thanh cuộn màn hình |
Background-attachment: fixed | Ảnh sẽ được khóa ở vị trí cố định |
Đoạn code dưới đây khai báo vị trí cố định của ảnh, không di chuyển khi người xem di chuyển thanh cuộn.
body { background-color: #FFCC66; background-image: url("css3-logo-300x300.png"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804;
Kêt quả (Bạn có thể nhấp chuột vào tab HTML hay CSS để xem lại code)
Định vị trí ảnh nền [background-position]
Mặc định, một ảnh nền có trí ở góc trái phía trên màn hình. Thuộc tính background-position
cho phép bạn thay đổi vị trí của hình nền và đặt nó ở bất cứ vị trí nào bạn muốn trên màn hình cửa sổ trình duyệt.
Có nhiều cách để xác định giá trị của thuộc tính background-position
. Nhưng tất cả đều là một cặp đôi giá trị xác định tọa độ của ảnh trên màn hình. Ví dụ, giá trị ‘100px 200px’ khai báo cho trình duyệt biết rằng ảnh nền nằm ở vị trí cách lề trái 100px và lề trên 200px của cửa sổ trình duyệt.
Tọa độ cũng có thể xác định bằng giá trị phần trăm, hoặc các đơn vị (pixels, centimetres, points ….) hoặc dùng các từ mô tả chuẩn như top, bottom, center, left và right. Ảnh minh họa bên dưới sẽ giúp bạn hình dung ra các giá trị tọa độ tương đương với vị trí nào trên cửa sổ trình duyệt:
Bảng giá trị thuộc tính dưới đây cũng cho bạn những ví dụ về tọa độ
Giá trị | Mô tả | |
---|---|---|
background-position: 2cm 2cm | Ảnh nền cách lề trái 2 cm và lề trên 2 cm | Xem ví dụ |
background-position: 50% 25% | Ảnh nền nằm giữa hai lề trái phải và thấp hơn 1/4 lề cửa sổ trình duyệt từ trên xuống | Xem ví dụ |
background-position: top right | Ảnh nền nằm ở góc trên bên phải cửa sổ trình duyệt | Xem ví dụ |
Đoạn code bên dưới khai báo ảnh nền nằm ở vị trí sát lề dưới và bên phải
body { background-color: #FFCC66; background-image: url("css3-logo-300x300.png"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }
Kết quả (Bạn có thể nhấp chuột vào tab HTML hay CSS để xem lại code)
Thuộc tính background rút gọn [background]
Thuộc tính background
có thể khái báo tất cả các thuộc tính của hình nền đã liệt kê ở trên.
Sử dụng thuộc tính background
bạn có thể tiết kiệm được số ký tự khai báo và dễ hiệu chỉnh hơn.
Ví dụ, hãy xem đoạn code dưới đây
background-color: #FFCC66; background-image: url("css3-logo-300x300.png"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;
Nếu sử dụng thuộc tính background
bạn sẽ có kết quả tương tự nhưng đoạn code sẽ ngắn hơn nhiều
background: #FFCC66 url("css3-logo-300x300.png") no-repeat fixed right bottom;
Các thuộc tính được liệt kê theo thứ tự:
[background-color]
| [background-image]
| [background-repeat]
| [background-attachment]
| [background-position]
Nếu có bất kỳ thuộc tính nào không được khai báo, giá trị mặc định sẽ được sử dụng. Ví dụ, nếu background-attachment
và background-position
không được khai báo trong đoạn code dưới đây:
background: #FFCC66 url("css3-logo-300x300.png") no-repeat;
Hai thuộc tính không được khai báo , nên giá trị mặc định của background-attachment
là scroll
và background-position
là top left
Tổng kết
Trong bài học này, bạn đã học được một số kỹ thuật cần thiết để kiểm soát hiển thị hình nền trên các trang HTML bằng CSS. Bài tiếp theo, các bạn chắc chắn sẽ hứng thú với những kỹ thuật CSS để định dạng font chữ theo cách riêng của mình.