WebCourse bai04 CSS Casscading Style Sheets

29 814 0
WebCourse   bai04 CSS Casscading
Style Sheets

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

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 CSSCSS = 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”>

Ngày đăng: 12/01/2014, 12:28

Từ khóa liên quan

Mục lục

  • Bài 4 CSS – Casscading Style Sheets

  • Nội dung

  • Nội dung

  • Giới thiệu về CSS

  • Nội dung

  • Định nghĩa Style

  • Định nghĩa Style – Ghi chú

  • Nội dung

  • Các loại CSS

  • 1. Inline Style Sheet

  • 2. Embedding Style Sheet

  • Embedding Style Sheet – Ví dụ

  • 3. External Style Sheet

  • External Style Sheet – Ví dụ

  • So sánh, Đánh giá

  • Độ ưu tiên

  • Nội dung

  • Selector

  • Các loại Selector

  • Selector trong CSS - Element

  • Selector trong CSS – ID rules

  • Selector trong CSS – Class rules

  • Selector trong CSS – Kết hợp Element và Class

  • Selector trong CSS - Contextual Selection

  • Selector trong CSS – Pseudo Class

  • Selector trong CSS – Pseudo Element

  • Selector trong CSS – Pseudo Element

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan