Khái niệm chung
CSS viết tắt của từ Cascading Style Sheets, nhiệm vụ của nó là tách riêng phần định dạng (style) ra khỏi nội dung trang HTML.
Khi sử dụng css chúng ta sẽ dễ dàng quản lý nội dung trang HTML, dễ điều khiển phần định dạng, và đặc biệt là sẽ tốn ít thời gian khi code hay chỉnh sửa.
Các hình thức kết hợp CSS vào trang HTML
- In-line style
- Sử dụng thuộc tính style
- Ví dụ:
<!DOCTYPE html> <html> <body> <h1 style="color:blue;margin-left:30px;"> This is a heading. </h1> <p>This is a paragraph.</p> </body> </html>
- Internal style
- Dùng cặp thẻ <style></style> trong thẻ <head>
- Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- External style
- Tạo tập tin riêng để viết CSS và tập tin này có phần mở rộng là css (ví dụ css).
- Dùng thẻ <link> đặt trong cặp thẻ <head> để liên kết đến tập tin css.
- Ví dụ:
Tập tin style.css được khai báo như sau:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Tập tin style.html được khai báo như sau:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
Cú pháp trình bày CSS
Về cơ bản cú pháp của CSS bao gồm 2 phần chính: bộ chọn (selector) và khai báo (declaration). Bộ chọn dùng để xác định đối tượng nào sẽ chịu ảnh hưởng và khai báo sẽ quyết định đối tượng đó bị ảnh hưởng như thế nào. Ở hình trên, thẻ h1 là bộ chọn và phần {color: blue; font-size:12px;} là khai báo.
Trong khai báo cũng có 2 phần là: thuộc tính (property) và giá trị (value). Thuộc tính quyết định cái gì sẽ chịu ảnh hưởng và giá trị quyết định nó sẽ bị ảnh hưởng như thế nào. Ở hình trên color và font-size là các thuộc tính và chúng quyết định sẽ tác động đến màu chữ và kích cỡ chữ của h3; blue và 12px là các giá trị và chúng quyết định màu chữ sẽ là màu xanh và kích cỡ chữ là 12 pixels.
Bộ chọn (selectors)
Được dùng để chọn các thành phần muốn định dạng css. Bộ chọn có thể phân loại như sau:
- Bộ chọn các phần tử (the element selector): dùng để chọn các phần tử dựa vào tên của chúng. Ví dụ chọn tất cả phần tử p:
p {
text-align: center;
color: red;
}
- Bộ chọn id: dùng để chọn các phần tử theo giá trị của thuộc tính id cùa các phần tử đó. id của một phần tử là duy nhất trong một trang, vì vậy bộ chọn id dùng để chọn một phần tử duy nhất. Để chọn một phần tử với một id cụ thể, chúng ta viết dấu # trước giá trị thuộc tính id của phần tử. Ví dụ chọn tất cả các phần tử có id=”para1″
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
- Bộ chọn class: dùng để chọn các phần tử theo giá trị của thuộc tính class cùa các phần tử đó. Để chọn một phần tử với một class cụ thể, chúng ta viết dấu . trước giá trị thuộc tính class của phần tử. Ví dụ chọn tất cả các phần tử có class=”center”
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Chú thích trong CSS (comments)
Trong CSS chúng ta có thể viết các dòng chú thích để diễn giải ý nghĩa cho dòng CSS. Đây là một tính năng hữu ích để giúp chúng ta có thể chỉnh sửa mã CSS sau này hay chia sẻ mã CSS của chúng ta cho người khác.
Chú thích trong CSS bắt đầu bằng dấu /* và kết thúc bằng */
Ví dụ:
p {
color: red;
/* Đây là chú thích một dòng */
text-align: center;
}
/* Đây là
chú thích
nhiều dòng */
Trần Ngọc Minh Notes 
5 Pingback