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ẻ <div> có đường viền bao
quanh thì chúng ta cần phải viết.

border-width: 1px;
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.

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;

//background transparent
background-color:#000; filter: alpha(opacity=50);
-moz-opacity:0.5; opacity:0.5;
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;

Khi style cho font chữ trong CSS thông thường bạn sẽ viết như sau:
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: Verdana, sans-serif;

Nếu áp dụng kỹ thuật Sorthand thì chúng ta chỉ cần phải viết.

font: bold italic small-caps 1em/1.5em verdana, sans-serif;

2. Đặt hai class cho cùng một đối tượng

Thông thường khi bạn viết mã HTML bạn chỉ đặt một class cho một đối tượng. Tuy
nhiên điều đó không có nghĩa rằng bạn chỉ được phép đặt duy nhất một class cho một đối
tượng. Định dạng HTML cho phép bạn đặt 2 class cho cùng một đối tượng.

<div class="class1 class2">...</div>

Như các bạn đã thấy ở trên nếu bạn muốn đặt 2 class cho cùng một đối tượng thì tên của
class thứ nhất phải cách tên của class thứ hai bằng khoảng trống. Trong trường hợp hai
class này đều được đặt cùng một thuộc tính thì đối tượng này sẽ được định dạng theo
thuộc tính nào được viết sau.

Ví dụ cả hai class đều định nghĩa màu nền cho đối tượng

div.class1 {
background: #CC0000;
}

div.class2 {
background: #00000FF;
}

Trong trường hợp như trên thì đối tượng sẽ nhận thuộc tính background của class2. Vì
class2 được định nghĩa sau và trình duyệt sẽ nhận giá trị của thuộc tính này.

3. Các giá trị mặc định của đường viền

Trong quá trình bạn style một đối tượng nào đó có thuộc tính border bạn sẽ liệt kê ra các
giá trị của thuộc tính border đó. Vd:
border: 2px solid #000;

Vậy cái gì sẽ hiện thị giá trị mặc định?

1. Border-style: Trong quá trình bạn định nghĩa đường viền (border) cho các đối
tượng HTML, nếu như đối tượng phía trước được định nghĩa kiểu border như thế
nào thì các đối tượng sau cũng được định nghĩa kiểu border đó ( trong trường hợp
bạn không nêu ra kiểu của các đối tượng định nghĩa sau )
2. Border-width: Khi bạn không định nghĩa rõ độ dày của đường viền cho đối
tượng bạn định style thì trình duyệt sẽ lấy mặc định độ dày của đường viền đó là 1
pixel.
3. Border-color: Màu của đường bao ngoài sẽ có màu mặc định là màu của đối
tượng được bao ( trong trường hợp bạn bỏ qua thông số màu của đối tượng )

4. Định dạng CSS cho tài liệu ở dạng in ấn.

Hầu hết những Web Designer ở Việt Nam rất ít quan tâm tới vấn đề này, nhưng thực chất
nó lại là một trong những vấn đề khá quan trọng trong quá trình thiết kế Web. Khi bạn
bắt tay vào thiết kế thông thường bạn chỉ quan tâm tới nó hiện thị trên thiết bị đầu cuối là
màn hình như thế nào, mà bạn ít khi quan tâm tới khi Website của bạn sẽ được in ra như
thế nào? Trong trường hợp người duyệt Web muốn lưu lại những thông tin trên Website
của bạn bằng những bản in thì bắt buộc người duyệt cần phải mất thời gian cho việc lựa
chọn và xóa bỏ những đối tượng không cần thiết.

Để khắc phục điều đó bạn chỉ cần thêm một file CSS phục vụ riêng cho việc in ấn vào
trong Website của bạn. Cách thức cho như sau, trên phần header của bạn ngay sau dòng
lệnh chèn file CSSCascading Style Sheets bạn sẽ thêm một dòng tương tự dòng trên
những có một số chỗ khác biệt.

<link type="text/css" rel="stylesheet" href="/stylesheet.css" media="screen" /> <link

type="text/css" rel="stylesheet" href="/printstyle.css" media="print" />

Hai chỗ khác biệt đó là tên file CSS (printstyle.css) được sử dụng cho chế độ in và thứ
hai là thuộc tính media của link phải đặt là "print" (media="print")

Trong file CSS này bạn sẽ tự động tắt các thành phần không cần thiết (vd: hình quảng
cáo, phần tỉ giá, thời tiết,..mà thay vào đó là bạn cho hiển thị những phần nội dung mà
người xem quan tâm.

Làm rõ thuật ngữ (Id) và (Class)

Cũng có khá nhiều bạn hỏi tôi về việc làm sao để phân biệt được id và class. Khi nào
dùng id, khi nào dùng class trong quá trình thực hiện viết mã HTML và style nó trong
CSS. Trong bài viết này tôi xin giải thích kỹ hơn về hai thuật ngữ này và cách dùng
chúng trong quá trình viết mã HTML.

1. Id. Đầu tiên chúng ta sẽ đi tìm hiểu về thuật ngữ id

1.1 Id là gì?

id hay là index(chỉ số) được dùng để xác định một đối tượng duy nhất nào đó. Do đó
trong một trang HTML của bạn mỗi đối tượng chỉ có duy nhất một id, nếu có 2 đối tượng
trở lên có id giống nhau trong cùng một trang thì điều đó có nghĩa là trang đó của bạn
không validate HTML.

1.2 Id dùng khi nào?. Do mỗi trang HTML mỗi đối tượng chỉ có thể có duy nhất một id
chính vì vậy id được dùng cho những đối tượng nào mang tính duy nhất trong trang (ví
dụ: khung viền (wrapper), menu chính (main menu),...).

1.3. Cách dùng id. <div id="mainwrapper">

Nội dung thông tin...
</div>
Trong file CSS chúng ta sẽ dùng dấu "#" trước tên đối tượng mà chúng ta đặt là id
.
2. ClassBây giờ chúng ta tiếp tục đi tìm hiểu về thuật ngữ class và cách sử dụng chúng
trong quá trình viết mã HTML.

2.1 Class là gì? class hay còn gọi là lớp dùng để chỉ một lớp các đối tượng có chung các
thuộc tính. Các đối tượng trong cùng một class có tính thừa kế lẫn nhau, chính vì vậy
trong một trang HTML của bạn có thể có rất nhiều các đối tượng có thể thuộc một class
nào đó. Ví dụ sau đây sẽ minh chứng cho các bạn về tính thừa kế và việc định nghĩa
nhiều đối tượng cùng thuộc một class nào đó.
Giả sử rằng chúng ta có một trang HTML như sau:

<html>
<head>
</head>

<body>
<div id="wrapper">

<div class="info">
<p>Nội dung thông tin...<p>
</div>

<div class="author">
<div class="info">
<p>Nội dung thông tin 2...<p>
</div>
</div>
 </div>
</body>
</html>

Giả sử rằng chúng ta định nghĩa các thuộc tính của class="info" như sau:

.info {
margin: 5px 10px;
padding: 10px;
border: 1px solid #F0F0F0;
}

Bây giờ bạn muốn định nghĩa cho thẻ div nằm trong phần author có màu nền là màu đen
và chữ là màu trắng thì ta chỉ cần định nghĩa thêm hai thuộc tính này còn thẻ <div
class="info"> đã thừa kế các thuộc tính margin, padding, border của class ở trên. Phần
định nghĩa thêm như sau:

div.author .info {
background-color: #000000;
color: #FFFFFF;
}

Khi đó đối tượng <div class="info"> trong phần author sẽ bao gồm các thuộc tính sau.

div.author .info {
margin: 5px 10px;
padding: 10px;
border: 1px solid #F0F0F0;
background-color: #000000;
color: #FFFFFF;
}

Qua ví dụ trên chúng ta cũng thấy được việc sử dụng nhiều đối tượng thuộc cùng một
class trong cùng một trang như thế nào.

2.1 Dùng class khi nào?

Do tính chất của class đã trình bày ở trên có thể suy ra rằng nếu khi nào chúng ta muốn
nhiều đối tượng dùng chung một số thuộc tính nào đó (vd: color, background, border,...)
thì chúng ta nên gộp chúng vào chung một class.

2.3 Cách dùng class.

Trong HTML chúng ta dùng như sau:

<div class="subwrap">
Nội dung thông tin...
 </div>

<p class="paragraph1">

Nội dung thông tin...

</p>

<span class="highlight">Dòng nổi bật</span>

Trong file CSS chúng ta đặt dấu "." trước tên của đối tượng mà chúng ta đặt là class.

//Lam icon tren cho link trang web

<link rel="Shortcut Icon" href="/favicon.ico"
type="image/x-icon" />

Hack css cho trinh duyet

myClass {
width:100px; /* for Firefox, IE 8 */
_width:105px; /* for IE 6 */
*width:90px; /* for IE 7*/
}

Kỹ thuật làm góc bo trong css3

<div style=”-moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid
#CCCCCC; padding: 10px;” >gjhghfghjfklgfn gh</div>
/*Có một vấn đề nảy sinh đó là hiện tại không phải trình duyệt nào cũng hỗ trợ chúng ta
làm với CSS3, đối với một số trình duyệt cũ thì cũng ta vẫn phải sử dụng những kỹ thuật
cũ để thực hiện bo góc. Còn với một số trình duyệt như Mozila/Firefox, Safari 3 thì
chúng ta thỏa sức sáng tạo với những kỹ thuật của CSS3.*/