Đang tải... (xem toàn văn)
Bảng kiểu (Style sheet)Cascading Style Sheet (CSS).Mô tả cách làm việc của CSSPhần tử bảng kiểu (Style Sheet Element)Cú pháp của qui tắc kiểuMô tả các loại style sheetMô tả các bộ chọn (selector) khác nhau.Chú thíchThuộc tính Text và Font
Session • Bảng kiểu (Style sheet) – Cascading Style Sheet (CSS). – Mô tả cách làm việc CSS • Phần tử bảng kiểu (Style Sheet Element) – – – – Cú pháp qui tắc kiểu Mô tả loại style sheet Mô tả chọn (selector) khác nhau. Chú thích • Thuộc tính Text Font • Một bảng kiểu tập qui tắc, miêu tả việc trình bày liệu tài liệu HTML. P{ font-family: Verdana; font-size: 14px; color:red; } • • • • CSS ngôn ngữ định kiểu, đưa thị để miêu tả cách trình bày nội dung trang HTML. Mục đích CSS tách biệt phần nội dung phần định dạng trang Web. Phần định dạng lưu file riêng biệt có phần mở rộng .css Khi hiển thị trang HTML, trình duyệt xác định file .css cho trang áp dụng qui tắc file .css cho phần tử. • Thuận lợi CSS – Tái sử dụng mã (code): CSS tiết kiệm thời gian việc viết thị định dạng lần áp dụng cho nhiều trang. – Giảm mã HTML: CSS giúp giảm kích thước mã file HTML thị định dạng đặt file khác. – Độc lập thiết bị: CSS thiết kế để cung cấp cho người đọc Web có nhìn (look) giống trang hiển trị nhiều thiết bị khác nhau. • Mã CSS nhúng với mã HTML link file HTML với file css. Các bước để áp dụng bảng kiểu vào trang HTML thực sau: – Người sử dụng dùng URL để yêu cầu (request) trang từ trình duyệt. Người sử dụng dùng URL để yêu cầu – Server trả lại file HTML với file có liên quan (request) trang từ trình duyệt. image, audio, css Server trả lại file HTML với file – Trình duyệt dùng rendering có liên quan image, audio, css engine thực thi mã CSS kiểu vào file HTML. Trình duyệt dùng rendering engine thực thi – Sau Web hiển thị trình duyệt mã CSStrang kiểu vàođược file HTML. Sau trang Web hiển thị trình duyệt. • Cú pháp tổng quát CSS bộ_chọn{thuộc_tính:giá trị; } – bộ_chọn (selector): phần tử HTML mà bạn muốn áp dụng kiểu – thuộc_tính (property): loại style (font, boder, color, vị trí…) mà bạn muốn áp dụng vào chọn. – giá_trị (value): giá trị gán cho thuộc tính, thuộc_tính CSS có nhiều giá trị. thuộc_tính giá_trị phân cách dấu : • Các cách viết qui tắc kiểu Nhiều khai báo cho chọn đơn Một khai báo cho nhiều chọn Nhiều khai báo cho nhiều chọn • Đơn vị đo độ dài CSS • Có ba cách sử dụng bảng kiểu – Bảng kiểu nội tuyến (inline style sheet): kiểu viết thuộc tính style phần tử HTML. – Bảng kiểu bên (internal style sheet): Là bảng kiểu viết bên phần tử STYLE. Phần tử STYLE đặt phần tử HEAD. – Bảng kiểu bên (external style sheet): Là bảng kiểu viết file css riêng. • Sử dụng bảng kiểu bên – Dùng phần tử LINK tính rel=“stylesheet” đối tượng link style sheet • Thuộc • Thuộc tính href=“body.css” type=“text/css” tham chiếu đến style sheet bên – Dùng qui tắc @import @import “body.css” ; • • • Có thể có nhiều bảng kiểu áp dụng cho phần tử HTML Thứ tự xếp chồng (cascading order) rõ độ ưu tiên áp dụng kiểu (style) cho phần tử từ bảng kiểu. Thứ tự xếp chồng bảng kiểu sau: 1.Bảng kiểu nội tuyến 2.Bảng kiểu bên 3.Bảng kiểu bên 4.Mặc định trình duyệt • CSS cung cấp kiểu chọn (selector) – – – – Type selector Class selector ID selector Universal selector • Type selector – Tên chọn tên phần tử HTML • Class selector – Tên chọn class bắt đầu kí tự (.) – Khi áp dụng, tên chọn class thuộc tính class phần tử HTML. • ID selector – Tên chọn ID bắt đầu kí tự (#) – Khi áp dụng, tên chọn ID thuộc tính ID phần tử HTML. • Universal selector – Universal selector chọn chung, đại diện cho tất phần tử bên trang HTML. Có nghĩa style chọn chung áp dụng cho nội dung tất phần tử. • Một trang HTML có nhiều bảng kiểu. Các bảng kiểu có nhiều chọn khác nhiều style cho phần tử HTML. Do vậy, W3C đưa số qui tắc áp dụng style cho phần tử HTML Có thể phần mềm đọc mội dung • Thuộc tính text điều khiển xuất văn trang. • Thuộc tính cho phép thay đổi màu sắc văn bản, tăng giảm giảm khoảng cách kí tự, lề văn bản. Thuộc tính Mô tả color Màu văn text-align Căn lề văn textdecoraction Các hiệu ứng gạch chân, gạch ngang văn bản,…vv text-indent Căn chỉnh dòng đầu đoạn thụt vào text-transform Chuyển đổi văn (chữ in hoa, in thường, viết hoa kí tự đầu từ) word-spacing Tăng giảm khoảng cách từ • Thuộc tính font cho phép xác định font chữ, cỡ chữ,… cho văn bản. Thuộc tính Mô tả font-family Xác định font chữ cho văn bản. font-size Xác định cỡ chữ cho văn font-style Kiểu font (chữ nghiêng) font-variant Chuyển đổi văn (chữ in hoa) http://css3generator.com/ 22 [...]... type=“text /css > @import “body .css ; • • • Có thể có nhiều bảng kiểu áp dụng cho cùng một phần tử HTML Thứ tự xếp chồng (cascading order) chỉ rõ độ ưu tiên khi áp dụng kiểu (style) cho phần tử từ bảng kiểu Thứ tự xếp chồng bảng kiểu như sau: 1.Bảng kiểu nội tuyến 2.Bảng kiểu bên trong 3. Bảng kiểu bên ngoài 4.Mặc định của trình duyệt • CSS cung cấp 4 kiểu bộ chọn (selector) – – – – Type selector Class... dụng bảng kiểu bên ngoài – Dùng phần tử LINK • Thuộc tính rel=“stylesheet” chỉ đối tượng được link là một style sheet • Thuộc tính href=“body .css và type=“text /css chỉ ra một tham chiếu đến style sheet bên ngoài – Dùng qui tắc @import @import “body .css ... HTML có thể có nhiều bảng kiểu Các bảng kiểu này có nhiều bộ chọn khác nhau và nhiều style cho một phần tử HTML Do vậy, W3C đưa ra một số qui tắc áp dụng style cho một phần tử HTML Có thể là một phần mềm đọc mội dung • Thuộc tính text điều khiển sự xuất hiện của văn bản trong trang • Thuộc tính cho phép thay đổi màu sắc văn bản, tăng giảm giảm khoảng cách giữa các kí tự, căn lề văn bản Thuộc tính Mô tả... văn bản text-align Căn lề văn bản textdecoraction Các hiệu ứng như gạch chân, gạch ngang văn bản, …vv text-indent Căn chỉnh dòng đầu đoạn thụt vào text-transform Chuyển đổi văn bản (chữ in hoa, in thường, viết hoa kí tự đầu mỗi từ) word-spacing Tăng giảm khoảng cách giữa các từ • Thuộc tính font cho phép xác định font chữ, cỡ chữ,… cho văn bản Thuộc tính Mô tả font-family Xác định font chữ cho văn bản. .. tính font cho phép xác định font chữ, cỡ chữ,… cho văn bản Thuộc tính Mô tả font-family Xác định font chữ cho văn bản font-size Xác định cỡ chữ cho văn bản font-style Kiểu của font (chữ nghiêng) font-variant Chuyển đổi văn bản (chữ in hoa) http:/ /css3 generator.com/ 22 . Session 3 • Bảng kiểu (Style sheet) – Cascading Style Sheet (CSS) . – Mô tả cách làm việc của CSS • Phần tử bảng kiểu (Style Sheet Element) – Cú pháp. phần tử từ bảng kiểu. • Thứ tự xếp chồng bảng kiểu như sau: 1.Bảng kiểu nội tuyến 2.Bảng kiểu bên trong 3. Bảng kiểu bên ngoài 4.Mặc định của trình duyệt • CSS cung cấp 4 kiểu bộ chọn (selector) – Type. href=“body .css và type=“text /css chỉ ra một tham chiếu đến style sheet bên ngoài – Dùng qui tắc @import <LINK rel=“stylesheet” type=“text /css href=“body .css > <STYLE type=“text /css > @import