1. Tag <style>
Nếu một HTML-element có quá nhiều style, bạn có thể đưa chúng ra một element đặc biệt — tag style. Thường thì nó được đặt trong tag <head> và nó trông như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ví dụ về CSS</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>Đây là ví dụ sử dụng style trong tag <style>.</p>
</body>
</html>
Bây giờ bạn không cần viết một dòng style dài cho tag
<body> trong thuộc tính style, mà có thể
chuyển chúng vào tag style. Điều này cực kỳ tiện lợi.
Điều tương tự cũng áp dụng cho tag <p> (đoạn văn). Hơn nữa,
style được định nghĩa trong tag <style> trong
<head> sẽ được áp dụng cho tất cả các đoạn văn trong
tài liệu, ngay cả khi có hàng nghìn đoạn văn. Điều đó bởi vì style trong tag
<style> được mô tả bên trong selector.
5.2 Selectors
Selectors là cách chọn các HTML-element mà CSS-properties sẽ được áp dụng. Có các loại selector khác nhau:
Selector tag
Áp dụng style cho tất cả các element
thuộc một loại nhất định. Bạn chỉ cần chỉ định tên tag và các dấu ngoặc nhọn
sau đó.
tagname {
// các style
}
tagname có thể là bất kỳ cái gì: body, image, a, p, … bất kỳ cái gì
Selector class
Cũng có thể gắn các CSS-properties không cho một tag nào đó, mà chỉ cần đặt nhóm
CSS-properties này vào một cái tên. Một nhóm như vậy trong CSS được gọi là
class. Style này được áp dụng cho tất cả
các element có class nhất định. Các class được định nghĩa bởi thuộc tính
class trong HTML.
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p.important {
font-weight: bold;
}
</style>
</head>
<body>
<p class="important">Đây là văn bản quan trọng.</p>
<p>Đây là văn bản thông thường.</p>
</body>
</html>
Trong ví dụ trên, chỉ có văn bản đoạn thứ nhất được bôi đậm, vì nó có style/class “important”. Còn đoạn thứ hai không có style này.
Khi định nghĩa các style trong tag <style>, bạn có thể đặt chúng theo 3 cách:
- tagname { …}
- tagname.classname { …}
- .classname { …}
Chúng ta sẽ tìm hiểu chi tiết hơn về selector khi học CSS. Bây giờ mình chỉ giới thiệu qua để bạn làm quen, vì trong các ví dụ HTML, CSS sẽ xuất hiện thường xuyên. Mình sẽ thường xuyên sử dụng tag style và dùng selector để gán style cho một HTML-element nhất định.
GO TO FULL VERSION