Đối với mỗi website, css là một phần vô cùng quan trọng. Tuy nhiên khái niệm này còn xa lạ với nhiều người. Vậy css là gì? Cách chèn css vào html ra sao. Cùng Én Web tìm hiểu trong bài viết dưới đây nhé!
Khái niệm về css
Css là viết tắt của từ Cascading Style Sheets được sử dụng để mô tả giao diện và định dạng của tài liệu viết bằng ngôn ngữ đánh dấu, cung cấp tính năng bổ sung cho html. Cascading trong Cascading Style Sheet có nghĩa là tác dụng vào phần tử html (có thể bị đè) bởi css khác hoặc kết hợp cùng css khác. Còn style Sheets có nghĩa là điều khiển hiển thị nôi dung trang web.
Thông thường css được sử dụng với html để thay đổi phong cách của website và giao diện người dùng. Và có thể được sử dụng kết hợp cùng XML.
Đơn cử nếu như css đặt màu vàng cho phần tử <p> ở một file css nào đó thì ở một file css khác nó có thể được đặt là màu đỏ hoặc có thể là các thuộc tính khác như là chữ gạch chân. Cuối cùng nó sẽ cho ra một sự kết hợp cả 2 CSS. Khi làm việc chuyên sâu bạn sẽ dần nhận ra và nắm bắt được khái niệm này.
Trong website Css và html luôn song hành cùng nhau. Nếu html tạo ra cấu trúc và nội dung các phần tử trong trang thì css lại quyết định cách hiển thị của phần tử trên trang đó. Chính vì vậy muốn học được css bản phải có nhữnh hiểu biết cơ bản về html.
Xem thêm: Internal link là gì? 4 Mô hình xây dựng SEO internal link hiệu quả
Tại sao nên chèn css vào html
Css sẽ giúp website định nghĩa cách hiển thị cho phần tử html, phân tách giữa nội dung trang và cách trình bày trang. Trong trường hợp bạn chỉ sử dụng html để định đạng thì kiểu phần tử phải ở cùng một vị trí với phần tử trong văn bản. Điều này sẽ gây khó khăn cho quá trình bảo trì cũng như nâng cấp trang web. Việc sử dụng css giúo các định dạng được loại bỏ khỏi văn bản html và được lưu vào một file css.
Hướng dẫn chèn css vào html
Để có thể chèn được css vào html. Bạn cần nắm bắt được các thuật ngữ sau:
- Inline: Mã CSS viết tại thuộc tính style của phần tử HTML
- Internal: Mã CSS trong chính văn bản HTML, nằm trong khối thẻ <style>
- External: Mã CSS ở một file riêng biệt sau đó nạp vào HTML bằng phần tử <link>
Xem thêm: HTML viết tắt của từ gì? Tìm hiểu vai trò HTML trong website
Chèn CSS vào html dạng inline – thuộc tính style
Đây là cách thức chèn css thằng vào thuộc tính style của phần từ. Khi này mã css chỉ tác động lên chính phần tử đó.
Khi sử dụng cách này, việc đầu tiên là bạn cần tạo ra một tập tin .css với tên bất kỳ, bạn có thể dùng bất cứ chương trình soạn thảo văn bản nào để tạo.
Ví dụ đoạn css sau đặt màu chữ phần tử là xám, màu nền phần tử là xanh
color: #eee; background-color:blue;
Công việc của bạn bây giờ là gắn css vào một phần tử nào đó. Chằng hạn như:
<p style=”color:white; background-color:red;”>
Ví dụ của enweb</p>
Bạn có thể thử thay thế các mã màu khác để kiểm tra mã css của mình.
Xem thêm: Kích thước ảnh chuẩn trên website và cách lưu hình ảnh
Chèn CSS vào website dạng Internal – thẻ style
Với cách này bạn sẽ dùng thẻ <style> tạo ra khu vực để viết css. Bạn có thể để ở bất cứ nơi nào mình muốn trong html nhưng cần đặt trong thẻ <head>
Bạn có thể tham khảo định nghĩa cho mọi phần tử đều có chữ đen và nền đỏ như sau:
<html>
<head>
<style>
p {
color:white;
background-color:red;
}
</style>
</head>
<body>
<p>Đoạn văn 1. </p>
<p>Đoạn văn 2. </p>
</body>
</html>
Chèn CSS vào html dạng External – thẻ link tải file CSS
Cách chèn css vào html này có nghĩa là tạo một file độc lập với file html. Đa số phần mở rộng này sẽ là css rồi dùng thẻ link đặt vào phần <head> . Bạn có thể tham khảo ví dụ sau: Ở đây tôi tạo một file test.css
<html>
<head>
<link rel=”stylesheet” href=”test.css”>
</head>
<body>
<p>Đoạn văn 1. </p>
<p>Đoạn văn 2. </p>
</body>
</html>
Trong file test.css bạn viết nội dung CSS (không có thẻ style), chằng hạn:
p {
color:black;
background-color:blue;
}
Kết quả bạn nhận được chắc chắn sẽ tương tự như cách chèn dạng thẻ style. Song, css được tạo ra ở đây là một file độc lập.
Xem thêm: Thiết kế website chuẩn seo tại Đà Nẵng
Kết luận
Trên đây là toàn bộ những kiến thức cơ bản liên quan đến chèn css vào html. Các bạn có thể tham khảo và áp dụng cho mình. Nếu có bất cứ thắc mắc nào bạn có thể vui lòng liên hệ với chúng tôi:
