intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE
 » 
 » 

Bài giảng môn học: ÔN TẬP VỀ STYLE SHEETS

Chia sẻ: Vo Danh | Ngày: | Loại File: PDF | Số trang:23

Thêm vào BST
Báo xấu
109
lượt xem 9
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

CSS = Casscading Style Sheets Dùng để mô tả cách hiển thị các thành phần trê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 đổi thuộc tính từng trang hoặc cả site nhanh chóng (cascading)...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng môn học: ÔN TẬP VỀ STYLE SHEETS

  1. Bài giảng môn học ÔN TẬP VỀ STYLE SHEETS Khoa Công nghệ thông tin Trường Đại học Khoa học Tự nhiên Thiết kế & Lập trình WEB 2
  2. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets CSS CSS = Casscading Style Sheets Dùng để mô tả cách hiển thị các thành phần trê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 đổi thuộc tính từng trang hoặc cả site nhanh chóng (cascading) © 2007 Khoa CNTT – ĐH KHTN
  3. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Các loại CSS Gồm 3 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) © 2007 Khoa CNTT – ĐH KHTN
  4. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets 1. Inline Style Sheet Định nghĩa style trong thuộc tính style của từng tag HTML Cú pháp … Ví dụ: This is yellow © 2007 Khoa CNTT – ĐH KHTN
  5. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets 2. Embedding Style Sheet • Nhúng trong tag của trang HTML Định nghĩa style theo cú pháp © 2007 Khoa CNTT – ĐH KHTN
  6. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Embedding Style Sheet – Ví dụ This is green This is red, 12 pt. and Garamond. Embedded Style Sheet 6 © 2007 Khoa CNTT – ĐH KHTN
  7. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets 3. External Style Sheet Mọi style đều lưu trong file có phần mở rộng là *.CSS Tạo liên kết đến file CSS 1. Trong trang HTML: liên kết bằng tag link. Cú pháp: 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
  8. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets External Style Sheet – Ví dụ Trong trang Web có sử dụng Trong tập tin MyStyle.CSS MyStyle.CSS H2 { FONT-WEIGHT: bold; FrontPage 98 - Cascading Style Sheets FONT-SIZE: 16pt; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; This is an H2 } 8 © 2007 Khoa CNTT – ĐH KHTN
  9. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets So sánh, Đánh giá So Inline Style Sheet Embedding Style Sheet External Style Sheet Kiểu 1 Kiểu 2 Kiểu 2 Khai báo Test Test Ưu điểm • Dễ dàng quản lý Style • Dễ dàng quản lý Style • Có thể thiết lập Style cho theo từng tag của tài liệu theo từng tài liệu web. nhiều tài liệu web. • Không cần tải thêm các • Thông tin các Style được web. trình duyệt cache lại • Có độ ưu tiên cao nhất trang thông tin khác cho style Khuyết điểm • Cần phải Khai báo lại • Cần phải khai báo lại • Tốn thời gian download thông tin style trong từng file *.css và làm chậm quá thông tin style cho các tài tài liệu Web và các tài liệu trình biên dịch web ở trình liệu khác trong mỗi lần sử khác một cách thủ công. duyệt trong lần đầu sử dụng • Khó cập nhật style dụng © 2007 Khoa CNTT – ĐH KHTN
  10. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Độ ư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 Style Sheet 4. Browser Default © 2007 Khoa CNTT – ĐH KHTN
  11. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets © 2007 Khoa CNTT – ĐH KHTN
  12. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Định nghĩa Style Kiểu 1 Kiểu 2 … propertyN:valueN;} ……… Ví dụ: Ví dụ: DHKHTN font-family: Verdana, sans-serif; } DHKHTN © 2007 Khoa CNTT – ĐH KHTN
  13. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Selector Là tên 1 style tương ứng với một thành phần được áp định dạng Ví dụ: .TieuDe1 { color: red; font-family: Verdana, sans-serif; } DHKHTN 13 © 2007 Khoa CNTT – ĐH KHTN
  14. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Các loại Selector Loại Mô tả phạm vi ảnh hưởng Ví dụ Định dạng áp dụng cho ND tất cả h1 {color: red;} element các tag Element trong tài liệu Web /* ND của thẻ bị định dạng màu chữ=đỏ */ Định dạng áp dụng cho ND tất cả #id #test {color: green;} các tab có thuộc tính id trong tài /* ND của bất kỳ tag có thuộc tính id=test đều bị định dạng màu chữ=xanh lá */ liệu Web Định dạng áp dụng cho ND tất cả .class .note {color: yellow;} các tab có thuộc tính class trong /* ND của bất kỳ tag có thuộc tính class=note đều bị định dạng màu tài liệu Web chữ=vàng*/ Định dạng áp dụng cho ND các element . class h1.note {text-decoration: tag Element có thuộc tính class underline;} tương ứng /* ND của các thẻ có thuộc tính class=note đều bị định dạng gạch chân */ © 2007 Khoa CNTT – ĐH KHTN
  15. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Các loại Selector (tt) Loại Mô tả phạm vi ảnh hưởng Ví dụ Định dạng áp dụng cho ND một Grouping h1,h2,h3 {background-color: nhóm các tag trong tài liệu. orange;} /* ND của các thẻ đều bị định dạng màu nền = màu cam */ Định dạng áp dụng cho ND các Contextual p strong {color: purple;} thẻ được lồng trong một thẻ cha /* ND của các thẻ nằm trong thẻ đều bị định dạng màu chữ=màu tía */ nào đó Định dạng được áp dụng dựa vào Pseudo Class trạng thái của các Element. Pseudo (Không xuất hiện trong mã lệnh element HTML) © 2007 Khoa CNTT – ĐH KHTN
  16. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Selector - Element Có hiệu ứng trên tất cả element cùng loại tag Ví dụ : © 2007 Khoa CNTT – ĐH KHTN
  17. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Selector – ID rules Có hiệu ứng duy nhất trên một element có đúng id. Ví dụ : © 2007 Khoa CNTT – ĐH KHTN
  18. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Selector – Class rules Có hiệu ứng trên tất cả các loại tag có cùng giá trị thuộc tính class. Ví dụ : © 2007 Khoa CNTT – ĐH KHTN
  19. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Selector – Kết hợp Element và Class Ví dụ : © 2007 Khoa CNTT – ĐH KHTN
  20. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Selector - Contextual Selection Selector Đị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
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

THÔNG TIN
TRỢ GIÚP
HỖ TRỢ KHÁCH HÀNG
Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn

Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2022-2032 TaiLieu.VN. All rights reserved.

 

Đồng bộ tài khoản
5=>2