WebCourse bai04
Thiếtkế và Lập trình Web 1 Khoa Khoa CNTT CNTT – – ĐH ĐH .KHTN .KHTN Bài 4 CSS CSS – – Casscading Casscading Style Sheets Style Sheets Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet © 2007 Khoa CNTT – ĐH KHTN N N ộ ộ i i dung dung GiớithiệuCSS Định nghĩaStyle Sử dụng và Phân loạiCSS Selector trong CSS và phạmvi ảnh hưởng Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet © 2007 Khoa CNTT – ĐH KHTN N N ộ ộ i i dung dung GiớithiệuCSS Định nghĩaStyle Sử dụng và Phân loạiCSS Selector trong CSS và phạmvi ảnh hưởng Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet © 2007 Khoa CNTT – ĐH KHTN Gi Gi ớ ớ i i thi thi ệ ệ u u v v ề ề CSS CSS CSS = Casscading Style Sheets Dùng để mô tả cách hiểnthị các thành phầntrê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 đổithuộctínhtừng trang hoặccả site nhanh chóng (cascading) Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet © 2007 Khoa CNTT – ĐH KHTN N N ộ ộ i i dung dung GiớithiệuCSS Định nghĩaStyle Sử dụng và Phân loạiCSS Selector trong CSS và phạmvi ảnh hưởng Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet © 2007 Khoa CNTT – ĐH KHTN Định nghĩaStyle Kiểu1 <tag style = “property1:value1; property2:value2; ……… propertyN:valueN;”>…</tag> Kiểu2 SelectorName { property1:value1; property2:value2; ……… propertyN:valueN;} <tag class = “SelectorName”> ……… </tag> Ví dụ: <h1 style=“ color : blue; font-family : Arial;” > DHKHTN </h1> Ví dụ: .TieuDe1 { color: red; font-family: Verdana, sans-serif; } <h1 class=“TieuDe1”> DHKHTN </h1> Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet © 2007 Khoa CNTT – ĐH KHTN Đ Đ ị ị nh nh ngh ngh ĩ ĩ a a Style Style – – Ghi Ghi ch ch ú ú Giống Ghi chú trong C++ Sử dung /*Ghi chú*/ Ví dụ : SelectorName { property1:value1; /*Ghi chu 1*/ property2:value2; /*Ghi chu 2*/ ……… propertyN:valueN;} Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet © 2007 Khoa CNTT – ĐH KHTN N N ộ ộ i i dung dung GiớithiệuCSS Định nghĩaStyle Sử dụng và Phân loạiCSS Selector trong CSS và phạmvi ảnh hưởng Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet © 2007 Khoa CNTT – ĐH KHTN C C á á c c lo lo ạ ạ i i CSS CSS Gồm 3 loại CSS 1. Inline Style Sheet 2. Embedding Style Sheet 3. External Style Sheet Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet © 2007 Khoa CNTT – ĐH KHTN 1. Inline Style Sheet Định nghĩa style trong thuộc tính style củatừng tag HTML Theo cú pháp kiểu1 <tag style = “property1:value1;…propertyN:valueN;”> … </tag> Ví dụ: <H1 STYLE="color: yellow">This is yellow</H1> [...]... Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet 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 © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet Selector Là tên 1 style tương... 4: CSS – Casscading Style Sheet Selector trong CSS - Element Có hiệu ứng trên tất cả element cùng loại tag Ví dụ : © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet Selector trong CSS – ID rules Có hiệu ứng duy nhất trên một element có đúng id Ví dụ : © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet Selector trong CSS. .. href=“URL” type="text /css" > 2 Trong trang HTML: Liên kết bằng tag style với @import url Cú pháp @import url(URL); © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet External Style Sheet – Ví dụ Trong trang Web có sử dụng MyStyle .CSS Trong tập tin MyStyle .CSS H2 { ... Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet Selector trong CSS – Kết hợp Element và Class Ví dụ : © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet Selector trong CSS - Contextual Selection Định dạng được áp dụng cho nội dung trong chuổi tag theo đúng thứ tự Ví dụ : © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style... TYPE="text /css" > This is red, 12 pt and Garamond. 12 © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet 3 External Style Sheet Mọi style đều lưu trong file có phần mở rộng là * .CSS Định nghĩa style theo cú pháp kiểu 2 Tạo liên kết đến file CSS 1... Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet 2 Embedding Style Sheet • Nhúng trong tag của trang HTML Định nghĩa style theo cú pháp kiểu 2 © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet... FONT-WEIGHT: bold; FrontPage 98 Cascading Style Sheets FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; font-color: white } This is an H2 14 © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet So sánh, Đánh giá Inline... tin style cho các tài liệu khác trong mỗi lần sử dụng • Tốn thời gian download file * .css và làm chậm quá trình biên dịch web ở trình duyệt trong lần đầu sử dụng © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet Độ ưu tiên Thứ tự ưu tiên áp dụng định dạng khi sử dụng các loại CSS (độ ưu tiên giảm dần) : 1 Inline Style Sheet 2 Embedding Style Sheet 3 External... CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet Selector trong CSS – Pseudo Class Định dạng dựa vào trạng thái của liên kết, sự kiện chuột Có thể kết hợp với Selector khác © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet Selector trong CSS – Pseudo Element Định dạng dựa vào vị trí đầu tiên của ký tự, của dòng văn bản :first-letter,... Inline Style Sheet Khai báo Cú pháp Embedding Style Sheet External Style Sheet Kiểu 1 Kiểu 2 Kiểu 2 Test TieuDe1{color: red;} Test Test Ưu điểm • Dễ dàng quản lý Style theo từng tag của tài liệu web • Có độ ưu tiên cao nhất • Dễ dàng quản lý Style . MyStyle.CSS H2 { FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; font-color: white } Trong. style=“ color : blue; font-family : Arial;” > DHKHTN </h1> Ví dụ: .TieuDe1 { color: red; font-family: Verdana, sans-serif; } <h1 class=“TieuDe1”>