Đang tải... (xem toàn văn)
Lập trình web tĩnh Html dành cho người mới bắt đầu học lập trình web Mình khuyên các bạn nên học đầy đủ từ bài số 1 trở đi Và kết hợp với video khi sử dụng slide nhưng do video mình chưa có thời gia up lên khi nào có mình sẽ cho link lên mục này
Chương Các style sheet Mục tiêu học: Kết thúc chương này, bạn có thể: Khái quát DHTML Sử dụng style sheet Giới thiệu Trước đây, trang web hiển thị trình duyệt, người ta thay đổi thứ Cả người dùng lẫn tác giả trang web có điều khiển phần tử HTML trang web Sau này, với phiên trình duyệt hỗ trợ đặc tính gọi HTML động Trong phần này, thảo luận HTML động số điểm lạ mà mang đến cho nhà thiết kế web Thêm vào đó, phần thảo luận stylesheet (style sheet cách) Style sheet đặc tính quan trọng dùng HTML động Mặc dù trang Web không cần có style sheet, việc sử dụng stylesheet mang lại lợi ích định Chúng ta thảo luận stylesheet kĩ thuật cách để sử dụng việc thiết kế phát triển Web 11.1 DHTML “HTML động” định nghĩa phần mềm sử dụng cho việc mô tả kết hợp HTML, stylesheet ngôn ngữ script làm cho tài liệu trở nên sinh động Mọi thứ bắt đầu sao? Vào ngày đầu, HTML phát triển định dạng tài liệu dùng để trao đổi thông tin Internet Việc truyền tải liệu độc lập với tảng(platform) Tuy nhiên, trọng tâm chuyển từ vấn đề khoa học hàn lâm qua vấn đề người dùng ngày, người xem Internet nguồn thông tin giải trí Các trang web trở nên hấp dẫn nhiều màu sắc làm thu hút người dùng Tuy nhiên, dáng vẽ nội dung trang web cố định Người phát triển điều khiển trang web hiển thị HTML “tĩnh” 11.1.1 Giới thiệu DHTML Sự đời lập trình script thêm vào phần động cho trang web Người dùng tương tác với trang web Tuy nhiên, số hạn chế tồn Bất kỳ xác nhận liệu việc lập trình script phải thực máy chủ Để thay đổi nội dung kiểu trang, trang phải viết đè lên hoàn toàn Bất tương tác người dùng thông qua máy Web server Với phiên trình duyệt mới, lại thêm vào đặc tính tốt cho HTML Ngày Internet Netscape Navigator hỗ trợ mô hình đối tượng tài liệu “Document Object Model” mà phần tử HTML thẻ coi đối tượng Những đối tượng có { PAGE } phương thức, thuộc tính kiện lập trình để điều khiển hoạt động chúng Ví dụ, cú pháp thêm vào để thay đổi màu văn phần tử phân đoạn người dùng kích chuột lên Các script (là chương trình nhỏ) thực thi trình duyệt Điều có nghĩa liệu thao tác, định dạng thay đổi cách động máy khách (client) mà không cần nhiều hỗ trợ từ máy chủ Tương tác người dùng xử lý máy khách Chú ý: Một ứng dụng Client/Server tách hai phần giao diện người dùng “frontend client” phần “back-end server” Client phần ứng dụng, trình bày liệu người dùng Thông thường Client “giao diện người dùng” không thực thi chức sơ liệu, thay vào đó, client gởi yêu cầu liệu đến máy chủ “server”, định dạng hiển thị kết Vai trò máy chủ “server” cung cấp xử lý thông tin đến cho client Máy chủ cung cấp liệu đến client, đôi khi, Máy chủ “server” cần thực số công việc xử lý đem lại kết liệu yêu cầu Ví dụ client yêu cầu liệu bán hàng cho vùng cụ thể, Server cần thực xác số xử lý liệu từ tập tất liệu định dạng theo yêu cầu từ phía client Mỗi công ty Microsoft hay Netscape có cách triển trai HTML động riêng họ Microsoft tập trung vào dùng Cascading Style Sheet (CSS) Chúng ta dùng script để tương tác phần tử CSS Netscape, ngược lại, dựa vào phương thức dùng tầng Thẻ LAYER dùng để cung cấp hầu hết thuộc tính HTML động 11.1.2 Các đặc điểm DHTML DHTML không dừng lại số phần mở rộng HTML Trong phần thảo luận đặc điểm DHTML cách thức dùng để thêm vào tính động cho trang web Kiểu động (Dynamic Style)- Trong phiên HTML trước đây, muốn thay đổi kiểu hay nội dung trang web sau hiển thị trình duyệt toàn trang phải nạp lại ‘refresh’ Điều có nghĩa yêu cầu phải gởi đến máy chủ thành trang để hiển thị Đối với người dùng qui trình rõ ràng Tuy nhiên, trang phải nạp lại ‘refresh’ thường xuyên tốn nhiều thời gian làm cho máy chủ trở nên tải Trong HTML động, Cách làm khác chút Bằng cách dùng bảng kiểu ‘style sheets’, Chúng ta xác định màu, kiểu kích cỡ nội dung trang Chúng ta thay đổi kiểu trang mà không cần gởi đến máy chủ ‘Web server’ cho lần thêm vào thẻ thuộc tính Điều có nghĩa thay đổi màu, font, kích cỡ nội dung văn đáp lại tương tác người dùng Trong HTML động, kiểu liên quan đến cách thức, định dạng xuất trang web nội dung Kiểu ‘style’ bao gồm màu sắc, kiểu chữ, khoảng cách, thụt đầu dòng, định vị xuất văn { PAGE } Nội dung động (Dynamic Content)- Được hỗ trợ Internet Explorer Ở thay đổi chữ hình ảnh trang web sau hiển thị Chúng ta thay đổi nội dung trang đáp lại kiện nhập vào hay kiện người dùng kích chuột vào Định vị (Positioning)- Các phiên HTML trước đây, không kiểm soát vị trí phần tử trang web Theo vị trí xác trang mặt tọa độ Việc định vị dành cho trình duyệt HTML mô tả nội dung vị trí tương đối phần tử Trong HTML động, Chúng ta vị trí xác (tuyệt đối hay tương đối), mối quan hệ tọa độ x y Một trang web hiển thị, di chuyển phần tử trang làm cho trở nên động Định vị tuyệt đối – rõ vị trí xác theo điểm ‘pixels’ Định vi tương đối – vi trí tương đối phần tử Trình duyệt xử lý việc định vị thời Đặc điểm việc định vị cho phép xác định thứ tự xếp ‘z-order’của phần tử Có nghĩa đối tượng nằm chồng lên đối tượng khác Liên kết liệu (Data Binding) – Trong HTML động, kết nối sở liệu vào bảng trang web Nó hỗ trợ Internet Explorer Khi trang nạp lên, liệu từ sở liệu máy chủ hiển thị bảng Dữ liệu xếp, lọc hiển thị cho phù hợp với yêu cầu Downloadable Fonts (Có khả tải Font chữ)- Được Netscape hỗ trợ Downloadable fonts đặt điểm cho phép ta chèn font mà tùy chọn trang web Chúng ta gói font trang Điều đảm bảo văn trang web luôn hiển thị theo font mà ta chọn Đây đặc điểm quan trọng thông thường font máy người dùng trình duyệt dùng font mặc định có sẵn Điều làm hủy bỏ mục đích kiểu font bạn Scripting – Chúng ta viết script để thay đổi kiểu nội dung trang web Script lồng vào trang web Cấu trúc đối tượng (Object Structure) – HTML động theo cấu trúc đối tượng theo phần tử đối xử đối tượng cấu trúc Mỗi đối tượng truy cập lập trình độc lập 11.2 Style Sheets Stylesheet tạo nên từ qui tắc kiểu cách, mà báo cho trình duyệt biết cách trình bày tài liệu Stylesheet kỹ thuật thêm vào kiểu (font, màu, khoảng cách) cho trang web { PAGE } 11.2.1 Khái niệm, chức thuận lợi stylesheet Một tính quan trọng HTML động kiểu(style) động Nghĩa bạn thay đổi kiểu phần tử HTML trang sau chúng hiển thị trang Sự thay đổi đáp ứng tương tác người dùng chí thay đổi tình trạng kiện thay đổi kích thước Có hai cách để thay đổi kiểu trang web chúng ta: Thay đổi kiểu nội tuyến (inline style) Viết kịch để thay đổi kiểu Khi sử dụng kiểu nội tuyến, tạo kiểu động mà không thêm kịch vào trang Một kiểu nội tuyến kiểu gán trực tiếp cho phần tử Kiểu không áp dụng vào tất phần tử thuộc loại hay lớp Kiểu nội tuyến định nghĩa thuộc tính STYLE phần tử thẻ Ví dụ muốn đặt màu cho phần tử màu đỏ, phải đặt thuộc tính STYLE bên thẻ H1 sau: Nếu muốn sử dụng kịch để thay đổi kiểu nội tuyến vào lúc nào, lúc bạn phải sử dụng đến đối tượng kiểu (Style Object) Đối tượng kiểu hỗ trợ tính chất mà CSS hỗ trợ kiểu Để dùng thuộc tính kịch bản: Bỏ dấu gạch nối khỏi tên kiểu CSS Thay đổi chữ từ sau dấu gạch nối thành từ viết hoa Ví dụ, font-weight CSS trở thành fontWeight DHTML text-align thành textAlign Ví dụ 1: Setting Properties This paragraph has an inline style applied to it This paragraph is displayed in the default style { PAGE } Can you see the difference in this line ? Hình 11.1: Kết ví dụ Lợi ích stylesheet – Các stylesheet dùng để: Nạp chồng trình duyệt: - Mỗi trình duyệt hiển thị trang web theo cách riêng Trước nhà phát triển không kiểm soát trang web hiển thị trình duyệt Suy cho bạn trình duyệt mà người dùng cách nửa vòng trái đất sử dụng Nhờ có stylesheet bạn nạp chồng qui ước trình duyệt đặt theo cách riêng Chẳng hạn, bạn xác định kiểu mà phần tử cần hiển thị: Overriding the browser Bố cục trang (Page layout) – Những stylesheet dùng để hiển thị font thay đổi màu mà không làm thay đổi cấu trúc trang web Điều có nghĩa với tư cách nhà thiết kế bạn tách biệt yêu cầu thiết kế hình ảnh trực quan từ cấu trúc logic trang web địa hai chuyện hoàn toàn khác Khi sử dụng biện pháp liên quan stylesheet bạn, bạn thể tài liệu cho đẹp mắt hình theo độ phân giải Sử dụng lại stylesheet – Môt định nghĩa kiểu thông tin, nhúng stylesheet bên tài liệu HTML Lần lượt thay thế, kết nối tất trang website đến stylesheet Điều chắn trang web có diện mạo thông tin hiển thị Vì vậy, bạn có chung { PAGE } trang ví dụ logo trang số thông tin chuẩn(cho trang) stylesheet Điều đảm bảo cách nhìn cảm nhận thông dụng trang website Cứ thử hình dung xem có vài trăm trang web bạn phải xác định kiểu trang cách độc lập Chỉ cần làm lần thật tốt – Chúng ta tạo stylesheet liên kết đến nhiều tài liệu Tất tài liệu có diện mạo giống Tuy nhiên, quan trọng bạn thực thay đổi stylesheet tất tài liệu kết nối vào stylesheet bị thay đổi theo 11.2.2 Qui tắc stylesheet Stylesheet phân cấp(cascading style sheet) định nghĩa kiểu áp dụng vào trang phần tử trang Qui tắc kiểu (Style Rule)- Stylesheet phân cấp tập hợp qui tắc Qui tắc định nghĩa kiểu tài liệu Ví dụ, tạo qui tắc kiểu xác định cho tất phần tiêu đề hiển thị màu vàng xanh Qui tắc kiểu ứng dụng vào thành phần chọn trang web Ví dụ, xác định đoạn văn in đậm in nghiêng trang Điều gọi khai báo kiểu có sẵn mà nhờ kiểu áp dụng vào phần tử HTML đơn lẻ trang web Style Sheet – Là danh mục qui tắc kiểu nhúng vào bên tài liệu HTML Trong trường hợp đó, gọi stylesheet nhúng Stylesheet tạo file bên liên kết với tài liệu HTML Các qui tắc (Rules) – Bảng kiểu có hay nhiều qui tắc Phần đầu qui tắc gọi chọn (Selector) Mỗi chọn có thuộc tính giá trị liên quan đến RuleSelector {Declarations property: value; property: value; } Phần qui tắc kèm theo phạm vi dấu ngoặc móc gọi khai báo Khai báo có hai phần, phần trước dấu hai chấm (:) thuộc tính phần nằm sau dấu hai chấm giá trị thuộc tính Các khai báo phân cách dấu chấm phẩy (;) Ta nên đặt dấu chấm phẩy sau lần khai báo cuối Ví dụ H1 {color: blue} Ở đây, H1 chọn, color: blue khai báo Trong phạm vi khai báo: {Property: Value} Color thuộc tính, blue giá trị { PAGE } Mỗi qui tắt tách rời phạm vi thẻ STYLE Ví dụ 2: H1 {color:limegreen} H1 {font-family:Arial} H2 {color:limegreen} H2 {font-family:Arial} This is the H1 element This is the H2 element This is the H3 element with displayed in the browser its default style as Lưu ý: text/css kiểu ‘style’ dùng stylesheet phân cấp ‘cascading style sheet’ Hình 11.2: Kết ví dụ Thay vào nhóm qui tắc Mỗi khai báo tách dấu chấm phẩy Ví dụ 3: { PAGE } H1, H2{color:limegreen;font-family:Arial;} This is the H1 element This is the H2 element This is the H3 element with its default style displayed in the browser as Hình 11.3: Kết Ví dụ 11.2.3 Các Selector (selector ) style sheet (hay giả lớp) Ta dùng giả lớp selector dùng chúng HTML Về bản, chúng dùng thông tin bên để tác động đến việc định dạng Ví dụ, với việc sử dụng lớp giả, liên kết ghé qua hiển thị khác so với liên kết chưa ghé qua sau: A:link { color: red } A:visited { color: blue } A:active { color: lime } /* unvisited link */ /* visited links */ /* active links */ Selector định nghĩa “một chuỗi kí tự xác định phần tử quy tắc tương ứng áp dụng cho phần tử ấy” Có hai kiểu selector bản: { PAGE } Selector đơn Đây selector dễ sử dụng Selector đơn mô tả phần tử bất chấp vị trí đâu cấu trúc tài liệu Bộ nhận dạng tiêu đề H1 điển hình Sau số kiểu selector đơn Selector HTML Những selector sử dụng tên phần tử HTML bỏ dấu móc Vì vậy, thẻ HTML trở thành P đó, xem selector Ví dụ sau minh họa điều Ví dụ 4: P{font-style:italic; font-weight:bold; color:limegreen} These selectors use the names of HTML elements The only difference is that you remove the brackets Hình 11.4:Kết ví dụ Selector lớp Những selector sử dụng thuộc tính CLASS phần tử HTML Mọi phần tử hiển thị có thuộc tính CLASS sử dụng để gán vào định danh (identifier) Ta gán tên lớp cho phần tử khác Ngoài ra, ta gán định danh lớp cho nhiều phần tử loại ta muốn hiển thị trạng thái khác so với dạng chuẩn Ví dụ, ta muốn xuất với nhiều màu khác Trong trường hợp đó, ta sử dụng định danh lớp cho { PAGE } Selector lớp có dấu chấm (.) đứng trước gọi ký tự cờ(flag), theo sau tên lớp chọn Tốt hết nên chọn tên lớp theo mục đích chúng không nên chọn tên mô tả màu sắc hay kiểu chúng Ví dụ, ta muốn đoạn A hiển thị chữ nghiêng, đoạn khác hiển thị theo kiểu khác Trong trường hợp đó, đoạn A có nhận dạng lớp slant Ví dụ 5: water { color:blue } danger { color:red } test water test danger no style italic Hình 11.5:Kết ví dụ Khi xác định lớp kiểu, ta xác định phần tử HTML sử dụng kiểu Chúng ta nên sử dụng từ khóa all, để tất các phần tử sử dụng Ví dụ 6: { PAGE } all.hotpink {color:hotpink;} P.BLUE {color:blue; font-weight:bold;} H5.RED {color:red; font-weight:bold;} This is an H5 element that uses the RED class This is an H5 element that has been allowed to use hotpink style. This paragraph uses the class BLUE This paragraph does not use the class BLUE This paragraph is hotpink Chú ý: Xem kết Netscape Hình 11.6: Kết ví dụ Selector ID Selector ID sử dụng thuộc tính ID phần tử HTML Selector ID dùng để áp dụng kiểu vào riêng phần tử trang Web Ví dụ, ta sử dụng selector ID để áp dụng kiểu đặc biệt cho phần tử Điều nghĩa kiểu tương tự áp dụng cho phần tử khác trang đó, không xác định Tương tự với việc sử dụng kiểu nội tuyến mà nhờ áp dụng riêng cho phần tử Selector ID bắt đầu dấu thăng (#) { PAGE } Ví dụ 7: ID Selectors #control {color:red} Fire is of this color This paragraph has no style applied Hình 11.7: Kết ví dụ Ví dụ 8: Combining ID and Class Selectors forest {color:green} danger {color:red} #control {color:blue} green things fire hazards more green things { PAGE } more fire hazards things that burn things that don't burn water Hình 11.8: Kết ví dụ Selector ngữ cảnh Selector ngữ cảnh liên quan đến ngữ cảnh phần tử Ví dụ, ta có hai phần tử giá trị Phần tử hay phần tử cha có phần tử bên Để thay đổi kiểu phần tử con, ta phải sử dụng selector theo ngữ cảnh Điều dựa khái niệm kế thừa, phần tử kế thừa kiểu gán cho thẻ cha Một ví dụ điển hình phần tử Khi thêm phần tử vào thẻ , phần tử bên kế thừa kiểu Bây để kiểm soát điều đó? Suy cho cùng, ta không muốn tất phần tử trang Web xuất kiểu Trong trường hợp đó, phải có thay đổi đặc biệt phần tử con, nói cách khác nạp chồng kế thừa Ví dụ 9: { PAGE } Contextual selectors BODY { color:blue; background:lavender; font-family:Arial; } UL {color:red } mangoes oranges apples mangoes oranges apples Hình 11.9:Kết ví dụ Selector UL style sheet xác định mục danh sách(list item) hiển thị màu đỏ Chúng kế thừa phông chữ Arial từ khai báo BODY, màu đỏ từ khai báo UL Nếu ta xác định font-family khai báo UL, nạp chồng lên khai báo selector BODY Không có selector OL style sheet, thuộc tính OL kế thừa từ selector BODY 11.2.4 Kết hợp, liên kết chèn style sheet vào tài liệu HTML { PAGE } Có số cách ta kết hợp style sheet với HTML Phần tử STYLE Thuộc tính Style Phần tử Link Phần tử STYLE Phần tử STYLE chèn vào phần tử tài liệu, tất quy tắc định nghĩa thẻ mở thẻ đóng Khi hiển thị trang, tài liệu có nhúng STYLE tác động Ví dụ: H1 {color:maroon;} P {color:hotpink; font-family:Arial;} Ví dụ cách sử dụng phần tử Thuộc tính STYLE Thuộc tính STYLE sử dụng để áp dụng style sheet cho phần tử Một style sheet nhỏ luật Khi sử dụng thuộc tính Style ta bỏ qua phần tử STYLE đặt khai báo trực tiếp vào thuộc tính Style thẻ mở phần tử Ví dụ: Rõ ràng nên dùng kiểu thay đổi kiểu cho phần tử đặc biệt Nếu ta có dự định áp dụng kiểu khắp tài liệu lúc cách hay Ví dụ cách sử dụng thuộc tính STYLE Phần tử Link Nếu ta muốn sử dụng phần tử LINK, stylesheet ta phải tài liệu riêng Sau phải thêm địa Web stylesheet vào Ví dụ, [...]... height Left Top z-index { PAGE } Tóm tắt bài học HTML động” có thể được định nghĩa như là một phần mềm được sử dụng cho việc mô tả sự kết hợp giữa HTML, các stylesheet và ngôn ngữ script làm cho tài liệu trở nên sinh động Style sheet là một kỹ thuật đơn giản để thêm các kiểu (font, màu, khoảng cách) vào các trang web Có hai cách để thay đổi kiểu trên trang web của chúng ta: Thay đổi kiểu nội tuyến Viết... phần tử nào đó Selector ID được bắt đầu bằng dấu thăng (#) { PAGE } Ví dụ 7: ID Selectors #control {color:red} Fire is of this color This paragraph has no style applied < /HTML> Hình 11.7: Kết quả ví dụ 7 Ví dụ 8: Combining ID and Class Selectors ... một tài liệu riêng Sau đó chúng ta phải thêm địa chỉ Web của stylesheet vào Ví dụ,