Cách chèn css vào html đơn giản trong một nốt nhạc

Tri thức / Lập trình / Lập trình web / Html & Css      235 - 0      11 tháng trước
Cách chèn css vào html đơn giản trong một nốt nhạc
0 0

Để chèn các đoạn mã css vào file html, chúng ta có thể thực hiện bằng cách chèn trực tiếp vào thuộc tính style của các thẻ html, chèn vào nội dung thẻ style, hoặc chèn file css thông qua thẻ link.

 

Chèn mã css trực tiếp bằng thuộc tính style của các thẻ html

Xem ví dụ sau:

<body>
    <p style="color: red">Đoạn văn bản này sẽ có màu đỏ</p>
    <p style="color: blue">Đoạn văn bản này sẽ có màu xanh dương</p>
</body>

Trong ví dụ này: Chúng ta đã chèn đoạn mã css vào từng thẻ html thông qua thuộc tính style. 

Khi chèn trực tiếp như bên trên, thì nội dung css sẽ chỉ áp dụng cho thẻ html hiện tại.

Ưu điểm khi chèn css trực tiếp trong các thẻ html:

  • Nhanh, không bị lưu cache, tính cập nhật tức thời.

Nhược điểm khi chèn css trực tiếp trong các thẻ html:

  • code html trở nên phức tạp, khó kiểm soát

 

Chèn mã css bằng thẻ style

<!DOCTYPE HTML>
<html lang="vi">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Trang bán hàng trực tuyến abc</title>
        <!-- Other html tags -->
        <style>
            .c_red{
                color: red;
            }
            #p2{
                color: blue;
            }
        </style>
    </head>
    <body>
        <p class="c_red">Đoạn văn bản này sẽ có màu đỏ</p>
        <p class="c_blue" id="p2">Đoạn văn bản này sẽ có màu xanh dương</p>
    </body>
</html>

Lưu ý:

  • Thẻ style phải được đặt là con trực tiếp của thẻ head.
  • Chúng ta có thể có nhiều thẻ style trong một tài liệu html.
  • Nội dung của các thẻ style là các đoạn mã css được áp dụng cho tài liệu html hiện tại.

Ưu điểm: Không bị lưu cache, tính cập nhật tức thì.

Nhược điểm: Không áp dụng cùng lúc cho nhiều file html.

 

Chèn file css bằng thẻ link

File html viết:

<!DOCTYPE HTML>
<html lang="vi">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Trang bán hàng trực tuyến abc</title>
        <!-- Other html tags -->
        <link href="css/index.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <p class="c_red">Đoạn văn bản này sẽ có màu đỏ</p>
        <p class="c_blue" id="p2">Đoạn văn bản này sẽ có màu xanh dương</p>
    </body>
</html>

 

File css viết:

.c_red{
    color: red;
}
#p2{
    color: blue;
}

Lưu ý: 

  • Thẻ link phải được đặt là con trực tiếp của thẻ head.
  • Có thể có nhiều thẻ link khai báo file css trong cùng một file html.
  • Khi này, đoạn mã trong file css sẽ được áp dụng cho các file html có liên kết tới.

Ưu điểm: Có thể áp dụng cùng lúc cho nhiều file html, có thể lưu cache để tăng tốc độ website.

Nhược điểm: Có thể bị tự động lưu cache dẫn đến tính cập nhật bị trễ hoặc phải xoá cache thủ công mỗi khi cập nhật css.

 

Như vậy là chúng ta vừa xem qua các cách để chèn mã css vào file html. Ở những bài học tiếp theo chúng ta sẽ học cách để viết các đoạn mã css để trang web nhìn đẹp hơn.

Tạo vào 2019-08-14 18:53:24, Cập nhật 11 tháng trước
TuTriThuc.com TuTriThuc.com Theo dõi 1
Chia sẻ Cách chèn css vào html đơn giản trong một nốt nhạc tới bạn bè để mọi người cùng đọc nhé !
Bình luận
Top phản hồi
Đang tải bình luận bài viết Phản hồi bài viết Cách chèn css vào html đơn giản trong một nốt nhạc
Gửi đi
Bạn đang đọc bài viết Cách chèn css vào html đơn giản trong một nốt nhạc , hãy để nguồn tutrithuc.com khi phát hành lại nội dung này !
35918
0.057537078857422