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

Thiết kế và Lập trình Web 1-Bài 4 CSS – Casscading Style Sheets

Chia sẻ: Phan Thi Ngoc Giau | Ngày: | Loại File: PDF | Số trang:29

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

Giới thiệu về 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)

Chủ đề:

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

Lưu

Nội dung Text: Thiết kế và Lập trình Web 1-Bài 4 CSS – Casscading Style Sheets

  1. Thiết kế và Lập trình Web 1 Bài 4 CSS – Casscading Style Sheets CSS Khoa CNTT – ĐH.KHTN
  2. 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
  3. 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
  4. Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet Giới thiệu về 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
  5. 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
  6. Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet Đị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
  7. Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet Định nghĩa Style – Ghi 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;} © 2007 Khoa CNTT – ĐH KHTN
  8. 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
  9. Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet Các loại CSS Gồm 3 loại CSS 1. Inline Style Sheet 2. Embedding Style Sheet 3. External Style Sheet © 2007 Khoa CNTT – ĐH KHTN
  10. Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet 1. Inline Style Sheet Định nghĩa style trong thuộc tính style của từng tag HTML Theo cú pháp kiểu 1 … Ví dụ: This is yellow © 2007 Khoa CNTT – ĐH KHTN
  11. Thiết kế & 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
  12. Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet Embedding Style Sheet – Ví dụ This is green This is red, 12 pt. and Garamond. Embedded Style Sheet 12 © 2007 Khoa CNTT – ĐH KHTN
  13. 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. 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
  14. 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 Trong tập tin MyStyle.CSS MyStyle.CSS H2 { FONT-WEIGHT: bold; FrontPage 98 - FONT-SIZE: 16pt; Cascading Style Sheets COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; This is an H2 font-color: white } 14 © 2007 Khoa CNTT – ĐH KHTN
  15. Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet 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
  16. 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 Style Sheet 4. Browser Default © 2007 Khoa CNTT – ĐH KHTN
  17. Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet © 2007 Khoa CNTT – ĐH KHTN
  18. 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
  19. Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet 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 19 © 2007 Khoa CNTT – ĐH KHTN
  20. Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet 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à /* 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à 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
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
17=>2