CSS có tính kế thừa và tính kết hợp

Một phần của tài liệu điều khiển giám sát thiết bị qua internet sử dụng pic18f67j60 (Trang 33 - 37)

4.3.3.1. Tính kế thừa:

Giả sử rằng ở đầu file styleshet.css khai báo cho Body có các thuộc tính sau: Body{

Font:Arial, Verdana; Background:#FF6600; }

Nhưng trong trường hợp muốn khai báo cho các đối tượng nhỏ hơn nằm trong đó như Sidebar: #sidebar{ With:300px; Padding:10px; Font:Tahoma,Verdana; }

Sau đoạn khai báo này thì Sidebar sẽ có thuộc tính: #sidebar{

background:#FF6600; with:300px;

padding: 10px;

font: Tohoma, Verdana; }

Như vậy, Sidebar đã kế thừa thuộc tính background của Body, và trong đó thuộc tính font là Tahoma đã đè lên thuộc tính font Arial ở lần khai báo trước.

4.3.3.2. Tính kết hợp:

Có thể định nghĩa nhiều CSS cùng một thuộc tính thay vì phải định nghĩa riêng lẻ từng cái một.

Ví dụ:

h1, h2,h3,h4{

Font-family: Tahoma,arial; Color:#D4D4D4;

}

Thay cho việc định nghĩa riêng biệt cho từng cái: h1{ Font-family: Tahoma,arial; Color: #D4D4D4; } h2{ Font-family: Tahoma,arial; Color:#D4D4D4; } ……… h4{ Font-family: Tahoma,arial; Color:#D4D4D4; } 4.4. Kỹ thuật AJAX

AJAX, viết tắt từ Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ), là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ dữ liệu và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web. AJAX không phải một công nghệ đơn lẻ mà là sự kết hợp một nhóm công nghệ với nhau. Trong đó, HTML và CSS đóng vai hiển thị dữ liệu, mô hình DOM trình bày thông tin động, đối tượng XMLHttpRequest trao đổi dữ liệu không đồng bộ với máy chủ web, còn XML là định dạng chủ yếu cho dữ liệu truyền.

sự hợp lệ của thông tin, sửa đổi bộ nhớ, sau đó gửi lại một trang HTML hoàn chỉnh tới máy khách. Tuy nhiên, phương pháp này khá bất tiện và mất thời gian. Để khắc phục hạn chế trên, các chuyên gia phát triển giới thiệu hình thức trung gian - cơ chế xử lý AJAX - giữa máy khách và máy chủ. Điều này giống như việc tăng thêm một lớp giữa cho ứng dụng để giảm quá trình "đi lại" của thông tin và giảm thời gian phản ứng. Thay vì tải lại (refresh) toàn bộ một trang, nó chỉ nạp những thông tin được thay đổi, còn giữ nguyên các phần khác. Vì thế, khi duyệt một trang hỗ trợ AJAX, người sử dụng không bao giờ nhìn thấy một cửa sổ trắng (blank) và biểu tượng đồng hồ cát - dấu hiệu cho thấy máy chủ đang thực hiện nhiệm vụ. Ví dụ, trong một website ảnh, với ứng dụng truyền thống, toàn bộ trang chứa các ảnh sẽ phải mở lại từ đầu nếu có một thay đổi nào đó trên trang. Còn khi áp dụng AJAX, DHTML chỉ thay thế đoạn tiêu đề và phần vừa chỉnh sửa, do vậy tạo nên các giao dịch trơn tru, nhanh chóng.

Hình 22: Tương tác đồng bộ trong ứng dụng web truyền thống (trên) và dị bộ trong ứng dụng AJAX.

4.4.1. Ưu điểm

- Trong nhiều trường hợp, các trang web chứa rất nhiều nội dung thông thường trong trang. Nếu sử dụng các phương pháp truyền thống, những nội dụng đó sẽ phải nạp lại toàn bộ với từng yêu cầu. Tuy nhiên, nếu sử dụng Ajax, một ứng dụng web có thể chỉ yêu cầu cho các nội dung cần thiết phải cập nhật, do đó giảm lượng lớn băng thông và thời gian nạp lại trang.

- Việc dùng các yêu cầu không đồng bộ (asynchronous request) cho phép giao

diện người dùng của ứng dụng hiển thị trên trình duyệt giúp người dùng trải nghiệm sự

tương tác cao, với nhiều phần riêng lẻ.

- Việc sử dụng Ajax có thể làm giảm các kết nối đến server, do các script và các style sheet chỉ phải yêu cầu một lần.

4.4.2. Nhược điểm

- Các trang web được tạo động không được ghi vào bộ lưu lịch sử lướt web của trình duyệt, do đó nút "back" (quay lui) của trình duyệt sẽ mất tác dụng quay lại trang thái trước đó của trang sử dụng Ajax, thay vào đó sẽ quay lại trang web trước đó mà người dùng ghé thăm.

- Bất kỳ người dùng nào có trình duyệt không hỗ trợ Ajax hay JavaScript, hoặc đơn giản là đã bị vô hiệu hóa JavaScript, sẽ đương nhiên không thể sử dụng Ajax.

- Việc thiếu các chuẩn cơ bản của Ajax đồng nghĩa với việc không có nhiều sự chọn lựa thực tiễn tốt nhất để kiểm tra các ứng dụng Ajax. Các công cụ kiểm thử cho Ajax thường không hiểu các mô hình sự kiện, mô hình dữ liệu và giao thức của Ajax.

CHƯƠNG 5. TCP/IP STACK

(adsbygoogle = window.adsbygoogle || []).push({});

Một phần của tài liệu điều khiển giám sát thiết bị qua internet sử dụng pic18f67j60 (Trang 33 - 37)