Mã màu nền css
|
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 tra các hình ảnh sử dụng làm nền qua các thuộc tính CSS sau đây
Color. thuộc tính 'color'Thuộc tính body {background-color: #FFCC66;}
h1 {color: #990000; background-color: #FC9804;}0Ví dụ bạn muốn tất cả các tiêu đề đều có màu đỏ. Các tiêu đề này đều thuộc phần tử HTML body {background-color: #FFCC66;}
h1 {color: #990000; background-color: #FC9804;}1. Đoạn mã bên dưới định nghĩa phần tử body {background-color: #FFCC66;}
h1 {color: #990000; background-color: #FC9804;}1 có màu đỏh1 {color: #ff0000;}Giá trị thuộc tính màu 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 tiêu chuẩn (“đỏ”) hoặc giá trị theo hệ màu rgb (rgb(255,0,0)) Thuộc tính 'background-color'Thuộc tính body {background-color: #FFCC66;}
h1 {color: #990000; background-color: #FC9804;}3 dùng để xác định màu nền của các phần tử HTMLThẻ body {background-color: #FFCC66;}
h1 {color: #990000; background-color: #FC9804;}4 chứa tất cả nội dung của tài liệu HTML. Do đó, để thay đổi màu nền của HTML toàn trang, chúng ta sẽ áp dụng thuộc tính body {background-color: #FFCC66;}
h1 {color: #990000; background-color: #FC9804;}3 cho nóBạn cũng có thể sử dụng màu nền cho 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 {background-color: #FFCC66;}
h1 {color: #990000; background-color: #FC9804;}4 và body {background-color: #FFCC66;}
h1 {color: #990000; background-color: #FC9804;}1body {background-color: #FFCC66;}
h1 {color: #990000; background-color: #FC9804;}Bạn lưu ý nếu có trên 2 thuộc tính thì các thuộc tính phải kết thúc bằng dấu chấm, dấu phẩy (;) như ví dụ như thẻ body {background-color: #FFCC66;}
h1 {color: #990000; background-color: #FC9804;}1 ở trênThuộc tính ảnh nền [background-image]Thuộc tính CSS body {background-color: #FFCC66;}
h1 {color: #990000; background-color: #FC9804;}9 thường được sử dụng để nhúng ảnh vào nềnBạn có thể sử dụng ảnh dưới đây để thử, nhấp chuột phải và chọn “save image as” 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 CSS, bạn có thể sử dụng đường dẫn tương ứng nếu ảnh nằm trong thư mục khác, ví dụ. . /hình ảnh/ss3-logo-300×300. png hoặc sử dụng đường dẫn tuyệt đối, ví dụ http. //thietke. trang web/hình ảnh/css3-logo-300×300. png Tùy chỉnh thiết lập lại ảnh nền [background-repeat]Ở ví dụ trên, bạn nhận thấy rằng ảnh nền được đặt lại theo chiều dọc và chiều ngang trên toàn trang, làm thế nào để kiểm tra nó? Bản bên dưới mô tả các giá trị khác nhau của thuộc tính body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
}
h1 {
color: #990000;
background-color: #FC9804;
}0Giá trịMô tảVí dụbackground-repeat. repeat-Ảnh nền khởi động lại theo chiều ngang Xem ví dụ background-repeat. repeat-yẢnh nền khởi động lại theo chiều dọcXem ví dụbackground-repeat. lặp lạiẢnh nền khởi động lại theo cả chiều ngang và chiều dọcXem ví dụbackground-repeat. no-repeatẢnh nền không được thiết lập lạiXem ví dụVí dụ để tránh khởi động lại ảnh nền, đoạn mã 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 hoặc CSS để xem lại mã) Cố định vị trí ảnh nền [background-attachment]Thuộc tính body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
}
h1 {
color: #990000;
background-color: #FC9804;
}2 được sử dụng để khai báo đị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 đ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 body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
}
h1 {
color: #990000;
background-color: #FC9804;
}2ValueMô tảBackground-attachment. scrollẢnh sẽ chuyển theo văn bản khi di chuyển thanh cuộn màn hìnhBackground-attachment. fixedẢnh sẽ được khóa ở vị trí cố địnhĐoạn mã 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 hoặc CSS để xem lại mã) Định vị trí ảnh nền [background-position]Mặc định, một ảnh nền có vị trí ở góc trái phía trên màn hình. Thuộc tính body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
}
h1 {
color: #990000;
background-color: #FC9804;
}4 cho phép bạn thay đổi vị trí của hình nền và đặt nó ở bất kỳ vị trí nào bạn muốn trên màn hình cửa sổ trình duyệtCó nhiều cách để xác định giá trị của thuộc tính body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
}
h1 {
color: #990000;
background-color: #FC9804;
}4. Nhưng tất cả đều là một cặp giá trị xác định độ xác định của ảnh trên màn hình. Ví dụ, giá trị ‘100px 200px’ tuyên bố 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ệtCác tỷ lệ cũng có thể được xác định bằng giá trị phần trăm hoặc các đơn vị (pixel, centimet, điểm …. ) hoặc sử dụng các từ mô tả chuẩn như trên, dưới, giữa, trái và phải. Ảnh minh họa bên dưới sẽ giúp bạn định hình các giá trị tọa độ tương ứng với các vị trí bất kỳ trên cửa sổ 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 độ ValueMô tảbackground-position. 2cm 2cmẢnh nền cách lề trái 2 cm và lề trên 2 cmXem ví dụnền-vị trí. 50% 25%Ảnh nền được giữ hai bên trái phải và thấp hơn 1/4 bên cửa sổ trình duyệt từ trên xuốngXem ví dụbackground-position. trên cùng bên phải Ảnh nền nằm ở góc trên bên phải của cửa sổ trình duyệtXem ví dụĐoạn mã bên dưới khai báo ảnh nền nằm ở vị trí sát lề bên 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 hoặc CSS để xem lại mã) Thuộc tính nền Rút gọn [background]Thuộc tính body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
}
h1 {
color: #990000;
background-color: #FC9804;
}6 có thể thảo luận về tất cả các thuộc tính của hình nền được liệt kê ở trênThuộc tính sử dụng body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
}
h1 {
color: #990000;
background-color: #FC9804;
}6 bạn có thể tiết kiệm nhiên liệu theo số ký tự khai báo và dễ hiệu chỉnh hơnVí dụ, hãy xem đoạn mã 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 body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
}
h1 {
color: #990000;
background-color: #FC9804;
}6 bạn sẽ có kết quả tương tự nhưng mã đoạn sẽ rút ngắn hơn nhiềubackground: #FFCC66 url("css3-logo-300x300.png") no-repeat fixed right bottom;Các thuộc tính được liệt kê theo thứ tự body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
}
h1 {
color: #990000;
background-color: #FC9804;
}9. body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}0. body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}1. body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}2. body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}3Nế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 body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
}
h1 {
color: #990000;
background-color: #FC9804;
}2 và body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
}
h1 {
color: #990000;
background-color: #FC9804;
}4 không được khai báo trong đoạn mã dưới đâybackground: #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 body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
}
h1 {
color: #990000;
background-color: #FC9804;
}2 là body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}7 và body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
}
h1 {
color: #990000;
background-color: #FC9804;
}4 là body {
background-color: #FFCC66;
background-image: url("css3-logo-300x300.png");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}9Tổng kếtTrong 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ẽ thích thú với những kỹ thuật CSS để định dạng font chữ theo cách riêng của mình |
