LTM1 Phan2 CSS - Chuong 4 Tong quan CSS
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (204.66 KB, 35 trang )
Phần 2: CSS
Chương 4 : Tổng quan CSS
Tổng quan về CSS
1
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Ề CSS
Cú 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 CSS
bộ_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 CSS
4
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 HTML
5
I. TỔNG QUAN VỀ CSS
•
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ẻ.
<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 HTML
6
I. TỔNG QUAN VỀ CSS
•
External CSS
o
External CSS là khai báo CSS trong một tập tin riêng.
o
Các trang trong website sẽ liên kết đến tập tin CSS này.
o
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 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.
o
Sau đó, 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 HTML
7
I. TỔNG QUAN VỀ CSS
•
External CSS
o
Ví dụ :
Khai báo sử dụng CSS trong HTML
ltm1.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ả CSS
Bộ chọn CSS
9
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ử HTML
Ta có thể gôm nhóm
h1, h2, h3 { color: green }
10
I. TỔNG QUAN VỀ CSS
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 đó với từng vị trí xuất hiện của phần tử
HTML này, ta xác định lớp kiểu áp dụng thông qua thuộc
tính class.
o
Ta có thể tạo một lớp định dạng riêng, và chủ động áp dụng
lớp định dạng này cho các loại phần tử HTML thông qua
thuộc tính class của thẻ.
Bộ chọn CSS là lớp
11
I. TỔNG QUAN VỀ CSS
•
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
<tên-thẻ-HTML class="tên_lớp_kiểu_CSS" >
……… </tên-thẻ-HTML>
Ví dụ :
<html><head> <style type="text/css">
p.right { text-align: right}
p.center { text-align: center}
</style> </head> <body>
<p class="right“> Đây là đoạn văn bản được canh lề phải. </p>
<p class="center“> Đây là đoạn văn bản được canh giữa. </p>
</body></html>
Bộ chọn CSS là lớp
12
I. TỔNG QUAN VỀ CSS
•
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
<tên-thẻ-HTML class="tên_lớp_kiểu_CSS" >
………… </tên-thẻ-HTML>
Bộ chọn CSS là lớp
13
I. TỔNG QUAN VỀ CSS
•
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
kiểu phải là dấu #. Đồng thời trong phần thân body, 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.
Ví dụ :
<html><head> <style type="text/css">
#emphasize {
color: red;
font-weight: bold; }
</style> </head> <body>
<p> Lịch thi môn LTM1:
<span id="emphasize"> 7g ngày 01/01/2008 </span>
</p> </body> </html>
Bộ chọn CSS là ID
14
