CSS có thể được thêm vào tài liệu HTML theo 3 cách:
Inline - Sử dụng thuộc tính style bên trong chính các phần tử HTMLInternal - Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ Style như những ví dụ trong phần trước.
External - Tạo một tập tin .css riêng và nhúng vào tài liệu HTML thông qua cặp thẻ Link
Cách phổ biến nhất để thêm CSS là External. Tuy nhiên, trong phần này chúng ta sẽ sử dụng các kiểu inline và internal, vì cách này dễ trình bày hơn và các bạn cũng dễ tự mình thử hơn, chúng ta sẽ bàn về External trong những phần sau khi chúng ta sử dụng Hosting của 000webhost.
Internal CSS được định nghĩa trong phần <head> của trang HTML, bên trong phần tử <style>.
Ví dụ sau đây đặt màu văn bản của TẤT CẢ các phần tử <h1> (trên trang đó) thành màu xanh blue và màu văn bản của TẤT CẢ các phần tử <p> thành màu đỏ red. Ngoài ra, trang sẽ được hiển thị với màu nền "powderblue":
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Đây là đoạn Text H1, chữ màu blue</h1>
<p>Đây là đoạn text trong thẻ p, chữ màu red.</p>
</body>
</html>
Lưu ý: Tác dụng sẽ là Tất Cả các thẻ cùng tên trên trang web, ví dụ H1 sẽ đều là màu blue.
Sử dụng OnlineGDB, thực thi mã HTML
Inline CSS sử dụng thuộc tính style bên trong chính các phần tử HTML, được sử dụng để áp dụng một kiểu duy nhất cho một phần tử HTML duy nhất. Inline CSS sử dụng thuộc tính style của một phần tử HTML.
Ví dụ sau đặt màu văn bản của phần tử <h1> thành màu xanh blue và màu văn bản của phần tử <p> thành màu đỏ red. Và chỉ DUY NHẤT phần tử đó chịu tác động mà thôi.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">Dòng chữ H1 màu blue</h1>
<p style="color:red;">Đoạn văn bản màu đỏ.</p>
</body>
</html>
Bấm Run để thực thi HTML
Các thẻ <h1> khác sẽ không chịu tác động, ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">Dòng chữ H1 màu blue</h1>
<p style="color:red;">Đoạn văn bản màu đỏ.</p>
<h1> Dòng chữ sử dụng H1 mặc định</h1>
</body>
</html>
Bấm Run để thực thi mã HTML
Không có nhận xét nào:
Đăng nhận xét