2.3.2 Màu mặt trước
Có thể thiết lập màu mặt trước (foreground color) và màu nền (background) cho mọi phần tử HTML. Mặt trước của một phần tử bao gồm văn bản và đường viền (nếu được thiết lập). Để thiết lập màu mặt trước của một phần tử, sử dụng thuộc tính color.
Dưới đây là một số đặc tính của color,
– Giá trị: giá trị màu (tên hoặc số) | inherit
– Mặc định: tùy trình duyệt và thiết lập của người dùng
– Áp dụng: cho mọi phần tử
– Kế thừa: có
Ví dụ, luật CSS sau sẽ thiết lập màu mặt trước cho phần tử blockquote là màu xanh nhạt, với các giá trị R:80, G:140 và B:25, đổi giá trị này sang hệ 16 sẽ là #508C19. Hai phần tử p và em là hậu duệ của phần tử blockquote nên cũng được kế thừa màu vừa thiết lập.
[HTML]
<blockquote>
<p>Đây là ví dụ về màu mặt trước <em>(foreground color)</em></p>
</blockquote>
[CSS]
blockquote {
border: 4px dashed;
color: #508C19;
}
[Kết quả]
Nếu thuộc tính border-color cũng được thiết lập thì nó sẽ thay thế màu của đường viền đang được thiết lập bằng thuộc tính color.
2.3.3 Màu nền
Sử dụng thuộc tính background-color để thiết lập màu nền cho các phần tử HTML.
Dưới đây là một số đặc tính của background-color,
– Giá trị: giá trị màu (tên hoặc số) | transparent | inherit
– Mặc định: transparent (trong suốt)
– Áp dụng: cho mọi phần tử
– Kế thừa: không
Khung nền (canvas) bao gồm: vùng chứa nội dung, khoảng đệm phía trong đường viền (padding), nền chứa đường viền, không bao gồm vùng đệm phía ngoài đường viền (margin).
Thuộc tính background-color sẽ đổ màu cho toàn bộ phần khung nền, hay được gọi tắt là nền.
Ví dụ, định dạng màu nền cho phần tử blockquote,
blockquote {
border: 4px dashed;
color: #508C19;
background-color: #B4BDE6;
}
[Kết quả]
Mặc dù màu nền không được kế thừa xuống các hậu duệ, tuy nhiên, do màu nền mặc định của các phần tử là trong suốt (transparent), nên màu nền của một phần tử cũng được xem như là màu nền của các phần tử hậu duệ. Ví dụ, có thể thiết lập màu nền cho toàn bộ trang web bằng cách thiết lập màu nền cho phần tử body. Sau đó, cũng có thể thay đổi màu nền cho từng phần tử trong một trang web, dù là phần tử kiểu block hay kiểu inline.
2.3.4 Làm mờ một phần tử
Ở phần trước đã tìm hiểu cách làm mờ một phần tử bằng định dạng màu RGBa. Phần này giới thiệu một cách khác để làm mờ phần tử bằng thuộc tính opacity. Opacity có nghĩa là độ mờ.
Dưới đây là một số đặc tính của opacity,
– Giá trị: giá trị số (trong khoảng từ 0 đến 1)
– Mặc định: 1
– Áp dụng: cho mọi phần tử
– Kế thừa: không
Giá trị của thuộc tính opacity càng nhỏ thì phần tử càng mờ, giá trị 0 là mờ nhất, giá trị 1 là rõ nhất.
Ví dụ,
body {
background-color: #333333;
}
h1 {
color: #00FF00;
background-color: #FFFFFF;
opacity: .25;
}
Hình dưới đây là một số ví dụ sử dụng thuộc tính opacity,
2.3.5 Bộ chọn pseudo-class
Nếu để ý sẽ thấy, một liên kết khi người dùng chưa bấm chuột vào sẽ có một màu và khi đã bấm chuột rồi sẽ có màu khác. Có hiện tượng này là vì trình duyệt đã lưu lại trạng thái để biết các liên kết nào đã được bấm chuột vào, và các liên kết nào chưa. Ngoài ra, trình duyệt cũng cung cấp một số thông tin trạng thái khác như: người dùng có rê chuột lên một phần tử hay không (hover state), một phần tử có là cái đầu tiên của một loại, một phần tử có phải là con đầu tiên/cuối cùng của một phần tử cha, phần tử có được chọn không (checked) hay phần tử có bị vô hiệu không(disabled).
Trong CSS, có thể định dạng phần tử dựa trên các trạng thái như vậy, bằng cách sử dụng bộ chọn pseudo-class, gọi nôm na là “lớp giả”.
Sao lại gọi là “lớp giả”? Như đã biết, thuộc tính class được sử dụng để gán định danh cho phần tử, các phần tử có cùng giá trị class (cùng định danh) sẽ được xem là cùng một lớp. Tuy nhiên, trạng thái của phần tử không được thể hiện tường minh trong mã nguồn, nghĩa là không có định danh, mà nó được xác định ngầm (dựa vào vị trí của phần tử trong mã nguồn hoặc tương tác của người dùng), các phần tử có cùng trạng thái cũng được xem là cùng một lớp, nhưng lớp này không tường minh, nên gọi là “lớp giả”.
Cú pháp của pseudo-class thường được bắt đầu bằng tên một phần tử, tiếp theo là dấu hai chấm (:), cuối cùng là tên của trạng thái, ví dụ: li:first-child.
Bộ chọn pseudo-class có hai loại: bộ chọn pseudo-class dựa trên tương tác của người dùng gọi là bộ chọn động, bộ chọn pseudo-class dựa trên vị trí của phần tử trong mã HTML được gọi là bộ chọn tĩnh.
Bộ chọn pseudo-class cho liên kết
Bộ chọn pseudo-class cho liên kết được sử dụng để định dạng các liên kết dựa trên trạng thái của nó. Đây là loại pseudo-class động. Cụ thể,
:link dùng để định dạng cho liên kết chưa được người dùng bấm vào
:visited dùng để định dạng cho liên kết đã được người dùng bấm vào
Ví dụ: mặc định, liên kết người dùng chưa bấm vào sẽ có màu xanh, bấm vào rồi sẽ có màu tím. Tuy nhiên, có thể sử dụng CSS để thay đổi thành màu khác,
a:link {
color: maroon;
}
a:visited {
color: gray;
}
Bộ chọn pseudo-class dựa trên thao tác người dùng
Ngoài pseudo-class dựa vào trạng thái của liên kết, phần này sẽ tìm hiểu thêm các pseudo-class dựa trên thao tác của người dùng, gồm ba bộ chọn sau:
:focus áp dụng khi người dùng chọn phần tử để nhập nội dung, phần tử được chọn sẽ nổi bật hơn so với các phần tử còn lại, bộ chọn này hay áp dụng cho các ô nhập liệu của form. Ví dụ, ô nhập liệu sau sẽ có nền màu vàng khi người dùng chọn,
input:focus { background-color: yellow; }
:hover áp dụng khi rê con trỏ chuột trên một phần tử, mặc dù có thể áp dụng trên mọi phần tử HTML, tuy nhiên, bộ chọn này hay được áp dụng trên các liên kết, nhằm gây chú ý cho người sử dụng. Ví dụ, liên kết sẽ đổi màu nền khi người dùng rê chuột lên,
a:hover {
color: maroon;
background-color: #FFD9D9;
}
:active áp dụng khi một phần tử (nút hoặc liên kết) đang được bấm chuột. Ví dụ, liên kết sẽ đổi màu nền khi người dùng đang bấm chuột lên,
a:active {
color: red;
background-color: # FFD9D9;
}
Áp dụng năm thuộc tính trên cho liên kết
Nhà thiết kế web thường định dạng cho tất cả các trạng thái của một liên kết, nhằm làm cho giao diện cuốn hút hơn. Nói chung, tâm lý người dùng luôn muốn nhận lại một kết quả gì đó sau mỗi thao tác của họ, ví dụ, cập nhật các liên kết họ đã ghé thăm, khi rê chuột lên một liên kết sẽ có hiệu ứng xuất hiện, hoặc khi bấm chuột vào liên kết nó sẽ chuyển màu để báo việc bấm chuột đã có tác dụng.
Khi áp dụng cả năm bộ chọn pseudo-class vừa tìm hiểu ở trên cho một liên kết, sẽ xảy ra tình trạng xung đột, do vậy, thứ tự áp dụng của các bộ chọn cần được quan tâm. Ví dụ, nếu để hai bộ chọn :link và :visited sau cùng, nó sẽ làm mất tác dụng của các bộ chọn khác.
Thứ tự của các bộ chọn nên theo là, :link, :visited, :focus, :hover, :active
Ví dụ,
a { text-decoration: none; } /* bỏ dấu gạch chân */
a:link { color: maroon; }
a:visited { color: gray; }
a:focus { color: maroon; background-color: #FFD9D9; }
a:hover { color: maroon; background-color: # FFD9D9; }
a:active { color: red; background-color: # FFD9D9; }
Các bộ chọn pseudo-class dựa trên cấu trúc tài liệu
Phần trên đã tìm hiểu các bộ chọn pseudo-class động, phần này sẽ giới thiệu một số bộ chọn pseudo-class tĩnh.
Bộ chọn pseudo-class tĩnh sẽ chọn ra các phần tử dựa vào vị trí của nó trong cấu trúc tài liệu HTML. Dưới đây là ví dụ một số bộ chọn,
:root, :empty, :first-child, :last-child, :only-child
:first-of-type, :last-of-type, :only-of-type, :nth-child()
:nth-last-child(), :nth-of-type(), :nth-last-of-type()
Các bộ chọn pseudo-class cho UI
Bộ chọn pseudo-class cho UI sẽ chọn ra các phần tử dựa vào trạng thái được thiết lập cho một số thành phần của form. UI là viết tắt của User Interface. Ví dụ,
:enabled
:disabled
:checked
Các bộ chọn pseudo-class khác
:target chọn các phần tử dựa vào các “id phân đoạn” (fragment identifier) trong URL
:lang() chọn các phần tử dựa vào mã ngôn ngữ
:not() chọn các phần tử không được liệt kê trong dấu ( )
2.3.6 Bộ chọn pseudo-element
Không chỉ có bộ chọn pseudo-class (“lớp giả”), CSS còn có các bộ chọn pseudo-element (“phần tử giả”). Bộ chọn pseudo-element không chọn các phần tử trong tài liệu HTML, cũng không dựa vào trạng thái của phần tử, mà nó sẽ chọn các đối tượng “giả”, dựa vào vị trí hiển thị của các đối tượng trên cửa sổ trình duyệt. Có bốn bộ chọn pseudo-element gồm, : :first-line, : :first-letter, ::before và ::after.
Lưu ý, trong CSS3, để phân biệt giữa pseudo-class và pseudo-element, khi viết pseudo-class sẽ sử dụng một dấu hai chấm (:), trong khi pseudo-element sử dụng hai dấu hai chấm (::). Trong CSS2 và CSS1, cả hai bộ trọn này đều sử dụng một dấu hai chấm (:).
Bộ chọn ::first-line
Bộ chọn ::first-line được sử dụng để chọn hàng đầu tiên của một phần tử văn bản (khi văn bản hiển thị trên trình duyệt). Tuy nhiên, với bộ chọn này, chỉ có thể áp dụng được các thuộc tính sau,
color, font, background
word-spacing, letter-spacing, text-decoration
vertical-align, text-transform, line-height
Ví dụ,
p::first-line {
color: red;
}
Bộ chọn ::first-letter
Bộ chọn ::first-letter được sử dụng để chọn kí tự đầu tiên của một phần tử văn bản (khi văn bản hiển thị trên trình duyệt). Tuy nhiên, với bộ chọn này, chỉ có thể áp dụng được các thuộc tính sau,
color, font, text-decoration
text-transform, vertical-align, padding
background, margin, line-height
border, float, letter-spacing, word-spacing
Ví dụ,
p::first-letter {
color: red;
}
Bộ chọn ::before
Bộ chọn ::before được sử dụng để chèn thêm nội dung vào trước một phần tử mà không cần thêm nội dung đó vào mã nguồn (cái này được gọi là thêm nội dung bằng CSS).
Ví dụ, đoạn mã CSS sau sẽ thêm cụm từ “Đọc thêm: ” vào trước phần tử p,
p::before {
content: "Đọc thêm: ";
color: red;
font-weight: bold;
}
Bộ chọn :after
Bộ chọn ::after được sử dụng để chèn thêm nội dung vào sau một phần tử mà không cần thêm nội dung đó vào mã nguồn (cái này được gọi là thêm nội dung bằng CSS).
Ví dụ, đoạn mã CSS sau sẽ thêm cụm từ “(Kết thúc)” vào sau phần tử p,
p::after {
content: "(Kết thúc)";
color: red;
font-weight: bold;
2.3.7 Bộ chọn dựa trên thuộc tính
Có thể tạo bộ chọn dựa vào tên và giá trị thuộc tính của phần tử. Cách làm này giúp tạo ra các bộ chọn rất linh hoạt mà không cần phải thêm thuộc tính class hoặc id vào các phần tử.
element[attribute]
Đây là bộ chọn đơn giản, nó sẽ chọn ra các phần tử với tên thuộc tính cụ thể, không quan tâm tới giá trị của thuộc tính.
Ví dụ, bộ chọn sau sẽ chọn ra tất cả các phần tử img, có thuộc tính title
img[title] {border: 3px solid;}
element[attribute=“giá trị”]
Bộ chọn này sẽ chọn ra các phần tử với tên và giá trị thuộc tính cụ thể. Vì giá trị có phân biệt chữ hoa/chữ thường nên cần xác định giá trị chính xác.
Ví dụ, bộ chọn sau sẽ chọn ra tất cả các phần tử img, có tên thuộc tính title và giá trị là “con vịt”,
img[title="con vịt"] {border: 3px solid;}
element[attribute~=“giá trị”]
Bộ chọn này sẽ chọn ra các phần tử với tên và một phần giá trị của thuộc tính.
Ví dụ, bộ chọn sau sẽ chọn ra tất cả các phần tử img, mà trong giá trị thuộc tính title có chứa từ “con”, như vậy, các phần tử img với title có giá trị là “con gà” hay “con vịt” đều được chọn.
img[title~="con"] {border: 3px solid;}
element[attribute|=“giá trị”]
Bộ chọn này sẽ chọn ra các phần tử với tên thuộc tính và giá trị thuộc tính sẽ bắt đầu bằng một từ cụ thể, sau đó là dấu gạch nối (hyphen) (-).
Ví dụ, bộ chọn sau sẽ chọn ra tất cả các phần tử img, mà trong giá trị thuộc tính title bắt đầu là từ “con”, sau đó là dấu (-), như vậy các phần tử img với title có giá trị là “con-gà” hay “con-vịt” đều được chọn.
img[title|="con"] {border: 3px solid;}
element[attribute^=“phần đầu của giá trị”]
Bộ chọn này sẽ chọn ra các phần tử, với tên thuộc tính và phần đầu của giá trị được xác định trước.
Ví dụ, bộ chọn sau sẽ chọn ra tất cả các phần tử img, mà trong giá trị thuộc tính src bắt đầu là chuỗi “/images/icons”.
img[src^="/images/icons"] {border: 3px solid;}
element[attribute$=“phần cuối của giá trị”]
Bộ chọn này sẽ chọn ra các phần tử, với tên thuộc tính và phần cuối của giá trị được xác định trước.
Ví dụ, bộ chọn sau sẽ chọn ra tất cả các phần tử img, mà trong giá trị thuộc tính src kết thúc là chuỗi “.jpg”.
img[src^=".jpg"] {border: 3px solid;}
element[attribute*=“một phần giá trị bất kì”]
Bộ chọn này sẽ chọn ra các phần tử, với tên thuộc tính và một phần bất kì trong giá trị thuộc tính.
Ví dụ, bộ chọn sau sẽ chọn ra tất cả các phần tử img, mà trong giá trị thuộc tính title có chứa chuỗi “on”. Như vậy các phần tử img với title có giá trị là “con-gà” hay “con-vịt” hay “anh-chon” đều được chọn.
img[title*="on"] {border: 3px solid;}
Lab2.3.a (exercise 13-1, p.283 [3])
2.3.8 Ảnh nền
Có hai cách để chèn hình ảnh vào trang web, một là chèn hình ảnh như là một phần của nội dung, hai là chèn ảnh để làm nền trang trí. Nếu chèn hình ảnh như là một phần của nội dung thì sử dụng phần tử img, nếu chèn hình ảnh để làm nền trang trí (ảnh nền) thì sử dụng CSS.
Phần này sẽ tìm hiểu các thuộc tính để thao tác với ảnh nền. Gồm các thuộc tính sau,
– background-image
– background-repeat
– background-position
– background-attachment
– background-clip
– background-size
– background
Thêm ảnh nền
Sử dụng thuộc tính background-image để thêm một ảnh nền cho phần tử HTML bất kì. Chức năng của background-image là chỉ ra vị trí (đường dẫn - pathname) của tập tin ảnh nền.
Dưới đây là một số đặc tính của background-image,
– Giá trị: url (vị trí của tập tin ảnh) | none | inherit
– Mặc định: none
– Áp dụng: cho mọi phần tử
– Kế thừa: không
Vị trí của ảnh nền được xác định bằng thuộc tính background-image. Vị trí này là tương đối, nó tùy thuộc vào vị trí đặt luật CSS, nếu luật CSS đặt trong tập tin HTML thì vị trí sẽ là tương đối tính theo tập tin HTML, nếu luật CSS đặt trong tập tin .css thì vị trí sẽ là tương đối tính theo tập tin .css.
Ví dụ, dưới đây là hai luật CSS để thêm ảnh nền cho toàn bộ trang web (phần tử body) và cho phần tử blockquote,
body {
background-image: url(star.gif);
}
blockquote {
background-image: url(dot.gif);
padding: 2em;
border: 4px dashed;
}
Ở chế độ mặc định, ảnh nền sẽ được xếp lớp (trong trường hợp kích thước ảnh nền nhỏ hơn kích thước của phần tử), ảnh nền gốc sẽ được đặt ở góc trên bên trái, sau đó là các bản sao của nó, các bản sao sẽ được xếp liên tục, hết hàng trên, xuống hàng dưới, cho tới khi nào lấp đầy phần tử. Cũng giống như khi thiết lập màu nền, vùng được chèn ảnh nền bao gồm: vùng nội dung, vùng đệm phía trong đường viền (padding), nền chứa đường viền.
Nếu một phần tử được thiết lập cả màu nền (background-color) và ảnh nền (background-image) thì ảnh nền sẽ nằm phía trên của màu nền. Vì lý do này, nên thiết lập màu nền tương tự như màu chủ đạo của ảnh nền, đề phòng trường hợp không tải được ảnh nền thì vẫn có màu nền phù hợp, và không ảnh hưởng nhiều đến nội dung trang web.
Khi thêm ảnh nền cần chú ý một số điểm sau,
– Sử dụng ảnh nền phù hợp để dễ đọc phần nội dung
– Luôn thiết lập màu nền dự phòng (background-color), chọn màu nền tương tự với màu chủ đạo của ảnh nền, đảm bảo nếu không tải được ảnh nền thì nội dung trang web không bị ảnh hưởng nhiều
– Đảm bảo kích thước của ảnh nền luôn ở mức nhỏ nhất có thể
Thay đổi cách sắp xếp ảnh nền
Như ở phần trên đã nói, với ảnh nền nhỏ hơn phần tử, mặc định, ảnh nền sẽ được nhân bản thành nhiều cái và sắp xếp từ trái qua phải, từ trên xuống dưới. Để thay đổi chế độ sắp xếp ảnh nền mặc định, sử dụng thuộc tính background-repeat.
Dưới đây là một số đặc tính của background-repeat,
– Giá trị: repeat | repeat-x | repeat-y | no-repeat | inherit
– Mặc định: repeat
– Áp dụng: cho mọi phần tử
– Kế thừa: không
Ví dụ, nếu chỉ muốn ảnh nền xuất hiện một lần, sử dụng giá trị no-repeat,
body {
background-image: url(star.gif);
background-repeat: no-repeat;
}
Ví dụ, nếu chỉ muốn ảnh nền xuất hiện lặp lại trên một hàng ngang, sử dụng giá trị repeat-x,
body {
background-image: url(star.gif);
background-repeat: repeat-x;
}
Ví dụ, nếu chỉ muốn ảnh nền xuất hiện lặp lại trên một hàng dọc, sử dụng giá trị repeat-y,
body {
background-image: url(star.gif);
background-repeat: repeat-y;
}
Xác định vị trí đặt ảnh gốc
Sử dụng thuộc tính background-position để xác định vị trí đặt ảnh gốc (origin image). Ảnh gốc là ảnh đầu tiên đặt vào nền, việc lặp lại (nhân bản) các ảnh sau đó sẽ dựa vào ảnh gốc này.
Dưới đây là một số đặc tính của background-position,
– Giá trị: đơn vị đo chiều dài | % | left | center | right | top | bottom | inherit
– Mặc định: 0% 0% (tương đương với left top)
– Áp dụng: cho mọi phần tử
– Kế thừa: không
Dùng từ khóa
Các từ khóa left, center, right, top, bottom là các vị trí tương đối so với mép trong các đường viền của phần tử, đây là chế độ mặc định, xem thêm thuộc tính background-origin ở phía dưới. Ví dụ, nếu từ khóa là left thì sẽ đặt hình ảnh bắt đầu từ mép trong đường viền trái của phần tử.
Vị trí mặc định để đặt ảnh gốc là bên trái, phía trên: left, top.
Các từ khóa này thường được sử dụng theo cặp, ví dụ,
background-position: left bottom;
background-position: right center;
Nếu chỉ cung cấp một từ khóa, thì trình duyệt sẽ ngầm hiểu từ khóa còn lại là center. Ví dụ, nếu khai báo là,
background-position: left
Thì cũng sẽ tương đương với khai báo,
background-position: left center
Dùng đơn vị đo
Cũng có thể xác định vị trí của ảnh gốc dựa vào khoảng cách so với góc trên bên trái của phần tử, sử dụng đơn vị đo là pixel, khoảng cách theo chiều ngang (horizontal) luôn được viết trước, chiều dọc (vertical) viết sau.
Ví dụ,
background-position: 200px 50px;
Dùng %
Giá trị % cũng luôn được sử dụng theo cặp ngang/dọc, với 0% 0% sẽ tương ứng với bên trái góc trên; 100% 100% sẽ tương ứng với bên phải góc dưới. Lưu ý, giá trị % này sẽ áp dụng cho cả vùng nền (vùng canvas) và ảnh gốc, nghĩa là ảnh gốc sẽ không thể vượt ra khỏi vùng nền. Ví dụ, giá trị 100% 100% sẽ đặt phần bên phải góc dưới của ảnh gốc vào bên phải góc dưới của vùng nền. Nếu chỉ cung cấp một giá trị % thì giá trị còn lại sẽ được ngầm hiểu là 50% (center).
Hình sau là ví dụ đặt ảnh gốc ở các vị trí khác nhau,
Lab2.3.b (exercise 13-2, p.286; exercise 13-3, p.287; exercise 13-4, p.290 [3])
Cố định ảnh nền
Trong bài thực hành Lab2.3.b, khi thiết lập các vị trí đặt ảnh nền, sẽ thấy trình duyệt lấy toàn bộ nội dung trang web làm chuẩn để đặt ảnh nền, vì vậy khi cuộn nội dung, ảnh nền cũng bị di chuyển theo, đây là chế độ mặc định của trình duyệt. Tuy nhiên, có thể sử dụng thuộc tính background-attachment để tách ảnh nền không còn di chuyển theo nội dung, nghĩa là, ảnh nền có thể nằm cố định tại một vị trí trong khi người dùng cuộn nội dung.
Dưới đây là một số đặc tính của background-attachment,
– Giá trị: scroll | fixed | local | inherit
– Mặc định: scroll
– Áp dụng: cho mọi phần tử
– Kế thừa: không
Với thuộc tính background-attachment, có thể tùy chọn để ảnh nền cuộn theo nội dung (scroll), hoặc nằm cố định (fixed) so với cửa sổ trình duyệt (viewport), hoặc chỉ cuộn theo nội dung của một phần tử chứ không theo thanh cuộn của cửa sổ trình duyệt.
Một số thuộc tính ảnh nền khác
Thuộc tính background-clip
Các giá trị của thuộc tính background-clip: border-box | padding box | content-box
Thuộc tính background-clip được sử dụng để xác định phạm vi bao phủ của ảnh nền (xén bớt ảnh nền, từ clip nghĩa là xén bớt đi, cắt bớt đi). Mặc định ảnh nền sẽ được phủ vùng nội dung, vùng đệm phía trong đường viền, và nền của đường viền (border-box). Nếu chỉ muốn phủ vùng nội dung và vùng đệm phía trong đường viền thì thiết lập giá trị là padding-box (cái hộp chứa hết phần padding). Nếu chỉ muốn phủ vùng nội dung thì thiết lập giá trị là content-box (hộp chứa nội dung).
Thuộc tính background-size
Các giá trị của thuộc tính background-size: [length | percentage | auto] | contain | cover
Thuộc tính background-size được sử dụng để thiết lập lại kích thước của ảnh nền, gồm chiều rộng và chiều cao (ví dụ 100px 200px), nếu chỉ thiết lập một chiều thì chiều còn lại sẽ là auto. Nếu muốn ảnh nền nằm trọn trong phần tử chứa nó thì thiết lập giá trị là contain, trường hợp này có thể còn những chỗ không được phủ ảnh nền (ví dụ phần tử hình chữ nhật mà ảnh nền lại hình tròn). Nếu muốn ảnh nền phủ toàn bộ phần tử chứa nó thì thiết lập giá trị là cover, trường hợp này có thể có một phần của ảnh nền bị tràn ra khỏi phần tử chứa nó.
Thuộc tính background-origin
Các giá trị của thuộc tính background-origin: border-box | padding-box | content-box
Thuộc tính background-origin được sử dụng để xác định cách tính vị trí cho thuộc tính background-position. Nghĩa là, vị trí bắt đầu được tính sẽ là mép ngoài đường viền (border-box) hay mép ngoài vùng padding (padding-box), hay mép ngoài nội dung (content-box).
.jpg)
.jpg)
){kind=link}
0 Nhận xét