Tổng quan CSS - Định dạng hộp

Tổng quan CSS Định dạng hộp GV: ĐOÀN THIỆN NGÂN LTM1 – CSS – 2/32 Nội dung •Chương 4: Tổng quan về CSS •Chương 5: Định dạng hộp LTM1 – CSS – 3/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 – 4/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 – 5/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 – 6/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 – 7/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 – 8/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 – 9/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 – 10/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 – 11/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 – 12/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 – 13/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 – 14/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 – 15/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 – 16/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 – 17/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 – 18/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 – 19/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 – 20/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 – 21/32 Trang trí văn bản • Thuộc tính text-decoration (Trang trí văn bản) có thể nhận các giá trị: none, underline, overline, line-through, blink • Thuộc tính text-transform hỗ trợ khả năng thay đổi kiểu viết hoa – thường của văn bản. Các giá trị của thuộc tính này gồm: capitalize, uppercase, lowercase, none • Màu của văn bản được xác định thông qua thuộc tính color. Giá trị của color có thể là: Tên tiếng Anh của màu (red, green, blue, yellow, ), giá trị RGB ( #rrggbb - #ff9900; #rgb - #23f; rgb(rr,gg,bb) -rgb(128,0,100); rgb(r%,g%,b%) - rgb(0%,100%,50%)) LTM1 – CSS – 22/32 Khái niệm cơ bản về định dạng hộp • Tài liệu HTML bao gồm các phần tử nằm bên trong các phần tử khác. • Ví dụ, phần tử và phần tử nằm bên trong phần tử , và phần tử lại nằm bên trong phần tử • Sắp xếp này cũng có thể được hình dung dưới dạng một mô hình hộp - box-model (hay còn gọi là phần tử chứa - container). Hộp phía ngoài cùng là phần tử HTML, khoảng giữa là những phần tử BODY, P, H1, DIV, SPAN, LTM1 – CSS – 23/32 LTM1 – CSS – 24/32 Thuộc tính lề - Margin • Có năm thuộc tính lề, trong đó có bốn thuộc tính cho phép thiết lập các lề bên trái, bên phải và phía trên, phía dưới một cách riêng biệt: margin-left, margin-right, margin-top và margin-bottom. Thuộc tính thứ năm margin là dạng viết tắt, thiết lập cùng lúc bốn giá trị lề. LTM1 – CSS – 25/32 Đường biên - Border • Khi định dạng border, ta cần quan tâm đến màu sắc, độ dày và kiểu. Ta có thể vẽ đường biên cho bất kỳ phần tử nào, kể cả các phần tử trong dòng (như , ) • Có năm thuộc tính cho phép xác lập cả ba giá trị độ dày, màu và kiểu cho một hay cùng lúc cả bốn đường biên của phần tử: border-left, border-right, border-top, border-bottom, border • Các thuộc tính hữu dụng khi cần thiết lập một khía cạnh của đường biên: border-left-color, border-right-color, border-top- color, border-bottom-color, border-color, border-left-style, border-right-style, border-top-style, border-bottom-style, border-style, border-left-width, border-right-width, border- top-width, border-bottom-width, border-width LTM1 – CSS – 26/32 Vùng đệm - Padding • Thuộc tính padding cho phép chỉ định khoảng trống giữa phần tử và đường biên: padding-top, padding-bottom, padding-left, padding-right, padding • Tương tợ margin, padding có thể lấy giá trị: üĐộ dài (5pt, 2mm, ) üPhần trăm: tham chiếu đến bề rộng của khối được chứa (10% - vùng đệm rộng 10% chiều rộng của phần tử cha). LTM1 – CSS – 27/32 Kích thước phần tử • Thuộc tính width thiết lập chiều rộng của phần tử. Gia trị: üĐộ dài (8cm, 70pt, ) üPhần trăm (80% - phần tử có kích thước 80% khối chứa). üauto: trị mặc định • Thuộc tính height thiết lập chiều cao của phần tử. Giá trị: üĐộ dài (80cm, 700px, ) üauto: trị mặc định • Theo mặc định, phần tử tự động tạo chiều cao tối thiểu cần thiết để chứa toàn bộ thông tin, Thuộc tính height thường được dùng với hình ảnh. LTM1 – CSS – 28/32 Thuộc tính float • Thuộc tính float cho phép ta canh chỉnh phần tử chứa tương đối với phần còn lại của nội dung trang. Giá trị: ünone: hiển thị phần tử tại nơi xuất hiện trong văn bản. üleft: di chuyển sang bên trái của phần tử cha. üright: di chuyển sang bên phải của phần tử cha. VD-5.11 LTM1 – CSS – 29/32 Thuộc tính position • Ta có thể bố trí phần tử thông qua thuộc tính position với các giá trị sau: üstatic: giá trị mặc định. ürelative: bố trí tương đối. üabsolute: bố trí tuyệt đối. üfixed: bố trí cố định. • Các giá trị relative, absolute và fixed cần được dùng kèm với các thuộc tính top, right, bottom và left. VD 5.13, 5.14, 5.15 LTM1 – CSS – 30/32 Tính hiển thị của phần tử • Thuộc tính visibility kiểm soát tính ẩn hay hiện phần tử, giá trị: visible, hidden • Thuộc tính display cũng kiểm soát tính ẩn hay hiện của phần tử. Tuy nhiên, trình duyệt sẽ không phân bố không gian cho các phần tử ẩn như visibility. Các giá trị của thuộc tính display: ünone: phần tử không hiển thị, không chiếm không gian. üinline: không có dấu ngắt dòng trước và sau phần tử. üblock: phần tử thể hiện theo dạng khối, có dấu ngắt dòng phía trước và sau phần tử. ülist-item: hiển thị phần tử dưới dạng danh sách. LTM1 – CSS – 31/32 Xếp lớp với thuộc tính z-index • Trong quá trình thiết kế, các phần tử có thể sẽ chồng lấp nhau trước. Tính chất này thể hiện chiều sâu của các phần tử trên trang Web. • Trong CSS, tính chất này được quyết định bởi thuộc tính z-index. • Các giá trị của thuộc tính z-index: üauto üSố nguyên (giá trị lớn nằm trên). VD-5.18 LTM1 – CSS – 32/32 Màu sắc và hình ảnh nền • Thuộc tính color được dùng để xác lập màu cho văn bản: tên tiếng Anh, giá trị RGB • Thuộc tính background-color xác lập màu nền cho phần tử: tên tiếng Anh, giá trị RGB, tranparent (trị mặc định) • Thuộc tính background-image xác lập hình nền cho phần tử: url('đường-dẫn-đến-file-ảnh'), none (mặc định) • Thuộc tính background-position xác định vị trí hình nền. • Thuộc tính background-repeat xác định hình ảnh có được lặp lại trong phần tử hay không và lặp như thế nào • Thuộc tính background-attachment xác định hình nền là cố định hay có thể cuộn cùng với các thành phần khác