thuộc tính background Người đăng: Chiến Thần Ngày: 09012017 Thuộc tính background trong CSS giúp chúng ta xác định nền cho thẻ HTML. Bạn thấy nền màu xanh đỏ,.. thấy ảnh nền thế này, thế kia. Đó chính là background. Thuộc tính background dùng khá thường xuyên trong CSS. Học css: thuộc tính background Thuộc tính background là tổng hợp của tất cả các thuộc tính con. Khi viết CSS, bạn có thể thực hiện riêng rẽ các thuộc tính con backgroundcolor backgroundimage backgroundrepeat backgroundattachment backgroundposition Background Color Thuộc tính Background Color dùng để xác định màu nền cho thẻ HTML. Background Color được dùng với cấu trúc như sau body { backgroundcolor: red; } Xem demo. Trong CSS, để xác định màu sắc, chúng ta thường sử dụng 1 trong các giá trị sau: Mã màu. Ví dụ: ff0000,… Tên màu sắc. Ví dụ: red, black… Hệ màu RGB. Ví dụ như: rgb(255,0,0) Mã màu và hệ màu RGB bạn dùng photoshop để lấy. Còn tên màu thì nó là từ tiếng Anh của màu sắc. Ví dụ sau sẽ thiết lập màu nền cho các thẻ h1, h2, h3 h1 { backgroundcolor: green; } h2 { backgroundcolor: blue; } h3 { backgroundcolor: pink; } Xem demo. Background Image Background Image dùng để đặt ảnh nền cho thẻ html Ví dụ: body { backgroundimage: url(anh.jpg); } Xem demo. Khi dùng ảnh làm nền thì cần chú ý các thuộc tính như sau: backgroundrepeat: Thiết lập sự lặp đi lặp lại của ảnh để phủ hết thẻ HTML. backgroundrepeat có giá trị như sau: repeat và noreepeat, repeatx, repeaty repeat: ảnh sẽ lặp đi lặp lại đến khi nào phủ hết thẻ HTML. Măc định, khi thiết lâp backgroundimage ảnh repeat Norepeat: ảnh không lặp đi lặp lại. repeatx: chỉ lặp lại theo chiều ngang repeaty: chỉ lặp lại theo chiều dọc Ví dụ: p { backgroundimage: url(anh.jpg); backgroundrepeat: norepeat; } Xem demo. backgroundattachment . Dùng thuôc tính này để cố định ảnh khi nội dung HTML quá dài và kéo xuống dưới. Thuộc tính backgroundattachment thường chỉ dùng 1 giá trị là Fixed. Ví dụ: body { backgroundimage: url(anh.jpg); backgroundrepeat: norepeat; backgroundposition: right top; backgroundattachment: fixed; } Xem demo. Backgroudposition . Dùng để thiết lập vị trí cho ảnh đặt làm background. Giá trị mặc định sẽ là top left. Bạn có thể thể dùng các giá trị như sau: top, left, right, center, bottom. Trong 1 số trường hợp bạn có thể px. Nó là 1 con số cụ thể nào đó. Ví dụ: body { backgroundimage: url(canh.jpg); backgroundrepeat: norepeat; backgroundposition: right top; } Top right : nghĩa là ảnh nằm trên cùng phía bên phải Xem demo. hoặc body { backgroundimage: url(canh.jpg); backgroundrepeat: norepeat; backgroundposition: 10px 5px; } backgroundposition: 10px 5px nghĩa là: ảnh cách lề trên 10px, cách lề trái 5px Xem demo. Khi đã quen cách dùng background rồi. Bạn có thể dùng tổng hợp lại để viết CSS cho nhanh. Ví dụ: body { background: ffffff url(canh.jpg) norepeat right top; } Xem demo. Nhớ thứ tự khi thiết lập giá trị các thuộc tính: backgroundcolor backgroundimage backgroundrepeat backgroundattachment backgroundposition Nếu bạn không thiết lập thuộc tính nào đó, nó sẽ nhận giá trị mặc định. Một vài chú ý: Khi sử dụng các thuộc tính của CSS thì bạn phải dùng dấu gạch ngang chứ không phải dấu gạch dưới. backgroundposition chứ không phải background_position Các đơn vị đi kèm phải viết sát, không có dấu cách. Ví dụ: Sử dụng sai: backgroundposition: 10 px 5px; Đúng là: backgroundposition: 10px 5px; Đường dẫn ảnh ở các ví dụ mình đặt là: url(canh.jpg). Nếu các bạn tải về máy chạy thử thì phải để đầy đủ là url(https:tech12h.comcanh.jpg) thì mới chạy đúng. Nếu viết mỗi mình background thì CSS hiểu là backgroundcolor. Ví dụ: body { background: red; } Cách để học nhanh thuộc tính background: Bạn chỉ cần nhớ background là thuộc tính đặt nền cho thẻ HTML. Nền thì chỉ có màu sắc hoặc ảnh nền. Bạn cứ viết thuộc tính đơn giản đầu tiên. Sau đó, muốn căn chỉnh gì thì mình thêm vào sử sau: đặt màu nền(background), đặt ảnh nền(backgroundimage). Và chỉ cần viết background. Các giá trị đằng sau chỉ cần đúng cấu trúc là CSS nó nhận biết hết Muốn đặt màu nền: body { background: green; } Muốn đặt hình nền thì bạn lại dùng: body { background: url(canh.jpg); } Xem demo. Kết luận: Thuộc tính background được dùng khá thường xuyên trong CSS. Do vậy, khi học HTML thì bạn cần phải nắm được các dùng thuộc tính này.
thuộc tính background Người đăng: Chiến Thần - Ngày: 09/01/2017 Thuộc tính background CSS giúp xác định cho thẻ HTML Bạn thấy màu xanh đỏ, thấy ảnh này, Đó background Thuộc tính background dùng thường xuyên CSS Thuộc tính background tổng hợp tất thuộc tính Khi viết CSS, bạn thực riêng rẽ thuộc tính • background-color • background-image • background-repeat • background-attachment • background-position Background Color Thuộc tính Background Color dùng để xác định màu cho thẻ HTML Background Color dùng với cấu trúc sau body { background-color: red; } Xem demo Trong CSS, để xác định màu sắc, thường sử dụng giá trị sau: • Mã màu Ví dụ: #ff0000,… • Tên màu sắc Ví dụ: red, black… • Hệ màu RGB Ví dụ như: rgb(255,0,0) Mã màu hệ màu RGB bạn dùng photoshop để lấy Còn tên màu từ tiếng Anh màu sắc Ví dụ sau thiết lập màu cho thẻ h1, h2, h3 h1 { background-color: green; } h2 { background-color: blue; } h3 { } background-color: pink; Xem demo Background Image Background Image dùng để đặt ảnh cho thẻ html Ví dụ: body { background-image: url("anh.jpg"); } Xem demo Khi dùng ảnh làm cần ý thuộc tính sau: background-repeat: Thiết lập lặp lặp lại ảnh để phủ hết thẻ HTML background-repeat có giá trị sau: repeat no-reepeat, repeat-x, repeat-y repeat: ảnh lặp lặp lại đến phủ hết thẻ HTML Măc định, thiết lâp background-image ảnh repeat No-repeat: ảnh không lặp lặp lại repeat-x: lặp lại theo chiều ngang repeat-y: lặp lại theo chiều dọc Ví dụ: p { background-image: url("anh.jpg"); background-repeat: no-repeat; } Xem demo background-attachment Dùng thc tính để cố định ảnh nội dung HTML dài kéo xuống Thuộc tính background-attachment thường dùng giá trị Fixed Ví dụ: body { background-image: url("anh.jpg"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; } Xem demo Backgroud-position Dùng để thiết lập vị trí cho ảnh đặt làm background Giá trị mặc định top left Bạn thể dùng giá trị sau: top, left, right, center, bottom Trong số trường hợp bạn px Nó số cụ thể Ví dụ: body { background-image: url("canh.jpg"); background-repeat: no-repeat; background-position: right top; } Top right : nghĩa ảnh nằm phía bên phải Xem demo body { background-image: url("canh.jpg"); background-repeat: no-repeat; background-position: 10px 5px; } background-position: 10px 5px nghĩa là: ảnh cách lề 10px, cách lề trái 5px Xem demo Khi quen cách dùng background Bạn dùng tổng hợp lại để viết CSS cho nhanh Ví dụ: body { background: #ffffff url("canh.jpg") no-repeat right top; } Xem demo Nhớ thứ tự thiết lập giá trị thuộc tính: • background-color • background-image • background-repeat • background-attachment • background-position Nếu bạn không thiết lập thuộc tính đó, nhận giá trị mặc định Một vài ý: Khi sử dụng thuộc tính CSS bạn phải dùng dấu gạch ngang dấu gạch background-position background_position Các đơn vị kèm phải viết sát, khơng có dấu cách Ví dụ: Sử dụng sai: background-position: 10 px 5px; Đúng là: background-position: 10px 5px; Đường dẫn ảnh ví dụ đặt là: url("canh.jpg") Nếu bạn tải máy chạy thử phải để đầy đủ url("https://tech12h.com/canh.jpg") chạy Nếu viết background CSS hiểu background-color Ví dụ: body { background: red; } Cách để học nhanh thuộc tính background: Bạn cần nhớ background thuộc tính đặt cho thẻ HTML Nền có màu sắc ảnh Bạn viết thuộc tính đơn giản Sau đó, muốn chỉnh thêm vào sử sau: đặt màu nền(background), đặt ảnh nền(background-image) Và cần viết background Các giá trị đằng sau cần cấu trúc CSS nhận biết hết Muốn đặt màu nền: body { background: green; } Muốn đặt hình bạn lại dùng: body { background: url("canh.jpg"); } Xem demo Kết luận: Thuộc tính background dùng thường xuyên CSS Do vậy, học HTML bạn cần phải nắm dùng thuộc tính ... background CSS hiểu background- color Ví dụ: body { background: red; } Cách để học nhanh thuộc tính background: Bạn cần nhớ background thuộc tính đặt cho thẻ HTML Nền có màu sắc ảnh Bạn viết thuộc. .. dụ: body { background: #ffffff url("canh.jpg") no-repeat right top; } Xem demo Nhớ thứ tự thiết lập giá trị thuộc tính: • background- color • background- image • background- repeat • background- attachment... • background- position Nếu bạn khơng thiết lập thuộc tính đó, nhận giá trị mặc định Một vài ý: Khi sử dụng thuộc tính CSS bạn phải dùng dấu gạch ngang khơng phải dấu gạch background- position background_ position