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