Khác biệt giữa Inline, External và Internal style CSS
access_time
hourglass_empty
person_outline

Khác biệt giữa Inline, External và Internal style CSS

Giới thiệu

Có 3 cách để thêm style CSS vào website của bạn: bạn có thể dùng internal CSS và chèn CSS rules trong mục <head> trong HTML document, liên kết nó với file external .css chứa CSS rules hoặc sử dụng inline CSS để áp rules vào elements được chỉ định. Bài hướng dẫn này sẽ đi qua cả 3 cách, ưu điểm và nhược điểm của chúng.

Phần 1 – Internal CSS

Internal CSS code được đặt trong mục <head> của một trang nhất định. Classes và IDs có thể được chỉ định tới CSS, nhưng nó chỉ hoạt động trên trang có định đó.  Classes và IDs có thể được dùng để dẫn tới code CSS, nhưng chỉ hoạt động trên trang đó. Style CSS được nhúng bằng cách này sẽ cần phải được tải về mỗi khi trang được load, vì vậy có thể dẫn đến mất nhiều thời gian để duyệt website. Tuy nhiên, trong một số trường hợp internal stylessheet rất hữu dụng. Một ví dụ là bạn muốn gửi một trang mẫu – vì tất cả đều chỉ nằm trong một trang – xem preview sẽ dễ hơn nhiều. Internal CSS được đặt trong thẻ <style></style>. Một ví dụ của internal stylesheet:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

Ích lợi của Internal CSS:

  • Chỉ một trang ảnh hưởng bởi stylesheet.
  • Classes và IDs có thể được dùng bởi internal stylessheet.
  • Không cần phải upload nhiều files. HTML và CSS có thể là một file.

Bất lợi của Internal CSS:

  • Tăng thời gian load time.
  • Nó ảnh hưởng tới một trang – không hữu dụng nếu bạn sử dụng cùng một CSS cho nhiều trang..

Làm thế nào để thêm Internal CSS vào trang HTML

  1. Mở trang HTML với một text editor. Nếu trang đã được upload lên tài khoản hosting, bạn có thể sử dụng text editor được cung cấp sẳn của hositng. Nếu bạn có một tài liệu HTML trên máy tính của bạn, bạn có thể sử dụng text editors để sửa nó và upload lại files đó vào tài khoản hosting của bạn qua FTP client.
  2. Định vị tag <head> mở đầu và thêm dòng sau vào nó:
<style type="text/css">

3. Bây giờ tới dòng mới và thêm vào CSS rules, ví dụ:

body {
             background-color: blue;
         }
 h1 {
     color: red;
     padding: 60px;
 }

4. Khi đã thêm CSS rules, hãy đóng tag bằng:

</style>

Vậy là, HTML file với internal stylesheet sẽ có dạng:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
} 
</style>
</head>
<body>

<h1>Hostinger Tutorials</h1>
<p>This is our paragraph.</p>

</body>
</html>

Lựa chọn 2 – External CSS

Có lẽ là cách dễ nhất để thêm Style CSS vào website của bạn là liên kết với một file .css ở bên ngoài. Bằng cách này bất kỳ thay đổi nào bạn thực hiện trên CSS sẽ thay đổi trên toàn website. Một cách để làm là đặt link CSS trong mục <head> của trang:

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Trong đó  style.css chứa tất cả các style rules. Ví dụ:

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

Thuận lợi của External CSS:

  • Kích thước trang HTML nhỏ hơn cấu trúc gọn hơn.
  • Tốc độ load trang nhanh hơn.
  • Một file .css có thể được dùng cho nhiều.

Bất lợi của External CSS:

  • Cho tới khi external CSS được load lên, trang của bạn sẽ không được tải hoàn toàn.

Lựa chọn 3 – Inline CSS

Inline CSS được sử dụng cho một thẻ HTML xác định. <style> attribute được dùng để style một HTML tag xác định. Sử dụng CSS bằng cách này không được khuyến khích, vì mỗi tag HTML cần được styles độc lập. Quản lý website sẽ rất khó nếu bạn chỉ sử dụng inline CSS. Ví dụ, trong trường hợp bạn không có quyền truy cập tới file CSS hoặc cần áp dụng style cho một element duy nhất. Ví dụ của một trang HTML với inline CSS sẽ giống như sau:

<!DOCTYPE html>
<html>
<body style="background-color:black;">

<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>

</body>
</html>

Thuận lợi của Inline CSS:

  • Hữu dụng nếu bạn muốn test hoặc xem trước thay đổi.
  • Hữu dụng để sửa nhanh.
  • Số requests HTTP ít hơn.

Bất lợi của Inline CSS:

  • Inline CSS phải được áp dụng cho mỗi element.

Kết luận

Bây giờ bạn đã biết nhiều cách để thêm style CSS cho website của bạn và biết sự khác biệt giữa inline, external và internal stylesheet

Tác giả

Author

Hai G. / @hghaigiang

Hải G. là chuyên gia quản lý, vận hành các dịch vụ website. Anh có nhiều năm kinh nghiệm về VPS, Hosting, technical SEO, CMS. Đặc biệt yêu thích WordPress và đã dùng nó hơn 5 năm nay. Sở thích của anh là đọc, viết blog, đi du lịch và tư vấn cho các bạn trẻ khởi nghiệp.

Bài hướng dẫn liên quan

Author

Trần Phát Đạt Trả lời

Tháng Mười 05 2017

Trang web máy nén khí hitachi, cụ thể http://dailymaynenkhi.net, của mình có tận 106 lỗi Inline CSS Test mà không biết sao nữa? bác chỉ giúp ae với. thank you

    Author

    Hai G.

    Trả lời trên Tháng Mười 20 2017

    bạn gửi ticket bên mình để bên kỹ thuật trợ giúp bạn thử nhé

Author

Bonbon Trả lời

Tháng Bảy 13 2018

Bên mìn cũng vậy

    Author

    Hai G.

    Trả lời trên Tháng Bảy 25 2018

    website nào của bạn bị lỗi vậy?

Trả lời

Bình luận*

Tên*

Email*

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

Gia nhập Hostinger ngay hôm nay!