Lập trình web tĩnh Html dành cho người mới bắt đầu học lập trình web Mình khuyên các bạn nên học đầy đủ từ bài số 1 trở đi Và kết hợp với video khi sử dụng slide nhưng do video mình chưa có thời gia up lên khi nào có mình sẽ cho link lên mục này
Chương 10 Các style sheet Mục tiêu học: Kết thúc chương này, bạn có thể: Dùng bảng kiểu Tạo file CSS Các bước chương trình bày chi tiết, đầy đủ rõ ràng Bạn hiểu rõ nội dung lý thuyết cách sử dụng công cụ Hãy thực theo bước cách cẩn thận Phần I – Thực 1h30’ đầu: 12.1 Viết style sheet Style sheet tạo nên từ qui tắc kiểu báo cho trình duyệt biết cách trình bày tài liệu Có nhiều cách khác để liên kết qui tắc kiểu đến tài liệu HTML bạn, phương thức đơn giản cho việc bắt đầu sử dụng phẩn tử STYLE HTML Phần tử đặt phần HEAD tài liệu, chứa qui tắc kiểu cho trang web Ví dụ 1: Đoạn mã định nghĩa thuộc tính màu ‘color’ font-size cho phần tử H1 H2: CSS Example H1 { font-size: x-large; color: red } H2 { font-size: large; color: blue } Hi Hello Style sheet báo cho trình duyệt biết để hiển thị phần tiêu đề H1 có cỡ chữ extra-large, font màu đỏ, hiển thị phần tiêu đề H2 có cỡ chữ large, font màu xanh Hình 12.1 hiển thị kết đoạn mã { PAGE } Hình 12.1: Kết Ví dụ Ví dụ 2: Cách dùng selector lớp Title H1.pastoral { color: #00FF00 } Way too green Kết đoạn code hiển thị hình 12.2: Hình 12.2: Kết Ví dụ { PAGE } Ví dụ 3: Dùng style sheet để định dạng danh sách UL { list-style: outside } UL.compact { list-style: inside } first list item comes first second list item comes second first list item comes first second list item comes second Kết đoạn mã hiển thị hình dưới: Hình 12.3: Kết ví dụ Ví dụ 4: Phần tử giả ‘first-letter: Title P { font-size: 12pt; line-height: 12pt } P:first-letter { font-size: 200%; float: left } SPAN { text-transform: uppercase } { PAGE } The first few words of an article in The Economist. Kết đoạn mã hiển thị hình bên dưới: Hình 12.4: Kết Ví dụ Ví dụ 5: Style sheet nội tuyến This paragraph is styled in blue with the Arial Black font, if available. This paragraph is styled in red with the Comic Sans MS font, if available. Kết đoạn mã hiển thị hình bên dưới: { PAGE } Hình 12.5: Kết Ví dụ Phần II – Thực 1h30’ tiếp theo: Tạo trang web động dùng style sheet hiển thị hình bên dưới: Gợi ý: Dùng chọn ngữ cảnh { PAGE } Tự thực hành Trình bày ứng dụng DHTML cách dùng hai tập hợp kiểu, kích thước font canh lề trái kiểu đặt cho phần tử H2 hiển thị hình bên dưới: {EMBED PBrush} Trình bày ứng dụng DHTML cho phần tử có màu xanh tươi hiển thị hình dưới: {EMBED PBrush} { PAGE }