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.
Trang 1Bài 13: Định kiểu HTML với CSS
BỞI TRỊNH HỒNG
Trang 3• Đị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 tnh style trong các phần tử HTML
• Internal(bên trong) – sử dụng một phần tử <style> 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
Trang 4• Đị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<h1>phần tử này sẽ chuyển chữ
sang màu xanh:
• Ví dụ 1
Trang 5• <h1 style=“color:blue;”>Đây là một têu đề màu xanh</h1>
Trang 6• Đị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ẻ <head> của trang HTML với phần tử <style>:
Trang 8• Đị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ẻ <head> của trang HTML:
Trang 10• Đị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
Trang 13• 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:
Trang 14• Ví dụ 5
• p {
border: 1px solid black; }
Trang 15• 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:
Trang 17• Các thuộc tính margin của CSS xác định không gian bên ngoài đường biên:
Trang 18• 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ử:
• <p id=“p01”>I am diferent</p>
Trang 19• 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;
}
Trang 20• 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ử:
• <p class=“error”>I am diferent</p>
Trang 21• 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;
}
Trang 22• 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ử <style> của HTML để định nghĩa một CSS bên trong
• Sử dụng phần tử <link> của HTML để tham chiếu đến một tệp CSS từ bên
ngoài
• Sử dụng phần tử <head> của HTML để chứa các phần tử <style> và <link>
• 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