Bài giảng Lập trình mạng: Bài 3 - Đoàn Thiện Ngân

Bài 3 trình bày tổng quan về CSS và định dạng hộp. Trong chương này người học sẽ tìm hiểu những nội dung sau: CSS là gì? Cú pháp CSS, khai báo CSS trong HTML, Inline CSS, Internal CSS, bộ chọn CSS - selector, lớp kiểu CSS, bộ chọn ID kiểu CSS,... Mời các bạn cùng tham khảo.
Nội dung trích xuất từ tài liệu:
Bài giảng Lập trình mạng: Bài 3 - Đoàn Thiện NgânTổng quan CSSĐịnh dạng hộpGV: ĐOÀN THIỆN NGÂN Nội dung• Chương 4: Tổng quan về CSS• Chương 5: Định dạng hộp LTM1 – CSS – 2/32 CSS là gì?• CSS - Cascading Style Sheets.• CSS định nghĩa cách hiển thị như định dạng màu, font chữ và cách trình bày của các thành phần trong trang Web.• CSS giúp tách biệt phần nội dung (viết bằng ngôn ngữ HTML) với phần trình bày và hiển thị (viết bằng ngôn ngữ CSS) của tài liệu.• Sự tách biệt này giúp tăng khả năng truy xuất nội dung tài liệu, tăng tính uyển chuyển và làm đơn giản, cũng như giảm bớt sự lặp lại các thẻ định dạng trong tài liệu. LTM1 – CSS – 3/32 Cú pháp CSS• Comment: /* comment - chú thích */• 3 thành phần: Bộ chọn (selector), Thuộc tính (Property) và giá trị (Value) bộ_chọn { thuộc_tính_1: giá_trị; thuộc_tính_2: giá_trị; ... } LTM1 – CSS – 4/32 Khai báo CSS trong HTMLCó 3 cách sử dụng CSS :• Inline CSS : Bên trong một thẻ HTML• Internal CSS: Trong phần head của tài liệu HTML, nằm trong khối .• External CSS: Trong tập tin riêng (*.css), thường để dùng chung cho nhiều trang HTML. LTM1 – CSS – 5/32 Inline CSS• Inline CSS là cách định dạng CSS trực tiếp bên trong thẻ HTML, thông qua thuộc tính style của thẻ. • Kiểu định dạng này chỉ được áp dụng tại vị trí khai báo định dạng.Ví Dụ: Khoa Hệ thốngthông tin kinh doanh Bộ môn Công Nghệ Phần Mềm LTM1 – CSS – 6/32 Internal CSS• Internal CSS khai báo định dạng CSS trong phần head của tài liệu HTML, bên trong khối .• Với cách khai báo này, định dạng CSS được áp dụng cho tất cả các phần tử thuộc một dạng thẻ HTML hay một lớp kiểu nào đó. VD-4.4 LTM1 – CSS – 7/32 External CSS• External CSS là cách khai báo định dạng CSS trong một tập tin riêng. VD-4.5• Các trang trong website sẽ liên kết đến tập tin CSS này để có kiểu định dạng thống nhất cho toàn bộ website.• Với external CSS, thao tác chỉnh sửa kiểu định dạng cho các phần tử HTML hay những phần tử có cùng kiểu định dạng CSS cũng rất đơn giản, nhanh chông• Tập tin CSS chỉ chứa các định dạng CSS, không chứa thẻ HTML. Tập tin HTML dùng thẻ trong phần head LTM1 – CSS – 8/32 Bộ chọn CSS - SelectorBộ chọn CSS có thể là:• Phần tử HTML: h1, h2, p, body, div, span, …• Lớp kiểu CSS• ID kiểu CSS• Bộ chọn ngữ cảnh• Lớp giả CSS LTM1 – CSS – 9/32 Lớp kiểu CSS - 1• Lớp kiểu CSS dành riêng cho một loại phần tử HTML tên_thẻ_HTML.tên_lớp_kiểu_CSS { thuộc_tính: giá_trị; … }• Áp dụng lớp kiểu CSS thông qua thuộc tính class của thẻ HTML ……… LTM1 – CSS – 10/32 Lớp kiểu CSS - 2• Lớp kiểu áp dụng cho nhiều loại phần tử HTML .tên_lớp_kiểu_CSS { thuộc_tính: giá_trị; … }• Áp dụng lớp kiểu CSS thông qua thuộc tính class của thẻ HTML ……… LTM1 – CSS – 11/32 Bộ chọn ID kiểu CSS• Bộ chọn ID kiểu CSS cũng hoạt động tương tợ như bộ chọn là lớp kiểu, nhưng chú ý khác cách khai báo.• Trong cú pháp khai báo, phía trước tên ID kiểu phải là dấu #, ta dùng thuộc tính id=tên_ID_kiểu để áp dụng kiểu định dạng cho phần tử HTML.#emphasize { color: red; font-weight: bold; } … Bộ chọn ID kiểu CSS LTM1 – CSS – 12/32 Bộ chọn ngữ cảnh• Trong CSS, các phần tử con kế thừa các định dạng đã có của phần tử cha.• Bộ chọn ngữ cảnh bao gồm từ hai hay nhiều bộ chọn đơn, phân cách nhau bởi khoảng trắng. Thứ tự xuất hiện của các bộ chọn đơn trong bộ chọn ngữ cảnh phụ thuộc vào yêu cầu định dạng ngoại lệ cho phần tử con trong phần tử cha. VD: üdiv p { background: green} ü.reddish H1 { color: red } ü#abc p { background: blue } LTM1 – CSS – 13/32 Bộ chọn lớp giả CSS• Lớp giả CSS (pseudo-classes) là lớp định dạng kiểu cho một trạng thái cụ thể của thẻ.• Cú pháp khai báo lớp giả CSS như sau:selector:pseudo-class {thuộc-tính: giá-trị; …}selector.class:pseudo-class {thuộc-tính: giá-trị; …}• Lưu ý, không giống như tên lớp có thể đặt tùy ý, tên lớp giả là các từ khóa đã được quy định trước.• VD các lớp giả chỉ định trạng thái của siêu liên kết: a:link; a:visited; a:hover; a:active LTM1 – CSS – 14/32 CSS trong định dạng văn bản• Thuộc tính font-weight (in đậm): lighter, normal (trị mặc định ban đầu), bold, bolder, các trị số từ 100 – 900 (100 nhạt nhất, 900 đậm nhất)• T ...