Bài 03 – Màu sắc và phông nền CSS

Home/Học viết code/CSS/Bài 03 – Màu sắc và phông nền CSS

Màu sắc và phông nền

Trong bài hướng dẫn này, bạn sẽ được học cách làm thế nào để định dạng màu sắc và phông nền trên trang web. Chúng ta sẽ cùng xem xét các phương pháp để định vị trí và kiểm soát các hình ảnh dùng làm nền qua các thuộc tính CSS sau đây:

Màu: thuộc tính ‘color’

Thuộc tính color dùng để mô tả màu sắc của các phần tử HTML phía trên nền (foreground elements)
HTML elements sẽ được tạm dịch là những phần tử bao gồm thẻ HTML và nội dung bên trong của nó. Ví dụ
<p>đây là phần tử HTML</p>
Ví dụ bạn muốn tất cả tiêu đề đều có màu đỏ. Các tiêu đề này đều thuộc phần tử HTML <h1>. Đoạn code bên dưới định nghĩa phần tử <h1> có màu đỏ.

h1 {color: #ff0000;}

Giá trị thuộc tính colors có thể sử dụng hệ thập lục phân như ví dụ trên (#ff0000), hoặc sử dụng tên chuẩn  (“red”) hoặc giá trị theo hệ màu rgb (rgb(255,0,0)).

Thuộc tính ‘background-color’

Thuộc tính background-color dùng để xác định màu nền của các phần tử HTML.
Thẻ <body> chứa tất cả nội dung của tài liệu HTML. Do vậy, để thay đổi màu nền của toàn trang HTML, chúng ta sẽ áp dụng thuộc tính background-color cho nó.

Bạn cũng có thể sử dụng màu nền cho các tiêu đề và chữ. Trong ví dụ dưới đây hai màu khác nhau được áp dụng cho các phần tử <body> và <h1>.

body {background-color: #FFCC66;}
h1  {color: #990000; background-color: #FC9804;}

Bạn lưu ý nếu có trên 2 thuộc tính, các thuộc tính phải kết thúc bằng dấu chấm, phẩy (;) như ví dụ như thẻ  <h1> ở trên.

Thuộc tính ảnh nền [background-image]

Thuộc tính CSS background-image thường được sử dụng để nhúng ảnh vào nền.

Bạn có thể sử dụng ảnh dưới đây để thử, click chuột phải và chọn “save image as

css3-logo

body {
  background-color: #FFCC66;
  background-image: url("css3-logo-300x300.png");
     }

 h1 {
  color: #990000;
  background-color: #FC9804;
    }

Lưu ý ví dụ trên, ảnh css3-logo-300×300.png được lưu cùng thư mục chứa tập tin CSS, bạn có thể sử dụng đường dẫn tương đối nếu ảnh nằm ở thư mục khác, vi dụ: ../images/ss3-logo-300×300.png hoặc dùng đường dẫn tuyệt đối, ví dụ http://thietke.website/images/css3-logo-300×300.png
Kêt quả (Bạn có thể nhấp chuột vào tab HTML hay CSS để xem lại code)

Tùy chỉnh lập lại ảnh nền [background-repeat]

Ở ví dụ trên, bạn có nhận thấy rằng ảnh nền được lập lại theo chiều dọc và chiều ngang trên toàn trang, làm thế nào để kiểm soát nó? Thuộc tính background-repeat chính là cách để bạn xác định ảnh nền sẽ lập lại như thế nào hoặc không cho phép lập lại.

Bản bên dưới mô tả các giá trị khác nhau của thuộc tính background-repeat.

ValueDescriptionExample
background-repeat: repeat-xẢnh nền lập lại theo chiều ngangXem ví dụ
background-repeat: repeat-yẢnh nền lập lại theo chiều dọcXem ví dụ
background-repeat: repeatẢnh nền lập lại theo cả chiều ngang và dọcXem ví dụ
background-repeat: no-repeatẢnh nền không được lập lạiXem ví dụ

Ví dụ để tránh ảnh nền lập lại, đoạn code sẽ như dưới đây:

body { 
  background-color: #FFCC66; 
  background-image: url("css3-logo-300x300.png"); 
  background-repeat: no-repeat; 
  } 
h1 { 
  color: #990000; 
  background-color: #FC9804; 
  }

Kết quả (Bạn có thể nhấp chuột vào tab HTML hay CSS để xem lại code)

Cố định vị trí ảnh nền [background-attachment]

Thuộc tính background-attachment dùng để khai báo cố định vị trí ảnh nền hoặc phụ thuộc theo vị trí phần tử chứa nó.

Một ảnh nền được xác định vị trí cố định sẽ không di chuyển theo các đoạn văn bản khi người dùng di chuyển thanh cuộn của trang HTML

Bảng dưới đây mô tả 2 giá trị khác nhau của thuộc tính background-attachment.

Giá trịMô tả
Background-attachment: scrollẢnh sẽ di chuyển theo văn bản khi di chuyển thanh cuộn màn hình
Background-attachment: fixedẢnh sẽ được khóa ở vị trí cố định

Đoạn code dưới đây khai báo vị trí cố định của ảnh, không di chuyển khi người xem di chuyển thanh cuộn.

body {
  background-color: #FFCC66;
  background-image: url("css3-logo-300x300.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
   }

h1 {
  color: #990000;
  background-color: #FC9804;

Kêt quả (Bạn có thể nhấp chuột vào tab HTML hay CSS để xem lại code)

Định vị trí ảnh nền [background-position]

Mặc định, một ảnh nền có trí ở góc trái phía trên màn hình. Thuộc tính background-position cho phép bạn thay đổi vị trí của hình nền và đặt nó ở bất cứ vị trí nào bạn muốn trên màn hình cửa sổ trình duyệt.

Có nhiều cách để xác định giá trị của thuộc tính background-position. Nhưng tất cả đều là một cặp đôi giá trị xác định tọa độ của ảnh trên màn hình. Ví dụ, giá trị ‘100px 200px’ khai báo cho trình duyệt biết rằng ảnh nền nằm ở vị trí cách lề trái 100px và lề trên 200px của cửa sổ trình duyệt.

Tọa độ cũng có thể xác định bằng giá trị phần trăm, hoặc các đơn vị (pixels, centimetres, points ….) hoặc dùng các từ mô tả chuẩn như top, bottom, center, left và right. Ảnh minh họa bên dưới sẽ giúp bạn hình dung ra các giá trị tọa độ tương đương với vị trí nào trên cửa sổ trình duyệt:

Bảng giá trị thuộc tính dưới đây cũng cho bạn những ví dụ về tọa độ

Giá trịMô tả
background-position: 2cm 2cmẢnh nền cách lề trái 2 cm và lề trên 2 cmXem ví dụ
background-position: 50% 25%Ảnh nền nằm giữa hai lề trái phải và thấp hơn 1/4 lề cửa sổ trình duyệt từ trên xuốngXem ví dụ
background-position: top rightẢnh nền nằm ở góc trên bên phải cửa sổ trình duyệtXem ví dụ

Đoạn code bên dưới khai báo ảnh nền nằm ở vị trí sát lề dưới và bên phải

body {
     background-color: #FFCC66;
     background-image: url("css3-logo-300x300.png");
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: right bottom;
     }

 h1 {
     color: #990000;
     background-color: #FC9804;
    }

Kết quả (Bạn có thể nhấp chuột vào tab HTML hay CSS để xem lại code)

Thuộc tính background rút gọn [background]

Thuộc tính background có thể khái báo tất cả các thuộc tính của hình nền đã liệt kê ở trên.

Sử dụng thuộc tính background bạn có thể tiết kiệm được số ký tự khai báo và dễ hiệu chỉnh hơn.

Ví dụ, hãy xem đoạn code dưới đây

 background-color: #FFCC66;
 background-image: url("css3-logo-300x300.png");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;

Nếu sử dụng thuộc tính background bạn sẽ có kết quả tương tự nhưng đoạn code sẽ ngắn hơn nhiều

background: #FFCC66 url("css3-logo-300x300.png") no-repeat fixed right bottom;

Các thuộc tính được liệt kê theo thứ tự:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Nếu có bất kỳ thuộc tính nào không được khai báo, giá trị mặc định sẽ được sử dụng. Ví dụ, nếu background-attachment và background-position không được khai báo trong đoạn code dưới đây:

background: #FFCC66 url("css3-logo-300x300.png") no-repeat;

Hai thuộc tính không được khai báo , nên giá trị mặc định của background-attachment là  scroll  và background-position là top left

Tổng kết

Trong bài học này, bạn đã học được một số kỹ thuật cần thiết để kiểm soát hiển thị hình nền trên các trang HTML bằng CSS. Bài tiếp theo, các bạn chắc chắn sẽ hứng thú với những kỹ thuật CSS để định dạng font chữ theo cách riêng của mình.

Facebook Comments
2020-09-20T11:00:52+00:00Tháng Mười 27, 2014|Categories: CSS|Tags: , , , |

Tác giả:

Xin chào, đây là Blog của Chung - chuyên trang tìm hiểu về ngành thiết kế web nói chung và các ngành thiết kế đồ họa liên quan. I'm a Freelance Web/Graphic Designer - Lecturer at University of Fine Arts, Hong Bang International University, Văn Lang University, Saigon University, Hong Bang International University, Nguyen Tat Thanh University.
Go to Top