3 Bổ sung CSS vào tài liệu HTML

Để nhúng một style sheet, cần định nghĩa một khối (phân biệt bởi các thể ) được đặt trong phần HEAD của tài liệu. Khối này là một tập các

style rule (qui tắc về kiểu dáng), trong đó mỗi qui tắc định nghĩa style cho một phần tử hay

mộ nhóm các phần tử HTML

Một style rule có 2 phần:

• Một selector (phần tử chọn) để định danh một phần tử hay một nhóm các phân từ

HTML

• Một khai báo về thuộc tính về kiểu dáng được áp dụng cho selector đó.

• Cú pháp tổng quát: selector {property:value;property:value;…}

CSS không phân biệt chữ hòa và chữ thưừong nhưng bạn phải đảm bảo luôn dùng đúng cú

pháp. Mỗi style rule phải bắt đầu bằng một selector hay một nhóm các selector, theo sau là

một dấu mở ngoặc nhọn, tiếp theo là các khai báo thuộc tính về style. Mỗi khai báo cho một

style kết thúc bằng dấu chấm phẩy và mỗi thuộc tính được phân cách với giá trị của nó bằng

dấu hai chấm, và cuối cùng là một dấu ngoặc nhọn.

Mỗi đoạn sẽ có viền

Đậm

màu bạc

Cách dùng style sheet nhúng luôn uyển chuyển và dễ bảo trì hơn cách dùng inline style.

Chẳng hạn muốn thay đổi màu của P trong tài liệu, chỉ cần thay đổi một thứ: giá trị tương ứng

với thuộc tính “background-color”

Liên kết đến style sheet

Có thể lưu style sheet trong một tập tin riêng biêt và liên kết nó đến một hay nhiều tài liệu, sử

dụng thẻ trong phần :



Style sheet được liên kết chứa những khai báo về style, hoạt động giống như style sheet

nhúng, chhỉ khác là những style rule không đóng trong cặp thẻ . Việc liên kết đến một style sheet bên ngoài cho phép nhà phát triển áp

dụng style sheet cho nhiều tài liệu khác nhau.

Bao gộp một style sheet

Một style sheet bên ngoài có thể được bao gộp (import) vào trong tài liệu bằng cách dùng

thuộc tính @import trong style sheet:

@import:url(mystyles.css);

Thẻ @import nên đặt ở đầu khối style hay đối với một sheet liên kết thì là ở trước bất cứ một

khai báo nào. Những qui tắc được bao gộp trong style sheet sẽ được áp dụng trước những qui

tắc khác định nghĩa chứa style sheet

46



Các cách dùng style

• Inline style: dùng cho văn bản riêng lẻ

• Style nhúng: định dáng một hay nhiều tài liệu ở tầm vực toàn cục

• Kết hợp inline để bổ sung cho style nhúng hay điều chỉnh nó cho một vài phần tử

cụ thể



2.4. Các mô hình trực quan

CSS làm việc trên mô hình định dạng trực quan cung cấp trong các đặc tả CSS. Mô hình này

trợ giúp định nghĩ cách thức trình duyệt xử lý cây tài liệu

Mô hình trực quan cung cấp ý nghĩa cho mọi phần tử trong cây để sinh ra một hộp. Nó còn

được tham chiếu như là mô hình hộp.



Mô hình hộp

Mô hình hộp tin tưởng vào các qui tắc quản trị để hiển thị một cách chính xác. Việc thực thi

mô hình box có sự khác biệt trong các trình duyệt chính

Có 2 kiểu chính của các phần tử :

Block-Level Elements là một trong phần tử được định dạng như một hộp. Nó có thể chứa các

phần tử nằm bên trong và các phần tử block-level khác. Đặc biệt, các phần tử này bất đầu trên

một trong mới. Ví dụng bao gồm: h1-h6, p, form, table, ol, ul.

Inline Elements xuất hiện bên trong nội dung, và có thể chứa văn bản hoặc các phần tử inline

khác. Ví dụ: a, em, strong, img, input.

Phần tử block-level sinh ra hộp chính. Hộp này có khả năng chứa các hộp khác hoặc các phần

tử block-level khác.

Bên trong phần tử inline, các hộp nằm theo chiều ngang được biết như là hộp đường

47



Tất cả hộp được chia thành các vùng sau:

Content area (text, objects) Vùng nội dung có đỉnh nội dung bao quanh nội dung thực sự

phần tử.

Padding Các đỉnh xung quanh padding của hộp

Borders Đỉnh border xác định border của hộp

Margins Đỉnh mép margin xung quanh margin hộp và được định nghĩa bởi đỉnh: left, right,

top, bottom.

Nếu một margin có độ rộng bằng 0, nó trở thành đỉnh border. Nếu đỉnh borger có độ dày bằng

0, nó trở thành đỉnh của padding. Nếu padding có độ dày bằng 0, nó trở thành đỉnh content

Có vài cách thức chung để bố trí các phần tử CSS như sau:

•

•



Static Hộp tĩnh có chảy tràn dựa vào khối của nó hoặc chức năng inline.

Float Hộp động dịch chuyển từ trái qua phải.



•



Absolute position Hộp tuyệt đối được tổ chức đặc biệt sử dụng ranh giới theo tòa

độ x-y.



•



Relative position Hộp tương đối được tổ chức liên quan đến nơi họp được mong

đợi bên trong luồng dữ liệu.



48



Chương IV Ngôn ngữ kịch bản Javascript

4.1. Giới thiệu ngôn ngữ kịch bản Javascrip

JavaScript là ngôn ngữ dưới dạng kịch bản có thể gắn với các file HTML để bổ sung tính

tương tác của Web. Nó không đuợc biên dịch mà được trình duyệt thông dịch. JavaScipt là

ngôn ngữ dựa trên đối tượng nhưng nó không phải là ngôn ngữ hướng đối tượng do không hỗ

trợ các lớp hay tính thừa kế.

Có 1 số ngôn ngữ khác cũng có khả năng bổ sung tính tương tác cho Web nhưng tất cả chúng

đều khác ở 1 số điểm:

• Script CGI (common gateway interface): Các Script rất mạnh nhưng chúng nằm trên

máy chủ nên có 1 số nhược điểm như: kết nối giữa trình duyệt Web và máy chủ sẽ giới

hạn tốc độ tương tác trên Web của bạn, máy chủ Web có thể bị quá tải nếu có nhiều

người sử dụng đồng thời, không phải mọi người đều có thể truy cập đến các vùng trên

máy chủ Web mà có thể chạy Script CGI vì các Script có thể làm ngưng trệ máy chủ...

• Java: Mặc dù có tên tương tự nhau nhưng chúng ko phải là ngôn ngữ giống nhau.

Javascript được Netscape tại ra để cung cấp tính tương tác cho Web còn Java dược

Sun viết như là 1 ngôn ngữ lập trình có thể làm việc trên tất cả hệ điều hành.

• Vbscript: Đây có lẽ là ngôn ngữ gần gũi nhất với JS nhưng nó có 1 hạn chế là chỉ làm

việc trên IE (Nó là ngôn ngữ độc quyền của MS).

Các giới hạn của JavaSript (JS).

• JavaScript không thể giao tiếp với máy chủ: hai công việc chủ yếu của máy chủ mà

Javascript không thể thực hiện được là việc tập hợp thông tin từ người dùng và giao

tiếp với các máy khác, cũng như không thể gửi mail với JavaScript vì muốn gửi mail

thì phải giao tiếp với máy chủ và tất nhiên JAVASCRIPT không thực hiện được điều

này

• -JavaScript không thể tạo các hình ảnh đồ họa: 1 trong các giới hạn của JAVASCRIPT

là nó không thể tạo các hình ảnh đồ họa của riêng nó mà chỉ làm việc với các hình ảnh

có sẵn theo nhiều cách.

• JAVASCRIPT làm việc khác nhau trên các trình duyệt khác nhau.

Những việc Javascript có thể thực hiện

• Javascript cung cấp cho người thiết kế HTML một công cụ lập trình –

• JavaScript có thể đặt văn bản động trong trang HTML

• JavaScript có thể tương tác với các sự kiện

• JavaScript có thể đọc và ghi các phần tử HTML

• JavaScript có thể được sử để xác định tính hợp lệ của dữ liệu

Để chèn một đoạn script trong trang HTML, sử dụng thẻ



Kịch bản trong một trang sẽ được thực thi ngay khi trang đó được nạp trong trình duyệt. Điều

này không phải lúc nào cùng cần thiết. Thỉnh thoảng cần thực hiện script khi một trang được

nạp, lúc khác khi sử dụng trigger một sự kiện. Các đoạn script có thể được đặt ở các vị trí sau:

49



•



Đăt Script trong phần head: Script được thực thi khi chúng được gọi hoặc khi có

một sự kiện được trigger thì sẽ đặt script ở phần head. Khi đặt script ở phần head, điều

này sẽ đảm bảo rằng, script được nạp trước khi sử dụng nó.











•



Đặt Script trong phần body: script được thư thi khi một trang nạp. Khi đặt ở phần này,

scipt sinh ra nội dung của trang.















•



Đăt Script trong cả phần body và phần head: Có thể đặt không giới hạn số script trong

tài liệu, có thể đặt ở phần body và phần head.

















Thỉnh thoảng, muốn chạy cùng một đoạn script cho nhiều trang, để không phải viết lại đoạn

mã trong từng trang đó, có thể viết đoạn mã đó trong một tệp riêng với phần mở rộng là “.js”.

Ví dụ viết cậu lệnh dưới đây và lưu trong tệp xxx.js:

document.write("Script chứa ở tệp riêng biệt ")

Để sử dụng tệp này, sử dụng thuộc tính “src”

















50



4.2. Ngôn ngữ kịch bản JavaScript

4.2.1 Kiểu dữ liệu

- Kiểu dữ liệu số:

•



Số nguyên: biễu diễn từ -253 tới -253



•



Số thực:



- Kiểu văn bản (chuỗi): bắt đầu bằng dấu (“) hoặc (‘)

Ví dụ: “Hello World” , ‘Hello World’, “Peter O’Toole” , “Peter O\’Toole”, 'Hello "Paul"',

"Hello "Paul"", "Hello \"Paul\""

Ngoài ra còn có các kiểu kí tự đặc biệt sau đây:

Kí tự đăc biệt



Kí tự đại diện



\b



Phím lùi



\f



Form feed



\n



Dòng mới



\r



Phím xuống dòng



\t



Tab



\'



Nháy đơn



\"



Nháy kép



\\



Dấu chéo ngược



\xNN

NN là số hexa xác định kí tự trong tập kí tự Latin-1

- Kiểu Boolean: Có 2 giá trị Yes hoặc No, True hoặc False



4.2.2 Khai báo biến

Biến là những đại lượng mà giá trị của nó có thể thay đổi trong quá trình xử lý. Trong toán

học, biến thường được dùng để lưu trữ các con số, còn trong tin học biến thường được dùng

để lưu trữ thông tin.



a. Cách đặt tên biến

•



Tên biến phân biệt chữ hoa và chữ thường



•



Tên biến bắt đầu bằng kí tự hoặc dấu gạch dưới character



•



Không được có khoảng trắng giữa các kí tự



51



b. Khai báo biến

Sử dụng từ khóa var để khai báo 1 biến:

var strname = giá trị

Hoặc không cần dùng từ khóa var

strname = some value



c. Gán giá trị cho biến

var strname = "Hege"

Hoặc:

strname = "Hege"



d. Thời gian sống của biến

Khi miêu tả biến trong hàm, biến có thể được truy cập bên trong hàm đó. Khi thoát khỏi hàm,

biến cũng được giải phóng. Biến này như được gọi là biến cục bộ.

Nếu khai báo biến bên ngoài hàm, tất cả các hàm trong trang có thể truy cập tới biến này. Thời

gian sống của biến này bắt đầu từ khi ta khai báo và kết thúc khi trang được đóng. Biến này

được gọi là biến toàn cục.



4.2.3. Các toán tử JavaScript

a. Các Toán tử số học

Toán tử



Miêu tả



+



Cộng



-



Trừ



*



Nhân



/



Chia



%



Modulus (phần dư)



++



Tăng



--



Giảm



Ví dụ

x=2

x+2

x=2

5-x

x=4

x*5

15/5

5/2

5%2

10%8

10%2

x=5

x++

x=5

x--



Kết quả

4

3

20

3

2.5

1

2

0

x=6

x=4



b. Các toán tử gán

Toán tử

=

+=

-=

*=



Ví dụ

x=y

x+=y

x-=y

x*=y



Diễn giải

x=y

x=x+y

x=x-y

x=x*y

52