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

Bài giảng Thiết kế và lập trình Web - Bài 3: Casscading Style Sheets

Chia sẻ: Tomjerry010 | Ngày: | Loại File: PDF | Số trang:75

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

Bài giảng Thiết kế và lập trình Web - Bài 3: Casscading Style Sheets, cung cấp cho người học những kiến thức như: 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. Mời các bạn cùng tham khảo!

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 Thiết kế và lập trình Web - Bài 3: Casscading Style Sheets

  1. Thiết kế và lập trình Web Bài 3 CSS – Casscading Style Sheets Viện CNTT & TT
  2. Thiết kế và lập trình Web 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
  3. Thiết kế và lập trình Web 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
  4. Thiết kế và lập trình Web 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  Ban đầu HMTL – Tập các quy tắc cho phép NSD xem các trang Web – Không hỗ trợ nhà thiết kế có nhiều quyền chi phối thiết kế => Các trình duyệt bổ sung thêm các thẻ HTML riêng, không theo chuẩn  W3C (World Wide Web Consortium) ra đời CSS cho phép hỗ trợ nhà thiết kế
  5. Thiết kế và lập trình Web Giới thiệu về CSS  Style tiết kiệm thời gian  CSS dễ thay đổi  Sự nhất quán  Khả năng chi phối đa dạng  Tạo ra định dạng chung cho toàn bộ Web
  6. Thiết kế và lập trình Web Giới thiệu về CSS – Ví dụ Without CSS With CSS
  7. Thiết kế và lập trình Web 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
  8. Thiết kế và lập trình Web Định nghĩa Style Kiểu 1 Kiểu 2 … ……… Ví dụ: Ví dụ: DHKHTN font-family: Verdana, sans-serif; } DHBKHN
  9. Thiết kế và lập trình Web Đị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;}
  10. Thiết kế và lập trình Web 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
  11. Thiết kế và lập trình Web Sử dụng và Phân loại CSS – Phân loại  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)
  12. Thiết kế và lập trình Web Sử dụng và Phân loại CSS - 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. ….  Không sử dụng lại được.  Ví dụ: This is yellow
  13. Thiết kế và lập trình Web Sử dụng và Phân loại CSS - Embedding Style Sheet  Còn gọi là Internal Style Sheet hoặc Document-Wide Style Sheet  Mọi định nghĩa style được đặt trong tag của trang HTML.  Định nghĩa style theo cú pháp kiểu 2.  Trang HTML có nội dung như sau:
  14. Thiết kế và lập trình Web Sử dụng và Phân loại CSS - Embedding Style Sheet Embedded Style Sheet This is green This is red, 12 pt. and Garamond.
  15. Thiết kế và lập trình Web Sử dụng và Phân loại CSS - External Style Sheet  Mọi style đều lưu trong file có phần mở rộng là *.CSS.  File CSS: lưu trữ nhiều style theo cú pháp kiểu 2.  Trong file HTML: liên kết bằng tag link. Cú pháp:  Trang HTML : Liên kết bằng tag style với @import url. Cú pháp @import url(URL);
  16. Thiết kế và lập trình Web Sử dụng và Phân loại CSS - External Style Sheet Trong tập tin MyStyle.CSS Trong trang Web : demo.htm H2 { FONT-WEIGHT: bold; Cass……… FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; This is an H2 BACKGROUND-COLOR: red; font-color: white }
  17. Thiết kế và lập trình Web Sử dụng và Phân loại CSS – So sánh, Đánh giá Inline Style Sheet Embedding Style Sheet External Style Sheet Khai báo Kiểu 1 Kiểu 2 Kiểu 2 Cú pháp Test Test Ưu điểm • Dễ dàng quản lý Style theo • Dễ dàng quản lý Style theo • Có thể thiết lập Style cho từng tag của tài liệu web. từng tài liệu web. nhiều tài liệu web. • Có độ ưu tiên cao nhất • Không cần tải thêm các • Thông tin các Style được trang thông tin khác cho trình duyệt cache lại 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 file thông tin style trong từng tài thông tin style cho các tài *.css và làm chậm quá trình liệu Web và các tài liệu khác liệu khác trong mỗi lần sử biên dịch web ở trình duyệt một cách thủ công. dụng trong lần đầu sử dụng • Khó cập nhật style
  18. Thiết kế và lập trình Web Sử dụng và Phân loại CSS – Độ ư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
  19. Thiết kế và lập trình Web
  20. Thiết kế và lập trình Web 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
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
2=>2