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
Giới thiệu CSS (Cascading Style Sheet) NexTGen Web Bài 05: Giới thiệu CSS3 Mục tiêu 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 © Aptech Ltd. Bảng kiểu (Style Sheet) 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; } © Aptech Ltd. Bảng kiểu xếp chồng (Cascading Style Sheet) 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ử. © Aptech Ltd. Bảng kiểu xếp chồng (Cascading Style Sheet) 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. © Aptech Ltd. Cú pháp qui tắc kiểu (style rule syntax) 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 : © Aptech Ltd. Cú pháp qui tắc kiểu (style rule syntax) Các cách viết qui tắc kiểu Chỉ nhiều thuộc tính, giá trị khai báo cho chọn Chỉ thuộc tính, giá trị khai báo cho nhiều chọn Chỉ nhiều thuộc tính, giá trị, khai báo cho nhiều bọ chọn © Aptech Ltd. Các đơn vị đo lường độ dài © Aptech Ltd. Các đơn vị đo lường độ dài Chiều dài tương đối quy định cụ thể đơn vị chiều dài liên quan đến thuộc tính độ dài khác tính toán so với giá trị tại. Bảng liệt kê số đơn vị chiều dài tương đối. Độ dài tương đối em ex px © Aptech Ltd. Mô tả Quy định cụ thể kích thước phông chữ (chiều cao) phông chữ đặc biệt. Đơn vị "em" tương đối so với giá trị thuộc tính font-size chọn. Quy định cụ thể 'x-height' phông chữ đặc biệt. Giá trị ‘xheight' khoảng nửa kích thước font chữ chiều cao chữ thường 'x'. Quy định cụ thể kích thước điểm ảnh, mà liên quan đến hình thiết bị. Các đơn vị đo lường độ dài Bảng liệt kê số đơn vị độ dài tuyệt đối. Độ dài tuyệt đối in Quy định cụ thể kích thước theo inch, inch = 2.54 cm cm mm Quy định cụ thể kích thước theo centimeters Quy định cụ thể kích thước theo millimeters Quy định cụ thể kích thước theo points, point = 1/72th inch Quy định cụ thể kích thước theo picas, pica = 12 points pt pc © Aptech Ltd. Mô tả Các đơn vị đo lường độ dài Ví dụ © Aptech Ltd. Các loại bảng kiểu Có ba loại 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. © Aptech Ltd. Bảng kiểu nội tuyến (inline style sheet) Inline Style sheet Đặt trực tiếp bên thẻ HTML Người thiết kế web sử dụng trình xây dựng style để tạo loại style Ví dụ © Aptech Ltd. Không thể tái sử dụng vị trí trang Bảng kiểu bên (Internal/Embedded) Loại thuộc tính phần tử style xác định loại nội dung, text / css Mã style đặt bên đoạn trang Web cụ thể Internal Styles Các style tái sử dụng trang Web mà chúng đặt © Aptech Ltd. Quy tắc style xuất khối khai báo cho phần tử HTML phần tử style Bảng kiểu bên (Internal/Embedded) Ví dụ Sample HTML5 Structure h1, h2 { margin:0px; font-size:1.5em; } footer{ background-color:#999; text-align:center; } © Aptech Ltd. Bảng kiểu bên (external style sheet) External CSS định nghĩa file riêng biết với phần mở rộng .css Loại External Mang đến thuận tiện kiểu dùng chọn cho nhiều trang HMTL © Aptech Ltd. Ví dụ BODY { background-color: gray; font-family: arial; font-style: italic; } External CSS sử dụng rộng rãi cung cấp cách nhìn đồng trang Website. Bảng kiểu bên (external style sheet) Sử dụng bảng kiểu bên Dùng phần tử LINK Sử dụng phần tử LINK để link trang HTML với đối tượng khác. Thuộc tính rel="stylesheet" đối tượng link style sheet 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" ; © Aptech Ltd. Bảng kiểu bên (external style sheet) Ví dụ. Webex e-Server This is the fastest web server !! © Aptech Ltd. Sự xếp chồng bảng kiểu 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. 2. 3. 4. © Aptech Ltd. Bảng kiểu nội tuyến Bảng kiểu bên Bảng kiểu bên Mặc định trình duyệt Các loại chọn CSS cung cấp kiểu chọn (selector) Type selector Class selector ID selector Universal selector © Aptech Ltd. Các loại chọn Type selector Tên chọn tên phần tử HTML Kiểu quy định lần cho phần tử HTML áp dụng cho tất lần xuất phần tử Xác định tên phần tử với kiểu áp dụng cho phần tử Kết ứng dụng kiểu chi r quy định cho tất xuất phần tử trang web © Aptech Ltd. Các loại chọn Class selector Bộ chọn class bắt đầu với Tên chọn class bắt đầu kí tự (.)một dấu chấm Phù hợp với phần tử, mà thuộc tính class thiết lập trang HTML © Aptech Ltd. Khi áp dụng, tên chọn class thuộc tính class phần tử HTML. giá trị thuộc tính class khối khai báo Áp dụng kiểu cho nội dung tất phần tử có thuộc tính thuộc tính class Các loại chọn ID selector Tên chọn ID bắt đầu kí tự (#) Phù hợp với phần tử mà thuộc tính id thiết lập trang HTML Áp dụng kiểu cho nội dung tất phần tử Bộ chọn Id bắt đầu với biểu tượng (#) theo sau giá trị thuộc tính id khối khai báo Khi áp dụng, tên chọn ID thuộc tính ID phần tử HTML. © Aptech Ltd. Các loại chọn 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ử. © Aptech Ltd. Các loại chọn 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 © Aptech Ltd. Chú thích CSS © Aptech Ltd. [...]... phần tử LINK Sử dụng phần tử LINK để link trang HTML với một đối tượng khác 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" ; © Aptech Ltd Bảng kiểu bên ngoài... © Aptech Ltd Bảng kiểu bên ngoài (external style sheet) External CSS được định nghĩa trong một file riêng biết với phần mở rộng css Loại External Mang đến sự thuận tiện khi các kiểu có thể dùng chọn cho nhiều trang HMTL © Aptech Ltd Ví dụ BODY { background-color: gray; font-family: arial; font-style: italic; } External CSS được sử dụng rộng rãi cung cấp cách nhìn đồng nhất trong các trang của... nội dung, đó là text / css Mã style được đặt bên trong đoạn của một trang Web cụ thể Internal Styles Các style có thể được tái sử dụng trong cùng một trang Web mà chúng được đặt © Aptech Ltd Quy tắc style xuất hiện trong một khối khai báo cho mỗi phần tử HTML trong phần tử style Bảng kiểu bên trong (Internal/Embedded) Ví dụ Sample HTML5 Structure... @import @import "body .css" ; © Aptech Ltd Bảng kiểu bên ngoài (external style sheet) Ví dụ Webex e-Server This is the fastest web server !! © Aptech Ltd Sự xếp chồng giữa các bảng kiểu Có thể có nhiều bảng kiểu áp dụng cho cùng một... (internal style sheet): Là bảng kiểu viết trong bên trong phần tử STYLE Phần tử STYLE được đặt trong phần tử HEAD Bảng kiểu bên ngoài (external style sheet): Là các bảng kiểu được viết trong một file css riêng © Aptech Ltd Bảng kiểu nội tuyến (inline style sheet) Inline Style sheet Đặt trực tiếp bên trong thẻ của HTML Người thiết kế web không thể sử dụng trình xây dựng style để tạo ra loại style này... 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 2 3 4 © Aptech Ltd Bảng kiểu nội tuyến Bảng kiểu bên trong Bảng kiểu bên ngoài Mặc định của trình duyệt Các loại bộ chọn CSS cung cấp 4 kiểu bộ chọn (selector) Type selector Class selector ID selector Universal selector © Aptech Ltd Các loại bộ chọn Type selector Tên của bộ chọn là tên của một phần tử HTML Kiểu được quy... 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 © Aptech Ltd Chú thích trong CSS © Aptech Ltd . Bài 05: Giới thiệu về CSS3 NexTGen Web Giới thiệu CSS (Cascading Style Sheet) © Aptech Ltd. Mục tiêu Bảng kiểu (Style sheet) Cascading Style Sheet (CSS) . Mô tả cách làm việc của CSS Phần. đó là text / css © Aptech Ltd. HTML5 /Giới thiệu về CSS3 Bảng kiểu bên trong (Internal/Embedded) Ví dụ <head> <meta charset="utf-8"> <title>Sample HTML5 Structure</title> . riêng biết với phần mở rộng .css External CSS được sử dụng rộng rãi cung cấp cách nhìn đồng nhất trong các trang của một Website. 16 HTML5 /Giới thiệu về CSS3 Bảng kiểu bên ngoài (external