Bài 08: Sử dụng CSS tùy chỉnh giao diện HTML

Theo mặc định giao diện của các thẻ HTML sẽ không đẹp và không thể nào làm giống như giao diện trong file PSD được, vì vậy ta phải sử dụng thêm ...

Theo mặc định giao diện của các thẻ HTML sẽ không đẹp và không thể nào làm giống như giao diện trong file PSD được, vì vậy ta phải sử dụng thêm CSS để tùy chỉnh hiển thị mặc định của HTML.

1. Ví dụ sử dụng CSS định dạng giao diện

Để các bạn rõ hơn thì mình sẽ làm một ví dụ sử dụng CSS để định dạng cho thẻ P như sau:

Không sử dụng CSS: XEM DEMO

 

1
2
3
4
5
6
7
8
9
10
11
12
!DOCTYPE html
html
    head
        titleTùy chỉnh giao diện HTML bằng CSS/title
        meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
    /head
    body
        p
            Chào mừng bạn đến với website học lập trình online code24h.com
        /p
    /body
/html

Giao diện:

Có sử dụng CSS: XEM DEMO

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
!DOCTYPE html
html
    head
        titleTùy chỉnh giao diện HTML bằng CSS/title
        meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
        style type="text/css"
            p{
                background: blue;
                color: white;
                text-align: center;
                font-size: 30px;
            }
        /style
    /head
    body
        p
            Chào mừng bạn đến với website học lập trình online code24h.com
        /p
    /body
/html

Giao diện:

Chạy hai ví dụ trên bạn sẽ thấy sự khác nhau giữa chúng là ở ví dụ một hiển thị đơn giản, còn ví dụ hai thì có background và chữ màu trắng. Về HTML thì không có gì khác nhưng ỏ ví dụ hai mình có bổ sung một đoạn mã CSS như sau:

 

1
2
3
4
5
6
7
8
style type="text/css"
    p{
        background: blue;
        color: white;
        text-align: center;
        font-size: 30px;
    }
/style

Như vậy để bổ sung CSS cho thẻ HTML thì ta đặt nó bên trong thẻ style. Còn cú pháp CSS như thế nào thì bạn có thể đọc bài cú pháp CSS để hiểu rõ hơn.

2. Lời kết

Như vậy bạn đã hiểu được ý nghĩa của CSS là gì và cách viết CSS đơn giản. Tuy nhiên đó không phải là tất cả nên mình khuyên bạn nên đọc qua serie Css căn bản này để hiểu rõ hơn.


Code Dev

144 Blog posts

Comments