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

Ngôn ngữ đánh dấu mở rộng - Chương 04 Cascade Style Sheets

Chia sẻ: Trần Đức Anh | Ngày: | Loại File: PPT | Số trang:86

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

CSS1 được W3C giới thiệu năm 1996, là ngôn ngữ dùng để định dạng cho tài liệu HTML.Năm 1998, W3C đưa ra CSS2, được xây dựng dựa trên CSS1 và có hỗ trợthêm các chức năng mới

Chủ đề:

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

Lưu

Nội dung Text: Ngôn ngữ đánh dấu mở rộng - Chương 04 Cascade Style Sheets

  1. NGÔN NGỮ ĐÁNH DẤU MỞ RỘNG CHƯƠNG 04 Cascade Style Sheets 12/27/13 Cascade Style Sheets 1
  2. Mục tiêu Sau chương này, người học có thể:  Trình bày cú pháp sử dụng một tập tin CSS để định dạng cách hiển thị tài liệu XML  Trình bày các cú pháp cơ bản của ngôn ngữ CSS  Tạo ra được các tập tin CSS để định dạng cho từng tài liệu XML theo yêu cầu 12/27/13 Cascade Style Sheets 2
  3. Nội dung 1) Giới thiệu CSS. 2) Cách gán CSS vào tài liệu XML. 3) Cách chọn nội dung định dạng 4) Kế thừa. 5) Các ưu tiên. 6) Các đơn vị trong CSS. 7) Các thuộc tính display. 8) Thuộc tính font. 9) Thuộc tính color. 10) Thuộc tính background. 11) Thuộc tính text. 12) Thuộc tính box. 12/27/13 Cascade Style Sheets 3
  4. Giới thiệu CSS: Cascading Style Sheets. CSS1 được W3C giới thiệu năm 1996, là ngôn ngữ dùng để định dạng cho tài liệu HTML. Năm 1998, W3C đưa ra CSS2, được xây dựng dựa trên CSS1 và có hỗ trợ thêm các chức năng mới. 12/27/13 Cascade Style Sheets 4
  5. Giới thiệu (2) CSS cũng có thể được dùng để định dạng cách hiển thị tài liệu XML. Một tài liệu XML có thể được hiển thị theo nhiều cách khác nhau, tùy thuộc vào tập tin CSS mà ta sử dụng. 12/27/13 Cascade Style Sheets 5
  6. Nội dung 1) Giới thiệu CSS. 2) Cách gán CSS vào tài liệu XML. 3) Cách chọn nội dung định dạng 4) Kế thừa. 5) Các ưu tiên. 6) Các đơn vị trong CSS. 7) Các thuộc tính display. 8) Thuộc tính font. 9) Thuộc tính color. 10) Thuộc tính background. 11) Thuộc tính text. 12) Thuộc tính box. 12/27/13 Cascade Style Sheets 6
  7. Cách gán CSS vào tài liệu XML(1) Cách 1: liên kết đến tập tin CSS bên ngoài Trong đó:  type= kiểu style sheet. • text/css : dùng cho css. • text/xsl : dùng cho xsl.  href= đường dẫn đến tập tin css. 12/27/13 Cascade Style Sheets 7
  8. Cách gán CSS vào tài liệu XML(2) Từ khóa @import: Dùng để nhúng nội dung tập tin CSS này vào một tập tin CSS khác (liên kết nhiều nội dung CSS với nhau) @import url(đường dẫn đến tập tin CSS); VD:  @import url(/styles/truonghoc.css);  @import url(http://www.google.com/xml/styles/truonghoc.css); 12/27/13 Cascade Style Sheets 8
  9. Cách gán CSS vào tài liệu XML(3) Cách 2: chèn trực tiếp vào tài liệu XML (inline styles) Cú pháp: nội dung của thẻ 12/27/13 Cascade Style Sheets 9
  10. Cách gán CSS vào tài liệu XML(4.) Ví dụ: 12/27/13 Cascade Style Sheets 10
  11. Chú thích trong CSS Giống với ngôn ngữ C/C++! Lời chú thích được đặt trong cặp dấu /* */  VD: /* Kieu hoc sinh*/ hocsinh { display:block; /*Mau nen cua hocsinh la mau den*/ background-color:black; } 12/27/13 Cascade Style Sheets 11
  12. Nội dung 1) Giới thiệu CSS. 2) Cách gán CSS vào tài liệu XML 3) Cách chọn nội dung định dạng 4) Kế thừa. 5) Các ưu tiên. 6) Các đơn vị trong CSS. 7) Các thuộc tính display. 8) Thuộc tính font. 9) Thuộc tính color. 10) Thuộc tính background. 11) Thuộc tính text. 12) Thuộc tính box. 12/27/13 Cascade Style Sheets 12
  13. Chọn nội dung định dạng (1) Cú pháp chung: Selector { property:value;...}  Selector: đối tượng mà ta sẽ áp dụng các thuộc tính trình bày. • Thường dùng nhất chính là tên của phần tử.  Property: thuộc tính quy định cách trình bày.  Value: giá trị của thuộc tính.  VD: ten { color:blue; display:inline; height:20%; } 12/27/13 Cascade Style Sheets 13
  14. Chọn nội dung định dạng (2) Tạo nhóm selector: Ta có thể gộp các phần tử có chung thuộc tính vào cùng selector, và các phần tử tách biệt nhau bởi dấu phẩy.  VD1: ten,monhoc {font-size: 16pt; display:block}  VD2: ten,monhoc,noidung{ display: block ;} ten,maso{ font-style:bold;} maso {font-size: 16pt; color:red;} 12/27/13 Cascade Style Sheets 14
  15. Chọn nội dung định dạng (3) Phần tử giả (pseudo element): Phần tử giả cho phép chúng ta định kiểu một phần nội dung của phần tử, như kí tự đầu tiên, dòng đầu tiên.  VD1: sach:first-letter {font-size: 30pt;}  VD2: sach:first-line {font-style: italic;} 12/27/13 Cascade Style Sheets 15
  16. Chọn nội dung định dạng (4) Lớp giả (pseudo class): Trong cùng một phần tử, nếu ta muốn định kiểu cho từng loại nội dung trong phần tử thì ta thêm thuộc tính class vào phần tử đó  Cú pháp: .tên_lớp {các thuộc tính}  VD: Trong cùng phần tử hocsinh ta muốn học sinh là nam thì màu nền là xám, còn nữ thì màu xanh. • hocsinh.nam{background-color:gray;} • hocsinh.nu{background-color:green;} • .nam{display:block;background-color:gray;} 12/27/13 Cascade Style Sheets 16
  17. Chọn nội dung định dạng (5) Chọn bằng ID: Khi một phần tử duy nhất cần một kiểu duy nhất thì ta dùng id  Cú pháp: #tên_id {các thuộc tính}  VD: #lt {color:red;} ten#lt{color:red;} Nguyen Van D 12/27/13 Cascade Style Sheets 17
  18. Chọn nội dung định dạng (6.) Selector theo ngữ cảnh: Khi ta muốn phần tử con có định dạng phụ thuộc vào phần tử cha của nó.  Cú pháp: tên_thẻ_cha tên_thẻ_con {các thuộc tính}  VD: CODE { font-family: Courier, monospaced; font- size: 10pt } PRE { font-size: 12pt } PRE CODE { font-size: 12pt } 12/27/13 Cascade Style Sheets 18
  19. Nội dung 1) Giới thiệu CSS. 2) Cách gán CSS vào tài liệu XML. 3) Cách chọn nội dung định dạng 4) Kế thừa. 5) Các ưu tiên. 6) Các đơn vị trong CSS. 7) Các thuộc tính display. 8) Thuộc tính font. 9) Thuộc tính color. 10) Thuộc tính background. 11) Thuộc tính text. 12) Thuộc tính box. 12/27/13 Cascade Style Sheets 19
  20. Sự kế thừa trong CSS  Các phần tử con sẽ kế thừa thuộc tính từ khai báo thuộc tính của phần tử cha (nếu trong khai báo phần tử con không có định kiểu nào riêng)  VD: hocsinh{display:block; background-color:black;} ten {color: white; font-style: italic; width: 40%; } Nguyen Van A 12/27/13 Cascade Style Sheets 20
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