Vị trí nền CSS. Nền trong CSS (màu sắc, vị trí, hình ảnh, lặp lại, tệp đính kèm) - mọi thứ để đặt màu nền hoặc hình nền của các phần tử Html
Một trong những tác vụ phổ biến nhất khi chỉnh sửa văn bản và khối trong HTML và CSS. Không chỉ người thiết kế bố cục mà bất kỳ người quản lý nội dung nào chỉnh sửa nội dung trang web cũng có thể gặp phải vấn đề này. Để giải quyết vấn đề này, chỉ có hai thuộc tính được sử dụng: color - màu văn bản, nền - làm việc với nền, màu sắc hoặc hình ảnh.
Làm việc với màu thử nghiệm trong CSS
màu sắc là thuộc tính cần thiết để chỉ định màu cho văn bản. Màu sắc có thể được chỉ định ở định dạng mã HTML HEX hoặc ở định dạng RGB (Đỏ Xanh Xanh). Mã màu có thể được chọn trong các chương trình đồ họa như Photoshop hoặc trực tuyếnCú pháp thuộc tính:
Màu sắc: Màu sắc;
Bây giờ chúng ta áp dụng tính chất:
Nội dung (
màu sắc: #444; // văn bản màu xám đậm trong một phần tử có lớp nội dung
}
Tại sao chính xác lại có ví dụ này: việc chỉ định màu cho liên kết và cho văn bản là những thứ khác nhau. Nhớ. Vâng, cá nhân tôi khuyên bạn nên tạo văn bản và liên kết có màu sắc khác nhau.
Làm việc với nền trong CSS
lý lịch là thuộc tính cho phép bạn làm việc với nền của hình ảnh: đặt màu nền, đặt hình ảnh làm nền (định dạng jpg, gif, png), thay đổi vị trí của nền và các thông số khác được mô tả bên dưới.màu nền- Thuộc tính này chỉ được sử dụng để thiết lập màu nền. Chỉ chấp nhận mã màu. Màu sắc có thể được chỉ định ở định dạng RGB (Đỏ Xanh Xanh) hoặc ở định dạng mã HTML HEX.
Khối (
màu nền: #fbb5b5; // đặt màu nền thành màu đỏ tươi
}
Các ví dụ điển hình nhất về màu sắc cho nền (các mô hình thiết kế hiện đại: Thiết kế phẳng, v.v.):
hình nền là thuộc tính được sử dụng để đặt một số hình ảnh làm nền trong một phần tử. Để chỉ định một hình ảnh, tham số url và đường dẫn đến hình ảnh liên quan đến tệp có kiểu css là đủ.
#mặt sau (
hình nền: url("images/fon.jpg");
}
Bối cảnh Lặp lại- chỉ có thể được sử dụng nếu thuộc tính hình nền được chỉ định ở trên. Thuộc tính này đặt quy tắc lặp lại hình ảnh. Theo mặc định, hình ảnh được lặp lại dọc theo trục X và dọc theo trục Y đến tận viền của phần tử (nếu nền nhỏ hơn phần tử). Trong thuộc tính, bạn có thể chỉ định cài đặt để hình ảnh chỉ được lặp lại dọc theo trục X - lặp lại-x (theo chiều ngang), chỉ dọc theo Y - lặp lại-y (dọc) hoặc hoàn toàn không lặp lại - không lặp lại.
#nội dung (
lặp lại nền: lặp lại-x; /*hình ảnh sẽ chỉ được lặp lại theo chiều ngang cho đến giới hạn khối */
}
đính kèm nền- cố định nền ở một vị trí, nghĩa là hình ảnh sẽ cuộn cùng với nội dung của khối hoặc giữ nguyên. Giá trị mặc định là cuộn, không cố định vị trí nền.
#nội dung (
hình nền: url("background.jpg");
lặp lại nền: lặp lại-x; /*hình ảnh sẽ chỉ được lặp lại theo chiều ngang */
phần đính kèm nền: đã sửa; /* được ghim vào vị trí */
}
vị trí nền- một thuộc tính chỉ định vị trí của nền trong phần tử. Hai giá trị được chỉ định: vị trí ngang và sau đó là vị trí dọc. Nó được chỉ định bằng kỹ thuật số (pixel và tỷ lệ phần trăm) hoặc theo thứ tự bảng chữ cái (trái, giữa, phải, trên, dưới). Thuộc tính này cần thiết khi hình ảnh không được lặp lại (no-repeat) và nền cần được định vị trong phần tử theo một cách nhất định.
#khối (
vị trí nền: giữa bên trái; /* theo chiều ngang - ở bên trái, theo chiều dọc - ở giữa */
}
Tôi nghĩ mọi thứ đều rõ ràng trong bình luận)
Một ví dụ về cách viết một giá trị số:
#phím (
vị trí nền: 109px 57px; /* lề trái 109px, trên 57px */
}
Ở đây cũng vậy, tôi nghĩ mọi thứ nên rõ ràng.
Nhiều tài sản? Hãy xem cách viết tắt.
Sau cùng. Viết tắt cho nền trong CSS
Bạn có thể sử dụng ký hiệu viết tắt, trong đó tất cả các tham số sẽ được chỉ định trong dòng:Nền: vị trí đính kèm hình ảnh màu lặp lại;
Về ưu điểm. Kiểu ghi này giúp giảm thời gian tải trang và hiển thị trình duyệt. Hãy thương hại khách truy cập của bạn, tốt hơn là viết theo cách này, tất nhiên, trừ khi bạn cần một số thuộc tính.
Có, bạn có thể bỏ qua bất kỳ thuộc tính nào nếu không có nhu cầu! Chỉ cần tiếp tục chỉ định các giá trị tiếp theo trong danh sách.
Khối (
nền: #f1f1f1 url ("background.jpg") cuộn lặp lại 100px 125px;
}
Một ví dụ về cách hoạt động của nền trong CSS
Mã ví dụ. Bạn có thể xem kết quả công việc và mã nguồn tại liên kết bên dưới.