Bài giảng CSS

Bài 3 : thuộc tính Background Phần này chúng ta sẽ tìm hiểu cách định màu nền, ảnh nền cho một trang web cũng như các kĩ thuật định vị điều chỉnh ảnh nền Có bảng các thuộc tính của Background stt Thuộc tính Mô tả Giá trị 1 Background-color Thiết lập màu nền cho đối tuợng Transparent(trong suốt) 2 Background-image Thiết lập ảnh nền cho đối tượng URL None 3 Background-repeat Thiết lập chế độ lặp ảnh nền Repeat Repeat-x Repeat-y No-repeat 4 Background-attachment Thiết lập ảnh nền cuộn/ cố định Scroll Fixed 5 Background-position Thiết lập vị trí thể hiện ảnh nền Top left Top center Top right Center left Center center Center right Bottom left Bottom center Bottom right x%y% x y 1, thuộc tính Background-color Giúp định màu nền cho một thành phần trên trang web. a, Các giá trị của color gồm có color grb : tạo màu vói chế độ trộn. ví dụ : background-color:rgb(250,10,200); color-hex : màu trong chế độ hex ví dụ: backgroung-color:#000000; color-name: tên màu được chọn ví dụ: background-color: red; transparent : tạo màu trong suốt b, cách sử dụng ví dụ sau sẽ cho chúng ta biết cách sử dụng của thuộc tính background-color. Màu trang web là màu vàng, màu xanh(kiểu hex) cho h1, màu trong suốt cho h2 và màu tím(kiểu trộn) cho h3 body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} h3 {background-color: rgb(200,10,250)} Ten to la Kieu Thi Hop ten ban la gi? ban co thich mau trang khong? Kết quả là khop.htm 2, thuộc tính : Background-image sử dụng để chèn ảnh vào trang web a, Giá trị của Background-image gồm: -URL: đuờng dẫn ảnh -none: không ảnh nền, ảnh mặc định b, cách sử dụng: body { background-image: url(phongcanh_11.jpg') } Kết quả là th.html 3, thuộc tính : Background-repeat( lặp lại ảnh nền) Nếu sử dụng một ảnh có kích thước quá nhỏ làm nền cho một đối tuợng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn thừa Thuộc tính bachground-repeat sẽ giúp ta điều khiển kiểm soát tình trạnh lặp lại của ảnh nền a, giá trị thuộc tính gồm - repeat-x: lặp lại ảnh theo phương ngang; - repeat-y : lặp lại ảnh theo phưong dọc; - repeat : giá trị mặc định, lặp lại theo cả 2 phương ngang và dọc - no-repeat: không lặp lại ảnh; b, cách sử dụng body { background-image: url(hoa.jpg'); background-repeat: repeat } Kết quả là th1.html Thay repeat thành repeat-x sẽ cho kết quả sau: th2.html Thay repeat thành repeat-y sẽ cho kết quả là: Còn lại giá trị no-repeat sẽ cho kết quả sau 4, thuộc tính Bachground-attrachment ( chèn ảnh nền) Thuộc tính này cho phép xác định tính cố định của ảnh nền so với nội dung trang web. a, các giá trị là - scroll: ảnh nền sẽ cuộn cung nội dung trang Web - fĩxed : cố định ảnh nền so với nội dung trang web. Khi sử dụng giá trị này ảnh nền sẽ đứng yên khi bạn cuộn trang Web. b, cách sử dụng: body { background-image: url('bupbe.jpg'); background-repeat: no-repeat; background-attachment: fixed } anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web anh se khong cuon cung trang web Kết quả cho là: kh.html thay fixed bằng scroll được kết quả kh1.html 5, thuộc tính Background-position Theo mặc định ảnh nền khi đuợc chèn sẽ nằm ở góc trên, bên trái của màn hình Tuy nhiên với thuộc tính Background-position bạn có thể đặt ảnh nền ở bất kỳ vị trí nào trong trang Web. a, các giá trị của thuộc tính Background-positition sẽ dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. các giá trị của kiểu này: -top left : trên trái-top center: trên giữa-top right : trên phải -center left : giữa trái-center center : chính giữa-center right : giữa phải-bottom left : dưới trái-bottom center: duới giữa-bottom right : dưới phải-x% y% : giá trị % -xpos ypos : các đơn vị đo b, các cách sử dụng với center body { background-image:url('bupbe.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } Note: voi trinh duyet mirolla thi nen dung gia tri "fixed". Cho kết quả là: Thay center bằng 30% 40% sẽ cho kết quả: