Bài giảng HTML-DHTML-Javascript - Bài 05: Cascading Style Sheet - Lê Quang Lợi

Lê Quang Lợi 
Bài 05: Cascading Style Sheet 
Nội dung 
» Giới thiệu 
» Cú pháp 
» Xây dựng CSS 
» Áp dụng CSS 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
5.1.1 Cơ bản về cú pháp CSS 
» CSS(Cascading Style Sheet): bảng định kiểu cho thẻ HTML 
» Quy định/cài đặt các thuộc tính thẻ HTML 
» Có thể sử dụng lại CSS cho nhiều thuộc tính 
» Thống nhất trong thiết kế website: tạo template rất tốt 
» Hệ thống website thống nhất và nhẹ nhàng 
» CSS cho phép cài đặt các thuộc tính ẩn của thẻ HTML 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
5.1.1 Cơ bản về cú pháp CSS 
» Cấu trúc một CSS 
» Tên: thể hiện phần được sử dụng trong thẻ HTML 
» Nội dung: nằm trong cặp “{“ và “}” cài đặc các thuộc tính 
» Cài đặt giá trị cho mộ thuộc tính: tên thuộc tính: giá trị; 
Ví dụ: color:red; font-size:13pt; 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
tênCSS { 
 Thuộc tính:giá trị; 
 thuộc tính:giá trị; 
 . 
 } 
 H1{ 
 font-color:red; 
 font-szie;13pt; 
} 
5.2 Xây dựng CSS 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
» Tên CSS trùng thẻ HTML: Áp dụng CSS cho thẻ HTML 
» Tên chỉ có *: Toàn bộ thẻ HTML 
» Ten01 Ten02{ /* Nội dung*/}: cài đặt CSS Ten02 trong Ten01 
» Ten01,Ten02{/*Nội dung*/}: Cả hai CSScó cùng nội dung 
» Ten:TeSuKien{/* nội dung CSS*/}: CSS cho sự kiện của thẻ 
Chú ý: nội dung chứa các thuộc tính được cài đặt 
 => cặp /* nội dung chú thích*/: thể hiện dòng chú thích 
5.1.2 Nhúng CSS vào trong HTML 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
» Thuộc tính style: Tạo CSS ngay trên thẻ: 
Ví dụ: Chào các bạn 
» Thẻ Style: cho phép tạo các CSS trong trang HTML 
» Thẻ link: Cho phép đính file .CSS vào trong trang HTML 
 h6{ color:red;} 
 Chào các bạn 
 Chào các bạn 
5.2 Xây dựng CSS 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
» Tên của CSS: “Tiền chỉ thị + Nhãn áp dụng” 
» Tên trùng với thẻ: Nội dung CSS áp dụng cho thẻ 
 h2{ color:red;} => chỉ cần Áp dụng CSS 
» Tên áp dụng cho các thuộc tính ID: Tiền chỉ thị là dấu”#” 
 #myCSS{Color:blue;}=> Áp dụng CSS 
» Tên áp dụng cho các thuộc tính Class: tiền chỉ thị là dấu “.” 
.myCSS{Color:blue;}=> Áp dụng CSS 
» Có thể áp dụng lại CSS nhiều lần 
5.2 Xây dựng CSS 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
- Các thuộc tính cơ bản của thẻ 
Thuộc tính Giải thích 
witdh Rộng của đối tượng thẻ Kích thước đối tượng 
height Cao đối tượng thẻ 
Font-family Font chữ 
Margin So sánh ngoài So sánh đối tượng khác 
padding So sánh trong 
float Chiều hiển thị Left/right 
clar Xóa các thẻ định vị 
Background-image ảnh nền cho thẻ 
border đường viền của thẻ .. 
5.2 Xây dựng CSS 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
- Thuộc tính Padding và margin 
- Đường viền 
- Kiểu đường: Soile, Dash, inset  
- Độ dày: boder 
- Màu sắc: Color 
- Khoảng cách nội dung tới đường 
viền 
- Top, left, Right, bottom 
- Padding 
- Khoảng cách giữa hai thẻ 
- Top, left, right, bottom 
- Margin 
5.3 Xây dựng CSS 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
B01) Tạo file .CSS để chứa các kiểu CSS 
Tạo thư mục chứa các file CSS 
B02) Xây dựng nội dung CSS trong file CSS 
• Xây dựng tên: trùng tên thẻ, cho thuộc tính ID, Class 
• Xây dựng nội dung cho CSS: thuộc tính:giá trị; 
B03) Nhúng file CSS vào trang HTML: thẻ link 
B04) Sử dụng ID, Class để áp dụng các CSS được tạo ra 
Class=“tên”, ID=“tên” 
5.4 Kiểm tra 45’ 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
Đề 01 Đề 02 
Dùng HTML thiết kế cho giao diện theo hình vẽ trên