Th7 27, 2022 Show Hai G. 3ít nhất Đọc  Có 3 cách để thêm style CSS vào website của bạn:
Nếu bạn bắt đầu xây dựng website, kể cả khi bạn sử dụng một môi trường hoàn hảo để làm WordPress site (nền tảng dễ nhất để sử dụng cho người mới). Bạn có thể vẫn phải biết cách thêm 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 chúng.
Phần 1 – Internal CSSLựa chọn 2 – External CSS <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>Lựa chọn 3 – Inline CSS Internal CSS:
Chỉ một trang ảnh hưởng bởi stylesheet.
Bất lợi của Internal CSS:
<style type="text/css"> Làm thế nào để thêm Internal CSS vào trang HTML body {
background-color: blue;
}
h2 {
color: red;
padding: 60px;
}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. </style> Định vị tag mở đầu và thêm dòng sau vào nó:: <!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
h2 {
color: red;
padding: 60px;
}
</style>
</head>
<body>
<h2>Hostinger Tutorials</h2>
<p>This is our paragraph.</p>
</body>
</html>Lựa chọn 2 – External CSS2 – External CSSLựa chọn 3 – Inline CSS <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> Kết luậnstyle.css chứa tất cả các style rules. Ví dụ: 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:Ích lợi của Internal CSS:External CSS:
Bất lợi của Internal CSS:
Lựa chọn 3 – Inline CSSKết luận <!DOCTYPE html> <html> <body style="background-color:black;"> <h2 style="color:white;padding:30px;">Hostinger Tutorials</h2> <p style="color:white;">Something usefull here.</p> </body> </html> 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::
Không cần phải upload nhiều files. HTML và CSS có thể là một file.
Kết luậnInternal 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: Ích lợi của Internal CSS: |
