Để nhúng mã CSS vào trang web chúng ta có 3 thực hiện thông qua cách khác nhau:
- Nhúng trong thẻ HTML (hay inline embed)
- Nhúng trong thẻ
<style>(hay internal embed) - Nhúng sử dụng tập CSS riêng (hay external embed)
Ở phần này tạm thời chúng ta sẽ bỏ qua việc tìm hiểu mã lệnh CSS có ý nghĩa gì để tập trung vào cách nhúng mã CSS vào HTML như thế nào. Trong các bài học tiếp chúng ta sẽ tìm hiểu cụ thể các đoạn mã CSS này.
Nhúng trong thẻ HTML
Nhúng trong thẻ HTML hay còn gọi là nhúng inline. Với cách nhúng này mã CSS sẽ được đưa vào bên trong thẻ mở HTML. Ví dụ:
<body style="background-color: #232f3e; color: #fff;">
<h1 style="color: #f08804;">Giới Thiệu Về CSS</h1>
<p>CSS là viết tắt của từ Cascading Style Sheet</p>
</body>Nhúng Trong Thẻ Style
Nhúng trong thẻ <style> hay còn gọi là nhúng nội bộ (internal). Với cách nhúng này mã CSS sẽ được đưa vào trong thẻ <style>. Sử dụng cách nhúng này thì mã CSS trong ví dụ trên sẽ được viết như sau:
<style type="text/css">
body {
background-color: #232f3e;
color: #fff;
}
h1 {
color: #f08804;
}
</style>Tham Chiếu Tới Tệp CSS
Với cách nhúng này chúng ta sẽ tạo riêng một tệp chứa mã lệnh CSS các tệp này có phần mở rộng là .css và sau đó trong mã lệnh HTML chúng ta tham chiếu tới tệp này sử dụng thẻ <link>. Cách nhúng CSS này còn được gọi là nhúng ngoài (external). Sử dụng ví dụ nhúng CSS sử dụng thẻ <style> ở trên, bây giờ chúng ta sẽ tạo một tệp mới style.css với nội dung như sau:
p {
color: red;
text-align: center;
}Sau đó file này sẽ được đưa vào trong mã HTML thông qua thẻ <link>:
<link rel="stylesheet" type="text/css" href="style.css">Thẻ <link> có 3 thuộc tính rel, type và src. Trong đó rel và type giúp trình duyệt xác định được loại file được nhúng là tệp CSS và src dùng để xác định vị trí của file được nhúng vào.
Nguồn: CodeHub.vn
Không có nhận xét nào:
Đăng nhận xét