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