Lập trình web - Bài 5: CSS và DHTML

11 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL 22 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Mục tiêu • Định dạng trang web bằng CSS • Sử dụng CSS để tạo các trang DHTML 33 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Nội dung 1. Giới thiệu CSS1. Giới thiệu CSS 2. Các loại CSS2. Các loại CSS 3. Tạo và sử dụngCSS phức tạp 3. Tạo và sử dụng CSS phức tạp 4. Giới thiệu DHTML4. Giới thiệu DHT LM 5. Style động5. Style động 6. Nội dung động6. Nội dung động 7. Vị trí động7. Vị trí động 44 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Style Sheet  Là một tập hợp các khai báo style Bài 5: CSS và DHTML Giới thiệu CSS { : ; } { : ; } Các styleStyle Sheet 55 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Style Sheet  Là một tập hợp các khai báo style Bài 5: CSS và DHTML Giới thiệu CSS Ví dụ: h1 {color:#FF0000} div {background-color:#66CCFF; color:#0000FF; border- color:#0000FF; border-style:double; width:300} ul {list-style:square; color:#660000} 66 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • CSS – Cascading Style Sheets  Là một chuẩn của Internet do W3C định nghĩa  Hiệu ứng của style có thể được kế thừa từ các tag khác Bài 5: CSS và DHTML Giới thiệu CSS Ví dụ: Canh chua Cá kho tộ Trứng chiên  77 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Các loại CSS • Inline Style • Internal Style • External Style    88 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Inline Style  Loại style này chính là phần khai báo thuộc tính style trong các tag HTML Bài 5: CSS và DHTML Các loại CSS Ví dụ: <div style="color:#FF0000; background-color:#CCCCCC; border-style:inset; width:450; text-align:center; padding:10,10, 10,10"> Chào mừng các bạn đến với bài học về "CSS và DHTML" 99 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Internal Style  Dùng để định nghĩa các style dùng chung trong một trang web Bài 5: CSS và DHTML Các loại CSS { : ; }  1010 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • External Style  Dùng chung trong một website  Phần khai báo nằm trong một tập tin có kiểu là .css và tập tin này được xem như là một Style Sheet Bài 5: CSS và DHTML Các loại CSS 1111 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • External Style  Khai báo và sử dụng: • Khai báo trong tập tin .css • Liên kết với trang web Bài 5: CSS và DHTML Các loại CSS { : ; } .css" type="text/css"> Minh họa 1212 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Tạo và sử dụng CSS phức tạp • Grouping - nhóm • Class – lớp   1313 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Grouping – nhóm  Khai báo một style áp dụng cho nhiều tag khác nhau Bài 5: CSS và DHTML Tạo và sử dụng CSS phức tạp , , { : ; } Ví dụ: h1, h2, h3 {color: red; font-family:sans-serif } 1414 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Class – lớp  Khai báo nhiều style khác nhau cho cùng một tag hoặc cho nhiều tag  Khai báo • Cùng một tag • Nhiều tag khác nhau Bài 5: CSS và DHTML Tạo và sử dụng CSS phức tạp . { } . { } 1515 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Class – lớp  Sử dụng Bài 5: CSS và DHTML Tạo và sử dụng CSS phức tạp 1616 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Class – lớp Bài 5: CSS và DHTML Tạo và sử dụng CSS phức tạp Ví dụ: sử dụng style cho tag p{ color: red; font-size: 20px; font-weight:bold} p.dong1{ color: blue; font-size: 18px; } p.dong2{ font-size: 16px; } Trung Tâm Tin Học Trường Đại Học Khoa Học Tự Nhiên Đại học Quốc Gia TP.HCM 1717 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Class – lớp Bài 5: CSS và DHTML Tạo và sử dụng CSS phức tạp Ví dụ: sử dụng style cho nhiều tag .dong1{ color: red; font-size: 20px; font-weight:bold} .dong2{ color: blue; font-size: 18px;} .dong3{ color: #000099; font-size: 16px; } Trung Tâm Tin Học Trường Đại Học Khoa Học Tự Nhiên Đại học Quốc Gia TP.HCM 1818 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Các mục thường định dạng  Font chữ  Màu chữ và nền (màu, hình ảnh) – Colors và Background  Canh lề văn bản - Text Alignment  Lề văn bản và đường viền – Margins và Borders Bài 5: CSS và DHTML Tạo và sử dụng CSS phức tạp 1919 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Giới thiệu DHTML – Dynamic HTML  Tạo tính “linh động” cho trang web  Xử lý các yêu cầu khi người dùng tương tác với trang web  Là sự kết hợp HTML, CSS, DOM và một ngôn ngữ client-side script  Không phải là chuẩn của W3C Bài 5: CSS và DHTML Giới thiệu DHTML 2020 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Style động – Dynamic Styles • Thay đổi thuộc tính • Thay đổi style   2121 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Thay đổi thuộc tính  Sử dụng cú pháp tham chiếu đến một đối tượng trong DOM Bài 5: CSS và DHTML Style động – Dynamic Styles Ví dụ: thay đổi thuộc tính src của tag Minh họa 2222 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Thay đổi style Có 2 cách làm thay đổi Inline Style  Thay đổi thuộc tính style: thường dùng từ khóa this và viết code trực tiếp vào sự kiện Bài 5: CSS và DHTML Style động – Dynamic Styles Ví dụ: <div id="nd" onMouseOver="this.style.fontSize=36" onMouseOut="this.style.fontSize=16" >Một bông hồng cho em this.style. = Minh họa 2323 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Thay đổi style  Thay đổi tên lớp: dùng để thay đổi nhiều thông tin trong thuộc tính style Bài 5: CSS và DHTML Style động – Dynamic Styles Ví dụ: .vao { font-size:36px; color:#FF0000; font-weight:bold; font-style:italic} .ra { font-size:16px; color:black; text-decoration: none} <div id="nd" onMouseOver="this.className='vao' " onMouseOut="this.className='ra' ">Một bông hồng cho em this.className = ‘Tên lớp’ Minh họa 2424 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Nội dung động  Chèn vào, hủy bỏ hoặc thay đổi nội dung của một element.  Thay đổi nội dung: thường sử dụng thuộc tính innerText, innerHTML hoặc value Bài 5: CSS và DHTML Nội dung động – Dynamic content 2525 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Vi trí động – Dynamic position • Thuộc tính position • Thuộc tính visibility • Thuộc tính z-index    2626 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL  Định vị trí của một element (theo tọa độ (x,y) hay left, top)  Gối chồng các element với nhau theo thứ tự trên, dưới.  Thường sử dụng các thuộc tính left, top, position, visibility và z-index. Bài 5: CSS và DHTML Vị trí động – Dynamic position 2727 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Thuộc tính position  Khai báo loại vị trí của một element  Có 3 giá trị: • static: mặc định. Thuộc tính left và top sẽ không có tác dụng nếu element có position là static • absolute: vị trí dịch chuyển của đối tượng tùy theo vị trí của elemnet cha hoặc element body • relative: vị trí dịch chuyển của đối tượng tùy theo vị trí ban đầu khi viết code HTML Bài 5: CSS và DHTML Vị trí động – Dynamic position Minh họa Minh họa 2828 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Thuộc tính visibility  Dùng để thể hiện hoặc làm ẩn đi một đối tượng  Có 2 giá trị: • visible: thể hiện đối tượng lên trang web • hidden: làm ẩn đi đối tượng Bài 5: CSS và DHTML Vị trí động – Dynamic position Ví dụ: thể hiện khẩu hiệu “Học, học nữa, học mãi” khi rê chuột vào hình và ngược lại làm ẩn đi Minh họa 2929 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL • Thuộc tính z-index  Dùng để gối chồng các element lên nhau theo thứ tự trên, dưới  Giá trị của thuộc tính là các con số  Thường kết hợp với thuộc tính visibility và position Bài 5: CSS và DHTML Vị trí động – Dynamic position Minh họa Minh họa 3030 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC  - Tek Ngành lập trình - CSDL Bài 5: CSS và DHTML HẾT