Bài giảng Multimedia - Phần 2: Casscading Style Sheet - CSS

Chia sẻ: Hấp Hấp | Ngày: | Loại File: PPT | Số trang:206

Thêm vào BST

Báo xấu

75
lượt xem 13
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng "Multimedia - Phần 2: Casscading Style Sheet - CSS" cung cấp cho người học các kiến thức: CSS là gì, một số đặc tính cơ bản của CSS, áp dụng CSS, cú pháp – Cách tạo CSS, background, thiết lập văn bản, tạo Menu, một số chức năng khác. 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 Multimedia - Phần 2: Casscading Style Sheet - CSS

PART II: Casscading Style Sheet - CSS 1
NỘI DUNG  CSS là gì?  Một số đặc tính cơ bản của CSS  Áp dụng CSS  Cú pháp – Cách tạo CSS  Background  Thiết lập văn bản  Tạo Menu  Một số chức năng khác 2
Định nghĩa CSS  CSS (Cascading Style Sheets) là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc...) cho một tài liệu Web viết bằng HTML, XHTML, XML, SVG, hay UML,… .  CSS mở rộng ngôn ngữ HTML truyền thống với hơn 70 thuộc tính về kiểu dáng có thể áp dụng cho các thẻ HTML  Các nhà lập trình Web có thêm nhiều lựa chọn về màu sắc, khoảng cách, vị trí, biên, lề, con trỏ. 3
Một số đặc tính cơ bản của CSS  Tiện ích của CSS ◦Tách riêng nội dung và định dạng, làm cho mã nguồn gọn gàng hơn, ◦Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang, tránh lặp lại việc định dạng các trang giống nhau. ◦Tiết kiệm thời gian:Khi thay đổi định dạng trong CSS, các trang sử dụng CSS sẽ tự động cập nhật sự thay đổi đó. ◦Kết hợp với JavaScript để tạo hiệu ứng đặc biệt 4
Một số đặc tính cơ bản của CSS  Bất lợi của CSS: ◦Một số trình duyệt không chấp nhận CSS hoàn toàn ◦Phải mất thời gian để học cách sử dụng 5
Một số đặc tính cơ bản của CSS Mô hình 3 lớp trong phát triển WEB 6
Một số đặc tính cơ bản của CSS  Phân loại : Có 3 loại ◦Inline style ◦Internal style ◦External style  Mức độ ưu tiên của CSS sẽ theo thứ tự sau. ◦Style đặt trong từng thẻ HTML riêng biệt (inline style) ◦Style đặt trong phần (Internal style) ◦Style đặt trong file mở rộng .css (External Style) ◦Style mặc định của trình duyệt  Mức độ ưu tiên sẽ giảm dần từ trên xuống dưới. 7
Áp dụng CSS vào trang HTML  Dùng inline style: là cách dùng style ngay trong câu lệnh, chỉ cần bổ sung thêm thuộc tính STYLE vào sau một phần tử HTML nào đó.  Cú pháp: Nội dung  Ví dụ: Màu xanh nước biển. This is a paragraph 8
Áp dụng CSS vào trang HTML Dùng inline style: Ví dụ: This paragraph has an inline style applied to it This paragraph is displayed in the default style. Can you see the difference in this line 9
Áp dụng CSS vào trang HTML  Một inline style áp dụng cho bất cứ thẻ nào và chỉ có tác dụng trên chính thẻ đó.  Dùng inline style làm cho tài liệu rõ ràng hơn nhưng có thể dẫn đến việc viết mã quá nhiều.  Làm cho các đoạn mã dư thừa, khó bảo trì 10
Áp dụng CSS vào trang HTML  Cách 2: Nhúng style sheet (Internal Style)  Internal style : Là bảng mẫu thích hợp cho trang riêng lẻ với nhiều văn bản. ◦Cách tạo: Taọ bảng mẫu chung trên phần đầu trang trong cặp tag ◦Sử dụng: Trong phần body, nội dung nào muốn sử dụng định dạng theo Style sheet đã tạo ở trên thì đặt trong tag được định nghĩa trong phần head ◦. 11
Áp dụng CSS vào trang HTML  Cách 2: Nhúng style sheet (Internal Style)  Cú pháp: TagName{property1:v1;property2:v2 …} (lặp lại cho mỗi tag có thuộc tính cần định dạng) ◦. 12
Áp dụng CSS vào trang HTML B {text-transform: lowercase; font-size:18px} P { border: silver thick solid; background- color:turquoise;} Mỗi đoạn sẽ có viền Đậm màu bạc 13
Áp dụng CSS vào trang HTML H1,H2 { color: limegreen; font-family: Arial } This is the H1 element This is the H2 element This is the H3 element with its default style as displayed in the browser 14
Áp dụng CSS vào trang HTML Cách3: Nhiều Stylesheet  Trong trường hợp mà có một số thẻ có cùng định dạng, chúng ta có thể gộp chúng lại với nhau. Giả sử như sau: h1, h2, h3 { margin-left: 10px; font-size: 150%; ... } 15
Áp dụng CSS vào trang HTML Nhiều Stylesheet  Ví dụ: h1 { color:#0000FF; text-transform:uppercase } h2 { color:#0000FF; text-transform:uppercase; } h3 { color:#0000FF; text-transform:uppercase; } h1, h2, h3 { color:#0000FF; text-transform:uppercase; } 16
Áp dụng CSS vào trang HTML Cách 4: Bên ngoài-External Là một bảng kiểu được lưu trữ thành một file bên ngoài và được liên kết với trang HTML.  Bảng kiểu này sẽ được áp dụng và ảnh hưởng cho tất cả các trang của một website. 17
Áp dụng CSS vào trang HTML  Cách tạo: ◦Tạo một tập tin văn bản mới ◦Nhập tên các tag muốn định dạng thuộc tính theo mẫu: TagName{property1:v1;property2:v2;…} ◦Lưu tập tin với định dạng Text Only và có phần mở rộng .css  Cách dùng External style:  Cú pháp: 18
Áp dụng CSS vào trang HTML Ví dụ: Ví dụ Welcome To WallPearl’s Blog 19
Áp dụng CSS vào trang HTML Ví dụ: Sau đó hãy tạo một file style.css với nội dung: body { background-color:#FFF } p { color:#00FF00 } Lưu ý:  Để lưu 1 file với 1 đuôi khác .txt trong Notepad chúng ta chọn Save as type là All Files. Có thể chọn Encoding là UTF-8, nếu bạn chú thích CSS bằng tiếng Việt.  Trong CSS chúng ta còn có thể sử dụng thuộc tính @import để nhập một file CSS vào CSS hiện hành. Cú pháp: @import url(link) 20