LTM1 Phan2 CSS - Chuong 4 Tong quan CSS

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề	Tổng Quan Về CSS
Trường học	Trường Đại Học XYZ
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Tài Liệu
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	35
Dung lượng	170,66 KB

Nội dung

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ảnhLớ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 [...]... 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 { text-align:... 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 giống như tên lớp có thể đặt tùy ý, tên lớp giả là các... 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 là ID • Trường hợp bộ chọn là ID kiểu CSS cũng hoạt động giống như trường hợp bộ chọn là lớp kiểu Tuy nhiên, trong cú pháp khai báo, phía trước tên ID... body {font-family:Garamond,Times,"Times New Roman",serif} 22 II CSS trong định dạng văn bản Đặc tính văn bản – kích thước • Kích thước font chữ do thuộc tính font-size quyết định Thuộc tính font-size có các giá trị sau: o xx-small o x-small o small o medium (trị mặc định ban đầu) o large o x-large o xx-large o smaller (kích thước tương đối) o larger (kích thước tương đối) o Trị số (Ví dụ font-size:12pt)... rgb(0%,100%,50%)) • Ví dụ : p { color: #ff0 044 } h1{ color: red } h2{ color: rgb(123,50,255) } 25 II CSS trong định dạng văn bản Đặc tính văn bản – 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 chữ đã đượ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... thuộc tính word-spacing Thuộc tính word-spacing có thể nhận các trị sau: o normal o Trị độ dài (VD: 5px, -2 px, 15mm) • Ví dụ đơn giản như: h1 { word-spacing: 15mm } p { word-spacing: -0 .5px } 30 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 ngang • Trong CSS, để canh chỉnh văn bản theo phương ngang (canh lề trái, lề phải hay canh giữa), ta sử dụng thuộc tính text-align Thuộc... id="tên_ID_kiểu" để áp dụng kiểu định dạng cho phần tử HTML Ví dụ : #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 đã... 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: 20; } ... Ví dụ font-size:120% (nếu kích thước phần tử cha là 12pt thì 120% sẽ dẫn đến kích thước hiện tại là 14. 4pt) 23 II CSS trong định dạng văn bản Đặc tính văn bản – chữ hoa nhỏ • Thuộc tính font-variant cho phép chuyển đổi mọi kí tự sang dạng chữ viết hoa, với những chữ đã viết hoa trước đó có kích thước lớn hơn các chữ viết thường • Thuộc tính font-variant có thể nhận các giá trị sau: o small-caps o normal... 12pt/14pt Times, serif} p {font: italic bold x-large/150% palatino, serif} 26 II CSS trong định dạng văn bản Đặc tính đoạn văn bản – chiều cao dòng • Thuộc tính line-height xác định khoảng cách giữa các dòng trong đoạn văn Thuộc tính line-height có thể nhận các trị sau: o Số (chấp nhận số thập phân) o Độ dài o Phần trăm • Trong đó, trị độ dài là những giá trị tuyệt đối (ví dụ như 1cm, 0.5in, 14mm) hoặc . 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. 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ó

Ngày đăng: 18/01/2013, 14:35

Xem thêm