CSS là viết tắt của "Cascading Style Sheets", là ngôn ngữ dùng để định dạng lại phần tử HTML, giúp cho giao diện website trở nên đẹp, rõ ràng và sinh động hơn.
Nếu ví HTML như cơ thể trần trụi của con người, thì CSS chính là quần áo, giày dép, trang điểm, ... cho bản thân xinh đẹp hơn. Hầu như tất cả các website đều phải có sử dụng CSS.
#tên_id {
// Các thuộc tính css
}
.tên_class {
// Các thuộc tính css
}
tên_thẻ {
// Các thuộc tính css
}
<h2 style="color: red; font-size: 16px;">Nhúng css ngay trên thẻ</h2>
Để nhúng css ngay trên thẻ nào đó ta sử dụng thuộc tính style có giá trị là các cặp key:value trong css được phân tách nhau bằng dấu ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css là gì và cách nhúng Css vào Html</title>
<style>
h2 {
color: red;
}
</style>
</head>
<body>
<h2>Sử dụng thẻ style trong html</h2>
</body>
</html>
Trong ví dụ trên để css cho thẻ h2 ta thêm thẻ style nằm trong thẻ head . Sau đó chỉ cần viết css vào phía trong thẻ style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css là gì và cách nhúng Css vào Html</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<h2>Sử dụng file css phía ngoài và nhúng vào html thông qua thẻ link</h2>
</body>
</html>
h2 {
color: blue;
}
Trong ví dụ trên ta có 2 file nằm cùng cấp với nhau. File style.css được nhúng vào file index.html thông qua thẻ link, thẻ link có 2 thuộc tính quan trọng là href (đường dẫn đến file css) và rel bằng "stylesheet". Trong file css ta có thể style cho bất kì thẻ nào nằm trong file html một cách dễ dàng
Như vậy, để cho mã nguồn sạch đẹp và dễ quản lý ta nên dùng cách cuối cùng này để nhúng css vào html.
Bây giờ chúng ta sẽ xem khi cùng style cho 1 thẻ với cùng 1 thuộc tính theo 3 cách trên thì mức độ ưu tiên như thế nào
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css là gì và cách nhúng Css vào Html</title>
<link rel="stylesheet" href="./style.css" />
<style>
h2 {
color: green;
}
</style>
</head>
<body>
<h2 style="color: red;">Sử dụng file css phía ngoài và nhúng vào html thông qua thẻ link</h2>
</body>
</html>
h2 {
color: blue;
}
Lúc này, kết quả màu chữ sẽ là màu đỏ (red), bởi vì mức độ ưu tiên css trực tiếp trên thẻ là cao nhất, nó sẽ đè 2 css còn lại. Vậy khi bỏ css trên thẻ để chỉ còn lại css trong thẻ style và css từ file bên ngoài thì màu chữ bây giờ sẽ có màu xanh lá (green) vì mức độ ưu tiên css trong thẻ style sẽ lớn hơn css từ file bên ngoài.
Như vậy, mức độ ưu tiên css sẽ theo thứ tự sau: css trực tiếp trên thẻ > css trong thẻ style > css từ file bên ngoài
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css là gì và cách nhúng Css vào Html</title>
<style>
.company-2 {
color: gray;
}
.company-1 {
color: yellow;
}
</style>
</head>
<body>
<h3 class="company-1 company-2">Công ty Bqsoft</h3>
</body>
</html>
Trong ví dụ trên, thẻ h3 sử dụng 2 class company-1 và company-2 để set màu chữ. Kết quả màu chữ sẽ có màu vàng (yellow) vì cùng style với 2 class khác nhau thì class nào khai báo sau thì sẽ được áp dụng. Ta thấy class company-1 được viết sau class company-2 nên sẽ được active. Với id khác nhau thì cũng áp dụng tương tự class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css là gì và cách nhúng Css vào Html</title>
<style>
#company {
color: gray;
}
.company-1 {
color: yellow;
}
</style>
</head>
<body>
<h3 class="company-1" id="company">Công ty Bqsoft</h3>
</body>
</html>
Thẻ h3 sử dụng 1 class và 1 id, màu chữ sẽ là màu xám (gray) vì mức độ ưu tiên của id cao hơn class
Quy tắc !important trong css dùng để tăng thêm phần quan trọng cho thuộc tính css hơn mức bình thường. Khi sử dụng !important nó sẽ ghi đề tất cả thuộc tính được set cho thẻ phía trước đó
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css là gì và cách nhúng Css vào Html</title>
<style>
#company {
color: gray;
}
.company-1 {
color: yellow;
}
h3 {
color: orange !important;
}
</style>
</head>
<body>
<h3 class="company-1" id="company">Công ty Bqsoft</h3>
</body>
</html>
Trong ví dụ trên, mặc dù ta sử dụng cả id và class để style cho thẻ h3 nhưng kết quả màu chữ sẽ là màu cam (orange) bởi vì thẻ h3 đã thêm css có !important nên nó sẽ đè 2 css còn lại.
Như vậy, chúng ta đã nắm được cơ bản cách để css cho 1 thẻ nào đó, cách nhúng css vào trong html và mức độ ưu tiên của các cách nhúng css. Vẫn còn nhiều kiến thức hơn trong phần này các bạn có thể tìm hiểu thêm hoặc tham gia các khoá học dưới đây để nắm vững toàn bộ những kiến thức nâng cao hơn.
