Là những lập trình viên mới hơn, trước tiên, chúng tôi bắt đầu kết hợp CSS vào các trang web của mình dưới dạng nội tuyến. Chúng tôi sử dụng thuộc tính style để đưa CSS trực tiếp vào phần tử HTML của chúng tôi:
<!DOCTYPE html> <html> <head> <title>Inline Style</title> </head> <body> <h1 style="color:blue;text-align:center;">Star Wars</h1> <h4 style="color:red;text-align:center;">Return of the Jedi</h4> </body> </html>
Khi chúng tôi chuyển sang các trang web phức tạp hơn, chúng tôi chuyển sang kết hợp CSS của chúng tôi làm CSS nội bộ. Đây là nơi chúng tôi viết tất cả CSS của mình ở giữa <style> trong thẻ <head> phần của tài liệu HTML:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
h1, h4 {
text-align: center;
}
h1 {
color: blue;
}
h4 {
color: red;
}
</style>
</head>
<body>
<h1>Star Wars</h1>
<h4>Return of the Jedi</h4>
</body>
</html> Điều này làm sạch HTML của chúng tôi một cách độc đáo. Tuy nhiên, nếu chúng ta có 500 dòng CSS thì sao? Tệp này sẽ khó đọc khá nhanh. Tuy nhiên, chúng tôi có khả năng tạo các bảng định kiểu bên ngoài và sau đó liên kết chúng với tệp HTML của chúng tôi!
Thiết lập:
- Trong thư mục dự án chính của bạn, nơi index.html của bạn là, tạo một tệp mới có tên là index.css. Tệp index.css sẽ chứa tất cả CSS cho tệp index.html của chúng tôi. Tôi muốn đặt tên cho các tệp CSS của mình theo tên các tệp HTML mà chúng định kiểu để giữ cho mọi thứ được ngăn nắp, nhưng bạn chắc chắn có thể đặt tên chúng bất cứ thứ gì bạn muốn miễn là bạn biết chúng đang tạo kiểu cho tệp nào.
- Nếu bạn có CSS ở giữa
<style>trong thẻ<head>trong tệp HTML của bạn, chỉ cắt và dán mã CSS (không có thẻ) vào tệp CSS tương ứng. - Trong
<head>của tệp HTML, bạn sẽ tạo thẻ trỏ đến tệp CSS của bạn:
<link rel="stylesheet" type="text/css" href="./index.css">
Liên kết bao gồm ba phần:
- Thuộc tính rel: Điều này cho chúng ta biết sẽ có mối quan hệ giữa tệp này với tệp khác và liên kết này sẽ cho chúng ta biết mối quan hệ đó là gì.
- Thuộc tính type: Mô tả loại mối quan hệ mà tệp được liên kết có với tệp HTML.
- Thuộc tính href: Đường dẫn liên quan đến tệp từ vị trí của tệp HTML - vị trí của tệp.
Hãy nhớ rằng mặc dù chúng ta đang tách tệp CSS khỏi tệp HTML, bản chất phân tầng của CSS vẫn chiếm ưu thế tối cao. Điều này có nghĩa là nếu bạn có nhiều tệp CSS, bạn sẽ cần:
1. Có một trỏ đến từng tệp CSS riêng lẻ.
2. Đảm bảo rằng các tệp đó theo thứ tự bạn cần để kiểu dáng phù hợp hiển thị. Nếu chúng không theo thứ tự thích hợp, kiểu có thể không hoạt động.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Thats tất cả để có nó. Bây giờ bạn đang trên đường tạo các bảng định kiểu bên ngoài cho dự án của mình!