2.3.9 Rút gọn các thuộc tính nền
Có thể sử dụng thuộc tính background để thiết lập tất cả các định dạng liên quan đến nền trong một khai báo CSS.
Dưới đây là một số đặc tính của background,
– Giá trị: background-color background-image background-repeat background-attachment
background-position | inherit
– Mặc định: tùy thuộc vào giá trị mặc định của mỗi thuộc tính
– Áp dụng: cho mọi phần tử
– Kế thừa: không
Cũng giống như thuộc tính font, các giá trị của thuộc tính background chính là giá trị của từng thuộc tính đã được liệt kê ở trên.
Ví dụ,
body { background: white url(arlo.png) no-repeat fixed right top; }
Luật CSS trên là viết rút gọn của các luật CSS sau,
body {
background-color: white;
background-image: url(arlo.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}
Các giá trị trong thuộc tính background đều là tùy chọn, và không cần theo thứ tự. Chỉ có một lưu ý là khi khai báo giá trị của thuộc tính background-position thì phải khai báo giá trị chiều ngang (horizontal value) trước, ngay sau đó là giá trị chiều dọc. Nếu giá trị nào không khai báo trình duyệt sẽ sử dụng giá trị mặc định.
Cẩn thận khi sử dụng thuộc tính background để tránh bị ghi đè. Quan sát ví dụ sau,
h1, h2, h3 { background: red url(dots.gif) repeat-x;}
h3 {background: green;}
Mục đích của luật CSS ở hàng thứ hai là muốn thay đổi màu nền dự phòng cho h3 từ green sang red, tuy nhiên trong luật lại không khai báo giá trị cho background-image cho phần tử h3, nên giá trị của nó sẽ được thiết lập là mặc định (none), điều này vô tình đã ghi đè lên giá trị background-image ở hàng 1. Nghĩa là h3 sẽ không được thiết lập ảnh nền dots.gif. Vậy để ghi đè một thuộc tính cụ thể nào đó thì nên dùng tên thuộc tính dạng đầy đủ, chứ không nên sử dụng thuộc tính rút gọn. Luật ở hàng thứ hai nên viết lại là,
h3 {background-color: green;}
2.3.10 Chèn nhiều ảnh nền
CSS3 cho phép chèn nhiều ảnh nền cho một phần tử. Để thực hiện, sử dụng thuộc tính background-image, mỗi giá trị của thuộc tính này là một ảnh nền, được ngăn cách nhau bằng dấu phẩy. Các thuộc tính liên quan cũng được liệt kê thành một dãy, mỗi giá trị ngăn cách nhau bằng dấu phẩy, giá trị đầu tiên sẽ áp dụng cho ảnh đầu tiên, giá trị thứ hai sẽ áp dụng cho ảnh thứ hai, lần lượt cho đến hết. Ảnh được liệt kê trước trong thuộc tính background-image sẽ nằm ở phía trên cùng của nền, sau đó lần lượt đến các ảnh tiếp theo.
Ví dụ,
body {
background-image: url(image1.png), url(image2.png), url(image3.png);
background-position: left top, center center, right bottom;
background-repeat: no-repeat; no-repeat; no-repeat;
…
}
Lưu ý: mặc dù luật của CSS hoạt động theo kiểu “cái nào áp dụng sau cái đó sẽ được ưu tiên”. Tuy nhiên, trong trường hợp chèn nhiều ảnh nền thì nó làm việc theo kiểu khác, cứ tưởng tượng, cái nền có thể xếp được nhiều ảnh, khi đó ảnh nào nằm cuối danh sách sẽ được đặt ở dưới cùng, sau đó là các ảnh tiếp theo, ảnh ở đầu danh sách sẽ nằm ở trên cùng.
Có thể sử dụng thuộc tính background để viết các luật CSS được gọn hơn, ví dụ,
body {
background:
url(image1.png) left top no-repeat,
url(image2.png) center center no-repeat,
url(image3.png) right bottom no-repeat;
…
}
Vì có một số trình duyệt IE không hỗ trợ thuộc tính background, nên để tăng tính thích ứng của trang web, khi viết mã sẽ sử dụng thêm thuộc tính background-image để dự phòng, sau đó là các hình ảnh của thuộc tính background. Nếu trình duyệt có hỗ trợ background, thì thuộc tính này sẽ đè thuộc tính background-image. Cuối cùng luôn dự phòng một màu nền bằng thuộc tính background-color. Ví dụ,
body {
background-image: url(image_fallback.png) top left no-repeat;
/* cho các trình duyệt không hỗ trợ */
background:
url(image1.png) left top no-repeat,
url(image2.png) center center no-repeat,
url(image3.png) right bottom no-repeat;
background-color: papayawhip; /* màu nền dự phòng */
}
2.3.11 Tạo nền chuyển sắc
Tạm gọi gradient là chuyển sắc, là dải biến đổi từ màu này thành (nhiều) màu khác. Trước đây, để tạo một nền chuyển sắc cần sử dụng một công cụ xử lý ảnh, sau đó lưu lại thành một hình ảnh, rồi chèn vào trang web.
CSS3 cho phép sử dụng từ khóa để khai báo nền chuyển sắc, trình duyệt sẽ dựa vào khai báo này để tạo ra nền chuyển sắc. Với CSS3, chỗ nào chèn được hình ảnh thì chỗ đó có thể chèn một nền chuyển sắc, ví dụ: background-image, border-image, list-style-image.
Có hai loại chuyển sắc,
– Chuyển sắc theo đường thẳng (linear gradient) là dải biến đổi từ màu này thành (nhiều) màu khác theo một đường thẳng
– Chuyển sắc tỏa tròn (radial gradient) là dải biến đổi từ một điểm màu thành (nhiều) màu khác theo hình tròn hoặc elip.
Chuyển sắc theo đường thẳng
Sử dụng từ khóa linear-gradient() để tạo một nền chuyển sắc theo đường thẳng. Cần cung cấp ít nhất ba thông tin: thông tin đầu tiên là hướng của đường thẳng, hướng này được xác định bằng đơn vị góc (deg) hoặc từ khóa. Về đơn vị đo góc, cả mặt phẳng sẽ là 360 độ, giá trị góc là dương sẽ ứng với chiều quay của kim đồng hồ, giá trị góc là âm ứng với ngược chiều quay của kim đồng hồ. Ví dụ, 0deg ứng với đường thẳng hướng lên, 90deg ứng với hướng sang phải, 180deg ứng với hướng xuống dưới. Thông tin thứ hai và thứ ba là hai màu chặn (color stop), gồm màu chặn đầu (dùng tên màu hoặc giá trị màu) và màu chặn cuối (dùng tên màu hoặc giá trị màu).
Ví dụ,
p {
width: 300px; height: 100px; padding: 20px;
background-image: linear-gradient(90deg, yellow, green);
}
Với một số góc đặc biệt của đường thằng, có thể dùng từ khóa để thay thế, ví dụ to top (ứng với 0deg), to right (ứng với 90deg), to bottom (ứng với 180deg), to left (ứng với 270deg).
Ví dụ,
background-image: linear-gradient(to right, yellow, green);
Ví dụ sau là một nền chuyển sắc từ trái qua phải, gồm ba màu chặn, màu thứ hai nằm ở vị trí 50% của đường thẳng (lưu ý: vị trí của màu được viết ngay sau tên màu), nếu màu chặn tại vị trí 0% và 100% thì không cần khai báo vị trí,
p {
width: 300px; height: 100px; padding: 20px;
background-image: linear-gradient(to right, yellow, red 50%, green);
}
Ví dụ, sử dụng chuyển sắc để tạo nền giống với nền 3-D,
p {
width: 300px; height: 100px; padding: 20px;
background-image: linear-gradient(to bottom, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
}
Xem hình minh họa, một số ví dụ chuyển sắc theo đường thẳng,
Chuyển sắc tỏa tròn
Quan sát các thành phần của một chuyển sắc tỏa tròn[1],
Một chuyển sắc tỏa tròn được tạo ra bằng các thành phần sau: một điểm làm tâm (Tâm điểm - center point), một Đường giới hạn của vùng chuyển sắc (ending shape) và hai hoặc nhiều Màu chặn cùng với vị trí của nó (color-stop point).
Để tạo ra một chuyển sắc tỏa tròn, trình duyệt sẽ vẽ hàng loạt các đường tròn đồng tâm, với màu thay đổi từ Tâm điểm ra tới Đường giới hạn (cũng có thể vượt ra khỏi đường này). Đường giới hạn có hai loại, là đường tròn (circle) và đường elip (elipse).
Các vị trí của Màu chặn sẽ được đặt trên Tia chuyển sắc ảo (virtual gradient ray), đây là một tia nằm ngang có gốc là Tâm điểm, hướng từ trái sang phải. Giá trị của các vị trí được tính theo %, với 0% là Tâm điểm, 100% là giao điểm của Đường giới hạn và Tia chuyển sắc ảo.
Trong CSS3, sử dụng từ khóa radial-gradient() để tạo một nền chuyển sắc tỏa tròn.
Đây là cú pháp,
radial-gradient(shape size at position, start color, …, last color)
Ví dụ một luật CSS có sử dụng radial-gradient dạng đơn giản nhất,
p {
width: 300px; height: 100px; padding: 20px;
background-image: radial-gradient(yellow, green);
}
Dưới đây là giải thích các tham số trong cú pháp của radial-gradient,
– shape: loại Đường giới hạn, gồm đường tròn và đường elip, mặc định là đường elip
Ví dụ, Đường giới hạn là đường tròn,
background-image: radial-gradient(circle, yellow, green);
– position: vị trí của Tâm điểm, nếu không khai báo tường minh, mặc định là ở giữa (center), tuy nhiên, có thể thay đổi bằng các giá trị giống như thuộc tính background-position,
Ví dụ, thiết lập giá trị Tâm điểm là 80%, 20%, (để ý: có thêm từ khóa at)
background-image: radial-gradient(circle at 80% 20%, yellow, green)
– size: khi đã có Tâm điểm, giá trị size sẽ xác định kích thước vùng chuyển sắc dựa vào tương quan giữa Đường giới hạn và Đường viền của đối tượng chứa nó, giá trị size là các từ khóa sau:
closest-side: tạo ra vùng chuyển sắc, sao cho đường Giới hạn sẽ tiếp xúc với Đường viền gần nhất của phần tử chứa nó
closest-corner: tạo ra vùng chuyển sắc, sao cho đường Giới hạn sẽ tiếp xúc với góc gần nhất của phần tử chứa nó
farthest-side: tạo ra vùng chuyển sắc, sao cho đường Giới hạn sẽ tiếp xúc với Đường viền xa nhất của phần tử chứa nó
farthest-corner: tạo ra vùng chuyển sắc, sao cho đường Giới hạn sẽ tiếp xúc với góc xa nhất của phần tử chứa nó
– các màu chặn (start color, last color): các màu chặn được viết theo thứ tự từ Tâm điểm trở ra, đi sau các màu chặn có thể bao gồm giá trị cho biết độ dày của dải màu
Ví dụ, dải màu vàng dày 10%,
p {
width: 300px; height: 100px; padding: 20px;
background-image: radial-gradient(circle, yellow 10%, green)
}
Ví dụ, dải màu vàng dày 50%,
p {
width: 300px; height: 100px; padding: 20px;
background-image: radial-gradient(circle, yellow 50%, green)
}
Xem hình minh họa,
Vấn đề tương thích với các trình duyệt
Ở phần trên đã tìm hiểu về tạo nền chuyển sắc, tuy nhiên, đó là các đặc tả của CSS3. Thực tế, trước khi có một đặc tả thống nhất, các trình duyệt đã tự tạo ra các xử lý riêng cho chức năng này. Vì vậy, để có được nền chuyển sắc tốt nhất trên các trình duyệt khác nhau, nên sử dụng thêm các tiếp đầu ngữ (prefix) để chỉ ra đoạn mã đó là của trình duyệt nào.
Bảng sau là một số tiếp đầu ngữ ứng với mỗi trình duyệt,
Tiếp đầu ngữ | Công ty/Tổ chức | Trình duyệt |
-ms- | Microsoft | Internet Explorer |
-moz- | Mozilla Foundation | Firefox, Camino, Seamonkey |
-o- | Opera Software | Opera, Opera Mini, Opera Mobile |
-webkit- | Apple, mã nguồn mở | Safari, Chrome, Android, Silk, Blackberry, WebOS,… |
-khtml- | Konqueror | Konqueror |
Khi có thêm tiếp đầu ngữ, việc viết mã sẽ vất vả hơn. Ví dụ sau đây là đoạn mã để tạo ra một nền chuyển sắc có tính tương thích với nhiều trình duyệt,
background: #ffff00; /* Old browsers */
background: -moz-linear-gradient(top, #ffff00 0%, #00ff00 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, colorstop(
0%,#ffff00), color-stop(100%,#00ff00));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffff00 0%,#00ff00 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffff00 0%,#00ff00 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffff00 0%,#00ff00 100%);
/* IE10+ */
background: linear-gradient(to bottom, #ffff00 0%,#00ff00 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=’#ffff00’, endColorstr=’#00ff00’,GradientType=0 );
/* IE6-9 */
Để viết đoạn mã trên quả là phức tạp, và mất nhiều thời gian, rất may là trên mạng hiện nay cũng có những công cụ giúp tự động tạo ra các đoạn mã như vậy. Có thể sử dụng trang web sau:
Xem hình minh họa giao diện của trang web trên,
2.3.12 Viết CSS ở tập tin riêng
Như đã biết, có ba cách để gắn CSS vào tài liệu HTML, gồm: gắn bằng thuộc tính style, gắn bằng phần tử style và gắn bằng phần tử link; tương ứng với ba vị trí đặt mã CSS, đặt ở trong phần tử HTML, đặt trong tài liệu HTML và đặt ngoài tài liệu HTML. Các phần trước đã tìm hiểu hai cách đầu, phần này sẽ tìm hiểu cách thứ ba, đó là viết CSS ở ngoài tài liệu HTML, hay nói cách khác là viết CSS ở tập tin riêng.
Viết CSS ở tập tin riêng được khuyến khích sử dụng vì nó có nhiều ưu điểm. Ví dụ, nhờ viết mã định dạng cho trang web ở một nơi duy nhất, nên để thay đổi định dạng cho toàn bộ trang web, chỉ cần thực hiện ở một nơi; ngoài ra, do mã CSS tách biệt với mã HTML nên mã nguồn của trang web sẽ rõ ràng, dễ đọc, dễ bảo trì.
Mã CSS là một tài liệu chứa văn bản thô (plain text), trong đó phải có ít nhất một luật CSS, không chứa mã HTML, có thể chứa các chú thích theo cú pháp của CSS. Tập tin chứa mã CSS có phần mở rộng là .css.
Để chú thích trong CSS, sử dụng kí hiệu: /* nội dung của chú thích */
Xem hình minh họa một đoạn mã CSS, để ý cách viết khoảng trắng, xuống hàng, dấu ngoặc,
Do mã CSS được viết ở tập tin riêng, vì vậy để mã CSS có thể tác động lên mã HTML thì phải tạo liên kết giữa tài liệu HTML và mã CSS. Có hai cách để tạo liên kết này, một là sử dụng phần tử link của HTML, hai là sử dụng luật import của CSS.
Sử dụng phần tử link
Trong tài liệu HTML, để tạo liên kết tới tập tin .css, sử dụng phần tử link trong head. Đây là phương pháp được sử dụng phổ biến nhất.
Ví dụ,
<head>
<title>Titles are required</title>
<link rel="stylesheet" type="text/css" href="/path/stylesheet.css">
</head>
Ý nghĩa các thuộc tính của phần tử link,
– rel="stylesheet": cho biết mối liên hệ giữa tài liệu hiện tại (HTML) và tài liệu được liên kết đến (CSS), rel là viết tắt của relationship, mối liên hệ ở đây là “mã định dạng”
– type="text/css": cho biết loại tài liệu được liên kết đến, ở đây là một tài liệu CSS
– href="/path/stylesheet.css": đường dẫn tới tập tin .css, đường dẫn được bắt đầu từ thư mục gốc của website (“/”).
Trong một tài liệu HTML, có thể sử dụng nhiều phần tử link để liên kết tới nhiều tập tin .css khác nhau, khi đó tất cả các luật trong các tập tin .css đều được áp dụng, nếu có xung đột, luật nào nằm trong tập tin .css được liên kết sau sẽ có quyền ưu tiên cao hơn.
Sử dụng luật import
Đây là cách thứ hai để tạo sự kiên kết giữa tài liệu HTML và CSS. Vì import là một luật của CSS nên nó phải được đặt trong phần tử style, hoặc đặt trong một tập tin .css.
Ví dụ, đặt trong phần tử style,
<head>
<style>
@import url("/path/stylesheet.css");
p { font-face: Verdana;}
</style>
<title>Titles are required.</title>
</head>
Lưu ý: luật import phải nằm trước mọi bộ chọn CSS, có thể sử dụng nhiều luật import để liên kết tới nhiều tập tin .css, tập tin .css được import sau sẽ có độ ưu tiêu cao hơn.
Chia nhỏ mã CSS vào nhiều tập tin
Vì có thể kết hợp mã CSS ở nhiều tập tin khác nhau bằng luật import, hoặc liên kết tới nhiều tập tin .css bằng phần tử link, nên có thể tách mã CSS thành nhiều tập tin để có thể sử dụng lại. Ví dụ, lập trình viên có thể tách mã CSS theo chức năng như sau: CSS về trình bày văn bản (typography), CSS về bố cục (layout), CSS về form.
Ví dụ, khi muốn sử dụng lại, chỉ việc sử dụng luật import,
Nội dung của tập tin clientsite.css:
/* basic typography */
@import url("type.css");
/* form inputs */
@import url("forms.css");
/* navigation */
@import url("list-nav.css");
/* site-specific styles */
body { background: orange; }
…các luật CSS khác…
Lab2.3.c (exercise 13-5, p.292; exercise 13-6, p.293; exercise 13-7, p.295; exercise 13-8, p.302 [3])
2.3.13 Câu hỏi & bài tập
1. Trong CSS, màu nền (background color) sẽ phủ những vùng nào?
a. Vùng nội dung
b. Vùng đệm phía trong đường viền (padding)
c. Đường viền (border)
d. Vùng đệm phía ngoài đường viền (margin)
e. Tất cả các vùng trên
f. a và b
g. a, b và c
2. Cách viết nào sau đây không phải là giá trị của một màu trong CSS?
a. #FFFFFF b. #FFF c. rgb(255, 255, 255)
d. rgb(FF, FF, FF) e. white f. rgb(100%, 100%, 100%)
3. Khớp bộ chọn pseudo-class với các phần tử tương ứng.
a. a:link 1. Các liên kết đã được người dùng bấm chuột vào
b. a:visited 2. Một ô nhập liệu đã được chọn và sẵn sàng cho người dùng nhập liệu
c. a:hover 3. Phần tử là con đầu tiên của một phần tử khác
d. a:active 4. Một liên kết đang được người dùng rê chuột vào
e. :focus 5. Một liên kết chưa từng được người dùng bấm chuột vào
f. :first-child 6. Một liên kết đang được người dùng bấm chuột vào
4. Khớp các luật CSS sau với hình kết quả.
a. body {background-image: url(graphic.gif);}
b. p {background-image: url(graphic.gif); background-repeat:
no-repeat; background-position: 50% 0%;}
c. body {background-image: url(graphic.gif); background-repeat:
repeat-x;}
d. p {background: url(graphic.gif) no-repeat right center;}
e. body {background-image: url(graphic.gif); background-repeat:
repeat-y;}
f. body { background: url(graphic.gif) no-repeat right center;}
.jpg)
.jpg)
){kind=link}
0 Nhận xét