Tự Học PHP
By traibingo 1 | P a g e
Các Ví dụ:
Trên đây chúng ta đã cùng nhau thảo luận những vấn đề chung nhất trong việc sử dụng
CSS. Phần tiếp theo tôi xin giới thiệu với các bạn cách áp dụng CSS vào những trường hợp cụ
thể. Điều quan trọng trong phần này các bạn cần nhớ đó là các thuộc tính, tác dụng và các giá
trị có thể đặt vào của mỗi thuộc tính này.
Áp dụng CSS với nền của trang web
Thuộc tính Background cho phép chúng ta điều khiển nền của một thành phần nào đó trên
trang web. Thành phần này có thể là nền trang, nền nút, nền ô textbox,
Bạn thử tưởng tượng, chúng ta có thể đặt được những thuộc tính gì cho nền? CSS cho phép
bạn lựa chọn những thuộc tính sau:
Nền là màu đồng nhất hay là một bức ảnh?
+ Trong trường hợp là màu đồng nhất thì đó là màu gì? Xanh, đỏ,
+ Trong trường hợp đó là ảnh:
- Ảnh đó là ảnh nào?
- Ảnh đó được sắp xếp thế nào
Các lựa chọn như vậy CSS cho phép qui định như sau:
* Thuộc tính background-color:
- Ý nghĩa: Cho phép đặt màu nền là một màu đồng nhất nào đó.
- Các giá trị:
+ Bộ màu RGB (RGB(255,0,0): Màu đỏ; RGB(0,255,0): Màu xanh lá cây, )
+ Màu được qui định bởi những con số HEX (#FF0000: Màu đỏ; #00FF00: Màu xanh lá cây, )
+ Màu cơ bản được đặt tên bằng từ tiếng Anh (red: đỏ; green: xanh lá cây, )
+ transparent: Trong suốt (có thể nhìn xuyên qua đối tượng có màu nền trong suốt được)
Ví dụ: tạo một lớp nếu áp dụng nó thì đối tượng sẽ có màu nền đỏ.
.MauNenDo {background-color: #FF0000}
* Thuộc tính backround-image đặt một ảnh có sẵn làm nền.
- Các giá trị:
+ url(địa chỉ): lấy ảnh được chỉ định trong "địa chỉ" làm nền.
+ none: Không có ảnh nền.
Tự Học PHP
By traibingo 2 | P a g e
Đây là đoạn code menu dùng CSS3 tạo nên :
<head>
<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i ) {
if (document.getElementById('smenu' i)) {document.getElementById('smenu'
i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
Tự Học PHP
By traibingo 3 | P a g e
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
</style>
</head>
<body>
<dl id="menu">
<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
<dt onclick="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sub Menu 2.1</a></li>
<li><a href="#">Sub Menu 2.2</a></li>
<li><a href="#">Sub Menu 2.3</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sub Menu 3.1</a></li>
<li><a href="#">Sub Menu 3.1</a></li>
<li><a href="#">Sub Menu 3.1</a></li>
<li><a href="#">Sub Menu 3.1</a></li>
<li><a href="#">Sub Menu 3.1</a></li>
<li><a href="#">Sub Menu 3.1</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sub Menu 4.1</a></li>
<li><a href="#">Sub Menu 4.1</a></li>
</ul>
</dd>
</dl>
</body>
</html>
Tự Học PHP
By traibingo 4 | P a g e
CSS3 mang lại cho người dùng nhiều sự lựa chọn trong trình bày và mạnh mẽ hơn so với CSS2.
Tuy nhiên không phải trình duyệt nào cũng hỗ trợ đầy đủ CSS3 nhất là IE dở hơi, ngay đến IE8
nhiều mã CSS3 vẫn chưa được "hiểu". Hi vọng IE9 sẽ khác còn hiện tại hầu hết các trình duyệt
khác như Firefox 3x, Opera 9x, 10x Safari 3,4 và Chrome đều hiện thị CSS3 tương đối ngon. Tớ
note lại một số kĩ thuật CSS3 mà tớ cho là khá "phổ biến" và "hữu ích".
Bo góc bằng CSS3
Trong nhiều thiết kế tớ rất thích bo tròn góc của các block, các element việc này nhằm làm
cho thiết kế mềm mại hơn. Tuy nhiên bo góc thì khi code html sẽ mất khá nhiều thời gian và
code rườm rà. Thay vì mất công tạo tới vài cái div "rỗng tuếch" chỉ để bo góc, tớ hay dùng một
thuộc tính CSS3 đơn giản hơn : "border-radius".
-moz-border-radius / -webkit-border-radius
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Ví dụ: " -moz-border-radius: 2px " có ý nghĩa là bo cả 4 góc với "độ cong" là 2px. Nếu muốn
bo từng góc sử dụng dạng "-moz-border-top-radius" và tương tự. Nếu dùng Firefox thì -moz
còn nếu dùng Safari, Opera hay Chrome thì dùng -webkit. Mà nói chung đã dùng là dùng cả hai.
Hiệu ứng Text Shadow
Sử dụng Text Shadow để tạo hiệu ứng bóng đổ cho text. Trong thiết kế đôi khi có một chút hiệu
ứng shadow sẽ làm cho website có chiều sâu hơn và cool hơn.
text-shadow: 2px 2px 0 #ccc;
Đoạn mã trên có nghĩa là tạo một shadow cho text với mã màu là #cccccc dịch sang trái 2px,
xuống dưới 2px và không làm mờ (blur).
Sử dụng Font Face
Nếu như trước kia rất rất ít font có thể sử dụng được trong thiết kế web vì không phải máy nào
cũng cài sẵn các font mà các bạn dùng. Thường là người ta chỉ sử dụng các font sẵn có của hệ
thống như Arial, Tahoma, Time New Roman Điều này vô hình chung sẽ cả trở sự trình bày
text (typography) của bạn. Tuy nhiên hay ho là CSS có một tính năng đó là cho phép nhúng font
của mình vào web site. Và hay ho nữa là IE có hỗ trợ cái tính năng này
@font-face {font-family: Delicious;src: url('Delicious-Roman.otf');}
Đoạn trên có nghĩa là : nhúng một font đặt tên là Delicious với đường dẫn url tới file font
Delicious-Roman.otf. Khi khai báo xong bạn có thể gọi và sử dụng font bằng cách thông
thường:
Tự Học PHP
By traibingo 5 | P a g e
font-family: Delicious, sans-serif;
Độ trong suốt (Opacity)
Thuộc tính Opacity cũng là một thuộc tính mà tớ thấy là đáng giá trong CSS3. Opacity đơn giản
là độ mờ ảo (ảo vãi) của element. Rất có ích nếu bạn có ý định thiết kế kiểu sử dụng mask hay
làm hiệu ứng hover đơn giản. Hơn là như trước kia muốn dùng hiệu ứng kiểu này hầu hết tớ toàn
dùng ảnh PNG và vì dùng ảnh nên load sẽ nặng hơn nhiều.
opacity: 0.2;
Mặc định là giá trị 1, tức là hổng trong suốt hay mờ đục gì cả. Giá trị 0.2 có nghĩa là trong hay
mờ đục 20% và lúc này là áo em trong quá nhìn xuyên qua. IE cũng chơi được cái này nếu hack
một chút. Lúc này là giá trị mặc định là 100(%).
filter:alpha(opacity=20);
Multiple backgrounds
Cũng giống như kiểu border-radius, dùng Multiple backgrounds sẽ giảm bớt code html rườm rà.
Ví dụ như trong thiết kế, phía trên là một hình nền ở dưới là một hình nền. Thông thường thì vì
nội dung lúc dài lúc ngắn nên ta không thể fix chiều cao cho element đó được mà khi đó phải sử
dụng ít nhất 2 element khác nhau. Tuy nhiên CSS3 đã đơn giản hóa điều đó cho phép sử dụng
nhiều background trong 1 element. Khi đó cho dù nội dung động nhưng ta luôn đạt được mục
đích 1 background trên và 1 background ở dưới.
background: url(background-top.gif) top center no-repeat, url(background-bottom.gif) bottom
center no-repeat;
Muốn thêm background nào đó ta chỉ cần thêm đường dẫn background đó mà thôi. Đoạn trên có
nghĩa là hình nền backgound-top.gif luôn được hiển thị nằm ở trên căn giữa, backgound-
bottom.gif luôn hiển thị nằm dưới và căn giữa.
Còn nhiều kĩ thuật CSS3 và CSS nói chung nhưng đây là những gì tớ thấy nó thực sự hữu ích và
nên dùng dựa trên kinh nghiệm của tớ. Tất nhiên việc tương thích trình duyệt với CSS3 là một lý
do bạn chưa "nên" sử dụng rộng rãi các kĩ thuật này. Tuy nhiên không sớm thì muộn CSS3 cũng
sẽ được chuẩn hóa trên các trình duyệt mà thôi. Tớ thì tớ có thể chấp nhận bỏ qua IE để hướng
tới những chuẩn cao hơn, không biết cảc bạn thế nào?
. mặc định là 100(%).
filter:alpha(opacity=20);
Multiple backgrounds
Cũng giống như kiểu border-radius, dùng Multiple backgrounds sẽ giảm bớt code html. RGB (RGB(255,0,0): Màu đỏ; RGB(0,255,0): Màu xanh lá cây, )
+ Màu được qui định bởi những con số HEX (#FF0000: Màu đỏ; #00FF00: Màu xanh lá cây, )
+ Màu