Bài giảng CSS - Bài 13: Định kiểu HTML với CSS

Bài giảng cung cấp cho người học các kiến thức: Định kiểu HTML với CSS, Cascading Style Sheets, định kiểu trong một dòng, định kiểu bên trong, định kiểu bên ngoài, mô hình khung với CSS,... Hi vọng đây sẽ là một tài liệu hữu ích dành cho các bạn sinh viên đang theo học môn dùng làm tài liệu học tập và nghiên cứu. Mời các bạn cùng tham khảo chi tiết nội dung tài liệu.
Nội dung trích xuất từ tài liệu:
Bài giảng CSS - Bài 13: Định kiểu HTML với CSS Bài 13: Định kiểu HTML với CSS BỞI TRỊNH HỒNG • Đị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  • Đị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ủaphần tử này sẽ chuyển chữ sang màu xanh: • Đây là một tiêu đề màu xanh • Đị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ử : • Ví dụ 2 • body {background-color:lightgrey;} h1 {color:blue;} p {color:green;} • Đị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: • Ví dụ 3 • < body>Đây là một tiêu đề Đây là một đoạn văn. • Đị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 { • 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 • 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. • 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: • Ví dụ 5 • p{ border: 1px solid black; } • 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: • Ví dụ 6 • p{ border: 1px solid black; padding: 10px; } • 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; } • 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 • 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; } • 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