A – LÝ THUYẾT
I – GIỚI THIỆU VỀ CSS
1 – CSS là gì
Trong
lĩnh vực xây dựng, chúng ta có trang trí nội thất; trong lĩnh vực thẩm mỹ - làm
đẹp, chúng ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng ta có
CSS. Đây chỉ là một cách định nghĩa giàu hình ảnh mà thôi. Còn CSS là từ viết
tắt của cụm từ sau (Cascading Style Sheets) là một ngôn ngữ quy định cách trình
bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,… Mà ở đây, cụ
thể là chúng ta dùng CSS để làm việc với HTML
2 – CSS dùng để làm gì
Trong khuôn khổ làm việc với CSS cơ bản này
thì CSS mang lại cho chúng ta những tiện ích như sau:
a)
CSS dùng
để hỗ trợ, bổ sung và hoàn thiện những điểm còn thiếu trong các văn bản HTML
b)
CSS có
thể tạo ra các khuôn mẫu bên ngoài giúp chúng ta dễ dàng sử dụng lại mã và tiết
kiệm được phần lớn thời gian và chi phí
c)
Ngoài ra
CSS còn giúp chúng ta dễ dàng trình bầy các nội dung một cách phức tạp và tinh
vi nhất
3 – Các kiến thức cũng như phần mềm liên
quan khi học CSS
a)
Để bắt
đầu làm việc với CSS trước tiên các bạn phải có chút kiến thức về ngôn ngữ HTML
b)
Tiếp
theo, để dễ dàng hơn khi làm việc với CSS và kết hợp CSS với HTML trong quá trình thiết kế, chúng ta cần sử
dụng một số Add on của Firefox như
·
Web Developer:
Thấy ngay được sự thay đổi khi chúng ta viết mã hay chỉnh sửa mã CSS ngay trên
trình duyệt
·
ColorZilla: Công cụ kiểm mầu và lấy
mầu
·
MeasureIt: Công cụ thước đo
II – MỘT SỐ QUY ƯỚC TRONG KHI LÀM VIỆC VỚI
CSS
1 – Vùng làm việc của CSS và sự ưu tiên đối
với các vùng đó
Chúng ta có 3 cách khác nhau để
nhúng mã CSS vào một tài liệu HTML
a) Cách 1: Nội tuyến (Kiểu thuộc tính)
Đây là một phương pháp nguyên thủy
nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn
áp dụng. Và dĩ nhiên trong trường hợp này chúng ta sẽ không cần Selector trong
cú pháp (Selector sẽ được học sau).
Cú pháp cơ
bản đó là:
style =
“…Vùng viết mã CSS…”
b) Cách 2: Bên trong (Thẻ Style)
Đây được xem là một cách tương đối phổ biến với những
ai mới bắt đầu làm việc với CSS
Cú pháp của nó như sau: Khai báo một vùng làm
việc bởi cặp thẻ <STYLE TYPE =
“TEXT/CSS”>…Vùng viết mã CSS…</STYLE>. Cặp thẻ này được đặt dưới
thẻ <HEAD> và trên thẻ </TITLE>
c) Cách 3: Bên ngoài (Liên kết với một File
CSS bên ngoài)
Tạo một File .CSS bên ngoài để viết
mã CSS mà không cần bỏ phần mã đó vào trong cặp thẻ <STYLE TYPE = “TEXT/CSS”></STYLE> như ở cách 2
Sử dụng một đoạn mã đặt dưới thẻ <HEAD> và trên thẻ </TITLE> trong tài liệu HTML để
gọi File CSS vào: <LINK REL =
“STYLESHEET” TYPE = “TEXT/CSS” HREF = “URL”>
Trước khi thực thi CSS cho một trang web. Trình duyệt sẽ đọc toàn bộ CSS
mà trang web có thể được áp dụng, bao gồm: CSS mặc định của trình duyệt, file
CSS bên ngoài liên kết vào trang web, CSS nhúng trong thẻ <style> và các
CSS nội tuyến. Sau đó, trình duyệt sẽ tổng hợp toàn bộ CSS này vào một CSS ảo,
và nếu có các thuộc tính CSS giống nhau thì thuộc tính CSS nào nằm sau sẽ được
ưu tiên sử dụng (cái này cũng giống như chương trình “Ai Là Triệu Phú” trên
truyền hình vậy, chỉ câu trả lời sau cùng mới được chấp nhận). Theo nguyên tắc
đó trình duyệt của bạn sẽ ưu tiên cho các CSS
nội tuyến > CSS bên trong > CSS bên ngoài > CSS mặc định của trình
duyệt.
2 – Cú pháp làm việc với CSS
Cú pháp cơ bản của CSS như sau:
Selector{Property: Value;}
Trong đó
a) Selector: Là các đối tượng mà chúng ta
sẽ áp dụng các thuộc tính trình bầy như:
·
Các thẻ HTML
·
Class hoặc Id (sẽ học ở những bài sau)
b) Property: Chính là các thuộc tính quy
định cách trình bầy. Mỗi
thuộc tính CSS phải được gán một giá trị. Nếu có nhiều hơn một thuộc tính cho
một selector thì chúng ta phải dùng một dấu ; (chấm phẩy) để phân cách các
thuộc tính. Tất cả các thuộc tính trong một selector sẽ được đặt trong một cặp
ngoặc nhọn sau selector.
c) Value: Giá trị của thuộc tính
VD:
Ngoài ra cũng giống như HTML ta cũng
có thể chú thích cho đoạn mã CSS của chúng ta bằng cú pháp sau:
/* Nội dung cần chú thích */
3 – Một số đơn vị và ý nghĩa sử dụng của
chúng trong CSS
a) Đơn
vị chiều dài
Dưới
đây là bảng một số đơn vị chiều dài mà các bnaj có thể dùng khi làm việc vơi
CSS
Đơn vị
|
Mô tả
|
%
|
Phần trăm
|
in
|
Inch (1 inch =
2.54 cm)
|
cm
|
Centimeter
|
mm
|
Milimeter
|
em
|
1 em tương
đương với kích thước font hiện hành
|
ex
|
1 ex bằng
chiều cao của chữ x in thường của font hiện hành. Do đó đơn vị này không
những phụ thuộc vào kích cỡ của font chữ mà còn phụ thuộc vào loại font chữ
|
pt
|
Point (1 pt =
1/72 inch)
|
pc
|
Pica (1 pc =
12 pt)
|
px
|
Pixels (Điểm
ảnh trên màn hình máy tính)
|
Chú ý: Thường chúng ta chỉ sử dụng đơn vị là Pixels
(px) để việc thiết kế được chuẩn xác
b) Đơn
vị mầu sắc
Trong CSS cho chúng ta thao tác vơi
mầu sắc qua 2 đơn vị đó là:
·
Tên mầu
·
Mã mầu
Chú ý: Thường chúng ta nên sử dụng đơn vị là mã mầu
để các mầu của chúng ta được hiển thị chuẩn và đa dạng
III – MỘT SỐ THUỘC TÍNH VỀ FONT NỀN
1 – Thuộc tính Background-color
a) Khái
niệm
Thuộc tính background-color giúp định màu nền cho một thành phần trên trang
web. Các giá trị mã màu của background-color
cũng giống như color nhưng có thêm giá trị Transparent
để tạo nền trong suốt.
b) Cách
sử dụng
background-color:
Tên mầu hoặc mã mầu;
2 – Thuộc tính Background-image
a) Khái
niệm
Để chèn ảnh nền vào một thành phần
trên trang web chúng ta sử dụng thuộc tính background-image
b) Cách
sử dụng
background-image:url(Đường
dẫn ảnh);
VD:
3 – Thuộc tính Background-repeat
a) Khái
niệm
Nếu sử dụng một ảnh có kích thước quá nhỏ để
làm nền cho một đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh
nền để phủ kín không gian còn thừa. Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp kiểm
soát trình trạng lặp lại của ảnh nền
b) Cách
sử dụng
background-repeat:
Value;
Value
là một trong bốn giá trị sau dây
- Repeat-x: Chỉ lặp lại ảnh theo phương ngang
- Repeat-y: Chỉ lặp lại ảnh theo phương dọc
- Repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định
- No-repeat: Không lặp lại ảnh
4 – Thuộc tính Background-attachment
a) Khái
niệm
Background-attachment là
một thuộc tính cho phép bạn xác định tính cố định của ảnh nền so với với nội
dung trang web
b) Cách
sử dụng
background-attachment:
Value;
Value
là một trong các giá trị sau:
- Scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định
·
Fixed: Cố định ảnh nền so với nội dung trang web.
Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web
5 – Thuộc tính Background-position
a) Khái
niệm
Theo mặc định ảnh nền khi được chèn sẽ nằm ở
góc trên, bên trái màn hình. Tuy nhiên với thuộc tính background-position bạn
sẽ có thể đặt ảnh nền ở bất cứ vị trí nào (trong không gian của thành phần mà
nó làm nền)
Background-position sẽ dùng một cặp 2 giá
trị để biểu diễn tọa độ đặt ảnh nền. Có khá nhiều kiểu giá trị cho thuộc tính
position. Như đơn vị chính xác như centimeters, pixels, inches,… hay các đơn vị
qui đổi như %, hoặc các vị trí đặt biệt như top, bottom, left, right
b) Cách
sử dụng
background-position:
Value_1 Value_2;
- Value_1: là đơn vị chiều dài canh lề bên trái
- Value_2: là đơn vị chiều dài canh lề bên trên
- Hoặc Value_1, Value_2: Nhận một trong các giá
trị (Top, Left, Right, Bottom)
B – THỰC HÀNH
I – BÀI TẬP THỰC HÀNH
1 – Bài tập
Bài 1
Sử dụng tối đa các kiến thức về CSS
để thiết kế mẫu Layout như hình dưới đây.
·
Độ rộng của website là 800px
·
Độ cao của banner là 80px
·
Độ rộng của menu trái là 200px
·
Độ cao của footer là 60px
Đáp án:
<html>
<head>
<title>Bài 1</title>
<style type="text/css">
body{
background-image:url(images/background.jpeg);
background-attachment:fixed;
}
a{
color:#000000;
}
</style>
</head>
<body>
<table width="800" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color:#FF6600" height="80" colspan="2" align="center" valign="middle"><font size="+1" color="#FFFFFF"><b>TRUNG TÂM ĐÀO TẠO TRỰC TUYẾN LẬP TRÌNH - THIẾT KẾ - ĐỒ HỌA - WEB</b></font></td>
</tr>
<tr>
<td style="background-color:#FFFFFF" height="30" colspan="2"><a href="#">Trang Chủ</a> | <a href="#">Giới Thiệu</a> | <a href="#">Tin Tức</a> | <a href="#">Liên Hệ</a> | <a href="#">Diễn Đàn</a></td>
</tr>
<tr>
<td style="background-color:#FF9900" width="200" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="26" align="center"><b style="color:#FFFFFF">Danh Mục Chính</b></td>
</tr>
<tr>
<td height="25"><a href="#">Đào tạo CNTT</a></td>
</tr>
<tr>
<td height="25"><a href="#">Tư vấn kinh doanh</a></td>
</tr>
<tr>
<td height="25"><a href="#">Dịch vụ nhà hàng ăn uống</a></td>
</tr>
<tr>
<td height="25"><a href="#">Dịch vụ cưới</a></td>
</tr>
</table>
<p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/banner-hotfile-200x300.png" /></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/callsdirect-200x300-banner3.jpg" /></td>
</tr>
</table>
</p>
</td>
<td width="600" align="justify"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer interdum sem ac magna. Integer in lectus sed ligula commodo commodo. In molestie, neque et porta lobortis, ligula sem auctor mauris, a luctus lacus quam sit amet augue. Aliquam eu felis. Nullam vel erat. Phasellus erat nibh, nonummy sit amet, lobortis quis, imperdiet ornare, dolor. Nunc odio. Nulla eros neque, egestas ut, auctor eu, luctus vitae, nisi. Aenean malesuada leo a nunc. Etiam fermentum neque in justo. Aliquam erat volutpat. Aenean tellus eros, consectetuer ut, hendrerit ut, rutrum at, nunc. Integer dolor odio, posuere nec, molestie at, tincidunt at, lacus. Maecenas at nibh. </p>
<p>Nullam tellus pede, eleifend posuere, dignissim id, euismod vitae, tortor. Pellentesque vel mauris. Phasellus dictum rutrum lectus. Vestibulum a risus at orci egestas condimentum. Morbi in turpis vel ante feugiat placerat. Vestibulum justo lacus, pulvinar at, gravida quis, condimentum et, pede. Suspendisse sit amet turpis in mauris porttitor pulvinar. Phasellus odio lacus, volutpat at, ullamcorper sit amet, elementum nec, sapien. Fusce orci sem, venenatis a, pellentesque sit amet, elementum quis, orci. Ut vulputate dolor id lectus. Curabitur non neque. Quisque libero. </p>
<p>Integer molestie, mi tincidunt rutrum convallis, tellus justo fringilla orci, vitae iaculis turpis nunc a lorem. Sed tortor dui, imperdiet eu, volutpat vestibulum, posuere vel, urna. Cras sed pede in arcu consequat vehicula. Nunc eget neque et diam rutrum egestas. Nam interdum justo quis ligula. Vestibulum fringilla placerat leo. Proin rutrum. Nunc ullamcorper lectus sit amet diam. Duis congue ligula a mauris. Etiam nonummy odio ut leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi rhoncus, erat ut accumsan euismod, erat diam egestas lacus, pulvinar placerat justo augue eget augue. Etiam dui elit, elementum facilisis, auctor in, feugiat non, nibh. Donec diam ipsum, interdum eget, auctor in, bibendum id, turpis. Cras dapibus, diam sit amet mattis interdum, turpis neque pellentesque turpis, et rhoncus velit mi in nisi. Ut ullamcorper convallis turpis. Donec ligula risus, imperdiet vel, auctor quis, dapibus at, orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. </p>
<p>Nunc eleifend nulla vel orci. Donec sollicitudin. Phasellus urna. Sed sit amet nisi tincidunt quam porta placerat. Phasellus sit amet metus et neque tincidunt porta. Mauris lorem lorem, faucibus sit amet, lobortis non, eleifend eget, massa. Duis odio massa, condimentum sed, fringilla quis, tincidunt quis, mi. Proin et diam. Fusce tortor metus, imperdiet at, vestibulum sed, feugiat et, erat. Cras in tortor. Integer a dui. </p>
<p>Donec nibh leo, tristique vel, vehicula vitae, commodo sed, augue. Suspendisse mi libero, egestas at, faucibus at, eleifend nec, eros. Aliquam posuere ipsum sit amet nunc. Pellentesque orci lacus, commodo tincidunt, eleifend ut, egestas in, ligula. Suspendisse lacus nibh, congue et, auctor accumsan, porta non, metus. Integer tempus ligula ut mauris. Donec sollicitudin, sapien in luctus adipiscing, risus urna pharetra nisl, in vehicula dui mauris in lectus. Sed eget nunc. Nulla a tellus. Proin tristique viverra urna. Donec ac velit. Vestibulum ipsum ligula, placerat mollis, fermentum vitae, consectetuer id, libero. Vivamus orci. Donec lacus leo, lacinia a, sodales egestas, rutrum sed, elit. Suspendisse adipiscing. Nulla facilisi. Quisque in libero vel turpis semper consequat. </p>
</td>
</tr>
<tr>
<td style="background-color:#333333; color:#FFFFFF;" height="60" colspan="2" align="center" valign="middle"><font size="-1">footer</font></td>
</tr>
</table>
</body>
</html>
>>Xem bài trước: Bài 5 - LÀM VIỆC VỚI FORM VÀ CÁC ĐỐI TƯỢNG TRONG FORM
No comments:
Post a Comment