Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 34 trang
THÔNG TIN TÀI LIỆU
Cấu trúc
CHƯƠNG 3
Nội dung
Lợi ích khi dùng CSS
Giới thiệu về CSS
Cách dùng
Định nghĩa Style
Slide 7
Định nghĩa Style (tt)
Ghi chú trong style
Phân loại CSS
Inline style Sheet
Embedding Style Sheet
Ví dụ
External Style Sheet
External Style Sheet (tt)
Slide 16
Ví dụ (tt)
So sánh, đánh giá
Độ ưu tiên
Selector trong CSS và phạm vi ảnh hưởng
Selector trong CSS và phạm vi ảnh hưởng (tt)
Slide 22
Ví dụ về “element”
Ví dụ “ID rules”
Class rules
Ví dụ element.class
Tạo css trong Dreamweaver
Tạo css trong Dreamweaver (tt)
Slide 29
Slide 30
Bài 1
Bài 2
Bài 2 (tt)
Slide 34
Nội dung
1 CHƯƠNG 3 CSS (Casscading Style Sheets) 2 Nội dung Giới thiệu CSS Định nghĩa Style Sử dụng và Phân loại CSS Selector trong CSS và phạm vi ảnh hưởng 3 Lợi ích khi dùng CSS Thời khóa biểu quả khoa HTTT 4 Giới thiệu về CSS CSS = Casscading Style Sheets Dùng để mô tả cách hiển thị các thành phần trên trang WEB Sử dụng tương tự như dạng TEMPLATE Có thể sử dụng lại cho các trang web khác Có thể thay đổi thuộc tính từng trang hoặc cả site nhanh chóng (cascading) 5 Cách dùng <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> H2{ FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; font-color: white } </style> </head> <body> <h2> ĐHCNTT </h2> </body> 6 Định nghĩa Style <tag style= “property1:value1; property2:value2; ……… propertyN:valueN;”>…</tag> Dạng 1: Vídụ: <h1 style=“color : blue; font-family : Arial;”> ĐHCNTT </h1> 7 Định nghĩa Style SelectorName { property1:value1; property2:value2; ……… propertyN:valueN; } <tag class = “SelectorName”> ……… </tag> Dạng 2: 8 Định nghĩa Style (tt) <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Cach dung CSS</title> <style type="text/css"> .TieuDe1 { color: red; font-family: Verdana, sans- serif; } <h1 class=“TieuDe1”> ĐHCNTT </h1> </style> </head> <body> <h2 class="TieuDe1"> ĐHCNTT </h2> </body> Ví dụ 2: Ví dụ 1: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Cach dung CSS</title> <style type="text/css"> H2{ FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; font-color: white } </style> </head> <body> <h2> ĐHCNTT </h2> </body> 9 Ghi chú trong style Giống Ghi chú trong C++ Sử dụng /*Ghichú*/ Ví dụ: SelectorName { property1:value1;/*Ghichu1*/ property2:value2;/*Ghichu2*/ ……… propertyN:valueN; } 10 Phân loại CSS Gồm 3 loại CSS • 1. Inline Style Sheet • 2. Embedding Style Sheet • 3. External Style Sheet [...]... Ví dụ Ths Mai Xuân Hùng 14 Submit button Nút phát lệnh và gởi dữ liệu của form đến trang xử lý Mỗi form chỉ có một nút submit và nút này được viền đậm Cú pháp: Ví dụ: Ths... value="WVT">Windows Vista Office 2007 Ths Mai Xuân Hùng 21 Field Set Dùng để tạo ra Group box, nhóm các thành phần nhập liệu trong form Cú pháp GroupBox’s Name … Ví dụ Subject . 1 CHƯƠNG 3 CSS (Casscading Style Sheets) 2 Nội dung Giới thiệu CSS Định nghĩa Style Sử dụng và Phân loại CSS Selector trong CSS và phạm vi ảnh hưởng 3 Lợi ích khi dùng CSS Thời. style theo từng tag + Dể quản lý style theo từng tài liệu web + Không cần thêm các trang thông tin khác cho style + Thiết lập style cho nhiều tài liệu + Thông tin các style được trình duyệt cache. lại Khuyết điểm Cần khai báo style trong từng tag của tài liệu Cần khai báo lại style lại cho các trang khác + Tốn thời gian download file .css -> làm chậm quá trình biên dịch web ở trình