Tổng quan CSS
Phần 2: CSSChương 4 : Tổng quan CSSTổng quan về CSS1 I. TỔNG QUAN VỀ CSS•CSS là từ viết tắt của cụm từ Cascading Style Sheets.•CSS định nghĩa cách hiển thị của các tài liệu viết bằng ngôn ngữ đánh dấu như HTML.•Chẳng hạn, ta có thể dùng CSS để đị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 được thiết kế với mục đích 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 (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. •Đặc tả của CSS hiện đang được quản lý bởi tổ chức World Wide Web Consortium (W3C).CSS là gì ?2 I. TỔNG QUAN VỀ CSSCú pháp CSS gồm 3 thành phần: •Bộ chọn (selector): xác định loại phần tử bị ảnh hưởng bởi các định dạng chỉ định. Bộ chọn có thể là tên các phần tử HTML (ví dụ: body, p, h1, h2, …), các lớp kiểu do ta xây dựng, …•Thuộc tính (property): thể hiện tính chất định dạng. Đi kèm với thuộc tính là giá trị định dạng, giữa thuộc tính và giá trị là dấu hai chấm phân cách.•Giá trị (value) Các cặp thuộc tính và giá trị được phân cách bởi dấu chấm phẩy. Ta không cần thêm dấu chấm phẩy sau lần khai báo thuộc tính – giá trị cuối cùng.Cú pháp CSSbộ_chọn { thuộc_tính_1: giá_trị;thuộc_tính_2: giá_trị; . } 3 I. TỔNG QUAN VỀ CSS•Chú thích (comment) được dùng để giải thích nội dung mã định dạng CSS, nhằm mục đích dễ chỉnh sửa sau này. Nội dung bao bọc bởi dấu chú thích sẽ được trình duyệt sẽ bỏ qua. Chú thích CSS bắt đầu với dấu "/*" và kết thúc bằng dấu "*/":/* nội dung chú thích */ •Ví dụ :/* Chu thich cho phan tu p */ p { text-align: center; /* Dung mau chu den va font Arial */ color: black; font-family: arial; } Chú thích trong CSS4 I. TỔNG QUAN VỀ CSS•Thông tin CSS có thể được khai báo trong trang HTML theo các dạng sau: •Inline CSS : bên trong một thẻ HTML •Internal CSS: Trong phần đầu tài liệu HTML (head), nằm trong khối <style>. •External CSS: Trong tập tin riêng, có thể dùng chung cho nhiều trang HTML.Khai báo sử dụng CSS trong HTML5 I. TỔNG QUAN VỀ CSS•Inline CSSInline 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ẻ. <tênthẻ style="thuộc-tính:giá-trị;… "> Kiểu định dạng này chỉ được áp dụng tại vị trí khai báo định dạng. Ví dụ :<h1 style="color:red; text-align:right;">Khoa THQL </h1><h1> Bộ môn CNPM </h1> Kết quả: cả hai khối văn bản Khoa THQL và Bộ môn CNPM đều có định dạng của thẻ <h1>, nhưng chỉ có khối văn bản Khoa THQL có thêm định dạng CSS màu đỏ và canh lề phải. Khai báo sử dụng CSS trong HTML6 I. TỔNG QUAN VỀ CSS•External CSSoExternal CSS là khai báo CSS trong một tập tin riêng. oCác trang trong website sẽ liên kết đến tập tin CSS này.oThao 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 rất đơn giản, nhanh chóng. oĐể áp dụng cách khai báo External CSS, trước tiên ta tạo tập tin CSS. Tập tin này chỉ chứa các định dạng CSS, không chứa thẻ HTML. oSau đó, trong mỗi trang web cần áp dụng những định dạng CSS đã được định nghĩa trong tập tin trên, ta dùng thẻ <link> để liên kết:<link rel="stylesheet" type="text/css" href="mystyle.css" /> Lưu ý, tập tin CSS nên có đuôi mở rộng là .css. Khai báo sử dụng CSS trong HTML7 I. TỔNG QUAN VỀ CSS•External CSSoVí dụ :Khai báo sử dụng CSS trong HTMLltm1.html:<html> <head> <link rel=stylesheet type="text/css" href="thql.css"/> </head> <body> <h1> Đề cương môn học LTM1</h1><h2> HTML </h2><h2> CSS </h2><h2> Javascript </h2></body></html> csdl.html:<html> <head> <link rel=stylesheet type="text/css" href="thql.css"/> </head> <body> <h1> Đề cương môn học CSDL</h1><h2> Quan hệ </h2><h2> Dạng chuẩn </h2><h2> Phụ thuộc hàm </h2></body></html> thql.css: h1 { color: red; text-align: center; } h2 { color: blue; }8 I. TỔNG QUAN VỀ CSS•Trong phần trình bày cú pháp CSS, chúng tôi đã giới thiệu sơ bộ về thuật ngữ bộ chọn CSS (selector). Nhiệm vụ của bộ chọn CSS là xác định loại phần tử áp dụng định dạng. Bộ chọn CSS có thể là: Phần tử HTML Lớp kiểu CSS ID kiểu CSS Bộ chọn ngữ cảnhLớp giả CSSBộ chọn CSS9 I. TỔNG QUAN VỀ CSS•Bộ chọn này sử dụng tên các phần tử HTML. Khi đó, định dạng CSS sẽ được áp dụng cho phần tử HTML đã chỉ định.Ví dụ :h1 {color: green;text-align: center }•Ở ví dụ này, bộ chọn là phần tử HTML <h1>, như vậy, tất cả những phần tử <h1> xuất hiện trong trang web sẽ có định dạng của tiêu đề H1, kèm theo định dạng CSS màu xanh lá và được canh giữa.•Trong trường hợp có nhiều quy tắc kiểu giống nhau như sau:h1 { color: green }h2 { color: green }h3 { color: green }Bộ chọn CSS là phần tử HTMLTa có thể gôm nhóm h1, h2, h3 { color: green }10 [...]... 12 I TỔNG QUAN VỀ CSS Bộ chọn CSS là lớp • Xây dựng lớp kiểu áp dụng cho nhiều loại phần tử HTML o Cú pháp khai báo lớp kiểu CSS tên_lớp_kiểu _CSS { thuộc_tính: giá_trị; } Lưu ý, với bộ chọn là lớp kiểu, ta cần thêm dấu chấm phía trước tên lớp o Áp dụng lớp kiểu CSS thông qua thuộc tính class của thẻ HTML ………… 13 I TỔNG QUAN VỀ CSS Bộ chọn CSS. .. của thẻ 11 I TỔNG QUAN VỀ CSS Bộ chọn CSS là lớp • Nhiều lớp kiểu CSS áp dụng cho một loại phần tử HTML o Cú pháp khai báo 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ị; } o Áp dụng lớp kiểu CSS thông qua thuộc tính class của thẻ HTML ……… Ví dụ : p.right... 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 17 I TỔNG QUAN VỀ CSS Bộ chọn CSS là lớp giả • 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... type="text /css" > #emphasize { color: red; font-weight: bold; } Lịch thi môn LTM1: 7g ngày 01/01/2008 14 I TỔNG QUAN VỀ CSS Bộ chọn CSS là ngữ cảnh • Trong CSS, nhằm giảm bớt công sức của người thiết kế, các phần tử con kế thừa các định dạng đã có của phần tử cha Như vậy, thay vì xây dựng kiểu định dạng cho tất cả phần tử, ta chỉ... đoạn văn bản có một phần in nghiêng Màu xanh Màu đỏ 16 I TỔNG QUAN VỀ CSS Bộ chọn CSS là ngữ cảnh • Nếu ta muốn định dạng màu xanh cho khối văn bản 'in nghiêng' bên trên (phần văn bản vừa áp dụng thẻ , mà đồng thời được bao bọc thêm bởi thẻ ), thì làm thế nào? • Bộ chọn ngữ cảnh được sử dụng khi cần áp dụng kiểu định dạng CSS cho một loại phần tử trong một ngữ cảnh xác định (phần tử áp...I TỔNG QUAN VỀ CSS Bộ chọn CSS là lớp CSS cung cấp khái niệm lớp kiểu nhằm giúp cho việc định dạng được linh động, phong phú hơn • Với lớp kiểu, o Ta có thể xây dựng nhiều lớp kiểu định dạng cho một loại phần tử HTML Sau... những liên kết ở trạng thái hoạt động (đang được nhấn chọn) a:active 18 I TỔNG QUAN VỀ CSS Bộ chọn CSS là lớp giả • Để các trạng thái này hoạt động hiệu quả, o Lớp giả a:hover phải được khai báo sau lớp giả a:link và a:visisted o Lớp giả a:active phải được khai báo sau lớp giả a:hover • Ví dụ : a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF}... khối văn bản nằm giữa cặp thẻ sẽ thừa kế định dạng style màu xanh từ phần tử thẻ bao bọc bên ngoài Đây là đoạn văn bản có một phần in nghiêng Màu xanh Màu xanh 15 I TỔNG QUAN VỀ CSS Bộ chọn CSS là ngữ cảnh • Sau đó, nếu ta bổ sung thêm định dạng style cho phần tử thẻ , lúc này thẻ và có màu sắc khác nhau như sau: p {color: blue; } i {color: red; } • Theo khai báo này,... Tế 19 II CSS trong định dạng văn bản Đặc tính văn bản – in đậm • Thuộc tính CSS quyết định tính chất in đậm của văn bản là font-weight Thuộc tính font-weight có các giá trị sau: o lighter o normal (trị mặc định ban đầu) o bold o bolder o Các trị số từ 100 – 900 Trong đó 100 là nhạt nhất, còn 900 là đậm nhất • Ví dụ : tieude{ font-weight: bold; font-size:... 50% (cao hơn 50% so với dòng chuẩn) 32 II CSS trong định dạng văn bản Đặc tính đoạn văn bản – canh chỉnh theo chiều đứng • Ví dụ : tm { vertical-align: top; font-size: 50%; font-weight: bold; } Xerox tm la nhan hieu thuong mai cua tap doan Xerox. 33 II CSS trong định dạng văn bản Đặc tính đoạn . Phần 2: CSSChương 4 : Tổng quan CSSTổng quan về CSS1 I. TỔNG QUAN VỀ CSS CSS là từ viết tắt của cụm từ Cascading Style Sheets. CSS định nghĩa cách. thêm định dạng CSS màu đỏ và canh lề phải. Khai báo sử dụng CSS trong HTML6 I. TỔNG QUAN VỀ CSS External CSSoExternal CSS là khai báo CSS trong một tập