tailieunhanh - Bài giảng CSS - Bài 6: CSS Backgrounds

Bài giảng cung cấp cho người học các kiến thức: CSS Backgrounds, thuộc tính Background, định kiểu màu, hình ảnh background, nội dung trang web,. Hi vọng đây sẽ là một tài liệu hữu ích dành cho các bạn sinh viên đang theo học môn dùng làm tài liệu học tập và nghiên cứu. chi tiết nội dung tài liệu. | Bài 6: CSS Backgrounds BỞI TRỊNH HỒNG Thuộc tính Background trong CSS dùng để định nghĩa background (hình nền) cho các phần tử Các thuộc tính Background trong CSS bao gồm: background-color background-image background-repeat background-attachment background-position Background Color Thuộc tính background-color xác định màu nền cho các phần tử Background Color của một trang được xác định theo cấu trúc sau: Ví dụ 1: body { background-color: lightblue; } Trong CSS, có nhiều cách định kiểu màu, thường được sử dụng theo các cách sau: Theo tên tiếng anh – ví dụ: “Red”- màu đỏ Theo kết hợp giá trị màu RGB – ví dụ: “rgb(255, 0, 0)”- màu đỏ Theo hệ thập lục phân HEX – ví dụ: “#ff0000” – màu đỏ Trong ví dụ dưới đây, thẻ , và sẽ có background color khác nhau: Background Image Thuộc tính background-image xác định một hình ảnh làm background cho một phần tử. Mặc định thì hình ảnh sẽ được lặp lại vì thế nó bao phủ toàn bộ phần tử. Background image của một trang được xác định theo cấu trúc sau: CSS: body { background-image: url("//"); } Lưu ý: khi sử dụng hình ảnh làm background, thì bạn nên sử dụng hình ảnh mà nó không gây ảnh hưởng lên các văn bản. Nếu không ảnh đó sẽ đè hoặc làm mờ chữ hoặc nội dung trang web của bạn. Ví dụ 4: body { background-image: url(“”); } Background Image – Lặp lại ảnh theo chiều dọc hoặc ngang Mặc định thì thuộc tính background-image sẽ lặp ảnh cả 2 dạng dọc và ngang (horizontally và vertically). Một số ảnh nên được lặp ngang hoặc dọc, nếu không thì trông nó rất là xấu, không đẹp mắt, giống như sau: Ví dụ 5: body { background-image: url(“”); } CSS: body { background-image: url(""); } Nếu như ảnh trên chỉ được lặp lại theo chiều ngang (background-repeat: repeat-x;), thì sẽ trông tốt hơn: Ví dụ 6: body { background-image: url(“”); background-repeat: | Bài 6: CSS Backgrounds BỞI TRỊNH HỒNG Thuộc tính Background trong CSS dùng để định nghĩa background (hình nền) cho các phần tử Các thuộc tính Background trong CSS bao gồm: background-color background-image background-repeat background-attachment background-position Background Color Thuộc tính background-color xác định màu nền cho các phần tử Background Color của một trang được xác định theo cấu trúc sau: Ví dụ 1: body { background-color: lightblue; } Trong CSS, có nhiều cách định kiểu màu, thường được sử dụng theo các cách sau: Theo tên tiếng anh – ví dụ: “Red”- màu đỏ Theo kết hợp giá trị màu RGB – ví dụ: “rgb(255, 0, 0)”- màu đỏ Theo hệ thập lục phân HEX – ví dụ: “#ff0000” – màu đỏ Trong ví dụ dưới đây, thẻ , và sẽ có background color khác nhau: Background Image Thuộc tính background-image xác định một hình ảnh làm background cho một phần tử. Mặc định thì hình ảnh sẽ được lặp lại vì thế nó bao phủ toàn bộ phần tử. Background image của một trang được xác định theo cấu