Nếu bạn bắt đầu xây dựng trang web, kể cả khi bạn sử dụng một môi trường hoàn hảo để làm trang web WordPress [nền tảng dễ sử dụng nhất cho người mới]. You can also know how more style CSS

Bài hướng dẫn này sẽ đi qua cả 3 cách thêm style CSS vào website, ưu điểm và nhược điểm của mình

• Phần 1 – CSS nội bộ
• Lựa chọn 2 – CSS bên ngoài
• Lựa chọn 3 – Inline CSS
• Kết luận

Phần 1 – CSS nội bộ

Internal CSS code được đặt trong mục  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ẻ . Một ví dụ của internal stylesheet:

  
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  

Lợi ích của CSS nội bộ

• Chỉ một trang ảnh hưởng bởi biểu định kiểu
• Các lớp và ID có thể được sử dụng bởi biểu định kiểu nội bộ
• Không cần phải tải lên nhiều tệp. HTML and CSS could be a file

Bất lợi của CSS nội bộ

• Tăng thời gian tải thời gian
• Nó ảnh hưởng đến 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 CSS nội bộ vào trang HTML

1. Mở trang HTML bằng trình soạn thảo văn bản. Nếu trang đã được tải lên tài khoản lưu trữ, bạn có thể sử dụng trình soạn thảo văn bản được cung cấp sẵn của máy chủ. Nếu bạn có tài liệu HTML trên máy tính của mình, bạn có thể sử dụng trình soạn thảo văn bản để chỉnh sửa nó và tải lại các tệp đó vào tài khoản lưu trữ của bạn thông qua ứng dụng khách FTP
2. Định vị tag  mở đầu và thêm dòng sau vào nó:

3. Bây giờ chuyển sang dòng mới và thêm vào các quy tắc CSS, ví dụ

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

4. Khi đã thêm quy tắc CSS, hãy đóng thẻ bằng

Vì vậy, tệp HTML với biểu định kiểu nội bộ sẽ có định dạng

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




Hostinger Tutorials
This is our paragraph.

Lựa chọn 2 – CSS bên ngoài

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  của trang:

Trong đó  phong cách. css chứa tất cả các quy tắc kiểu. Ví dụ

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

Thuận lợi của CSS bên ngoài

• Kích thước trang HTML nhỏ hơn cấu trúc thu gọn hơn
• Tốc độ tải trang nhanh hơn
• Một tập tin. css can be used for many

Bất lợi của CSS bên ngoài

• Cho đến khi CSS bên ngoài được tải lên, trang của bạn sẽ không được tải xuống 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.  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:

Hostinger Tutorials
Something usefull here.

Thuận lợi của CSS nội tuyến

• Hữu dụng nếu bạn muốn kiểm tra hoặc xem trước khi thay đổi
• Hữu dụng để sửa nhanh
• Số yêu cầu HTTP ít hơn

Bất lợi của CSS nội tuyến

• CSS nội tuyến phải được áp dụng cho từng phần tử

Kết luận

Bây giờ bạn đã biết nhiều cách để thêm phong cách CSS cho trang web của bạn và biết sự khác biệt giữa biểu định kiểu nội tuyến, bên ngoài và bên trong

Tác giả

Hải G

Hải G. là chuyên gia quản lý vận tải, điều hành các trang web dịch vụ. Anh có nhiều năm kinh nghiệm về VPS, Hosting, kỹ thuật SEO, CMS. Đặc biệt yêu thích WordPress và đã sử 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 khởi nghiệp