Bảng khóa học

Hướng dẫn nâng cao CSS

• Sách học thêm CSS
• Giới thiệu CSS
• Ngữ pháp cơ bản CSS
• Ngữ pháp nâng cao CSS
• Chọn selector phân cấp CSS
• Chọn selector id CSS
• Chọn selector lớp CSS
• Tạo CSS
• Nền CSS
• Tekst CSS
• Font CSS
• Danh sách CSS

Khung mô hình CSS

• Giới thiệu khung mô hình CSS
• Căn lề nội bộ CSS
• Khung viền CSS
• Cân lề ngoài CSS
• Hợp nhất cân lề ngoài CSS

Định vị CSS

• Giới thiệu định vị CSS
• Định vị tương đối CSS
• Định vị tuyệt đối CSS
• Cuộn nổi CSS

Chọn器 CSS

• Chọn selector yếu tố CSS
• Nhóm selector CSS
• Xác minh chi tiết selector lớp CSS
• Xác minh chi tiết selector id CSS
• Xác minh chi tiết selector thuộc tính CSS
• Chọn selector后代 CSS
• Chọn selector yếu tố con CSS
• Chọn selector anh em tiếp theo CSS

Khóa học tự chọn

Khuyến nghị khóa học:

• Tủ đựng đồ CodeW3C.com

CSS cho phép áp dụng màu đơn色 làm nền, cũng như sử dụng hình ảnh nền để tạo ra hiệu ứng phức tạp.

CSS có khả năng vượt xa HTML trong việc này.

màu nền

Bạn có thể sử dụng Thuộc tính background-colorĐặt màu nền cho yếu tố. Thuộc tính này chấp nhận bất kỳ giá trị màu hợp lệ nào.

Luật này sẽ đặt nền của yếu tố thành màu xám:

p {background-color: gray;}

Nếu bạn muốn màu nền từ văn bản của yếu tố ít lan rộng ra ngoài, chỉ cần thêm một chút padding trong:

p {background-color: gray; padding: 20px;}

Thử ngay

Bạn có thể đặt màu nền cho tất cả các yếu tố, bao gồm body cho đến các yếu tố nội bộ như em và a.

background-color không thể kế thừa, giá trị mặc định là transparent. Transparent có nghĩa là “trong suốt”. Nghĩa là, nếu một yếu tố không được chỉ định màu nền, thì nền sẽ là trong suốt, như vậy nền của yếu tố cha mới có thể nhìn thấy.

hình nền

Để đưa hình ảnh vào nền, bạn cần sử dụng Thuộc tính background-image.Giá trị mặc định của thuộc tính background-image là none, có nghĩa là không có bất kỳ hình ảnh nào được đặt trên nền.

Nếu cần thiết để đặt một ảnh nền, bạn phải đặt một giá trị URL cho thuộc tính này:

body {background-image: url(/i/eg_bg_04.gif);}

Hầu hết các nền đều được áp dụng cho phần tử body, nhưng không chỉ giới hạn ở đó.

Ví dụ dưới đây là một đoạn văn được áp dụng nền mà không ảnh hưởng đến phần còn lại của tài liệu:

p.flower {background-image: url(/i/eg_bg_03.gif);}

Bạn thậm chí có thể đặt ảnh nền cho các phần tử trong dòng, ví dụ dưới đây là một liên kết được đặt ảnh nền:

a.radio {background-image: url(/i/eg_bg_07.gif);}

Thử ngay

Trên lý thuyết, bạn thậm chí có thể áp dụng ảnh nền cho các phần tử thay thế như textareas và select, nhưng không phải tất cả các trình duyệt đều xử lý tốt tình huống này.

Ngoài ra, cần lưu ý rằng background-image cũng không thể kế thừa. Thực tế, tất cả các thuộc tính nền đều không thể kế thừa.

Lặp lại nền

Nếu cần lặp lại ảnh nền trên trang, bạn có thể sử dụng Thuộc tính background-repeat.

Giá trị thuộc tính repeat dẫn đến việc ảnh được lặp lại theo hướng ngang dọc, giống như cách làm thường thấy của ảnh nền trong quá khứ. repeat-x và repeat-y dẫn đến việc ảnh chỉ được lặp lại theo hướng ngang hoặc dọc, trong khi no-repeat không cho phép ảnh được lặp lại theo bất kỳ hướng nào.

Mặc định, ảnh nền sẽ bắt đầu từ góc trên cùng bên trái của một phần tử. Hãy xem ví dụ dưới đây:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

Thử ngay

Định vị nền

Bạn có thể sử dụng Thuộc tính background-positionThay đổi vị trí của ảnh trong nền.

Dưới đây là ví dụ về việc đặt ảnh nền giữa trong phần tử body:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

Có nhiều phương pháp cung cấp giá trị cho thuộc tính background-position. Đầu tiên, bạn có thể sử dụng một số từ khóa: top, bottom, left, right và center. Thường thì những từ khóa này sẽ xuất hiện theo cặp, nhưng không phải lúc nào cũng như vậy. Bạn cũng có thể sử dụng giá trị chiều dài, như 100px hoặc 5cm, cuối cùng bạn cũng có thể sử dụng giá trị phần trăm. Các loại giá trị khác nhau đối với việc đặt ảnh nền có sự khác biệt nhỏ.

Từ khóa

Từ khóa đặt hình ảnh dễ hiểu nhất, tác dụng như tên của nó表明. Ví dụ, top right sẽ đặt hình ảnh ở góc trên bên phải của vùng lề trong của phần tử.

Theo quy định, từ khóa vị trí có thể xuất hiện theo bất kỳ thứ tự nào, miễn là đảm bảo không vượt quá hai từ khóa - một từ khóa cho hướng ngang và một từ khóa cho hướng dọc.

Nếu chỉ xuất hiện một từ khóa, từ khóa còn lại được coi là center.

Vậy, nếu bạn muốn đặt một hình ảnh ở giữa trên của mỗi đoạn văn, bạn chỉ cần khai báo như sau:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

Dưới đây là các từ khóa vị trí tương đương:

Giá trị phần trăm

Cách thể hiện của giá trị phần trăm phức tạp hơn. Giả sử bạn muốn sử dụng giá trị phần trăm để đặt hình ảnh ở giữa phần tử, điều này rất dễ dàng:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

Điều này sẽ dẫn đến việc hình ảnh được đặt phù hợp, trung tâm của nó sẽ được đối齐 với trung tâm của phần tử.Nói cách khác, giá trị phần trăm được áp dụng đồng thời cho phần tử và hình ảnh.Đ换句话说, điểm được mô tả là 50% 50% trong hình ảnh (điểm trung tâm) sẽ được đối齐 với điểm được mô tả là 50% 50% trong phần tử (điểm trung tâm).

Nếu hình ảnh ở 0% 0%, góc trên bên trái của nó sẽ được đặt ở góc trên bên trái của vùng lề trong của phần tử. Nếu vị trí hình ảnh là 100% 100%, nó sẽ đặt góc dưới bên phải của hình ảnh ở góc dưới bên phải của lề phải.

Vậy, nếu bạn muốn đặt một hình ảnh ở vị trí 2/3 theo hướng ngang và 1/3 theo hướng dọc, bạn có thể khai báo như sau:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

Nếu chỉ cung cấp một giá trị phần trăm, giá trị này sẽ được sử dụng làm giá trị ngang, giá trị dọc sẽ được giả định là 50%. Điều này tương tự như từ khóa.

Giá trị mặc định của background-position là 0% 0%, tương đương với top left về chức năng. Điều này giải thích tại sao hình ảnh nền luôn bắt đầu dán từ góc trên bên trái của vùng lề trong của phần tử, trừ khi bạn đã thiết lập giá trị vị trí khác.

Giá trị độ dài

Giá trị độ dài giải thích là dịch chuyển từ góc trên cùng bên trái của khu vực lề của yếu tố. Điểm dịch chuyển là góc trên cùng bên trái của hình ảnh.

Ví dụ, nếu giá trị được thiết lập là 50px 100px, góc trên cùng bên trái của hình ảnh sẽ ở vị trí 50 pixel phải và 100 pixel xuống từ góc trên cùng bên trái của khu vực lề của yếu tố:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

Lưu ý, điều này khác với giá trị phần trăm vì dịch chuyển chỉ từ góc trên cùng bên trái đến góc trên cùng bên phải. Nghĩa là góc trên cùng bên trái của hình ảnh sẽ đối齐 với điểm được chỉ định trong tuyên bố background-position.

Liên kết nền

Nếu tài liệu khá dài, thì khi tài liệu cuộn xuống, hình ảnh nền cũng sẽ cuộn theo. Khi tài liệu cuộn qua vị trí của hình ảnh, hình ảnh sẽ biến mất.

Bạn có thể thông qua Thuộc tính background-attachmentNgăn chặn sự cuộn này. Bằng cách này, có thể tuyên bố hình ảnh tương đối với khu vực nhìn thấy là cố định (fixed), vì vậy sẽ không bị ảnh hưởng bởi cuộn:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

Thử ngay

Giá trị mặc định của thuộc tính background-attachment là scroll, có nghĩa là trong tình huống mặc định, nền sẽ cuộn theo tài liệu.

Thuộc tính nền CSS

Bộ công cụ

Sách tham khảo CSS

Mẫu CSS

Kiểm tra CSS

Hướng dẫn CSS

Liên kết nhà tài trợ