Địa chỉ tuyệt đối
- Khi tham chiếu đến 1 tập tin phải ghi đầy đủ địa chỉ URL.
- http://ServerName/Đường dẫn/ Tên tập tin VD: http://vietnamnet.vn/Tinkinhte/quocte/tin07.html
Địa chỉ tương đối.
- Khi tham chiếu đến 1 tập tin cùng thư mục tập tin chính: Tên tập tin
- Khi tham chiếu đến 1 tập tin khác thư mục tập tin chính: Đường dẫn/Tên tập tin
Ghi chú: Sử dụng ../ để chỉ thư mục cấp trên thư mục chứa tập tin chính: VD:
Sẽ ghi: ../../Images/Logo.jpg 11.2. Chọn bố cục cho trang web
11.2.1. Độ phân giải màn hình
- Độ phân giải của màn hình quyết định rất nhiều đến việc hiển thị trang web lên trình duyệt.
- Khi thiết kế trang web, chúng ta phải chọn một kích thước chuẩn cho trang web của mình. Hiện nay, đa số các màn hình đều hiển thị ở độ phân giải 1024x768.. Tuy nhiên, cũng còn một số màn hình nhỏ vẫn thể hiện ở độ phân giải 800x600. Vì vậy, chúng ta phải chọn một độ phân giải thích hợp nhất cho trang web của mình, và được đa số người dùng sử dụng.
Tập tin HTML
Tập tin hình ảnh tham chiếu: Logo.jpg
11.2.2. Chế độ màu
- Việc chọn hình ảnh theo các chế độ màu khác nhau quyết định đến việc thể hiện trang web nhanh hay chậm. Một hình ảnh có thể thể hiện ở nhiều chế độ màu khác nhau, tuy nhiên, khi ở chế độ màu cao hình ảnh sẽ rất đẹp nhưng kèm theo là dung lương sẽ lớn và việc thể hiện nó cũng chậm nhơ, và ngượ lại, một hình ảnh ở chế độ màu thấp thì hình ảnh sẽ ko được rõ nét, tuy nhiên dung lượng của hình sẽ nhỏ và tốc độ hiển thị cũng sẽ nhanh hơn. - Các chế độ màu : 16 màu 256 màu 16 bits 24 bits 32 bits 11.3. Bố cục cho trang web
Một trang web được bắt đầu từ góc trên bên trái, kéo dài qua phải và xuống dưới không giới hạn, Có nghĩa là một trang web có chiều dài và chiều rộng không xác định.
Các điều khiển di chuyển trang nên đặt phía trên bên trái và phía dưới bên phải của trang để dễ di chuyển. Hoặc ta cũng có thể tạo một menu điều khiển phía bên trái hoặc phải. Các menu di chuyển phải dễ sử dụng, và chỉ nên click ừ 3 đến 5 lần là đến được trang cần thiết. Các di chuyển càng dễ dàng sẽ tạo cho người dùng cảm giác dễ sử dụng.
Không nên để người xem phải di chuyển cuộn trang web theo chiều ngang để xem, chính vì vậy kích thước của trang web nên là 800 hoặc 1024 là hợp lý (vừa với độ phân giải phổ biến nhất của các màn hình).
Sử dụng bảng hoặc div để điều khiển bố cục cho trang web, các bố trí trên web. Nên tạo một bảng hoặc 1 div với kích thước lớn nhất làm khung cho trang web. Trong đó ta sẽ có các bố trí cho các điều khiển bằng các table hay div phía trong. Khung trang web có thể được đặt phía bên trái hoặc ngay giữa trang.
Nên có các khoảng trắng giữa các khung viền. để giúp cho người dùng dễ đọc. Kích thước chuẩn cho văn bản trong trang web là 10 (ngoại trừ các tiêu đề & các mục đặc biệt). Tuy nhiên, ta cũng nên có các kích thước khác nhau cho văn bản để tránh nhàm chán.
Hiệu ứng nhấp nháy chỉ nên ứng dụng vào các đoạn văn bản mà nội dung thay đổi tuần tự. Văn bản nên được sử dụng hợp lý giữa chữ hoa và chữ thường, một văn bản quá nhiều chữ in hoa sẽ rất khó đọc.
Khi quyết định chọn hình nền cho trang web, ta chọn hình nền vừa với kích thước của trang web, vì hình nền trang web sẽ được lặp lại cho hết khung hình của trình duyệt.
Trên trang web nên có thông tin về cá nhân hoặc đơn vị sử dụng để người đọc có thể liên lạc. Thông tin liên lạc có thể tùy từng địa phương, hoặc theo định dạng quốc tế.
Bài 12 GIỚI THIỆU VỀ CSS (Cascading Style Sheet)
12.1. Giới thiệu
CSS là một tính năng cộng thêm cho HTML. Người thiết kế trang web có thể tạo ra nhiều tùy chọn hơn cho việc thể hiện trang web và quản lý các mẫu thiết kế tốt hơn.
Mô hình CSS :
12.2. Các cách thiết kế CSS
Có 3 cách thiết kế một trang web :
o Thiết kế chung trong phần tử
o Nhúng Style (adsbygoogle = window.adsbygoogle || []).push({});
o Liên kết đến file CSS
12.2.1. Thiết kế chung trong phần tử
Đây là phương thức thiết kế đầu tiên cho trang web. Ta sẽ sử dụng thuộc tính Style trong các phần tử HTML để định dạng style cho các phần tử.
<element style="property:value; …" > … </element>
vd : <b style="color:navy"> văn bản </b>
12.2.2. Nhúng Style
Khi thiết kế trang web, ta sử dụng phần tử style để định nghĩa các mẫu.
<style type="text/css"> element{color : value;…} </style>
12.2.3. Liên kết đến file CSS
Định nghĩa các style ở một file riêng biệt và được lưu lại dưới dạng file *.css, file này sẽ được liên kết vào trang web qua phần tử link.
file style.css element{ property : value;…. } file index.html <head>
<title> Style Sample </title>
<link rel="stylesheet" href="style.css" /> </head>
Hoặc
<head>
<title> Style Sample </title> <style type="text/css"> @import url(style.css); </style> </head> 12.3. Các định nghĩa CSS Định nghĩa cho tất cả các phần tử HTML. *{ property : value; … } Định nghĩa cho 1 phần tử HTML Element{ property : value; … }
Nếu bạn muốn tạo ra các định dạng khác nhau cho cùng một phần tử, hay muốn chia sẻ một định dạng cho nhiều phần tử khác nhau, ta sẽ định nghĩa các style dưới dạng class (lớp định dạng riêng). Sau đó, nhúng các định dạng đó vào trong trang web qua thuộc tính class của các phần tử.
o Định nghĩa một class : <style> .class1{ property : value; … } </style> o Nhúng class
<element class="class1"> … </element>
Định nghĩa class cho một phần tử
Element.class{
property : value; …
}
Định nghĩa class cho một phần tử, có một thuộc tính có giá trị được chỉ định
Element.class[property^=value] {
property : value; …
}
Các phép so sánh = (equal), ^=(begin with), ~= (contain space-separated), *=(contain) , |= (begin with), $= (file what)
Ngoài ra, nếu ta muốn định dang riêng cho element có id riêng nào đó, ta sẽ định nghĩa style dưới dạng id riêng, và trong trong web, phần tử nào muốn có định dạng ta sẽ đặt id cho phần tử đó tương tự id của style.
o Định nghĩa một id : <style> #id1{ property : value; … } </style> o Nhúng class (adsbygoogle = window.adsbygoogle || []).push({});
<element id="id1"> … </element>
Định nghĩa id cho một phần tử
Element#id{
}
Nhóm định nghĩa
Element1, Element2 {
property : value; …
}
Class# Element1, Class#Element2 {
property : value; …
}
Định nghĩa cho các phần tử con
Element1 Element2 {
property : value; …
}
Định nghĩa cho các phần tử con ngay sau
Element1>Element2 {
property : value; …
}
Định nghĩa cho một phần tử kế ngay sau
Element1+Element2 {
property : value; …
}
Định nghĩa cho các phần tử kế ngay sau
Element1~Element2 {
property : value; …
}
Định nghĩa lớp giả (Pseudo class),
Element:pseudo-class {
} (adsbygoogle = window.adsbygoogle || []).push({});
Các lớp giả :link, :visited, :active, :hover, :focus, :active, :lang, :first-child, :first- line, :first-letter.
12.4. Các thuộc tính
12.4.1. Thuộc tính kích thước
height : {length | percentage | auto | inherit} min-height : {length | percentage | inherit}
min-height : {length | percentage | inherit | none} width : {length | percentage | auto | inherit} min- width : {length | percentage | inherit}
min- width : {length | percentage | inherit | none}
12.4.2. Thuộc tính lề
margin-top : {length | percentage | auto | inherit} margin-right : {length | percentage | auto | inherit} margin-bottom : {length | percentage | auto | inherit} margin-left : {length | percentage | auto | inherit} margin : {[length | percentage | auto]1 to 4 values | inherit} padding-top : {length | percentage | auto | inherit} padding -right : {length | percentage | auto | inherit} padding -bottom : {length | percentage | auto | inherit} padding -left : {length | percentage | auto | inherit} padding : {[length | percentage | auto]1 to 4 values | inherit}
12.4.3. Thuộc tính khung viền
border-top-color : {color | transparent | inherit}
border-top-color-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit}
border-top-color-width : {thin | medium | thick | length | inherit} border-top : {border-width | border-style | border-color | inherit} border-right-color : {color | transparent | inherit}
border-right-color-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit}
border-right-color-width : {thin | medium | thick | length | inherit} border-right : {border-width | border-style | border-color | inherit} border-left-color : {color | transparent | inherit}
border-left-color-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit}
border-left-color-width : {thin | medium | thick | length | inherit} border-left : {border-width | border-style | border-color | inherit} border-bottom-color : {color | transparent | inherit}
border-bottom-color-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit} border-bottom-color-width : {thin | medium | thick | length | inherit} border-bottom: {border-width | border-style | border-color | inherit} border-color : {color | transparent | inherit}
border-color-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit}
border-color-width : {thin | medium | thick | length | inherit} border: {border-width | border-style | border-color | inherit} outline-color : {color | invert | inherit}
outline-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit}
outline-width : {thin | medium | thick | length | inherit}
outline : {outline-width | outlint-style | outline-color | inherit}
12.4.4. Thuộc tính bố cục
display : {block | inline | inline-block | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column- group | table-footer-group | table-header-group | table-row | table-row-group | none | inherit}
position : {absolute | fixed | relative | static | inherit} float : {left | right | none | inherit}
clear : {none | left | right | both | inherit}
visibility : {visible | hidden | collapse | inherit} top : {length | percentage | auto | inherit} right : {length | percentage | auto | inherit} bottom : {length | percentage | auto | inherit} left : {length | percentage | auto | inherit} z-index : {integer | auto | inherit}
overflow : {auto | hidden | scroll | visible | inherit} clip : {shape | auto | inherit}
12.4.5. Thuộc tính danh sách
list-style-type : {circle | disc | square | armenian | decimal | decimal- leading-zero | georgian | lower-alpha | lower-greek | lower- latin | lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit} (adsbygoogle = window.adsbygoogle || []).push({});
list-style-image : {uri | none | inherit}
list-style : { list-style-type | list-style-position | list-style-image}
12.4.6. Thuộc tính bảng
table-layout : {auto | fixed | inherit}
border-collapse : {collapse | separate | inherit} border-spacing : {length [length] | inherit} empty-cells : {hide | show | inherit}
caption-side : {bottom | top | inherit}
12.4.7. Thuộc tính về màu sắc và nền
background-color : {color | transparent | inherit} background-image : {uri | none | inherit}
background-repeat : {repeat | repeat-x | repeat-y | no-repeat | inherit} background-position : {{percentage | length | left | right}1 or 2 values |
inherit }
background-attachment : {scroll | fixed | inherit}
background : {background-color background-image background-repeat background-attachment background-position | inherit}
color : {color | inherit}
12.4.8. Thuộc tính định dạng kí tự - văn bản
font-family : {family name, … | inherit}
font-size : {absolute-size | relative-size | length | percentage | inherit} font-weight : {100…900 | bold | bolder | lighter | normal | inherit} font-style : {italic | normal | oblique | inherit}
font-variant : {normal | small-caps | inherit}
font : {[font-style] [font-variant] [font weight] font-size [line-height] font-family | caption | icon | menu | message-box | small-caption | status-bar | inherit}
letter-spacing : {length | normal | inherit} word-spacing : {length | normal | inherit}
line-weight : {length | number | percentage | normal | inherit} text-align : {center | justify | left | right | inherit}
text-decoration : {blink | line-throught | overline | underline … | none | inherit}
text-indent : {length | percentage | inherit}
text-transform : {capitalize | lowercase | none | uppercase | inherit} text-shadow : {shahow, … | none | inherit}
vertical-align : {length | percentage | baseline | bottom | middle | sub | super | text-bottom | text-top | top | inherit}
white-space : {normal | nowrap | pre | pre-line | pre-wrap | inherit} direction : {ltr | trl | inherit}
unicode-bidi : {bidi-override | embed | normal | inherit}
12.4.9. Thuộc tính về giao diện người dùng
cursor : {[uri] | auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit}
12.4.10. Thuộc tính phân trang
page-break-before : {always | auto | avoid | left | right | inherit} page-break-after : {always | auto | avoid | left | right | inherit} (adsbygoogle = window.adsbygoogle || []).push({});
12.4.11. Thuộc tính giàng riêng cho FireFox
-moz-border-radius : {length | percentage | inherit}
-moz-box-sizing : {content-box | border-box | padding-box}
12.4.12. Thuộc tính giàng riêng cho IE
zoom : {number | percentage | normal} filter : {filter}
behaviour : uri
12.5. Mô hình định dạng phần tử trong CSS
12.5.1. Mô hình hộp (box)
Các phần tử HTML được thể hiện trên web theo mô hình hộp (box). Mô hình hộp của một phần tử bao gồm : content (nội dung), padding, border, margin.
Kích thước của phần nội dung được xác định bởi thuộc tính width, cộng thêm kích thước của padding, border và margin sẽ ra tổng kích thước của box.
Vd : một class được định nghĩa như sau : #myBox {
margin: 10px; padding: 5px; width: 70px; }
12.5.2. Margin Collapsing (thu hẹp lề)
Khi một phần tử nằm trên một phần tử khác, lề trên của phần tử dưới sẽ bị hẹp
Khi một phần tử được chứa trong một phần tử khác, không có border hay padding phân cách, thì lề trên/dưới của phần tử trong sẽ bị thu hẹp.
Khi một phần tử không chứa nội dung nào (phần tử trống), cũng không có padding hay border, thì lề dưới của phần tử bị thu hẹp, chỉ còn lai lề trên.
Tương tự, khi hai phần tử trống nằm gần nhau, thì khi đó sẽ chỉ còn lại lề trên của phần tử trên.
Tổng quát, các phần tử sẽ được thu hẹp lề khi được sắp xếp gần nhau như sau :
12.5.3. Thiết lập vị trí
Thiết lập vị trí tương đối : các box được thiết lập vị trí tương đối (relative) sẽ có vị trí được tính toán theo các box xung quanh.
#myBox {
position: relative; left: 20px;
}
Thiết lập vị trí tuyệt đối : các box được thiết lập vị trí tuyệt đối (absolute) sẽ có vị trí được tính toán tuyệt đối dựa vào trình duyệt.
Thiết lập vị trí cố định : các box được thiết lập vị trí cố định (fixed) sẽ có vị trí luôn xuất hiện trên màn hình với vị trí xác định.
Một ví dụ về vị trí cố định (fixed positioning)