1. Các khái niệm
Cấu trúc của một CSS bao gồm bộ chọn (selector) và các khối khai báo (declaration)
Bộ chọn điểm trỏ đến phần tử HTML bạn muốn tạo kiểu.
Các khối khai báo chứa một hoặc nhiều khối khai báo cách nhau bởi dấu chấm phẩy.
Mỗi khai báo bao gồm một tên thuộc tính CSS (property) và một giá trị (value), được phân cách bởi dấu hai chấm.
Một khai báo CSS luôn luôn kết thúc với một dấu chấm phẩy, và các khối khai báo được bao quanh bởi các dấu ngoặc nhọn.
Trong ví dụ sau tất cả các phần tử <p> sẽ được canh giữa, với màu chữ đỏ:
2. Cú pháp một đoạn CSS
Bộ chọn {
tên thuộc tính CSS: giá trị;
tên thuộc tính CSS: giá trị;
.....
}
Các lưu ý:
+ Mỗi tên thuộc tính CSS sẽ luôn có một giá trị riêng, giá trị có thể là dạng số, hoặc các tên giá trị trong danh sách có sẵn của CSS.
+ Một bộ chọn có thể sử dụng không giới hạn tên thuộc tính CSS.
+ Vấn đề xuống dòng và khoảng cách trong CSS là không quan trọng, đoạn code ở ví dụ phía trên có thể viết lại như sau
p {color: red; text-align: center;}
+ Không thêm khoảng trống giữa giá trị và đơn vị chẳng hạn như font-size: 12 px; đây là cách viết sai. Cách viết chính xác là: font-size: 12px;
3. Cách thêm CSS trong HTML
Mục này là mục quan trọng nên tôi đã viết rất kỹ trong bài viết [Học HTML] Phần lý thuyết về cách thêm CSS trong HTML
Các bạn hãy xem lại thật kỹ bài viết trên.
4. Các bài tập
4.1 Bài tập 1
Thêm theo kiểu external CSS với URL là “mystyle.css”.
<!DOCTYPE html> <html> <head> </head> <body> <h1>Đây là tiêu đề</h1> <p>Đây là một đoạn văn bản.</p> <p>Đây là một đoạn văn bản khác.</p> </body> </html>
Câu trả lời của bài tập 1
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>Đây là tiêu đề</h1> <p>Đây là một đoạn văn bản.</p> <p>Đây là một đoạn văn bản khác.</p> </body> </html>
4.2 Bài tập 2
Thiết lập màu nền là màu đỏ cho đoạn code dưới, sử dụng internal CSS.
<!DOCTYPE html> <html> <head> </head> <body> <h1>Đây là tiêu đề</h1> <p>Đây là một đoạn văn bản.</p> <p>Đây là một đoạn văn bản khác.</p> </body> </html>
Câu trả lời của bài tập 2
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: red;
}
</style>
</head>
<body>
<h1>Đây là tiêu đề</h1>
<p>Đây là một đoạn văn bản.</p>
<p>Đây là một đoạn văn bản khác.</p>
</body>
</html>
4.3 Bài tập 3
Thiết lập màu nền là màu đỏ cho đoạn code dưới, sử dụng inline CSS.
<!DOCTYPE html> <html> <head> </head> <body> <h1>Đây là tiêu đề</h1> <p>Đây là một đoạn văn bản.</p> <p>Đây là một đoạn văn bản khác.</p> </body> </html>
Câu trả lời của bài tập 3
<!DOCTYPE html> <html> <head> </head> <body style="background-color: red"> <h1>Đây là tiêu đề</h1> <p>Đây là một đoạn văn bản.</p> <p>Đây là một đoạn văn bản khác.</p> </body> </html>
5. Lời cuối bài
Đến đây là kết thúc bài viết về các khái niệm và cách thêm CSS trong HTML. Ở bài viết sau tôi sẽ viết về màu sắc và cách viết chú thích trong CSS
The post [CSS bài 3] Các khái niệm và cách thêm CSS trong HTML appeared first on Học online.
from WordPress http://ift.tt/2wmeNfM
via IFTTT
Không có nhận xét nào:
Đăng nhận xét