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

Chia sẻ: 5A4F5AFSDG 5A4F5AFSDG | Ngày: | Loại File: PDF | Số trang:32

Thêm vào BST

Báo xấu

53
lượt xem 3
download

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

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.

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 Lập trình mạng: Bài 3 - Đoàn Thiện Ngân

Tổng quan CSS Định dạng hộp GV: Đ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 HTML Có 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ống thô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 - Selector Bộ 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) • Thuộc tính font-style (in nghiêng): normal (trị mặc định ban đầu), italics, oblique (tương tự như italics, nhưng nghiêng hơn) • Thuộc tính font-family (loại font): tên của một font chữ cụ thể (Arial, Times New Roman, …) hay một họ font chữ tổng quát (Serif, Monospace, …). LTM1 – CSS – 15/32
Kích thước font chữ • Thuộc tính font-size: xx-small, x-small, small, medium (trị mặc định ban đầu), large, x-large, xx- large, smaller (tương đối), larger (tương đối), trị số (12pt, 16px, 1.5em, …), trị phần trăm % (tương đối so với kích thước font chữ của phần tử cha). • Thuộc tính font-variant cho phép chuyển đổi mọi ký tự sang dạng chữ viết hoa small-caps. VD: Bộ môn Công nghệ phần mềm LTM1 – CSS – 16/32
Thuộc tính font • Thuộc tính font cho phép xác định cùng lúc tất cả thuộc tính font đã được mô tả phía trước. Giá trị thuộc tính font như sau: [ || || ] [/] • Lưu ý, thuộc tính font bắt buộc ta phải luôn xác định kích thước font chữ và họ font chữ, còn các giá trị khác là tùy chọn. VD p {font: 12pt/14pt Times, serif} div {font: italic bold x-large/150% palatino, serif} LTM1 – CSS – 17/32
Thuộc tính line-height • Thuộc tính line-height xác định khoảng cách giữa các dòng trong đoạn văn bản. • Thuộc tính line-height có thể nhận các giá trị normal, initial, inherit hay các giá trị sau: § Số hay phần trăm tương ứng với kích thước font. § Độ dài cố định theo phần tử, px, em, ... • VD: p.small { line-height: 0.5; } p.big { line-height: 2; } LTM1 – CSS – 18/32
Khoảng cách ký tự - Khoảng cách từ • Thuộc tính letter-spacing (ấn định khoảng cách giữa các ký tự. Ta có thể mở rộng hay nén văn bản, thậm chí có thể làm cho văn bản chồng lên nhau. Thuộc tính letter- spacing có thể nhận các trị sau: ü normal ü Trị độ dài (5px , +4px, 0.1em, …) • Thuộc tính word-spacing (ấn định khoảng cách giữa các từ) có thể nhận các trị sau: ü normal ü Trị độ dài (5px, -2px, 15mm, …) LTM1 – CSS – 19/32
Canh chỉnh văn bản • Thuộc tính text-align: Canh chỉnh văn bản theo chiều ngang. Thuộc tính này có các giá trị sau: left, right, center, justify • Thuộc tính vertical-align: Canh chỉnh văn bản theo chiều đứng. Thuộc tính này có các giá trị sau: text- top, text-bottom, top, middle, bottom, supper, sub, phần trăm LTM1 – CSS – 20/32