- Trang Chủ
- Tiếng Trung Quốc (CĐ-ĐH)
- bao cao nhap mon cntt
bao cao nhap mon cntt
Lời mở đầu Hiện nay, internet đã qua quen thuộc với chúng ta, và một trong những ứng dụng hàng đầu của internet là web. Web là nơi để chia sẻ thông tin về mọi mặt, có thể nói web là nền tảng để phát triển internet. Ngày càng có nhiều người yêu thích công việc tạo ra các trang web, đây là một công việc đòi hỏi bạn ngoài kiến thức chuyên môn còn phải có sự kiên nhẫn, tính thẩm mỹ... Nói chung việc học lập trình web không khó, chỉ đòi hỏi b
Thể loại Giáo án bài giảng Tiếng Trung Quốc (CĐ-ĐH)
Số trang 36
Ngày tạo 12/1/2010 1:00:34 AM +00:00
Loại tệp pdf
Kích thước 0.18 M
Tên tệp bao cao nhap mon pdf
Lời mở đầu
Hiện nay, internet đã qua quen thuộc với chúng ta, và một
trong những ứng dụng hàng đầu của internet là web. Web là nơi
để chia sẻ thông tin về mọi mặt, có thể nói web là nền tảng để
phát triển internet. Ngày càng có nhiều người yêu thích công
việc tạo ra các trang web, đây là một công việc đòi hỏi bạn ngoài
kiến thức chuyên môn còn phải có sự kiên nhẫn, tính thẩm mỹ...
Nói chung việc học lập trình web không khó, chỉ đòi hỏi bạn tập
trung và có tính sáng tạo. Xét trên phương diện nhập môn có
thể nói: “Người lập trình như 1 nhà thám hiểm, và các kiến thức
về web như 1 hang động để ta vào thám hiểm”, vì vậy tôi cũng
muốn trở thành 1 nhà thám hiểm, để tìm hiểu sự hiền bí của
các trang web.
Có rất nhiều các ngôn ngữ dùng để lập trinh web, nhưng xét về
phương diện nhập môn, ta chỉ nghiên cứu về web tĩnh với các
ngôn ngữ lập trình hỗ trợ như HTML, JavaSript, và CSS. Ngoài
các ngôn ngữ trên ta cũng cần 1 phần mềm diễn dịch, và theo
tôi nên dùng notepad++, tuy không hổ trợ quá nhiều cho việc
lập trình web nhưng nó có đủ các yêu cầu cần có.
Sau một thời gian nghiên cứu và tìm hiểu, tôi làm bài thu hoạch
này để tổng kết những gì mình đã có được. Tôi xin chân thành
cảm ơn giảng viên Nguyễn Ngọc Dũng và giảng viên Lê Thanh
Hương đã giúp đỡ và hướng dẫn tôi làm bài báo cáo này.
Tôi xin chân thành cảm ơn
1
NỘI DUNG
PHẦN 1 :HTML
1
-
.Định nghĩa
HTML (Hyper Text Markup Language): ngôn ngữ đánh dấu
siêu văn bản
-
-
-
-
Là một ngôn ngữ để xây dựng một trang web
Một trang web thông thường gồm có 2 thành phần chính:
Dữ liệu của trang web(văn bản, âm thanh, hình ảnh. . . )
Các thẻ(tag) HTML dùng để định dạng mô tả cách thức các
dữ liệu trên hiển thị trên trình duyệt
.Các tag thông dụng
Các tag mở đầu :
2
-
-
-
-
chứa các thông tin
Các tag xử lý văn bản :
Các thẻ định dạng khối văn bản
-
-
-
-
Tiêu đề(Heading): >,
Đoạn văn bản(Paragraph):
Danh sách (List Items):
Đường kẻ ngang(Horizontal Rules):
Các thẻ định dạng chuỗi văn bản
-
-
-
Định dang chữ :
Tạo siêu liên kết :
Xuống dòng :
Các thẻ định dạng ký tự
-
-
-
2
-
-
-
-
-
-
đến hết văn bản. Thẻ nàychỉ có tham số size. Thẻ này không có
kết thúc
-
và color.
Các tag hình ảnh
-
-
-
-
-
-
Src : Đường dẫn dến file hình ảnh
Alt : chú thích cho hình ảnh
Position : Top Bottom, Middle
Border : Độ dày nét viền quang ảnh
e Path’
Các tag âm thanh
bgsound> : Không có tag đóng, có các thuộc tính sau :
<
-
-
-
Src : Đường dẫn đến file âm thanh
Loop : Số lần lặp
Thường đặt trong tag
Các thẻ định dạng danh sách
-
-
-
-
Thẻ tạo liên kết
a Href = url
<
Name=name
Tabindex= n
Title = title
Target =_blank/_self>
3
Siêu văn bản
/a>
Thẻ tạo kết nối mailto
address>
Mọi chi tiêt xin liên hệ với chúng tôi qua
a href=mailto:webmaster@vnuh.edu.vn>
<
<
<
WEBMASTERdress>
Thẻ marquee : dùng để tạo hiệu ứng chữ chạy trên màn hình
trình duyệt
<
marquee
Behavior=alternate|scroll|slide
Direction=Down|left| Right|up
Loop=string
Scroollamount=long
Scroolldelay=long> dòng chữ cần chạy
<
/marquee>
Thẻ tự động refresh/redirect trang web
<
<
head>
meta http-equiv=”refresh”
Content=”t”; url=”url”>
/head>
<
4
PHẦN 2 JAVASCRIPT
.Định nghĩa
1
-
-
-
-
-
-
-
-
-
-
Script là ngôn ngữ dạng thông dịch
Cho phép Web tương tác với người dùng
Các ngôn ngữ thông dụng
Javascipt
Jscipt
VBScript
PHP,CGI
web động ->Netscape ->Scipt Languae : LiveScipt=>Javascipt
javascipt là ngôn ngữ dự trên đối tượng : math, document,windows,. . .
JavaScipt không phải là ngôn ngữ hướng đối tượng như C++,
Java. . .
thiết kế độc lập với hệ điều hành
.Vị trí của JavaScript trong HTML
-
2
-
-
Sử dụng các câu lệnh và các hàm trong cặp thẻ :
Đặt giữa tag
khi trang web được mở
Đặt giữa tag
body được thực thi khi trang web đang mở
-
-
-
Số lượng đoạn script không hạn chế.
Xử dụng một file nguồn JavaScipt
Cú pháp
<
SCRIPT SRC="file_name.js">
....
<
/SCRIPT>
3
3
.Các lệnh trong JavaScript
.1.Lệnh điều kiện
Câu lệnh điều kiện cho phép Chương trình ra quyết định và thực
hiện công việc nào đấy dựa trên kết quả của quyết định. Trong
JavaScript, câu lệnh điều kiện là:
if ... else
5
Câu lệnh này cho phép bạn kiểm tra điều kiện và thực hiện một
nhóm lệnh nào đấy dựa trên kết quả của điều kiện vừa kiểm tra.
Nhóm lệnh sauelse không bắt buộc phải có, nó cho phép chỉ ra
nhóm lệnh phải thực hiện nếu điều kiện là sai.
Cú pháp
if ( <điều kiện> )
//Các câu lệnh với điều kiện đúng
else
//Các câu lệnh với điều kiện sai
Ví dụ:
if (x==10)
document.write(“x bằng 10, đặt lại x bằng 0.”);
x = 0;
else
document.write(“x không bằng 10.”);
3.2. Câu lệnh lặp
Câu lệnh lặp thể hiện việc lặp đi lặp lại một đoạn mã cho đến
khi biểu thức điều kiện được đánh giá là đúng. JavaScipt cung
cấp hai kiểu câu lệnh lặp:
for loop
while loop
a.Vòng lặp for
Vòng lặp for thiết lập một biểu thức khởi đầu -initExpr, sau đó
lặp một đoạn mã cho đến khi biểu thức<điều kiện> được đánh
giá là đúng. Sau khi kết thúc mỗi vòng lặp, biểu thức in cr Exp
r được đánh giá lại.
Cú pháp:
For (initExpr; <điều kiện> ; incrExpr)
6
//Các lệnh được thực hiện trong khi lặp
Ví dụ:
<
<
<
HTML>
TITLE>For loop Example
SCRIPT LANGUAGE= "JavaScript">
for (x=1; x<=10 ; x++)
y=x*25;
document.write("x ="+ x +";y= "+ y + "
<
<
<
<
/SCRIPT
/HEAD>
BODY>>
/HTML>
Vòng lặp này sẽ thực hiện khối mã lệnh cho đến khi x>10.
b.WHILE
Vòng lặp while lặp khối lệnh chừng nào <điều kiện> còn được
đánh giá là đúng
Cú pháp:
while (<điều kiện>)
//Các câu lệnh thực hiện trong khi lặp
Ví dụ:
x=1;
while (x<=10)
y=x*25;
document.write("x="+x +"; y = "+ y + "
x++;
Kết quả của ví dụ này giống như ví dụ trước.
3.3. Các câu lệnh thao tác trên đối tượng
JavaScript là một ngôn ngữ dựa trên đối tượng, do đó nó có một
7
số câu lệnh làm việc với các đối tượng.
a.For. . . in
Câu lệnh này được sử dụng để lặp tất cả các thuộc tính (prop-
erties) của một đối tượng. Tên biến có thể là một giá trị
bất kỳ, chỉ cần thiết khi bạn sử dụng các thuộc tính trong vòng
lặp. Ví dụ sau sẽ minh hoạ điều nà
y Cú pháp
for (
//Các câu lệnh
Ví dụ sau sẽ lấy ra tất cả các thuộc tính của đối tượng Window
và in ra tên của mỗi thuộc tính
<
<
<
<
HTML>
HEAD>
TITLE>For in Example
SCRIPT LANGUAGE= "JavaScript">
document.write("The properties of the Window object are:
for (var x in window)
document.write(" "+ x + ", ");
<
<
<
<
<
/SCRIPT>
/HEAD>
BODY>
/BODY>
/HTML>
b.New
Biến New được thực hiện để tạo ra một thể hiện mới của một
đối tượng
Cú pháp
objectvar = new object ype(param1[, param2] . . . [, paramN])
t
8
Ví dụ sau tạo đối tượng person có các thuộc tính firstname,
lastname, age, sex. Chú ý rằng từ khoá this được sử dụng để chỉ
đối tượng trong hàm person. Sau đó ba thể hiện của đối tượng
person được tạo bằng lệnh New
<
<
<
<
html>
head>
title>New exampleitle>
script languge=”javascript”
function person(first_name, last_name, age, sex)
this.first_name=first ame;
n
this.last_name = last ame;
n
this.age = age;
this.sex = sex;
person1 = newperson(”Thuy”, ”DauBich”, ”23”, ”Female”);
person2 = newperson(”Chung”, ”NguyenBao”, ”24”, ”Male”);
person3 = newperson(”Binh”, ”NguyenNhat”, ”24”, ”Male”);
person4 = newperson(”Hon”, ”ŒV n”, ”24”, ”Male”);
document.write(”1.”+person1.last ame+””+person1.first ame+
n
n
”
< BR > ”);
document.write(”2.”+person2.last ame+””+person2.first ame+
n
n
”
< BR > ”);
document.write(”3.”+person3.last ame+””+person3.first ame+
n
n
”
< BR > ”);
document.write(”4.”+person4.last ame+””+person4.first ame+
n
n
”
< BR > ”);
/script >
/head >
body >
<
<
<
<
<
/body >
/html >
c.This
Từ khoá this được sử dụng để chỉ đối tượng hiện thời. Đối tượng
9
được gọi thờng là đối tượng hiện thời trong Phương thức hoặc
trong hàm. Cú pháp
This [.property]
Có thể xem ví dụ của lệnh new.
d.With
Lệnh này được sử dụng để thiết lập đối tượng ngầm định cho
một nhóm các lệnh, bạn có thể sử dụng các thuộc tính mà không
đề cập đến đối tượng.
Cú pháp
with (object)
// statement
4.Các đối tượng trong JavaScript
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Đối tượng navigator
Đối tượng window
Đối tượng location
Đối tượng frame
Đối tượng document
Đối tượng anchors
Đối tượng forms
Đối tượng history
Đối tượng links
Đối tượng math
Đối tượng date
Đối tượng string
Các phần tử của đối tượng form
Thuộc tính type
Phần tử button
Phần tử checkbox
Phần tử File Upload
Phần tử hidden
Phần tử Password
Phần tử radio
Phần tử reset
10
-
Phần tử select
PHẦN 3 : CSS
1
1
.Giới thiệu CSS
.1. Mở đầu
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. CSS (Cascading
Style Sheets) tạm dịch là tờ mẫu theo 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,. . .
-
-
-
-
-
-
-
Dùng để mô tả cách hiển thị các thành phần trên trang web
Sử dụng tương tự như dạng TEMPLATE
Có thể sử dụng lại cho các trang web khác
Có thể thay đổi thuộc tính từng trang hoặc cả site nhanh chóng
CSS được lưu trong:
Bảng kiểu nhúng trong file HTML
Bảng kiểu ngoại trú trong File bảng kiểu riêng có đuôi *.css
1
.2. Ưu nhược điểm của CSS
a.Ưu điểm :
Kiểm soát bố cục trang, kỹ thuật thiết kế phông và dạng chữ
tốt hơn
-
-
-
Dễ duy trì hoạt động của site hơn
Thông tin kiểu được tách ra khỏi cấu trúc site
b.Khuyết điểm :
Không được hỗ trợ rộng rãi, hoặc hỗ trợ không hết
1.3.Quy tắc tạo CSS :
Cú pháp :
Selector{property: value;}
Trong đó
Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính
11
trình bày. Nó là các tag HTML, class hay id (chúng ta sẽ học về
thành phần này ở bài học sau). Ví dụ: body, h2, p, img, title,
2
content, .username,. . .
property: Chính là các thuộc tính quy định cách trình bày. Ví
dụ: background-color, font-family, color, padding, margin,. . .
value: Giá trị của thuộc tính. Ví dụ: như ví dụ trên value chính
là FFF dùng để định màu trắng cho nền trang.
2.Vị trí đặt CSS:
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.
Ở 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>
body style=”background-color=#FFF;”>
p style=”color:green”> Welcome To WallPearl’s Blog
<
/body>
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 .
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 ngoà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. Đầu tiên chúng ta sẽ tạo ra một
file vidu.html có nội dung như sau:
12
<
html>
<
<
<
<
title>Ví dụtle>
link rel=”stylesheet” type=”text/css” href=”style.css”>
body>
/html>
Sau đó hãy tạo một file style.css với nội dung:
body { background-color:#FFF }
p { color:#00FF00 }
2.Các định dạng trong CSS
2.1. 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 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ụ :
body { background-color:cyan }
h1 { background-color:red }
h2 { background-color:orange}
2.2. Ả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.
Bây giờ chúng ta sẽ cùng làm một ví dụ minh họa để xem thuộc
tính background-image sẽ hoạt động ra sao. Đầu tiên hãy tìm
một tấm ảnh mà bạn thích, ở đây Pearl sẽ lấy tấm ảnh logo của
blog Pearl Sau đó, chúng ta sẽ viết CSS để đặt logo này làm ảnh
nền trang web như sau:
body { background-image:url(logo.png)}
h1 { background-color:red }
h2 { background-color:orange }
p { background-color: FDC689 }
2.3. Lặp lại ảnh nền (thuộc tính background-repeat):
13
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. 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.
2.4. Khóa ảnh nền (thuộc tính background-attachment):
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.
Thuộc tính này có 2 giá trị: + 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.
2.5. Định vị ảnh nền (thuộc tính background-position):
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.
3.Font Chữ
Chúng ta đã được tìm hiểu về cách định dạng màu chữ bằng
CSS.Trong bài này, chúng ta sẽ tiếp tục tìm hiểu thêm về các
thuộc tính CSS liên quan tới font chữ của các thành phần trong
một trang web.
3.1. Thuộc tính font-family:
Thuộc tính font-family có công dụng định nghĩa một danh sách
14
ưu tiên các font sẽ được dùng để hiển thị một thành phần trang
web. Theo đó,thì font đầu tiên được liệt kê trong danh sách sẽ
được dùng để hiển thị trang web. Nếu như trên máy tính truy
cập chưa cài đặt font này thì font thứ hai trong danh sách sẽ
được ưu tiên. . . cho đến khi có một font phù hợp. Có hai loại
tên font được dùng để chỉ định trong font-family: family-names
và generic families. + Family-names: Tên cụ thể của một font.
Ví dụ: Arial, Verdana, Tohama,. . . + Generic families: Tên của
một họ gồm nhiều font. Ví dụ: sans-serif, serif,. . . Khi lên danh
sách font dùng để hiển thị một trang web bạn sẽ chọn những
font mong muốn trang web sẽ được hiển thị để đặt ở các vị trí
ưu tiên. Tuy nhiên, có thể những font này sẽ không thông dụng
lắm nên bạn cũng cần chỉ định thêm một số font thông dụng dự
phần như Arial, Tohama hay Times New Roman và bạn cũng
được đề nghị đặt vào danh sách font của mình một generic fam-
ilies (thường thì nó sẽ có độ ưu tiên thấp nhất). Thực hiện theo
cách này thì sẽ đảm bảo trang web của bạn có thể hiển thị tốt
trên bất kỳ hệ thống nào. Ví dụ sau chúng ta sẽ viết CSS để
quy định font chữ dùng cho cả trang web là Times New Ro-
man, Tohama, sans-serif, và font chữ dùng để hiển thị các tiêu
đề h1, h2, h3 sẽ là Arial, Verdana và các font họ serif. body {
font-family:”Times New Roman”,Tohama,sans-serif } h1, h2, h3
{
font-family:arial,verdana,serif }
3.2. Thuộc tính font-style:
Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường
normal), in nghiêng (italic) hay xiên (oblique) lên các thành
(
phần trang web. Trong ví dụ bên dưới chúng ta sẽ thử thực hiện
áp dụng kiểu in nghiêng cho thành phần h1 và kiểu xiên cho h2.
h1 { font-style:italic; } h2 { font-style:oblique; }
3.3. Thuộc tính font-variant:
Thuộc tính font-variant được dùng để chọn giữa chế độ bình
thường và small-caps của một font chữ. Một font small-caps là
một font sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa chuẩn
15
để thay thế những chữ in thường. Nếu như font chữ dùng để
hiển thị không có sẵn font small-caps thì trình duyệt sẽ hiện
chữ in hoa để thay thế. Trong ví dụ sau chúng ta sẽ sử dụng
kiểu small-caps cho phần h1
h1 { font-variant:small-caps }
3.4. Thuộc tính font-weight:
Thuộc tính font-weight mô tả cách thức thể hiện của font chữ là
ở dạng bình thường (normal) hay in đậm (bold). Ngoài ra, một
số trình duyệt cũng hỗ trợ mô tả độ in đậm bằng các con số từ
1
00 – 900. Thử in đậm phần p:
p { font-weight:bold }
.5. Thuộc tính font-size:
3
Kích thước của một font được định bởi thuộc tính font-size.
Thuộc tính này nhận các giá trị đơn vị đo hỗ trợ bởi CSS bên
cạnh các giá trị xx-khoảng cách small, x-small, small, medium,
large, x-large, xx-large, smaller, larger. Tùy theo mục đích sử
dụng của website bạn có thể lựa chon những đơn vị phù hợp.
Ví dụ trang web của bạn phục vụ chủ yếu là những người già,
thị lực kém hay những người dùng sử dụng các màn hình máy
tính kém chất lượng thì bạn có thể cân nhấc sử dụng các đơn vị
qui đổi như em hay %. Như vậy sẽ đảm bảo font chữ trên trang
web của bạn luôn ở kích thước phù hợp. Ở ví dụ sau trang web
sẽ có kích cỡ font là 20px, h1 là 3em = 3 x 20 = 60px, h2 là
2
em = 40px. body { font-size:20px } h1 { font-size:3em } h2 {
font-size:2em}
.Text
4
Định dạng và thêm vào các kiểu định dạng đặc biệt cho phần
nội dung một trang web là một vấn đề quan trọng cho bất cứ
nhà thiết kế web nào. Như đã nói, ở bài học này chúng ta sẽ
được tìm hiểu về các thuộc tính CSS về định dạng văn bản.
4.1. Màu chữ (thuộc tính color):
Để định màu chữ cho một thành phần nào đó trên trang web
chúng ta sử dụng thuộc tính color. Giá trị của thuộc tính này là
16
các giá trị màu CSS hỗ trợ. Ví dụ sau chúng ta sẽ viết CSS để
định màu chữ chung cho một trang web là đen, cho tiêu đề h1
màu xanh da trời, cho tiêu đề h2 màu xanh lá chúng ta sẽ làm
như body { color:000 } h1 { color:0000FF } h2 { color:00FF00
}
4.2. Thuộc tính text-indent :
Thuộc tính text-indent cung cấp khả năng tạo ra khoảng thụt
đầu dòng cho dòng đầu tiên trong đoạn văn bản. Giá trị thuộc
tính này là các đơn vị đo cơ bản dùng trong CSS. Trong ví dụ
sau chúng ta sẽ định dạng thụt đầu dòng một khoảng 30px cho
dòng văn bản đầu tiên trong mỗi đoạn văn bản đối với các thành
phần
4.3. Thuộc tính text-align :
Thuộc tính text-align giúp bạn thêm các canh chỉnh văn bản
cho các thành phần trong trang web. Cũng tương tự như các
lựa chọn canh chỉnh văn bản trong các trình soạn thảo văn bản
thông dụng như MS Word, thuộc tính này có tất cả 4 giá trị
:
left (canh trái – mặc định), right (canh phải), center (canh
giữa) và justify (canh đều). Trong ví dụ sau chúng ta sẽ thực
hiện canh phải các thành phần h1, h2 và canh đều đối với thành
phần
4.4. Thuộc tính letter-spacing:
Thuộc tính letter-spacing được dùng để định khoảng cách giữa
các ký tự trong một đoạn văn bản. Muốn định giữa các ký
tự trong thành phần h1,h2 là 7px và thành phần
chúng ta sẽ viết CSS sau: h1, h2 { letter-spacing:7px } p{ letter-
spacing:5px}
4.5. Thuộc tính text-decoration:
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). 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-
17
decoration:overline}
.6. Thuộc tính text-transform:
4
Text-transform là thuộc tính qui định chế độ in hoa hay in
thường của văn bản mà không phụ thuộc vào văn bản gốc trên
HTML. 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). Trong
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 }
5. For Links
Một thành phần rất quan trọng trong mọi website chính là liên
kết.Cũng như một đối tượng văn bản thông thường, chúng ta
hoàn toàn có thể áp dụng các thuộc tính định dạng đã học ở 2
bài trước như định font chữ, gạch chân, màu chữ,. . . cho một liên
kết. Hơn nữa, CSS còn cung cấp một điều khiển đặc biệt được
gọi là pseudo-classes. Pseudo-classes cho phép bạn xác định các
hiệu ứng định dạng cho một đối tượng liên kết ở một trạng thái
xác định như khi 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).
Với điều khiển pseudo-classes cùng với các thuộc tính CSS đã
học chắc chắn sẽ mang lại rất nhiều ý tưởng về trang trí liên kết
cho trang web. Sau đây chúng ta sẽ tiến hành một số ví dụ để
tìm hiểu thêm về các khả năng trang trí cho một liên kết dựa
trên pseudo-classes. Ví dụ 1: Ví dụ này chúng ta sẽ áp dụng 4
màu sắc khác nhau cho từng trạng thái liên kết: các liên kết chưa
thăm có màu xanh lá; các liên kết mouse over sẽ có màu đỏ tươi;
các liên kết đã thăm sẽ có màu đỏ và các liên kết đang kích hoạt
có màu tím. a:link { color:00FF00 } a:hover { color:FF00FF }
a:visited { color:FF0000 } a:active { color: 662D91 }
Ví dụ 2: Tạo các hiệu ứng tương ứng với trình trạng liên kết:
18
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; font-size:1.2em; text-decoration:blink }
a:visited { color:FF0000; text-decoration:none } a:active { color:
6
62D91; font-variant:small-caps } Ví dụ 3: Ví dụ này cũng tạo
cho liên kết hiệu ứng màu sắc giống ví dụ 2 nhưng sẽ có thêm
số hiệu ứng: các liến kết sẽ có khung viền màu đen, kích cỡ
1
font 14px; liên kết mouse over có nền light cyan; các liên kết đã
thăm có nền light yellow.
a { border:1px solid 000; font-size:14px } a:link { color:00FF00;
}
a:hover { background-color:00BFF3; color:FF00FF;
font-size:1.2em; text-decoration:blink }
a:visited { background-color:FFF568;
color:FF0000; text-decoration:none }
a:active { color:662D91; font-variant:small-caps} Ba ví dụ trên
chỉ là một tí gợi ý về khả năng kết hợp các thuộc tính CSS với
pseudo-classes để tạo nên nhiều hiệu ứng hấp dẫn cho trang web.
Cũng xin nói luôn là các ví dụ trình bày trong bài này cũng như
những bài khác thật ra trông không dễ nhìn, đó là do không có
nhiều thời gian để chăm chút các ví dụ của mình.
6.Class ID
Trong các bài học trước, chúng ta đã được học các thuộc tính
CSS về background, color, font,. . . Tuy nhiên, bạn cũng nhận
ra là khi áp dụng một thuộc tính CSS cho một thành phần nào
đó ví dụ như h1, h2, p, a, img,. . . thì toàn bộ các thành phần
này trong trang web đều nhận thuộc tính này. Vậy có các nào
để nhóm lại một số thành phần nào đó để áp dụng một thuộc
tính đặc biệt. Ví dụ như bạn muốn các liên kết trên menu trang
web sẽ được in hoa, và có kích cỡ lớn hơn so với liên kết trong
nội dung thì phải làm thế nào? Đây chính là vấn đề mà chúng
19
ta sẽ cùng giải quyết trong chương này.
.1. Nhóm các phần tử với class :
6
Ví dụ chúng ta có một đoạn mã HTML sau đây :
Sách Các Tỉnh, Thành Phố Của Việt Nam
Nội
<
li>Thừa Thiên Huế
Ninh
Yêu cầu đặt ra là làm thế nào để tên các thành phố là màu
đỏ và tên các tỉnh là màu xanh da trời. Để giải quyết vấn đề
này chúng ta sẽ dùng một thuộc tính HTML gọi là class để tạo
thành 2 nhóm là thành phố và tính. Ta sẽ viết lại đoạn HTML
sau thành như thế này:
Của Việt Nam
class=”tp”>TP. Hồ Chí Minh
<
li class=”tinh”>Thừa Thiên Huế
class=”tinh”>Khánh Hòauãng Ninh
li class=”tinh”>Tiền Giang
<
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 Lưu ý:
Không nên đặt tên class với ký tự đầu là chữ số, nó sẽ không
làm việc cho Firefox.
6.2. Nhận dạng phần tử với id:
Ví dụ: Cũng với đoạn HTML như ví dụ về class. Nhưng yêu cầu
đặt ra là Hà Nội sẽ có màu đỏ sậm, TP. Hồ Chí Minh màu đỏ,
Đà Nẵng màu đỏ tươi còn các tỉnh màu xanh da trời. Để giải
quyết vấn đề này chúng ta sẽ sử dụng thuộc tính HTML là id
để nhận dạng mỗi thành phố và dùng class để nhóm các tỉnh.
Đoạn HTML của chúng ta bây giờ sẽ là :
Tỉnh, Thành Phố Của Việt Nam
Nội
Nẵngi>
<
li class=”tinh”>Thừa Thiên Huế
20
Hòa
Giangul>
Và đoạn CSS cần dùng sẽ là : hanoi { color: 790000 } hcmc {
color:FF0000 } danang { color:FF00FF } .tinh { color:0000FF
}
Lưu ý: Không nên đặt tên id với ký tự đầu là chữ số, nó sẽ
không làm việc cho Firefox.
Trả qua hai ví dụ trên chúng ta có thể rút ra những kết luận
sau:
-
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.
Trong bài học này, chúng ta đã được học về các sử dụng class và
id để áp dụng các đặc tính đặc biệt cho một thành phần web.
Ở bài kế tiếp chúng ta sẽ được học thêm về hai thẻ
<
7
span> trong HTML và ý nghĩa 2 thẻ này đối với việc viết CSS.
. Span & Div
Như đã hứa, ở bài học này chúng ta sẽ cùng tìm hiểu về 2 thẻ
span> và
công việc viết CSS của chúng ta.
.1. Nhóm phần tử với thẻ
<
7
Thẻ
không thêm hay bớt bất cứ một thứ gì vào một tài liệu HTML
cả. Nhưng chính nhờ tính chất trung hòa này mà nó lại là một
công cụ đánh dấu tuyệt vời để qua đó chúng ta có thể viết CSS
định dạng cho các phần tử mong muốn. Ví dụ: Chúng ta có
đoạn HTML sau trích dẫn câu nói của chủ tịch Hồ Chí Minh
<
p>Không có gì quý hơn độc lập, tự do.
chúng ta hãy dùng CSS tô đậm 2 từ độc lập, tự do. Để giải quyết
vấn đề này, chúng ta sẽ thêm thẻ
sau:
lập
giờ chúng ta có thể viết CSS cho yêu cầu trên: .nhanmanh { font-
21
weight:bold }. Rất đơn giản phải không nào.
.2. Nhóm khối phần tử với thẻ
7
Cũng như
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à
có thể nhóm một hoặc nhiều khối phần tử.
Trở lại ví dụ về danh sách tỉnh, thành trong phần class bài
trước chúng ta sẽ giải quyết vấn đề bằng cách nhóm các phần tử
với
Nam:
Chí Minh
<
li>Thừa Thiên Huế
Ninh
cho mục đích này sẽ là: tp { color:FF0000 } tinh { color:0000FF
}
Trong hai bài học trên, chúng ta đã được học qua về id, class,
<
div>,
phần tử để có thể dùng CSS để tạo ra các kiểu trình bày đặc
biệt. Có thể một số bạn chưa học qua HTML sẽ khó khăn trong
việc nắm bắt các kiến thức này. Tuy nhiên, yêu cầu mà Pearl
đưa ra ở đây chỉ là các bạn có thể vận dụng các phần tử này
trong CSS.
8. 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.
Mô hình hộp trên chỉ là một mô hình lý thuyết lý tưởng. Bên
dưới đây chúng ta sẽ xét mô hình hộp của một đối tượng web
cụ thể:
Model Box
22
Margin
Border
Padding
Content C
Top
Top
Left
Right
Ví dụ: Chúng ta có một đoạn HTML sau:
<
p> 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.
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
}
Với ví dụ trên chúng ta sẽ khái quát được mô hình hộp như sau:
Có lẽ bạn sẽ cảm thấy hơi khó hiểu. Nhưng không sao cả, tạm
thời bạn cứ chấp nhận như vậy. Còn về những “cái hộp” này
thì chúng ta sẽ cùng tìm hiểu cụ thể hơn trong các bài học tiếp
theo.
9. Margin Padding
9.1. Thuộc tính margin:
Như tất cả những ai đã học qua MS Word đều biết là trong phần
thiết lập Page Setup của Word cũng có một thiết lập margin để
định lề cho trang in. Tương tự, thuộc tính margin trong CSS
cũng được 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. 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 Cú pháp như sau: margin:in-
top> |
Hoặc: margin: là giá trị margin-
23
top và margin-bottom và value2 là giá trị margin-left và margin-
right.
Kết quả của ví dụ trên sẽ được mô hình hóa như sau:
Ví dụ kế tiếp sẽ thể hiện rõ hơn về việc dùng margin để canh lề
cho các đối tượng trong trang web. Các bạn hãy quan sát các
đường viền và nhận xét. 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 }
9.2. Thuộc tính padding:
Padding có thể hiểu như là một thuộc tính đệm. Padding không
ảnh hưởng tới khoảng các giữa các các đối tượng như margin
mà nó chỉ quy định khoảng cách giữa phần nội dung và viền
của một đối tượng (xem lại ảnh minh họa về boxmodel). Cú
pháp: Tương tự margin. Padding:
right> |
thực hiện lại 2 ví dụ ở phần margin, nhưng thay margin bằng
padding, nhớ quan sát vị trí đường viền.
10.Border :
Border là một thành phần quan trọng trong một trang web.
Nó thường được dùng trong trang trí, đóng khung cho một đối
tượng cần nhấn mạnh, phân cách các đối tượng giúp trang web
trông dễ nhìn hơn,. . . Trong bài học này, chúng ta sẽ cùng tìm
hiểu về cách dùng CSS để định border cho các đối tượng web.
10.1. Thuộc tính border-width:
Border-width là một thuộc tính CSS quy định độ rộng cho viền
của một đối tượng web. Thuộc tính này có các giá trị: thin
(mảnh), medium
(vừa), thick (dày), hay là một giá trị đo cụ thể như pixels. Xem
hình minh họa bên dưới.
0.2. Thuộc tính border-color:
1
Border-color là thuộc tính CSS quy định màu viền cho một đối
tượng web. Thuộc tính này nhận tất cả đơn vị màu CSS hỗ trợ.
24
10.3. Thuộc tính border-style:
Border-style là thuộc tính CSS quy định kiểu viền thể hiện của
một đối tượng web. CSS cung cấp tất cả 8 kiểu viền tương ứng
với 8 giá trị: dotted, dashed, solid, double, groove, ridge, inset và
outset. Ngoài ra, hai giá trị none hay hidden dùng để ẩn đường
viền. Để hiểu rõ hơn, chúng ta hãy xem hình minh họa dưới đây
(tất cả viền có màu vàng). Ví dụ: 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
}
}
p { border-width:5px; border-color:#FF00FF; border-style:double
Ngoài ra, chúng ta cũng có thể dùng riêng các thuộc tính
border-top, border-right, border-bottom hay border-left để chỉ
định viền riêng cho các đối tượng. Ví dụ: h1 { border-top-
width:thin; border-top-color:#FF0000; border-top-style:solid; border-
right-width:thick; border-right-color:#AFAFAF; border-right-style:dotted;
border-bottom-width:2px; border-bottom-color:blue; border-bottom-
style:double; border-left-width:5px; border-left-color:violet; border-
left-style:groove }
11. Height & Width :
11.1. Thuộc tính width:
Width là một thuộc tính CSS dùng để quy định chiều rộng cho
một thành phần web. Ví dụ sau chúng ta sẽ định chiều rộng cho
thành phần p của một trang web. p { width:700px; }
11.2. Thuộc tính max-width:
Max-width là thuộc tính CSS dùng để quy định chiều rộng tối
đa cho một thành phần web.
11.3. Thuộc tính min-width:
Min-width là thuộc tính CSS dùng để quy định chiều rộng tối
thiểu cho một thành phần web.
11.4. Thuộc tính height:
Height là một thuộc tính CSS dùng để quy định chiều cao cho
một thành phần web. Ví dụ sau chúng ta sẽ định chiều cao cho
25
thành phần p của một trang web. p { height:300px }
1.5. Thuộc tính max-height:
1
Max-height là thuộc tính CSS dùng để quy định chiều cao tối
đa cho một thành phần web.
11.6. Thuộc tính min-height:
Min-height là thuộc tính CSS dùng để quy định chiều cao tối
thiểu cho một thành phần web. Lưu ý: Thông thường chiều
cao một thành phần web do văn bản trong trang web đó quyết
định. Việc định chiều cao chính xác cho một thành phần sẽ tạo
thanh cuộn văn bản nếu chiều cao văn bản lớn hơn chiều cao
đã định. Các thuộc tính max/min-width/height được sử dụng
trong những trường hợp bạn không chắc giá trị chính xác cho
width, height cả một thành phần. Ví dụ, bạn vùng chứa bài
post của một forum có bề ngang 500px, bạn có thể định max-
width:500px cho phần hình ảnh trong phần đó để tránh những
ảnh lớn bị lệch ra ngoài.
12. Float & Clear
12.1. Thuộc tính float:
Float (theo như nghĩa tiếng Việt là thả trôi) là một thuộc tính
CSS dùng để cố định một thành phần web về bên trái hay bên
phải không gian bao quanh nó. Đây là một thuộc tính rất cần
thiết khi dàn trang (như tạo các trang web 2 column layout hay
3
column layout), hiển thị văn bản thành cột (giống như kiểu
Format > Columns trong MS Word vậy), hay thực hiện việc
định vị trí ảnh và text (như một số kiểu text wrapping của MS
Word). Để rõ hơn chúng ta hãy xem hình minh họa sau về cơ
chế hoạt động của float: 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. Nhìn vào hình minh họa trên chúng
ta thấy là ban đầu trong box lớn có hai thành phần là Box B
và phần Content. Lúc đầu Box B nằm bên trên và Content nằm
bên dưới, nhưng khi chúng ta đặt thuộc tính float cho Box B thì
Box B bị cố định về bên trái và chừa lại khoảng trống bên trái
26
nó. Còn phần Content thì vốn nằm bên dưới sẽ tự động tràn lên
để lắp đầy khoảng trống do Box B tạo ra.
Content tràn lên để lắp “khoảng trống”
Box B di chuyển sang trái
Ở ví dụ sau, chúng ta sẽ thực hiện float ảnh logo sang trái
để phần nội dung bên dưới tràn lên nằm cạnh logo. #logo {
float:left; } Một ví dụ khác là chúng ta sẽ thử dùng float để
chia 2 cột văn bản. .column1, .column2 { width:45%; float:left;
text-align:justify; padding:0 20px; .column1 { border-right:1px
solid #000 }
12.2. Thuộc tính clear:
Đi cùng với thuộc tính float, trong CSS còn có một thuộc tính là
clear. Thuộc tính clear là một thuộc tính thường được gán vào
các phần tử liên quan tới phần tử đã được float để quyết định
hướng xử sự của phần tử này. Ở ví dụ trên, khi chúng ta float
tấm ảnh qua trái thì mặc nhiên văn bản sẽ được tràn lên để lắp
vào chỗ trống. Nhưng khi chúng ta đặt vào văn bản thuộc tính
clear thì chúng ta có quyền quyết định xem phần văn bản đó có
được tràn lên hay không. 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. tài liệu bằng
định vị tuyệt đối.
logo1 { position:absolute; top:50px; left:70px }
logo2 { position:absolute; top:0; right:0 }
logo3 { position:absolute; bottom:0; left:0 }
logo4 { position:absolute; bottom:70px; right:50px }
13. Layers
CSS hoạt động trên cả 3 chiều: cao, rộng, sâu. Hai chiều đầu
tiên, chúng ta đã được nhìn thấy trong các bài học trước. Chúng
ta sẽ được học về cách đặt các thành phần web ở các lớp khác
nhau với thuộc tính z-index. Nói đơn giản hơn thì đó là cách
27
bạn đặt một thành phần này lên trên một thành phần khác. Với
mục đích này, bạn sẽ gán cho mỗi phần tử một con số. Theo đó,
phần tử có số cao hơn sẽ nằm trên, phần tử có số thấp hơn sẽ
nằm dưới. Ví dụ sau chúng ta sẽ đặt 5 bức ảnh logo ở 5 lớp.
#
#
#
#
#
logo1 { position:absolute; top:70px; left:50px; z-index:1}
logo2 { position:absolute; top:140px; left:100px; z-index:2
logo3 { position:absolute; top:210px; left:150px; z-index:3}
logo4 { position:absolute; top:280px; left:200px; z-index:4 }
logo5 { position:absolute; top:350px; left:250px; z-index:5 }
28
VẬN DỤNG
Bắt đầu trang web là phần . .
•
Trong phần này ta thực hiện các bước khai báo cho trang web:
-
-
"
-
Khai báo tên tiêu đề cho web bằng tag tle>tên tiêu đề
Khai báo CSS bằng tag type="text/css">
Khai báo JavaScript bằng tag
nguon VI OLET
© 2024 - nslide
Website chạy thử nghiệm. Thư viện tài liệu miễn phí mục đích hỗ trợ học tập nghiên cứu , được thu thập từ các nguồn trên mạng internet ... nếu tài liệu nào vi phạm bản quyền, vi phạm pháp luật sẽ được gỡ bỏ theo yêu cầu, xin cảm ơn độc giả