Học CSS cơ bản bài 2: Cấu trúc CSS
Sau phần đầu giới thiệu thế nào là CSS hay CSS là gì. Thì đến phần này, mình sẽ giới thiệu các bạn về cấu trúc của CSS. Cái này có nhiều mục nhé. Nhưng chúng ta sẽ bắt đầu từ phần cơ bản đến chi tiết. Mục đích cho các bạn dù không biết nhưng cũng có thể tiếp thu nhanh chóng và làm được luôn.
Áp dụng CSS cho HTML
Điều đầu tiên chúng ta sẽ xem xét là ba phương pháp áp dụng CSS vào tài liệu.
Phần bản định kiểu bên ngoài
Trong Bắt đầu với CSS, chúng tôi đã liên kết một biểu định kiểu bên ngoài với trang của chúng tôi. Đây là phương pháp phổ biến và hữu ích nhất để gắn CSS vào tài liệu vì bạn có thể liên kết CSS với nhiều trang, cho phép bạn định kiểu tất cả chúng với cùng một biểu định kiểu. Trong hầu hết các trường hợp, tất cả các trang khác nhau của một trang web sẽ trông khá giống nhau, do đó bạn có thể sử dụng cùng một bộ quy tắc cho giao diện cơ bản.
Biểu định kiểu bên ngoài là khi bạn viết CSS trong một tệp riêng có .cssphần mở rộng và bạn tham chiếu nó từ một <link>phần tử HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>Tệp CSS có thể trông giống như thế này:
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}Các hrefthuộc tính của <link>nguyên tố cần tham khảo một tập tin trên hệ thống tập tin của bạn.
Trong ví dụ trên, tệp CSS nằm trong cùng thư mục với tài liệu HTML, nhưng bạn có thể đặt nó ở một nơi khác và điều chỉnh đường dẫn đã chỉ định cho phù hợp, ví dụ:
<!-- Inside a subdirectory called styles inside the current directory -->
<link rel="stylesheet" href="styles/style.css">
<!-- Inside a subdirectory called general, which is in a subdirectory called styles, inside the current directory -->
<link rel="stylesheet" href="styles/general/style.css">
<!-- Go up one directory level, then inside a subdirectory called styles -->
<link rel="stylesheet" href="../styles/style.css">Phần bản định kiểu nội bộ
Biểu định kiểu nội bộ là nơi bạn không có tệp CSS bên ngoài, nhưng thay vào đó, đặt CSS của bạn bên trong một <style>phần tử có trong HTML <head>.
Vì vậy, HTML sẽ trông như thế này:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>Điều này có thể hữu ích trong một số trường hợp (có thể bạn đang làm việc với hệ thống quản lý nội dung nơi bạn không thể sửa đổi trực tiếp các tệp CSS), nhưng nó không hiệu quả như các bảng định kiểu bên ngoài – trong một trang web, CSS sẽ cần được lặp lại trên mỗi trang và được cập nhật ở nhiều nơi nếu cần thay đổi.
Phần kiểu nội tuyến
Kiểu nội tuyến là các khai báo CSS chỉ ảnh hưởng đến một thành phần, được chứa trong một stylethuộc tính:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>Xin đừng làm điều này, trừ khi bạn thực sự phải làm! Điều này rất tệ cho việc bảo trì (bạn có thể phải cập nhật cùng một thông tin nhiều lần cho mỗi tài liệu) và nó cũng trộn lẫn thông tin CSS trình bày của bạn với thông tin cấu trúc HTML của bạn, làm cho mã khó đọc và dễ hiểu hơn. Giữ các loại mã khác nhau làm cho công việc dễ dàng hơn nhiều đối với tất cả những người làm việc với mã.
Có một vài nơi mà phong cách nội tuyến phổ biến hơn, hoặc thậm chí được khuyên dùng. Bạn có thể phải sử dụng chúng nếu môi trường làm việc của bạn thực sự hạn chế (có lẽ CMS của bạn chỉ cho phép bạn chỉnh sửa phần thân HTML). Bạn cũng sẽ thấy chúng được sử dụng rất nhiều trong email HTML để có được khả năng tương thích với càng nhiều ứng dụng email càng tốt.
[related_posts_by_tax posts_per_page="6" title="Bài liên quan" taxonomies="category,post_tag"]
