Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Thiết lập màu nền với CSS background
Trong bài này chúng ta tìm hiểu cách thiết lập màu nền cho các thẻ HTML, đây là một thuộc tính khá quan trọng mà bạn cần phải nắm vững vì hầu hết các trang web đều có sử dụng thuộc tính này để tạo background với các hình ảnh hoặc màu sắc (color). Không đi đâu xa mà tại website freetuts.net bạn thấy hai bên trái phải ngoài cùng có màu nền xám xám, đó là mình sử dụng thuộc tính background-image để thiết lập đấy.
Trong bài này chúng ta sẽ tìm hiểu một số thuốc tính backgrounds sau:
- background
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Lưu ý: Vì vấn đề khó khăn trong demo nên mình sẽ viết dạng internal (xem các cách viết css)
1. CSS thiết lập màu nền cho background
Để thiết lập màu nền cho background thì ta sử dụng thuộc tính CSS backgroud-color hoặc background với giá trị của nó là màu sắc của background. Bạn có thể sử dụng mã màu hoặc tên màu bằng tiếng anh đều được.
Bài viết này được đăng tại [free tuts .net]
Thẻ mà ta có thể thiết lập background toàn trang là thẻ body nên ta chỉ cần gán CSS cho thẻ body là được.
body{
background: red;
}Hoặc:
body{
background: #fb0320;
}Hoặc:
body{
background-color: #fb0320;
}2. CSS thiết lập hình nền cho backround
Thiết lập hình nền thì ta sử dụng thuộc tính CSS backgrond hoặc background-image với tham số truyền vào là URL của hình ảnh.
Ví dụ: Lấy logo freetuts.net làm background cho toàn trang
body{
background: url('https://freetuts.net/upload/config/images/hoc-lap-trinh-online.png');
}Hoặc:
body{
background-image: url('https://freetuts.net/upload/config/images/hoc-lap-trinh-online.png');
}3. Cho phép lặp hoặc không lặp background
Như ở ví dụ phần 2 bạn thấy background là logo và nó lặp nhiều lần, vậy làm thế nào không cho lặp background? Ta sẽ sử dụng thuộc tính background-repeat và thuộc tính này gồm các giá trị:
no-repeat: không lặprepeat: cho phép lặprepeat-x: lặp theo chiều ngangrepeat-y: lặp theo chiều đứng
Vẫn còn vài thuộc tính nữa nhưng thông thường chúng ta sử dụng 4 thuộc tính này là đủ rồi.
Note: Trong demo này chỉ có một trường hợp nên bạn có thể thay đổi thuộc tính và chạy lại để xem nhé.
no-repeat
body{
background-image: url('https://freetuts.net/upload/config/images/hoc-lap-trinh-online.png');
background-repeat: no-repeat;
}repeat
body{
background-image: url('https://freetuts.net/upload/config/images/hoc-lap-trinh-online.png');
background-repeat: repeat;
}repeat-x
body{
background-image: url('https://freetuts.net/upload/config/images/hoc-lap-trinh-online.png');
background-repeat: repeat-x;
}repeat-y
body{
background-image: url('https://freetuts.net/upload/config/images/hoc-lap-trinh-online.png');
background-repeat: repeat-y;
}4. Thiết lập vị trí hiển thị cho background
Trường hợp bạn sử dụng background không lặp và bạn muốn background hiển thị ở một ví trí nào đó như center, left, right, ... thì bạn sử dụng thuộc tính background-position. Cấu trúc của nó là:
background-position: position1 position2
Trong đó position1 và position2 gồm các giá trị sau:
bottom: ở dướileft: bên tráiright: bên phảicenter: ở giữatop: ở trên
Lưu ý: khi các bạn chọn giá trị thì phải chọn đúng chuẩn như: left bottom, left top, right top, .. chứ không thể chọn left right được vì nó không tuân theo hệ tọa độ đề cát.
body
{
height: 300px;
background-image: url('https://freetuts.net/upload/config/images/hoc-lap-trinh-online.png');
background-repeat: no-repeat;
background-position: center;
}body
{
height: 300px;
background-image: url('https://freetuts.net/upload/config/images/hoc-lap-trinh-online.png');
background-repeat: no-repeat;
background-position: left bottom;
}Thực tế thì thuộc tính backgroud-position là viết tắt của hai thuộc tính background-position-x và backgroud-position-y nên thay vì truyền hai tham số vào background-position thì bạn có thể sử dụng nó để thay thế.
5. Thiết lập background đứng im khi scroll (fixed background)
Nếu màn hình dài quá thì khi bạn lăn chuột background sẽ kéo theo nên nếu bạn muốn nó đứng im thì có thể sử dụng thuộc tính background-attachment. Thông thường chúng ta sử dụng hai thuộc tính:
fixed: sẽ đứng imscroll: sẽ di chuyển theo khi kéo
body
{
height: 1000px;
background-image: url('https://freetuts.net/upload/config/images/hoc-lap-trinh-online.png');
background-repeat: no-repeat;
background-attachment: fixed;
}Trong ví dụ này mình thiết lập chiều cao là 1000px để có thanh cuộn.
6. Sử dụng thuộc tính background nâng cao
Nếu bạn cảm thấy các thông số thiết lập background quá dài thì có thể sử dụng thuộc tính background ở dạng ghi tắt.
body
{
height: 1000px;
background: url('https://freetuts.net/upload/config/images/hoc-lap-trinh-online.png') no-repeat bottom fixed;
}7. Sử dụng selector và background
Các ví dụ trên mình toàn dùng cho thẻ body nhưng trong thực tết bạn có thể dùng nó cho bất kì thẻ nào bằng cách sử dụng selector trong css.
h1h1
{
height: 1000px;
background: url('https://freetuts.net/upload/config/images/hoc-lap-trinh-online.png') no-repeat bottom fixed;
}id="demo"#demo
{
background: red;
}Quá đơn giản phải không nào :D.
8. Lời kết
Trong bài này chủ yếu tìm hiểu các thuộc tính CSS xử lý background, nhưng vẫn còn nhiều thuộc tính nâng cao nữa nhưng ít khi sử dụng nên mình không trình bày nó trong bài này, bạn phải học từ từ mới thấm trong người được chứ vội quá quên hết. Chúc các ban học CSS vui vẻ :D
