Thủ thuật với CSS

. Giả sử rằng file script bạn để ở trong thư mục cùng cấp với tài 
liệu HTML.
Tiếp đó bạn copy ảnh blank.gif vào cùng thý mục với file script.
Style cho thẻ hr
 là một thẻ tự đóng, điều đó có nghĩa là nó không cần thẻ đóng như những thẻ HTML 
khác. Thẻ sẽ tạo ra một đường kẻ ngang trên trình duyệt và khoảng cách giữa đường kẻ 
và nội dung thì phụ thuộc vào các trình duyệt khác nhau.
Tuy nhiên bạn hoàn toàn có thể thay đổi cách hiển thị của thẻ theo ý mình trên một số 
trình duyệt. Đối với một số trình duyệt mới (IE6, IE7, Firefox, Opera, Mozilla...) thì cách định 
dạng của bạn hoàn toàn có thể týõng thích.
Trong cách định dạng thẻ chúng ta cũng cần phải chú ý một chút về cách mà cách trình 
duyệt xử lí đối với đối tượng thẻ . Với Internet Explore (IE) sẽ sử dụng thuộc tính color 
để hiển thị màu của đường kẻ và thuộc tính background sẽ không có tác dụng. Tuy nhiên thì 
Mozilla(Netscape) và Opera thì lại dùng thuộc tính background để hiển thị màu của đường 
kẻ. Chúng ta cũng có thể sử dụng thuộc tính border để hiển thị định dạng, nhưng đó không 
phải là một cách mà chúng ta muốn.
Chúng ta có đoạn mã CSS định dạng thẻ như sau:
hr {
color: red;
background: red;
border: 0;
height: 1px;
}
Thêm khoảng cách giữa 
đường kẻ và phần nội dung. 
Ðể thêm khoảng cách giữa ðýờng kẻ và nội dung chúng ta sẽ dùng thuộc tính margin để quy 
định khoảng cách này.
hr {
color: red;
 more information and additional documents 
 connect with me here: 
background: red;
border: 0;
height: 1px;
margin: 10px 0 20px; 
}
Kỹ thuật slicing door và ứng dụng
Ðối với những desiger thýờng xuyên làm việc với CSS thì kỹ thuật Sliding Doors không có gì 
mới mẻ. Nhưng ðối với những bạn mới làm quen với CSS thì tôi nghĩ rằng ðây là một kỹ 
thuật mà bạn nên tìm hiểu nó.
Kỹ thuật Sliding Doors(kỹ thuật cửa kéo), là một kỹ thuật được ứng dụng rất nhiều trong việc 
tạo ra các button, hay các menu ngang kiểu tab,…Trong bài viết này chúng ta sẽ đi tìm hiểu ý 
týởng chủ đạo của kỹ thuật và tạo ra một ví dụ nhỏ có sử dụng kỹ thuật trên.
Tôi chắc rằng ít nhất chúng ta đã một lần nhìn thấy chiếc cửa kéo kiểu nhật bản. Một bên cửa 
cố định và một bên cửa sẽ linh động có thể kéo ra hoặc kéo vào tùy thích. Bản chất của kỹ 
thuật Sliding Doors cũng giống nhý vậy.
Chúng ta sẽ chia đối tượng 2 phần(phần bên trái và phần bên phải). Phần bên trái sẽ là phần 
cố định, còn phần bên phải sẽ là phần động(Việc phân chia này tùy theo ý thích của bạn, bạn 
có thể phân chia phần bên phải cố định và phần bên trái là phần động). Điều đó cũng có nghĩa 
là phần bên trái sẽ có kích thýớc vừa phải, còn phần bên phải cần có kích thýớc luôn lớn hõn 
hoặc bằng nội dung mà bạn dự định đưa vào(để đảm bảo rằng đối tượng của chúng ta giống 
như bị đứt gãy).
Ðể bạn có một hình dung rõ hõn tôi xin ðýa ra hình vẽ mô tả ý týởng của kỹ thuật này nhý 
sau:
Nhý trên hình vẽ bạn đã thấy, phần bên trái sẽ cố định và phần bên phải sẽ có ra hoặc dãn vào 
tùy theo nội dung bên trong của đối tượng cần tạo. Do vậy với cách làm nhý trên thì chúng ta 
cần tạo phần bên phải cần phải đủ dài để tránh trường hợp bị thiếu ảnh khi nội dung dài.
Các bạn thấy không nghe thì có vẻ ghê gớm nhýng về bản chất thì kỹ thuật này chỉ có vậy 
thôi, nhýng các bạn đừng coi thường, tuy vậy nhưng nó khá quan trọng và được ứng dụng rất 
rộng rãi trong việc tạo button, tạo menu kiểu tab,…Để minh họa cho điều tôi vừa trình bày 
bày sau đây tôi xin đưa ra một ví dụ có sử dụng kỹ thuật này.
Trong ví dụ này chúng ta sẽ tạo ra một số button theo phong cách web 2.0, và có độ tùy biến 
nội dung cao(chúng ta có thể thay đổi nội dung ở trong một cách tùy ý). Sau đây là chi tiết 
từng býớc làm cụ thể.
1. Tạo nút bằng Photoshop
Việc đầu tiên chúng ta cần làm đó là chúng ta cần tạo ra hình dáng chiếc nút thân yêu của ta, 
trong ví dụ này tôi tạo ra một nút Sign Up Now! nhý sau:
2. Cắt nút ra thành hai phần.
Nhý tôi đã trình bày ở trên, để thực hiện được kỹ thuật này chúng ta cần phải cắt đối tượng ra 
làm 2 phần. Để có thể cắt hình được chính xác tôi khuyên bạn nên sử dụng công cụ 
Slice(Slice Tools) trong Adobe Photoshop. Button của chúng ta sẽ được slice như sau:
Chúng ta cần chú ý là phần bên phải cần phải đủ dài để đảm bảo rằng không bị thiếu.
 more information and additional documents 
 connect with me here: 
3. Thực hiện viết mã HTML và CSS.
Chúng ta có định dạng mã HTML nhý sau:
…Nội dung…
Giải thích:
1. Sở dĩ chúng ta cần phải sử dụng 2 phần thử HTML trong việc này là do đối tượng của 
chúng ta được chia làm 2 phần, và mỗi phần tử sẽ làm nhiệm vụ giữ một phần của đối tượng.
2. Chúng ta sẽ dùng thẻ bao ở ngoài cùng để đảm bảo rằng toàn bộ nút sẽ link được khi di 
chuột lên trên nút. Đồng thời thẻ này sẽ chứa phần động bên phải.
3. Thẻ sẽ làm nhiệm vụ giữ phần cố định bên trái, đồng thời sẽ có nhiệm vụ che phần 
dư của ảnh nền bên phải.
Ðể thỏa mãn với yêu cầu ðặt ra chúng ta có mã ðịnh dạng CSS nhý sau:
/* Sign up button style */
a.sign-up {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight: bold;
color: #FFF;
text-decoration: none;
margin: 0;
padding: 28px 0;
display: block;
background: url(images/signup-right-bg.gif) no-repeat right center;
width: 270px;
}
a.sign-up:hover,
a.sign-up:active {
color: #FF0;
}
a.sign-up span {
margin: 0;
padding: 28px 0 28px 90px;
background: url(images/signup-left-bg.gif) no-repeat left center;
}
Cách viết giản lược trong CSS
Nếu bạn là ngýời thực sự muốn tìm hiểu về CSS, thì bạn không thể không tìm hiểu cách viết 
giản lýợc(shorthand) trong CSS. Cách viết này thực sự mang lại những lợi ích và tiện lợi khi 
bạn sử dụng CSS.
Trýớc khi đi vào phân tích những tiện lợi mà nó mang lại, tôi xin lấy một ví dụ đơn giản như 
sau. Giả sử rằng chúng ta muốn định dạng cho một thẻ có đường viền bao quanh thì 
chúng ta cần phải viết.
border-width: 1px;
 more information and additional documents 
 connect with me here: 
border-style: solid;
border-color: #CC0000;
Thay vì phải viết nhý vậy chúng ta chỉ cần viết 
border: 1px solid #CC0000;
Qua ví dụ đơn giản ở trên ta có thể thấy cách viết này mang lại cho chúng ta một số lợi ích 
sau. Thứ hai
1. Thứ nhất: nó giúp chúng ta giảm thiểu được đáng kể thời gian phải viết mã CSS.
2. Thứ hai: bạn cứ týởng týợng rằng file CSS của bạn có tới vài ngìn dòng và dung lýợng lên 
tới vài trăm Kb, thì cách viết này còn giúp bạn giảm thiểu được đáng kể dung lượng của file 
CSS và giúp bạn dễ dàng theo dõi hõn, khi số lýợng dòng của trang được giảm xuống.
Sau đây tôi xin đi vào chi tiết một số thuộc tính trong CSs mà chúng ta có thể dùng cách viết 
giản lýợc. 
1. Thuộc tính Color
Có rất nhiều cách để định nghĩa một màu trong CSS, chúng ta có thể định nghĩa theo hệ số 
Hexa(trong hệ màu RGB), hoặc chúng ta có thể viết tên màu (ví dụ: white, red…). Nhýng 
cách định nghĩa theo hệ số Hexa được sử dụng thông dụng nhất. Để định nghĩa theo hệ Hexa 
chúng ta sẽ đặt dấu (#) ở trước sau đó đến các thông số màu (ví dụ: #003366). Dãy các thông 
số màu được chia làm 3 phần týõng ứng với ba màu Red, Green, Blue (00: Red | 33: Green | 
66: Blue). Trong cách định nghĩa hệ số màu ta cũng có cách viết giản lýợc nhý sau: #000000 
có thể viết #000 hoặc #003366 có thể viết #036 
2. Thuộc tính margin và padding.
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
Ðýợc thay thế bằng
margin: 10px 15px 20px 25px; /* top | right | bottom | left */
Týõng tự với thuộc tính padding
padding-top: 10px;
pading-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
padding: 10px 15px 20px 25px; /* top | right | bottom | left */
Cả hai thuộc tính margin và padding có hai chú ý nhý sau: nếu trong trýờng hợp có hai thông 
số.
margin: 10px 20px; /* top bottom | right left */
padding: 10px 20px; /* top bottom | right left */
Thì thông số thứ nhất týõng đương với top và bottom còn thông số thứ hai týõng đương với 
right và left
Trong trýờng hợp margin và padding có 3 thông số:
margin: 10px 20px 15px; /* top | right left | bottom */
padding: 10px 20px 15px; /* top | right left | bottom */
Thì thông số thứ nhất týõng đương với top, thông số thứ hai týõng đương với right và left, 
thông số thứ 3 týõng đương với bottom 
3. Thuộc tính border.
 more information and additional documents 
 connect with me here: 
border-with: 1px;
border-style: solid;
border-color: #CC0000;
Sẽ viết thành
border: 1px solid #CC0000; /* width | style | color */
4. Thuộc tính background.
background-color: #CC0000;
background-image: (image url);
background-repeat: no-repeat; /* repeat-x, repeat-y */
background-position: top left;
Týõng đương với
background: #CC0000 url(image url) no-repeat top left;
5. Thuộc tính font
font-size: 1em;
line-height: 1.5em;
font-variant:small-caps;
font-weight: bold;
font-style: italic;
font-famyli: Arial, Verdana, Sans-serif;
Dạng viết giản lýợc
font: 1em/1.5em bold italic small-caps Arial,Verdana,Sans-serif;
5. List type
list-style: none;
Có nghĩa là
list-style-type: none;
Bạn cũng có thể sử dụng thuộc tính list-style-position và list-type-image để định dạng cho 
danh sách không có thứ tự unordered lists, sử dụng hình ảnh cho mỗi dòng và sử dụng list-
type-style là hình vuông trong trýờng hợp không hiển thị được ảnh. Và hai cách viết dýới đây 
là nhý nhau.
list-style:square inside url(image.gif);
là giản lýợc cho
list-style-type: square;
list-style-position: inside;
list-style-image: url(image.gif);
6. Outline
Thuộc tính này rất ít dùng vì có rất ít các trình duyệt hiện tại hỗ trợ thuộc tính này, hiện tại chỉ 
có một số trình duyệt hỗ trợ thuộc tính này Safari, OmniWeb và Opera. Cách viết giản lýợc 
các thuộc tính này nhý sau:
outline-color: #000;
outline-style: solid;
outline-with: 2px;
Cách viết giản lýợc sẽ là
outline: #000 solid 2px;
 more information and additional documents 
 connect with me here: 
more information and additional documents 
connect with me here: