Giáo trình thiết kế và cấu hình website (nghề quản trị mạng máy tính trình độ cao đẳng)
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 (2.99 MB, 91 trang )
ỦY BAN NHÂN DÂN TỈNH AN GIANG
TRƢỜNG CAO ĐẲNG NGHỀ AN GIANG
GIÁO TRÌNH
Thiết kế và cấu hình website
NGHỀ QUẢN TRỊ MẠNG MÁY TÍNH
Trình độ cao đẳng
(Ban hành theo Quyết định số: 70 /QĐ-CĐN ngày 11 tháng 01 năm 2019
của Hiệu trưởng trường Cao đẳng nghề An Giang)
Tên tác giả: Đổ Văn Nhớ
Năm ban hành: 2018
1
TUYÊN BỐ BẢN QUYỀN
Tài liệu này thuộc loại sách giáo trình nên các nguồn thơng tin có thể
đƣợc phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và
tham khảo.
Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh
doanh thiếu lành mạnh sẽ bị nghiêm cấm.
LỜI GIỚI THIỆU
Trong những năm qua, dạy nghề đã có những bƣớc tiến vƣợt bậc cả về số
lƣợng và chất lƣợng, nhằm thực hiện nhiệm vụ đào tạo nguồn nhân lực kỹ
thuật trực tiếp đáp ứng nhu cầu xã hội. Cùng với sự phát triển của khoa học
công nghệ trên thế giới, lĩnh vực Công nghệ thơng tin nói chung và ngành
Quản trị mạng ở Việt Nam nói riêng đã có những bƣớc phát triển đáng kể.
Chƣơng trình dạy nghề Quản trị mạng đã đƣợc xây dựng trên cơ sở phân
tích nghề, phần kỹ năng nghề đƣợc kết cấu theo các môđun. Để tạo điều kiện
thuận lợi cho các cơ sở dạy nghề trong quá trình thực hiện, việc biên soạn giáo
trình theo các mơđun đào tạo nghề là cấp thiết hiện nay.
Mô đun 20: Thiết kế và cấu hình website là mơ đun đào tạo chun mơn
nghề đƣợc biên soạn theo hình thức tích hợp lý thuyết và thực hành. Trong
q trình thực hiện, nhóm biên soạn đã tham khảo nhiều tài liệu Thiết kế
website trong và ngoài nƣớc, kết hợp với kinh nghiệm trong thực tế.
Mặc dầu có rất nhiều cố gắng, nhƣng khơng tránh khỏi những khiếm
khuyết, rất mong nhận đƣợc sự đóng góp ý kiến của độc giả để giáo trình
đƣợc hồn thiện hơn.
Xin chân thành cảm ơn!
An Giang, ngày 15 tháng 04 năm 2018
Tham gia biên soạn
Đổ Văn Nhớ
2
MỤC LỤC
ĐỀ MỤC
TRANG
LỜI GIỚI THIỆU ................................................................................................... 2
BÀI 1: NGÔN NGỮ HTML ................................................................................... 7
I. KHÁI QUÁT VỀ TRANG WEB .................................................................... 7
II. CẤU TRÚC CƠ BẢN CỦA TRANG WEB ................................................. 8
III. CÁC THẺ HTML CƠ BẢN ......................................................................... 8
BÀI 2: CSS CƠ BẢN ............................................................................................. 11
I. LẬP KẾ HOẠCH VÀ QUẢN LÝ, THAO TÁC TRÊN WEBSITE.......... 11
II. CÚ PHÁP CHUNG ....................................................................................... 12
III. CÁC ĐỊNH DẠNG CSS ............................................................................. 12
Bài 3: CÀI ĐẶT VÀ SỬ DỤNG JOOMLA ........................................................ 27
I. CÀI ĐẶT VÀ CẤU HÌNH JOOMLA .......................................................... 27
II. SỬ DỤNG CÁC CHỨC NĂNG CHÍNH CỦA JOOMLA. ....................... 38
III. CÀI ĐẶT VÀ SỬ DỤNG COMPONENT, MODULE, PLUGIN VÀ
TEMPLATE. ...................................................................................................... 45
BÀI 4: SỬ DỤNG CÁC ĐỐI TƢỢNG JOOMLA ............................................. 58
I. SỬ DỤNG CÁC ĐỐI TƢỢNG HỖ TRỢ LẬP TRÌNH JOOMLA. ......... 58
II.TÌM HIỂU CẤU TRÚC TỔ CHỨC THƢ MỤC JOOMLA. .................... 59
III. TÌM HIỂU CẤU TRÚC URI. .................................................................... 61
IV. LÀM VIỆC VỚI CÁC ĐỐI TƢỢNG: REQUEST, FACTORY,
SESSION,............................................................................................................ 61
BÀI 5: QUẢN TRỊ CƠ SỞ DŨ LIỆU TRONG JOOMLA ............................... 63
I. CẤU HÌNH KẾT NỐI CƠ SỞ DỮ LIỆU TRONG JOOMLA. ................. 63
II. SỬ DỤNG CÁC HÀM TRUY VẤN DỮ LIỆU TỪ DATABASE. ........... 64
III. SỬ DỤNG JTABLE. ................................................................................... 66
BÀI 6: SỬ DỤNG COMPONENT ....................................................................... 68
I. GIỚI THIỆU CẤU TRÚC COMPONENT JOOMLA. ............................. 68
II. SỬ DỤNG MƠ HÌNH MVC TRONG COMPONENT............................. 69
III. TẠO CÁC DẠNG HIỂN THỊ FEED, PDF, RAW................................... 71
IV. SỬ DỤNG THAM SỐ. ................................................................................ 72
BÀI 7: SỬ DỤNG MODULE ............................................................................... 74
I. GIỚI THIỆU CẤU TRÚC MODULE JOOMLA ....................................... 74
II. SỬ DỤNG THAM SỐ. ................................................................................. 75
III. TẠO LAYOUT CHO MODULE. .............................................................. 75
3
IV. SỬ DỤNG HELPER FILE. ........................................................................ 76
BÀI 8: SỬ DỤNG PLUGIN.................................................................................. 78
I. GIỚI THIỆU CẤU TRÚC PLUGIN JOOMLA. ........................................ 78
II. SỬ DỤNG EVENT VÀ LISTENERS. ........................................................ 78
BÀI 9: SỬ DỤNG EXTENSION.......................................................................... 80
I.SỬ DỤNG CÁC LỚP HỖ TRỢ LẬP TRÌNH.............................................. 80
II. SỬ DỤNG HELPER. .................................................................................... 80
III. SỬ DỤNG SESSION, BROWSER,... ........................................................ 81
BÀI 10: SỬ DỤNG TEMPLATE ......................................................................... 83
I. GIỚI THIỆU CẤU TRÚC TEMPLATE JOOMLA. ................................. 83
II. SỬ DỤNG CSS, JAVASCRIPT VÀ HÌNH ẢNH. ..................................... 84
III. ĐỊNH NGHĨA POSITION CHO MODULE VÀ COMPONENT
TRONG TEMPLATE. ...................................................................................... 85
IV. XÂY DỰNG TEMPLATE CHO FRONT-END VÀ BACK-END. ........ 86
BÀI 11: SỬ SỤNG API ......................................................................................... 87
I. SỬ DỤNG CÁC API JOOMLA. .................................................................. 88
II. SỬ DỤNG CÁC CLASS: DATE, FILE, ARRAY, TREE,... .................... 88
CÁC THUẬT NGỮ CHUYÊN MÔN.................................................................. 90
TÀI LIỆU THAM KHẢO .................................................................................... 91
4
GIÁO TRÌNH MƠ ĐUN
Tên mơ đun: THIẾT KẾ VÀ CẤU HÌNH WEBISTE
Mã mơ đun: MĐ 20
I. VỊ TRÍ, TÍNH CHẤT CỦA MƠ ĐUN
1. Vị trí: thuộc nhóm Mơ đun chun mơn nghề
2. Tính chất: Là Mơ đun chun mơn bắt buộc trong ngành quản trị mạng
máy tính hệ Cao đẳng
II. MỤC TIÊU CỦA MÔ ĐUN
- Kiến thức:
+ Nêu và ứng dụng các thẻ HTML
+ Tổ chức thông tin trên trang chủ web
+ Định hướng được các cách liên kết đến các trang web
+ Đưa ra được ý tưởng về giao diện
+ Có khả năng sử dụng dụng các thẻ HTML
+ Trình bày được thế nào là Hệ thống quản trị nội dung CMS, hiểu rõ ưu
nhược điểm khi sử dụng hệ thống quản trị nội dung CMS để xây dựng website
+ Trình bày được hệ thống quản trị nội dung Joomla.
+ Trình bày được quy trình cài đặt và cấu hình Joomla.
+ Hiểu biết các đối tượng trong Joomla.
+ Hiểu rõ cấu trúc các đối tượng: Component, Module, Plugin, Extention,
Template, API trong Joomla.
- Kỹ năng:
+ Sử dụng các thẻ HTML để thiết kế được trang web
+ Thiết kế được giao diện của các trang trên website
+ Thực hiện cài đặt và cấu hình được Joomla
+ Tìm kiếm và cài đặt sử dụng các thành phần mở rộng: Component, Module,
Plugin.
+ Tạo được các thành phần mở rộng đơn giản.
+ Cài đặt và sử dụng được template. Tạo mới template.
- Năng lực tự chủ và trách nhiệm.
+ Cẩn thận, tỉ mỉ, tự giác học tập và nghiên cứu.
Nội dung của mô đun
TT
1
Tên các bài trong
mô đun
Bài 1: Ngôn ngữ HTML
Thời gian (giờ)
Tổng
Lý
số thuyết
20
5
Thực
hành
Kiểm
tra
13
2
5
2
Bài 2: Css cơ bản
25
10
13
3
Bài 3: Cài đặt và sử dụng Joomla
4
2
2
4
Bài 4: Sử dụng các đối tượng Joomla
4
2
2
5
Bài 5: Quản trị cơ sở dữ liệu trong joola
4
2
2
6
Bài 6: Sử dụng Componet
4
2
2
7
Bài 7: Sử dụng Module
8
2
5
8
Bài 8: Sử dụng Plugin
4
2
2
9
Bài 9: Sử dụng Extension
4
2
2
10
Bài 10: Sử dụng Template
4
1
3
11
Bại 11: Sử dụng API
5
1
4
12
Bài 12: Ôn tập
4
Cộng
90
2
1
4
30
54
6
6
BÀI 1: NGÔN NGỮ HTML
Giới thiệu:
HTML là kiến thức cơ bản mà bất cứ ai muốn học lập trình web hoặc học
thiết kế web đều phải biết. Tất cả các trang web dù xử lý phức tạp đến đâu đều phải
trả về dưới dạng mã nguồn HTML để trình duyệt có thể hiểu và hiển thị lên được.
Mục tiêu:
- Trình bày và sử dụng được cấu trúc của một trang HTML
- Thiết kế được trang web bằng ngôn ngữ HTML
Nội dung chính:
I. KHÁI QT VỀ TRANG WEB
Ngơn ngữ đánh dấu siêu văn bản (html) chỉ rõ một trang Web sẽ được hiển thị
như thế nào trong một trình duyệt. Sử dụng các thẻ và các phần tử html, bạn có thể:
Điều khiển hình thức và nội dung của trang
Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách
sử dụng các liên kết được chèn vào tài liệu html
Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý
các giao dịch
Chèn các đối tượng như audio clip, video clip, các thành phần ActiveX,
Flash và các Java Applet vào tài liệu html
Tài liệu html tạo thành mã nguồn của trang Web. Khi được xem trên trình
soạn thảo, tài liệu này là một chuỗi các thẻ và các phần tử, mà chúng xác định
trang web hiển thị như thế nào. Trình duyệt đọc các file có đi .htm hay .html và
hiển thị trang web đó theo các lệnh có trong đó.
Ví dụ, theo cú pháp html dưới đây sẽ hiển thị thông điệp “My first html
document”
<html>
<head>
<title>Welcome to html</title>
</head>
<body>
<H3>My first html document</H3>
</body>
</html>
Trình duyệt thơng dịch những lệnh này và hiển thị trang web như
hình sau:
Hình 1.1 Trang web cơ bản html
7
II. CẤU TRÚC CƠ BẢN CỦA TRANG WEB
Một tài liệu html gồm 3 phần cơ bản:
Phần html: Mọi tài liệu html phải bắt đầu bằng thẻ mở html <html> và kết
thúc bằng thẻ đóng html </html>
<html>
</html>
Thẻ html báo cho trình duyệt biết nội dung giữa hai thẻ này là một tài liệu
html
Phần tiêu đề: Phần tiêu đề bắt đầu bằng thẻ <head> và kết thúc bởi thẻ
</head>. Phần này chứa tiêu đề mà được hiển thị trên thanh điều hướng của trang
Web. Tiêu đề nằm trong thẻ title, bắt đầu bằng thẻ <title> và kết thúc là thẻ
</title>.
Tiêu đề là phần khá quan trọng. Khi người dùng tìm kiếm thơng tin, tiêu đề
của trang Web cung cấp từ khóa chính yếu cho việc tìm kiếm.
Phần thân: phần này nằm sau phần tiêu đề. Phần thân bao gồm văn bản, hình
ảnh và các liên kết mà bạn muốn hiển thị trên trang web của mình. Phần thân bắt
đầu bằng thẻ <body> và kết thúc bằng thẻ </body>
Ví dụ:
<html>
<head>
<title>Welcome to the world of html</title>
</head>
<body>
<P>Chào mừng các bạn đến với Khoa CNTT</P>
</body>
</html>
III. CÁC THẺ HTML CƠ BẢN
1. Thẻ <h>: trình bày tiêu đề cho phần nội dung hiển thị trên trang web.
a. Cú pháp:
<hn> Nội dung tiêu đề </hn> với n: từ 1 đến 6
b. Ví dụ:
Xin chào các bạn !
Thiết kế web với html
2. Thẻ <a>: liên kết đến trang web cục bộ hoặc trang web khác
a. Cú pháp:
<a href=” địa chỉ liên kết”> Nội dung tiêu đề </a>
b. Ví dụ:
<a href=””> Trường cao đẳng nghề An giang </a>
3. Thẻ <img>: hiển thị hình ảnh
a. Cú pháp:
8
b. Ví dụ:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142" />
4. Thẻ <b>, <i>, <u>: in đậm, in nghiêng, gạch chân
a. Cú pháp:
<b>Nội dung </b>
<i> Nội dung </i>
<u> Nội dung </u>
b. Ví dụ:
<b>Quản trị mạng máy tính </b>
<i>Quản trị mạng máy tính </i>
<b><i>Quản trị mạng máy tính </i> </b>
5. Thẻ
: xuống dịng
a. Cú pháp:
Nội dung vẳn bản
b. Ví dụ:
<b>Khoa cơng nghệ thơng tin </b>
<i>Quản trị mạng máy tính</i>
6. Thẻ <ul>, <ol>: tạo danh sách khơng thứ tự và có thứ tự
a. Cú pháp:
<ul><li></li></ul>
<ol><li></li></ol>
b. Ví dụ:
Danh sách khơng có thứ tự
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Danh sách có thứ tự
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
7. Thẻ
, <div>: định dạng đoạn văn bản
a. Cú pháp:
Nội dung
align=” left, right, center”b. Ví dụ:
Thiết kế web với HTML cơ bản
8. Thẻ <table>: tạo bảng
a. Cú pháp:
<table>
<tr><td>Nội dung dòng 1 cột 1</td></tr>
9
<tr><td>Nội dung dịng 2 cột 1</td></tr>
</table>
b. Ví dụ:
<table>
<tr><td>Vị trí đặt banner</td colspan=”3”></tr>
<tr><td>Nội dung dòng 2 cột 1</td><td></td></tr>
</table>
9. Thẻ <font>: định dạng font chữ website
a. Cú pháp:
<font font=”Aira” size=”size”> Nội dung </font>
b. Ví dụ:
<font font="Aria" size="16pt">Xin chao cac ban</font>
Câu hỏi ôn tập:
1/. HTML là gì ?
2/. Trình bày cú pháp của HTML
3/. Kết hợp các thẻ html cơ bản xây dựng một website đơn giản mang tên web
cá nhân đơn giản.
10
BÀI 2: CSS CƠ BẢN
Giới thiệu
CSS là chữ viết tắt của cụm từ “Cascading Style Sheet” dùng để định dạng bố
cục của một website dựa vào ngôn ngữ đánh dấu HTML. Nói một cách dễ
hiểu CSS dùng để thay đổi cách hiển thị mặc định của các thẻ HTML nhằm thân
thiện với người dùng hay thêm phần thẩm mỹ cho website.
Mục tiêu
- Trình bày và sử dụng được các định dạng cho một trang web.
- Thiết kế được trang web có định dạng bằng css.
Nội dung chính
I. LẬP KẾ HOẠCH VÀ QUẢN LÝ, THAO TÁC TRÊN WEBSITE
CSS cho phép bạn định dạng các đối tượng với rất nhiều đặc điểm (thuộc
tính) mở rộng mà HTML thơng thường khơng có
Hình 2.1 Bố cục html và css
CSS đóng vai trị rất quan trọng khi bạn xây dựng website, bạn không thể
định dạng 1 trang web cho đẹp khi khơng có sự am hiểu về kỹ thuật CSS. Thông
thường các Developer sẽ sử dụng một chương trình thiết kế như photoshop để tạo
giao diện sau đó convert sang file CSS riêng mà khơng phải ngồi viết từng dịng
lệnh.
Hình 2.2 Mơ phỏng cách học css
CSS là gì? Cấu trúc CSS trong một website
11
Các thể loại CSS thông dụng
Background : CSS tùy chỉnh hình nền
Text : CSS tùy chỉnh cách hiển thị đoạn text
Font : CSS tùy chỉnh kích thước, kiểu chữ
List : CSS tùy chỉnh danh sách
Table : CSS tùy chỉnh bảng
Link : CSS tùy chỉnh liên kết
Box model : CSS tùy chỉnh padding, margin, border
II. CÚ PHÁP CHUNG
Một đoạn CSS bao gồm 4 phần như sau:
vùng định dạng {
Thuộc tính : giá trị;
Thuộc tính : giá trị;
...
}
Vùng định dạng ở đây là các đoạn text hay các thẻ HTML mà bạn muốn định
dạng. Tất cả giá trị của vùng định dạng nằm trong cặp dấu ngoặc { }. Mỗi thuộc
tính sẽ ứng với một giá trị, phần thuộc tính và giá trị cách nhau bởi dấu hai chấm,
kết thúc một thuộc tính cách nhau bởi dấu chấm phẩy cuối cùng. Một vùng định
dạng có thể sử dụng khơng giới hạn thuộc tính.
III. CÁC ĐỊNH DẠNG CSS
Chúng ta đã tìm hiểu về cú pháp viết CSS, nhưng cịn đặt nó ở đâu
trong tài liệu HTML? Chúng ta có ba cách khác nhau để nhúng CSS vào trong một
tài liệu HTML
+ 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.
Lưu ý: Nếu bạn muốn áp dụng nhiều thuộc tính cho nhiều thẻ HTML khác
nhau thì khơng nên dùng cách này.
Ví dụ sau chúng ta sẽ tiến hành định nền màu trắng cho trang và màu chữ
xanh lá cho đoạn văn bản như sau:
<html>
<head>
<title>Ví dụ</title>
</head>
<body style=”background-color=#FFF;”>
^_^ Welcome To Khoa CNTT ^_^
</body>
</html>
+ Cách 2: Bên trong (thẻ style)
Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay
thế cách thứ nhất bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style
12
Ví dụ làm trang web có màu nền trắng, đoạn văn bản chữ xanh lá, chúng ta sẽ
thể hiện như sau:
<html>
<head>
<title>Ví dụ</title>
<style type=”text/css”>
body { background-color:#FFF }
p { color:#00FF00 }
</style>
</head>
<body>
^_^ Welcome To Khoa CNTT ^_^
</body>
</html>
Lưu ý: Thẻ style nên đặt trong thẻ head
+ Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài)
Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style
chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng .css) bên
ngồi và liên kết nó vào trang web bằng thuộc tính href trong thẻ link.
Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay
bảo trì một website lớn sử dụng cùng một kiểu mẫu.Ví dụ sau đây sẽ được
trình bày theo kiểu này.
vidu.html
<html>
<head>
<title>Ví dụ</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
^_^ Welcome To Khoa CNTT ^_^
</body>
</html>
Sau đó hãy tạo một file style.css với nội dung:
body {
background-color:#FFF
}
p{
color:#00FF00
}
Hãy đặt 2 file này vào cùng một thư mục, mở file vidu.html trong trình duyệt
của bạn và xem thành quả. Có thể chọn Encoding là UTF-8, nếu bạn chú thích CSS
bằng tiếng việt.
- Màu nền (thuộc tính background-color):
Thuộc tính background-color giúp định màu nền cho một thành phần trên
13
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.
Ví dụ sau đây sẽ chỉ cho chúng ta biết cách sử dụng thuộc tính backgroundcolor để định màu nền cho cả trang web, các thành phần h1, h2 lần lượt là xanh lơ,
đỏ và cam.
body {
background-color:cyan
}
h1 {
background-color:red
}
h2 {
background-color:orange
}
- Ảnh nền (thuộc tính background-image):
Việc sử dụng ảnh nền giúp trang web trông sinh động và bắt mắt hơn. Để
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
body {
background-image:url(logo.png)
}
h1 {
background-color:red
}
h2 {
background-color:orange
}
p{
background-color: FDC689
Như các bạn đã thấy chúng ta sẽ phải chỉ định đường dẫn của ảnh trong cặp
ngoặc đơn sau url. Do ảnh đặt trong cùng thư mục với file style3.css nên chúng ta
chỉ cần ghi abc.jpg. Nhưng nếu chúng ta tạo thêm một thư mục img trong thư mục
thì chúng ta sẽ phải ghi là background-image:url(img/abc.jpg). Đôi khi nếu không
chắc lắm bạn có thể dùng đường dẫn tuyệt đối cho ảnh.
- Lặp lại ảnh nền (thuộc tính background-repeat):
Nếu sử dụng một ảnh có kích thước q 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 sốt trình trạng lặp lại của ảnh nền. Thuộc tính này có 4 giá trị:
+ 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.
Bây giờ, chúng ta hãy thêm thuộc tính background-repeat này vào ví dụ trên
thử xem sao.
14
body {
background-image:url(logo.png);
background-repeat:no-repeat;
}
- Font Chữ:
body { font-family:”Times New Roman” }
h1, h2, h3 { font-family:arial,verdana,serif }
p{
font-weight:bold; // in đậm
font-style: italic; // in nghiêng
font-size:14pt; // tính theo pt hoặc px hoặc cm
}
Cấu trúc rút gọn cho các thuộc tính nhóm font:
Font :<font-style> | < font-variant> | <font-weight> | <font-size> |< fontfamily>
p{
font: italic bold 30px arial;
}
- Text :
+ Thuộc tính color :
body {
color:#000
}
h1 {
color:#0000FF
}
+ Thuộc tính text-indent :
p{
text-indent:30px ; // thụt vào đầu dịng khoảng cách 30px
}
+ Thuộc tính text-align :
h1, h2 {
text-align:right ; // canh lề phải
}
p{
text-align:justify ; // canh đều
}
+ Thuộc tính letter-spacing :
h1, h2 {
letter-spacing:7px ; // khoảng cách giữa các ký tự trong một đoạn văn bản
}
+Thuộc tính text-decoration : giúp bạn thêm các hiệu ứng gạch chân
(underline), gạch xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc biệt
là văn bản nhấp nháy (blink).
15
Ví dụ sau chúng ta sẽ định dạng gạch chân cho thành phần h1, gạch đầu thành
phần h2
h1 {
text-decoration:underline
}
h2 {
text-decoration:overline
}
+ Thuộc tính text-transform : thuộc tính này có tất cả 4 giá trị: uppercase (in
hoa), lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên trong mỗi từ) và
none (khơng áp dụng hiệu ứng – mặc định).
Ví dụ dưới đây chúng ta sẽ định dạng cho thành phần h1 là in hoa, h2 là in
hoa đầu mỗi ký tự.
h1 {
text-transform:uppercase
}
h2 {
text-transform:capitalize
}
- Liên kết :
+ Liên kết chưa được thăm (a:link),
+ Khi rê chuột lên liên kết (a:hover),
+ Khi liên kết được thăm (a:visited) hay
+ Khi liên kết đang được kích hoạt – đang giữ nhấn chuột (a:active).
a:link {
color:#00FF00
}
a:hover {
color:#FF00FF
}
a:visited {
color:#FF0000
}
a:active { color:# 662D91 }
Tạo các hiệu ứng tương ứng với trình trạng liên kết: các liên chưa thăm có
màu xanh lá, kích cỡ font 14px; liên kết mouse over có màu đỏ tươi, kích cỡ font
1.2em, hiệu ứng nhấp nháy; liên kết đã thăm sẽ có màu xanh da trời, khơng có
đường gạch chân; các liên kết đang kích hoạt có màu tím và font dạng small-caps.
a:link {
color:#00FF00;
font-size:14px
}
a:hover {
color:#FF00FF;
16
font-size:1.2em;
text-decoration:blink
}
a:visited {
color:#FF0000;
text-decoration:none
}
a:active {
color:# 662D91;
font-variant:small-caps
}
- Class & ID:
+ Class dùng để nhóm các đối tượng có cùng thuộc tính, do tính chất đó nó có
thể được sử dụng nhiều lần.
+ Id dùng để nhận dạng một đối tượng đặc trưng, id có tính duy nhất.
*Ví dụ về class:
Danh Sách Các Tỉnh, Thành Phố Của Việt Nam
<ul>
<li class=”tp”>Hà Nội</li>
<li class=”tp”>TP. Hồ Chí Minh</li>
<li class=”tp”>Đà Nẵng</li>
<li class=”tinh”>Thừa Thiên Huế</li>
<li class=”tinh”>Khánh Hòa</li>
<li class=”tinh”>Quãng Ninh</li>
<li class=”tinh”>Tiền Giang</li>
</ul>
Với việc dùng class để nhóm các đối tượng như trên thì cơng việc của chúng
ta sẽ trở nên đơn giản hơn nhiều:
li .tp {
color:FF0000
}
li .tinh {
color:0000FF
}
*Vi dụ về id :
Danh Sách Các Tỉnh, Thành Phố Của Việt Nam
<ul>
<li id=”hanoi”>Hà Nội</li>
<li id=”hcmc”>TP. Hồ Chí Minh</li>
<li id=”danang”>Đà Nẵng</li>
<li class=”tinh”>Thừa Thiên Huế</li>
<li class=”tinh”>Khánh Hòa</li>
<li class=”tinh”>Quãng Ninh</li>
<li class=”tinh”>Tiền Giang</li>
17
</ul>
Và đoạn CSS cần dùng sẽ là :
#hanoi { color:# 790000 }
#hcmc { color:#FF0000 }
#danang { color:#FF00FF }
.tinh { color:#0000FF }
- Nhóm khối phần tử với thẻ <div>:
Cũng như <span>, <div> cũng là một thẻ trung hòa và được thêm vào tài liệu
HTML với mục đính nhóm các phần tử lại cho mục đích định dạng bằng CSS. Tuy
nhiên, điểm khác biệt là <span> dùng để nhóm một khối phần tử trong khi đó
<div> có thể nhóm một hoặc nhiều khối phần tử
* Ví dụ về thẻ <div> :
Danh Sách Các Tỉnh, Thành Phố Việt Nam:
<ul>
<div id=”tp”>
<li>Hà Nội</li>
<li>TP. Hồ Chí Minh</li>
<li>Đà Nẵng</li>
</div>
<div id=”tinh”>
<li>Thừa Thiên Huế</li>
<li>Khánh Hòa</li>
<li>Quãng Ninh</li>
<li>An Giang</li>
</div>
</ul>
Và đoạn CSS cho mục đích này sẽ là:
#tp {
color:#FF0000
}
#tinh {
color:0000FF
}
- Box Model :
Trong CSS, box model (mơ hình hộp) mơ tả cách mà CSS định dạng khối
không gian bao quanh một thành phần. Nó bao gồm padding (vùng đệm), border
(viền) và margin (canh lề) và các tùy chọn. Hình bên dưới mơ tả cấu trúc minh họa
mơ hình hộp cho một thành phần web.
18
Hình 2.3 Mơ tả khoảng cách giữa chữ so với nội dung
Phần CSS cho đoạn HTML trên:
p{
width:200px;
margin:30px 20px;
padding:20px 10px;
border:1px solid #000;
text-align:justify
}
Hình 2.4 Mơ tả cách sử dụng thẻ Margin và Padding
19
- Margin & Padding :
+ Margin : dùng để canh lề cho cả trang web hay một thành phần web này với
các thành phần web khác hay với viền trang
Cú pháp như sau:
margin:<margin-top> | <margin-right> | <margin-bottom> | <margin-left>
Ví dụ sau sẽ chỉ cho chúng ta biết cách canh lề cho một trang web.
body {
margin-top:80px;
margin-bottom:40px;
margin-left:50px;
margin-right:30px;
border:1px dotted #FF0000
}
Hoặc gọn hơn chúng ta sẽ viết như sau:
body {
margin:80px 30px 40px 50px;
border:1px dotted #FF0000
}
Ví dụ sau đây sẽ trình bày chi tiết hơn về margin
body {
margin:80px 30px 40px 50px;
border:1px solid #FF0000
}
#box1 {
margin:50px 30px 20px 40px;
border:1px solid #00FF00
}
#box2 {
margin:50px 30px 20px 40px;
border:1px solid #0000FF
}
+ Padding : chỉ quy định khoảng cách giữa phần nội dung và viền của một đối
tượng
Cú pháp: Tương tự margin.
Padding:
- Border :
Ví dụ sau sẽ định viền cho 3 thành phần h1, h2, p như sau:
h1 { border-width:thin;
border-color:#FF0000;
border-style:solid }
h2 { border-width:thick;
border-color:#CCC;
border-style:dotted }
20
p { border-width:5px;
border-color:#FF00FF;
border-style:double }
-Float & Clear :
Thuộc tính float có 3 giá trị:
+ Left: Cố định phần tử về bên trái.
+ Right: Cố định phần tử về bên phải.
+ None: Bình thường.
Một ví dụ khác là chúng ta sẽ thử dùng float để chia 2 cột văn bản.
#logo {
float:left;
}
.column1, .column2 {
width:45%;
float:left;
text-align:justify;
padding:0 20px;
}
.column1 {
border-right:1px solid #000
}
+Thuộc tính clear : có tất cả 4 thuộc tính: left (tràn bên trái), right (tràn bên
phải), both (khơng tràn) và none.
Thử dùng thuộc tính clear với các giá trị khác nhau đối với đoạn văn bản
trong ví dụ float ảnh logo ở trên
- Thuộc tính Position:
Giả sử chúng ta muốn định vị một ảnh ở vị trí 70px cách đỉnh và 90px từ bên
trái tài liệu, chúng ta sẽ viết CSS như sau:
img { position:absolute; top:70px; left:90px }
Phụ Lục: Bảng Thuộc Tính & Giá Trị Thuộc Tính
Thuộc tính
Background
background
background-color
background-image
background-repeat
Mơ tả
Giá trị
background-color
background-image
Thuộc tính rút gọn cho
background-repeat
tất cả các thuộc tính nền.
background-attachment
background-position
Thiết lập màu nền cho
<color>
đối tượng.
transparent
Thiết lập ảnh nền cho
url
đối tượng.
none
Thiết lập chế độ lặp ảnh repeat
nền.
repeat-x
21
background
attachment
Thiết lập ảnh nền cố
định.
background-position
Thiết lập vị trí thể hiện
ảnh nền.
repeat-y
no-repeat
scroll
fixed
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xy
Font
font
font-style
font-variant
Thuộc tính ngắn cho tất
cả các thiết lập về font.
Thiết lập chế độ in
nghiêng, xiên hay bình
thường.
Thiết lập font bình
thường hay small-caps
font-weight
Thiết lập in đậm,
thường.
font-size
Thiết lập kích cỡ font.
font-family
Thiết lập loại font hiển
thị trang web/ đối tượng
web.
font-style
font-variant
font-weigh
font-size
font-family
normal
italic
oblique
normal
small-caps
normal
bold
bolder
lighter
100 – 900
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
<length>
%
family-name
generic-family
22
Text
color
text-indent
Thiết lập màu chữ.
Thiết lập khoảng thụt
đầu dòng.
text-align
Thiết lập chế độ canh
văn bản.
letter-spacing
Thiết lập khoảng cách
giữa các ký tự.
text-decoration
Thêm hiệu ứng đặc biệt
cho văn bản.
text-transform
Pseudo-classes
:link
:hover
:visited
:active
Margin
margin
margin-top
margin-right
margin-bottom
margin-left
Change case văn bản.
<color>
<length>
%
left
right
center
justify
normal
<length>
none
underline
overline
line-through
blink
none
upper
lower
capitalize
Liên kết chưa thăm.
Mouse over 1 thành
phần.
Liên kết đã thăm.
Kích hoạt 1 thành phần
margin-top
Thuộc tính ngắn cho các
margin-right
thiết
margin-bottom
lập margin.
margin-left
Thiết lập canh lề trên
auto
cho một
<length>
thành phần.
%
Thiết lập canh lề phải
auto
cho
<length>
một thành phần.
%
Thiết lập canh lề dưới
auto
cho
<length>
một thành phần.
%
Thiết lập canh lề trái
auto
cho một
<length>
thành phần.
%
Padding
23
padding
padding-top
padding-right
padding-bottom
padding-left
Border
border
border-width
border-color
border-style
border-top-width
border-top-color
border-top-style
border-right-width
border-right-color
border-right-style
padding-top
Thuộc tính ngắn cho các
padding -right
thiết
padding -bottom
lập padding.
padding -left
Thiết lập đệm trên cho
<length>
một
%
thành phần.
Thiết lập đệm phải cho
<length>
một
%
thành phần.
Thiết lập đệm dưới cho <length>
một thành phần.
%
Thiết lập đệm trái cho
<length>
một thành phần.
%
Thuộc tính ngắn cho tất
cả các thiết lập border
cho một thành phần.
border-width
border-color
border-style
thin
Thiết lập độ rộng đường medium
viền.
thick
<length>
Thiết lập màu cho
<color>
đường viền.
none
hidden
solid
dotted
dashed
Thiết lập kiểu đường
double
viền.
groove
ridge
inset
outset
Thiết lập độ rộng viền
<border-width>
phía trên.
Thiết lập màu viền phía
<border-color>
trên.
Thiết lập kiểu viền phía
<border-style>
trên.
Thiết lập độ rộng viền
<border-width>
phải.
Thiết lập màu viền phải. <border-color>
Thiết lập kiểu viền phải. <border-style>
24
border-bottom-width
border-bottom-color
border-bottom-style
border-left-width
border-left-color
border-left-style
Width
width
max-width
min-width
Thiết lập độ rộng viền
bên dưới.
Thiết lập màu viền bên
dưới.
Thiết lập kiểu viền bên
dưới.
Thiết lập độ rộng viền
trái.
Thiết lập màu viền trái.
Thiết lập kiểu viền trái.
<border-width>
<border-color>
<border-style>
<border-width>
<border-color>
<border-style>
auto
<length>
%
none
Thiết lập chiều rộng tối
<length>
đa cho đối tượng.
%
Thiết lập chiều rộng tối <length>
thiểu cho một đối tượng. %
Thiết lập chiều rộng đối
tượng.
Height
height
max-height
min-height
auto
<length>
%
none
Thiết lập chiều cao tối
<length>
đa cho một đối tượng.
%
Thiết lập chiều cao tối
<length>
thiểu cho một đối tượng. %
Thiết lập chiều cao cho
một đối tượng.
Layout Position
float
clear
position
top
right
left
right
Cố định đối tượng.
none
Cách thức xử sự của
left
một đối tượng liên quan right
với đối tượng
both
floated.
none
relative
định vị đối tượng
absolute
auto
Thiết lập tọa độ đỉnh đối
<length>
tượng.
%
auto
Thiết lập tọa độ bên
<length>
phải đối tượng.
%
25
