Bài giảng "Lập trình web 1 - Chương 5: CSS căn bản" cung cấp cho người đọc các kiến thức: Giới thiệu CSS, cách thức định nghĩa CSS, sử dụng và phân loại CSS, selector trong CSS và phạm vi ảnh hưởng. Mời các bạn cùng tham khảo nội dung chi tiết.
Khoa Công nghệ thông tin Bộ môn Công nghệ phần mềm Nguyễn Huy Khánh nhkhanh@fit.hcmus.edu.vn Hiểu cấu trúc vai trò ý nghĩa CSS trang web Hiểu ưu khuyết điểm loại CSS Biết cách xác định phạm vi ảnh hưởng CSS thẻ HTML 09/10/2010 Lập trình Web Giới thiệu CSS Cách thức định nghĩa CSS Sử dụng Phân loại CSS Selector CSS phạm vi ảnh hưởng 09/10/2010 Lập trình Web CSS = Cascading Style Sheets Dùng để mô tả cách hiển thị thành phần trang WEB Sử dụng tương tự dạng TEMPLATE Có thể sử dụng lại cho trang web khác Có thể thay đổi thuộc tính trang site nhanh chóng (cascading) 09/10/2010 Lập trình Web Giới thiệu CSS Cách thức định nghĩa CSS Sử dụng Phân loại CSS Selector CSS phạm vi ảnh hưởng 09/10/2010 Lập trình Web Kiểu Kiểu … SelectorName { property1:value1; property2:value2; ……… propertyN:valueN;} ……… Ví dụ: Ví dụ: DHKHTN TieuDe1 { color: red; font-family: Verdana, sans-serif; } DHKHTN 09/10/2010 Lập trình Web Giống Ghi C++ Sử dung /*Ghi chú*/ Ví dụ : SelectorName { property1:value1; /*Ghi chu 1*/ property2:value2; /*Ghi chu 2*/ ……… propertyN:valueN;} 09/10/2010 Lập trình Web Giới thiệu CSS Cách thức định nghĩa CSS Sử dụng Phân loại CSS Selector CSS phạm vi ảnh hưởng 09/10/2010 Lập trình Web Gồm loại CSS Inline Style Sheet (Nhúng CSS vào tag HTML) Embedding Style Sheet (Nhúng CSS vào trang web) External Style Sheet (Liên kết CSS với trang web) 09/10/2010 Lập trình Web Định nghĩa style thuộc tính style tag HTML Theo cú pháp kiểu … Không sử dụng lại Ví dụ: This is yellow 09/10/2010 Lập trình Web 10 Trong tập tin MyStyle.CSS h2 { font-weight: bold; font-size: 16pt; color: white; font-style: italic; font-family: Arial; background-color: red; font-color: white; } 09/10/2010 Trong trang Web : demo.htm Cascading Style Sheets This is an H2 Lập trình Web 14 Khai báo Cú pháp Inline Style Sheet Embedding Style Sheet External Style Sheet Kiểu Kiểu KiểuTest
TieuDe1{color: red;}Test
Test
Ưu điểm • Dễ dàng quản lý Style theo tag tài liệu web • Có độ ưu tiên cao • Dễ dàng quản lý Style theo tài liệu web • Khơng cần tải thêm trang thơng tin khác cho style • Có thể thiết lập Style cho nhiều tài liệu web • Thơng tin Style trình duyệt cache lại Khuyết điểm • Cần phải Khai báo lại thông tin style tài liệu Web tài liệu khác cách thủ cơng • Khó cập nhật style • Cần phải khai báo lại thông tin style cho tài liệu khác lần sử dụng • Tốn thời gian download file *.css làm chậm trình biên dịch web trình duyệt lần đầu sử dụng 09/10/2010 Lập trình Web 15 Thứ tự ưu tiên áp dụng định dạng sử dụng loại CSS (độ ưu tiên giảm dần) : Inline Style Sheet Embedding Style Sheet External Style Sheet Browser Default 09/10/2010 Lập trình Web 16 09/10/2010 Lập trình Web 17 Giới thiệu CSS Cách thức định nghĩa CSS Sử dụng Phân loại CSS Selector CSS phạm vi ảnh hưởng 09/10/2010 Lập trình Web 18 Là tên style tương ứng với thành phần áp dụng định dạng Các dạng selectors HTML element selectors Class selectors ID selectors 09/10/2010 Ví dụ: TieuDe1 { color: red; font-family: Verdana, sansserif; } DHKHTN Lập trình Web 19 Loại Mơ tả phạm vi ảnh hưởng Ví dụ element Định dạng áp dụng cho ND tất tag Element tài liệu Web h1 {color: red;} Định dạng áp dụng cho ND tất tab có thuộc tính id tà liệu Web #test {color: green;} Định dạng áp dụng cho ND tất tab có thuộc tính class tà liệu Web note {color: yellow;} Định dạng áp dụng cho ND tag Element có thuộc tính class tương ứng h1.note {text-decoration: underline;} Định dạng áp dụng cho ND nhóm tag tài liệu h1,h2,h3 {background-color: orange;} Định dạng áp dụng cho ND thẻ lồng thẻ cha p strong {color: purple;} #id class element class Grouping Contextual Pseudo Class Pseudo element 09/10/2010 Định dạng áp dụng dựa vào trạng thái Element (Khơng xuất Lập trình Web mã lệnh HTML) /* ND thẻ bị định dạng màu chữ=đỏ */ /* ND tag có thuộc tính id=test bị định dạng màu chữ=xanh */ /* ND tag có thuộc tính class=note bị định dạng màu chữ=vàng*/ /* ND thẻ có thuộc tính class=note bị định dạng gạch chân */ /* ND thẻ bị định dạng màu = màu cam */ /* ND thẻ nằm thẻbị định dạng màu chữ=màu tía */ 20 Có hiệu ứng tất element loại tag Ví dụ : 09/10/2010 Lập trình Web 21 Có hiệu ứng element có id Ví dụ : 09/10/2010 Lập trình Web 22 Có hiệu ứng tất loại tag có giá trị thuộc tính class Ví dụ : 09/10/2010 Lập trình Web 23 Ví dụ : 09/10/2010 Lập trình Web 24 Định dạng áp dụng cho nội dung chuỗi tag theo thứ tự Ví dụ : 09/10/2010 Lập trình Web 25 Định dạng dựa vào trạng thái liên kết, kiện chuột Có thể kết hợp với Selector khác 09/10/2010 Lập trình Web 26 Làm lại tập nhóm phần HTML Căn trình bày lại trang table Lưu ý Sử dụng tối đa CSS để trình bày trang web (khơng sử dụng thuộc tính thẻ HTML CSS thực chức tương tự) Chỉ sử dụng External Style Sheet lưu tập tin default.css 09/10/2010 Lập trình web 27 Wrox, Beginning HTML, XHTML, CSS and JavaScript, 2010 http://www.w3schools.com/css/ 09/10/2010 Lập trình web 28 ... 09/10/2010 Lập trình Web 21 Có hiệu ứng element có id Ví dụ : 09/10/2010 Lập trình Web 22 Có hiệu ứng tất loại tag có giá trị thuộc tính class Ví dụ : 09/10/2010 Lập trình Web 23 Ví dụ : 09/10/2010 Lập. .. Default 09/10/2010 Lập trình Web 16 09/10/2010 Lập trình Web 17 Giới thiệu CSS Cách thức định nghĩa CSS Sử dụng Phân loại CSS Selector CSS phạm vi ảnh hưởng 09/10/2010 Lập trình Web 18 Là tên style... 09/10/2010 Lập trình Web 13 Trong tập tin MyStyle.CSS h2 { font-weight: bold; font-size: 16pt; color: white; font-style: italic; font-family: Arial; background-color: red; font-color: white;