Cơ sở dữ liệu - Bài 13: Định kiểu HTML với CSS

Nội dung text: Cơ sở dữ liệu - Bài 13: Định kiểu HTML với CSS

1. Bài 13: Định kiểu HTML với CSS BỞI TRỊNH HỒNG
2. • Định kiểu HTML với CSS • CSS là tên viết tắt của Cascading Style Sheets • Định kiểu có thể được thêm vào các phần tử HTML theo 3 cách: • Inline( trong một dòng) – sử dụng một thuộc tính style trong các phần tử HTML • Internal(bên trong) – sử dụng một phần tử trong phần head của trang HTML • External(bên ngoài) – sử dụng một hoặc nhiều tệp CSS bên ngoài • Cách phổ biến nhất để thêm một định kiểu là giữ các định kiểu nằm ở các tệp CSS tách riêng rẽ. Nhưng trong bài viết này chúng tôi sử dụng định kiểu bên trong (Internal), bởi vì nó có thể dễ dàng demo và dễ dàng hơn để bạn có thể tự mình thử làm.
3. • Định kiểu trong một dòng • Định kiểu trong một dòng được dùng để áp dụng định kiểu duy nhất với một phần HTML. • Định kiểu trong một dòng sử dụng thuộc tính style . • Dưới đây là ví dụ thay đổi màu sắc văn bản của phần tử này sẽ chuyển chữ sang màu xanh: • Ví dụ 1
4. • Đây là một tiêu đề màu xanh
5. • Định kiểu bên trong • Định kiểu bên trong sử dụng để xác định kiểu cho một trang của HTML. • Định kiểu bên trong được định nghĩa trong thẻ của trang HTML với phần tử :
6. • Ví dụ 2 • body {background-color:lightgrey;} h1 {color:blue;} p {color:green;} Đây là một tiêu đề Đây là một đoạn văn.
7. • Định kiểu bên ngoài • Định kiểu bên ngoài được sử dụng để định kiểu cho nhiều trang. • Với định kiểu bên ngoài, bạn có thể thay đổi diện mạo của toàn bộ trang web bằng cách thay đổi trong một tệp CSS! • Để sử dụng một định kiểu bên ngoài, thêm một liên kết đến nó đặt trong thẻ của trang HTML:
8. • Ví dụ 3 • Đây là một tiêu đề Đây là một đoạn văn.
9. • Định kiểu bên ngoài có thể được viết bằng bất kì trình soạn thảo văn bản nào. Tệp này không nên chứa thẻ HTML. Tệp định kiểu này phải được lưu với đuôi là .css • Dưới đây nội dung được lưu trong “styles.css” : • body { background-color: lightgrey; } h1 { color: blue; } p { color:green; }
10. • CSS Fonts • Thuộc tính color của CSS xác định màu sắc của văn bản được sử dụng cho các phần tử HTML. • Thuộc tính font-family của CSS xác định các font chữ được sử dụng cho các phần tử HTML. • Thuộc tính font-size của CSS xác định kích thước chữ được sử dụng cho các phần tử HTML.
11. • Ví dụ 4 • h1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; } Đây là một tiêu đề Đây là một đoạn văn.
12. • Mô hình khung với CSS • Mỗi phần tử HTML có một khung bao quanh nó thậm chí bạn không thể nhìn thấy. • Thuộc tính border của CSS được định nghĩa đường biên xung quanh phần tử HTML:
13. • Ví dụ 5 • p { border: 1px solid black; }
14. • Thuộc tính padding của CSS xác định một phần đệm (khoảng trống) phía trong đường biên:
15. • Ví dụ 6 • p { border: 1px solid black; padding: 10px; }
16. • Các thuộc tính margin của CSS xác định không gian bên ngoài đường biên: • Ví dụ 7 • p { border: 1px solid black; padding: 10px; margin: 30px; }
17. • Thuộc tính id • Tất cả các ví dụ trên đều sử dụng CSS để định kiểu cho toàn bộ các phần tử HTML trên trang, ví dụ ở trên định dạng này dùng cho thẻ p. • Để định kiểu cho một phần tử đặc biệt, trước hết thêm một thuộc tính id cho phần tử: • I am different
18. • rồi định nghĩa một định dạng khác cho phần tử có id tương ứng ở trên: • Ví dụ 8 • p#p01 { color: blue; }
19. • Thuộc tính class • Để định kiểu cho một dạng đặc biệt (class) của các phần tử, thêm một thuộc tính class cho phần tử: • I am different
20. • Bây giờ bạn có thể định nghĩa một định dạng khác cho các phần tử sử dụng class này: • Ví dụ 9 • p.error { color: red; }
21. • Tóm tắt bài học • Sử dụng thuộc tính style của HTML để định dạng kiểu trên một dòng • Sử dụng phần tử của HTML để định nghĩa một CSS bên trong • Sử dụng phần tử của HTML để tham chiếu đến một tệp CSS từ bên ngoài • Sử dụng phần tử của HTML để chứa các phần tử và • Sử dụng thuộc tính color của CSS để xác định màu săc của văn bản • Sử dụng thuộc tính font-family của CSS để xác định font chữ của văn bản • Sử dụng thuộc tính font-size của CSS để xác định kích thước chữ • Sử dụng thuộc tính border của CSS hiển thị đường biên xung quanh phần tử • Sử dụng thuộc tính padding của CSS định nghĩa vùng đệm phía trong đường biên • Sử dụng thuộc tính margin của CSS định nghĩa không gian bên ngoài đường biên