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
Trang 2© 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 CSSPhần tử bảng kiểu (Style Sheet Element)
Cú pháp của qui tắc kiểu
Mô tả các loại style sheet
Mô tả các bộ chọn (selector) khác nhau.Chú thích
Thuộc tính Text và Font
Trang 3© Aptech Ltd
Bảng kiểu (Style Sheet)
Một bảng kiểu là một tập các qui tắc, miêu tả việc trình bày dữ liệu trong tài liệu HTML
Trang 4© Aptech Ltd
Bảng kiểu xếp chồng (Cascading Style Sheet)
CSS là một ngôn ngữ định kiểu, đưa ra các
chỉ thị để miêu tả cách trình bày nội dung
trong trang HTML
Mục đích CSS là tách biệt giữa phần nội
dung và phần định dạng của trang Web
Phần định dạng có thể lưu trong một file
riêng biệt có phần mở rộng css
Khi hiển thị trang HTML, trình duyệt sẽ xác
định file css cho trang và áp dụng các qui
tắc trong file css cho các phần tử
Trang 5© Aptech Ltd
Bảng kiểu xếp chồng (Cascading Style Sheet)
Thuận lợi của CSS
Tái sử dụng mã (code): CSS tiết kiệm thời
gian bằng việc viết chỉ thị định dạng một
lần và áp dụng cho nhiều trang.
Giảm mã HTML: CSS giúp giảm kích thước
mã trong file HTML do các chỉ thị định dạng
được đặt trong file khác.
Độc lập thiết bị: CSS được thiết kế để
cung cấp cho người đọc Web có cái nhìn
(look) giống nhau khi trang được hiển trị
trên nhiều thiết bị khác nhau.
Trang 6giá_trị (value): là giá trị gán cho thuộc tính, mỗi thuộc_tính
của CSS có thể có nhiều giá trị thuộc_tính và giá_trị được phân cách bởi dấu :
bộ_chọn{thuộc_tính:giá trị; }
Trang 7© 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ỉ ra nhiều thuộc tính, giá trị trong một khai báo cho một bộ chọn
Chỉ ra một thuộc tính, giá trị trong một khai báo cho nhiều bộ chọn
Chỉ ra nhiều thuộc tính, giá trị, trong một khai báo cho nhiều bọ chọn
Trang 9Quy định cụ thể 'x-height' của một phông chữ đặc biệt Giá trị height' là khoảng một nửa kích thước font chữ hoặc chiều cao của chữ thường 'x'.
hình của thiết bị.
Bảng dưới đây liệt kê một số đơn vị chiều dài tương đối.
Trang 10 Bảng dưới đây liệt kê một số đơn vị độ dài tuyệt đối.
Trang 12© Aptech Ltd
Building Dynamic Web Sites / 12 of 21
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):
là các kiểu viết trong thuộc tính style của các phần tử HTML
Bảng kiểu bên trong (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
Trang 13Không thể tái sử dụng tại bất kỳ vị trí nào trong trang
Người thiết kế web không thể
Trang 14© Aptech Ltd
14
HTML5 /Giới thiệu về CSS3
Bảng kiểu bên trong (Internal/Embedded)
Mã style được đặt bên trong đoạn <head> của một trang Web cụ thể
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
Các style có thể được tái sử dụng trong cùng một trang Web mà chúng được đặt
Internal Styles
Loại thuộc tính của phần
tử style xác định loại nội dung, đó là text / css
Trang 15© Aptech Ltd HTML5 /Giới thiệu về CSS3
Bảng kiểu bên trong (Internal/Embedded)
font-size:1.5em;
} footer{
background-color:#999;
text-align:center;
} </style>
</head>
15
Trang 16© Aptech Ltd
Loại External
External CSS được định nghĩa trong một file 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 style sheet)
Mang đến sự thuận tiện khi các kiểu có thể dùng chọn cho nhiều trang HMTL
Ví dụBODY { background-color: gray;
font-family: arial;
font-style: italic;
}
Trang 17© Aptech Ltd
Building Dynamic Web Sites / 17 of 21
Bảng kiểu bên ngoài (external style sheet)
Sử dụng bảng kiểu bên ngoài
Trang 18© Aptech Ltd HTML5 /Giới thiệu về CSS3
Bảng kiểu bên ngoài (external style sheet)
Trang 19© 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 phần tử HTMLThứ 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
Trang 20ID selectorUniversal selector
Trang 21Kết quả trong ứng dụng của kiểu chi r ra quy định cho tất
cả sự xuất hiện của phần tử
đó trong một trang web
Trang 22và khối khai báo
Áp dụng kiểu cho nội dung của tất cả những phần tử có thuộc tính cùng thuộc tính class
Khi áp dụng, tên của bộ chọn class được chỉ ra
trong thuộc tính class của phần tử HTML
Trang 23© Aptech Ltd
Các loại bộ chọn
ID selector
Tên bộ chọn ID được bắt đầu bằng kí tự (#)
Khi áp dụng, tên của bộ chọn ID được chỉ ra trong thuộc tính ID của phần tử HTML.
Phù hợp với phần tử mà
thuộc tính id được thiết
lập trong trang HTML
Bộ chọn Id bắt đầu với biểu tượng (#) theo sau là giá trị của thuộc tính id và
khối khai báo
Áp dụng các kiểu cho nội dung của tất cả các phần tử đó
Trang 25© Aptech Ltd
Các loại bộ chọn
Một trang 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
Trang 26© Aptech Ltd
Building Dynamic Web Sites / 26 of 21
Chú thích trong CSS
