BÀI TẬP THỰC HÀNH 03 CSS Bài 1: Các cách nhúng CSS vào tập tin HTML (sử dụng tập tin bai1.htm cho sẵn) Dùng thẻ liên kết tập tin CSS bên vào trang HTML: Tạo tập tin dinhdang.css, nhập vào nội dung sau: body{ background-color: lavender; font-family: Verdana; font-size: 10pt; } Mở tập tin bai1.htm chế độ soạn thảo, liên kết đến tập tin dinhdang.css phần sau: Chạy tập tin bai1.htm trình duyệt để kiểm tra kết Dùng thẻ nhúng trực tiếp CSS vào trang HTML: Mở tập tin bai1.htm chế độ soạn thảo, bổ sung vào phần nội dung sau: p{ text-indent: 50; color: darkblue; } p:first-letter { font-size: xx-large; font-weight: bold; color: blue; } Chạy tập tin bai1.htm trình duyệt để kiểm tra kết Dùng thuộc tính style cho thẻ HTML riêng lẻ: Mở tập tin bai1.htm chế độ soạn thảo, bổ sung vào thẻ nội dung sau: Thiết kế web - yếu tố cần thiết cho người Chạy tập tin bai1.htm trình duyệt để kiểm tra kết Bài 2: Định dạng table Tạo tập tin bai2.htm, kẻ bảng định dạng mẫu: Hướng dẫn: CSS table{ border: 5px groove #6633FF; padding: 1px; } th, td{ border: thin solid #FFFFFF; padding: 5px; } /* định dạng lớp head cho dòng tiêu đề */ tr.head{ color: #FFFFFF; font-weight:bold; text-align:center; background-color: #6633FF; } /* định dạng lớp odd cho dòng lẻ */ tr.odd{ background-color:#FFEEFF; } /* định dạng lớp even cho dòng chẵn */ tr.even{ background-color:#CCCCFF; } HTML STT Mã sinh viên Họ tên Lớp 1 CST101207 Nguyễn Thị Phương Thảo CD35ST 2 CST107327 Trương Quốc Bảo CD35ST Bài 3: Định dạng liên kết Tạo liên kết (navigation bar) dạng cột mẫu: Tạo liên kết (navigation bar) nằm ngang mẫu: Lưu ý: SV định dạng trạng thái liên kết tùy ý (màu sắc, font chữ, trang trí, …) Bài 4: Tạo tập tin bai4.htm có dạng mẫu: Ảnh sử dụng tập tin bg.jpg cho sẵn (hoặc ảnh SV tự chọn), ảnh cố định canh cửa sổ trình duyệt Phần khung chứa text có màu sáng với độ suốt vừa phải, đường viền mảnh bo tròn góc (SV tự đặt thông số cho phù hợp với ảnh chọn) Bài 5: (sử dụng tập tin bai5.htm cho sẵn) Bố trí định dạng ảnh để trang web có dạng mẫu: Định dạng phần body: font chữ Verdana, cỡ chữ 10pt, văn canh Định dạng ảnh chèn: kích thước bề ngang 190px Định dạng khung bao ảnh: khung có độ rộng 200px, viền nét mảnh màu silver, lề 5px, padding 5px Văn thích ảnh: font Times New Roman, cỡ chữ x-small, in nghiêng, canh Chèn ảnh h1.jpg đặt phía phải, ảnh h2.jpg đặt phía trái TỰ THỰC HÀNH Thiết kế trang web mẫu: Phần chèn ảnh logo.png cho sẵn thư mục tuTH Phần menu ngang đặt liên kết Phần thiết kế form Phần sản phẩm sử dụng ảnh cho sẵn thư mục tuTH Yêu cầu định dạng CSS: Trang web: Độ rộng 800px, canh lề auto, font chữ Verdana, màu chữ darkblue, đường viền mảnh – nét liền – màu silver, có bóng mờ Phần menu: canh giữa, liên kết khơng gạch chân, đường viền mảnh - nét liền màu gray, bo tròn góc, có bóng mờ Khi lướt chuột lên liên kết: đổi màu thành lightgray, màu chữ orange Phần sản phẩm: độ rộng 195px, font chữ đậm, canh giữa, đường viền mảnh nét liền - màu gray, bo tròn góc, có bóng mờ ... tiêu đề */ tr.head{ color: #FFFFFF; font-weight:bold; text-align:center; background-color: #6633FF; } /* định dạng lớp odd cho dòng lẻ */ tr.odd{ background-color:#FFEEFF; } /* định dạng lớp even... định dạng trạng thái liên kết tùy ý (màu sắc, font chữ, trang trí, …) Bài 4: Tạo tập tin bai4.htm có dạng mẫu: Ảnh sử dụng tập tin bg.jpg cho sẵn (hoặc ảnh SV tự chọn), ảnh cố định canh cửa sổ.. .Bài 2: Định dạng table Tạo tập tin bai2.htm, kẻ bảng định dạng mẫu: Hướng dẫn: CSS table{ border: 5px groove