Tổng hợp một số mẹo nhỏ về CSS

CSS (Cascading Style Sheets) là một thành phần rất quan trọng trong việc thiết kế và bố cục trang web. Nó bao gồm các định dạng về màu sắc, kích thước, vị trí, phông chữ, hình nền… để làm trang web thêm sống động và rực rỡ hơn. Sau đây, mình xin giới thiệu với các bạn một số mẹo nhỏ để tối ưu css, có thể hạn chế việc phình to kích cỡ tập tin css khi chèn vào trang web.

1. Kết hợp các thuộc tính
Ví dụ:
Đối với margin, thay thế

margin-top: 8px
margin-right: 4px;
margin-bottom: 8px;
margin-left: 4px;

bạn có thể sử dụng

margin: 8px 4px 8px 4px;

Đối với font, để thay thế

font-family: Tahoma;
font-weight: bold;
font-style: italic;
font-size: 12px;

bạn có thể sử dụng

font: italic bold 12px Tahoma;

Đối với background, để thay thế

background-image: url(bk_main.jpg);
background-repeat: repeat-x;
background-color: #ccccff;

bạn có thể sử dụng

background: #ccccff url(bk_main.jpg) repeat-x;

2. Nhóm các định dạng chung
Nếu bạn có 2 phần tử có những đặc tính chung bạn có thể nhóm chúng lại như ví dụ sau:

H2
{
    font-size: 16pt;
    color: #4169e1;
    font-family: 'Trebuchet MS' , Arial;
    margin: 4px 0px 2px;
    padding-left: 10px;
    text-decoration: underline;
}

H3
{
    font-size: 14pt;
    color: #4169e1;
    font-family: 'Trebuchet MS' , Arial;
    margin: 4px 0px 2px;
    padding-left: 10px;
    text-decoration: underline;
}

Hai thẻ H2,H3 có những đặc tính chung nên

H2, H3
{
    color: #4169e1;
    font-family: 'Trebuchet MS' , Arial;
    margin: 4px 0px 2px;
    padding-left: 10px;
    text-decoration: underline;
}

H2
{
    font-size: 16pt;
}

H3
{
    font-size: 14pt;
}

3. Sử dụng Shorthand Hexadecimal để đơn giản màu sắc
Ví dụ:

#99ff33 có thể thay bằng #9f3
#ff0000 có thể thay bằng #f00
#000000 có thể thay bằng #000

4. Sử dụng Classes trong thẻ cha
Để thay thế

<p>Home</p>
<p>About</p>
<p>Contact</p>
<p>Sitemap</p>

Bạn có thể dùng

<div>
    <p>Home</p>
    <p>About</p>
    <p>Contact</p>
    <p>Sitemap</p>
<div>

5. Không nên viết coment quá phức tạp
Như dưới đây

/*****************************/
/**********Header CSS*********/
/*****************************/

Bạn có thể viết đơn giản hơn:

/*Header CSS*/

6. Không nên viết trực tiếp css vào các thẻ.
Bạn nên viết chung vào file.css.

<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">Home</p>
<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">About</p>
<p style="font-size: 14pt ;font- : Arial; text-decoration: underline;">Contact</p>
<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">Sitemap</p>

Thay thế bằng:

<p>Home</p>
<p>About</p>
<p>Contact</p>
<p>Sitemap</p>

7. Xóa hết các khoảng trắng và dòng thừa.
Để giảm kích thước tập tin css, bạn nên xóa bỏ hết các khoảng trắng và dòng thừa giữa các định dạng.

Theo tek.eten

Tags: ,