9. Thẻ style trong HTML

 

1. Thẻ style trong HTML là gì?

Style là một thẻ HTML bình thường, nó có công dụng là xác định phạm vi chứa code CSS cho trình duyệt biên dịch. Tất cả những đoạn mã bên trong thẻ style đều không hiển thị lên giao diện, mà nó chỉ biên dịch và chạy ngầm trong trình duyệt.

Ví dụ: Sử dụng thẻ style để quy định màu chữ hiển thị của thẻ p và thẻ h1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            h1 {color:red;}
            p {color:blue;}
        </style>
    </head>
    <body>
        <h1>Học lập trình miễn phí</h1>
 
        <p>this is a test.</p>
    </body>
</html>




Như bạn thấy, bên trong thẻ style mình đã định nghĩa hai thuộc tính CSS:

1
2
3
4
<style>
    h1 {color:red;}
    p {color:blue;}
</style>


. Sử dụng thẻ style để định dạng giao diện

Để các bạn hiểu rõ hơn thì mình sẽ làm một ví dụ rất đơn giản

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <head>
        <title>Tù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
        </p>
    </body>
</html>



Bài tập 








Nhận xét