Lập trình web với C#

Nội dung text: Lập trình web với C#

1. 6/5/2012  CSS là một chuẩn để định dạng các trang Web.  CSS mở rộng ngôn ngữ HTML truyền thống với hơn 70 thuộc tính về kiểu dáng có thể áp dụng cho các thẻ HTML Lập trình web với C#  Các nhà lập trình Web có thêm nhiều lựa chọn về màu sắc, khoảng cách, vị trí, biên, lề, con trỏ. 1 2  CSS phá bỏ rào cản HTML bằng cách cho phép có thêm nhiều đặc tả thuộc tính chuẩn để phục vụ cho việc dàn trang và định dạng.  Những thuộc tính này được áp dụng vào trong tài liệu mà không pháo vỡ cấu trúc HTML đã có sẵn. Mô hình 3 lớp trong phát triển WEB 3 4 1
2. 6/5/2012   Áp dụng CSS vào trang HTML Dùng inline style: là cách dùng style ngay trong câu lệnh, chỉ cần bổ sung thêm thuộc ◦ Có 4 cách áp dụng CSS và trong tài liệu: tính STYLE vào sau một phần tử HTML nào  Dùng inline style đó theo cú pháp như sau:  Nhúng các style sheet  ế ớ ộ Liên k t v i m t style sheet Nội dung  Bao gộp một style sheet  Ví dụ: Màu xanh nước biển. 5 6   Một inline style áp dụng cho bất cứ thẻ nào và Nhúng style sheet ◦ Định nghĩa một khối (phân biệt bởi các thẻ và ) được đặt trong  Dùng inline style làm cho tài liệu rõ ràng hơn 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 nhưng có thể dẫn đến việc viết mã quá nhiều. dáng), trong đó mỗi qui tắc định nghĩa style cho  Làm cho các đoạn mã dư thừa, khó bảo trì một phần tử hay một nhóm các phần tử HTML. 7 8 2
3. 6/5/2012  Liên kết đến style sheet B {text-transform: lowercase; font-size:18px} ◦ Có thể lưu style sheet trong một tập tin riêng biệt và liên kết P { border: silver thick solid; background-color:Aqua;} nó đến một hay nhiều tài liệu, bằng cách 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 Mỗi đoạn sẽ có viền động giống như style sheet nhúng, chỉ khác là những style rule ậ Đ m không đóng trong cặp thẻ . màu bạc ◦ ệ ế ế ộ 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. 9 10  Cú pháp của CSS được tạo nên bởi 3 thành  Selector thường là tên các thẻ HTML ầ ph n:  Mỗi một thuộc tính cần phải có một giá trị ◦ Phần tử chọn (thường là một thẻ HTML) (Selector)  Một thuộc tính và giá trị của nó được phân cách ◦ Thuộc tính (Property) ◦ Giá trị (Value) nhau bởi dấu hai chấm (: )  Cú pháp của CSS được thể hiện như sau:  Hai cặp thuộc tính-giá trị được phân cách nhau bởi Selector { dấu chấm phảy (;). Thuộc tính 1: giá trị;  ộ ặ ộ ị ủ ộ ẻ Thuộc tính n: giá trị; Toàn b các c p thu c tính-giá tr c a m t th } HTML được đặt trong cặp dấu ngoặc nhọn ({}). 11 12 3
4. 6/5/2012  Dùng các phần tử HTML làm phần tử chọn là cách  Dùng thẻ HTML tốt nhất để áp dụng CSS nếu muốn tất cả các phần  Sử dụng CLASS tử thuộc một kiểu nào đó xuất hiện với cùng một ị ạ  Sử dụng ID đ nh d ng  Cách làm này là cứng nhắc nhất trong 3 cách nhưng nó là cách tốt nhất để đảm bảo tính nhất quán của việc định dạng suốt tài liệu.  Dùng thẻ HTML làm phần từ chọn thường được dùng là định dạng các siêu liên kết trong tài liệu. 13 14  Body {color: black} /*Phần chữ trong thẻ body sẽ có màu đen*/ a { /*tất cả thẻ a sẽ không có dấu gạch chân*/  p {text-align: center} /*tất cả các thẻ trong text-decoration:none; trang HTML sẽ được canh giữa.*/ }  p /*canh giữa, chữ màu đỏ, font arial*/ { text-align: center;color: red; font-family: arial } 15 16 4
5. 6/5/2012  Bằng việc tạo ra các lớp (CLASS), có thể định  Ví dụ: Trên trang web có 3 loại đoạn văn: nghĩa nhiều kiểu thể hiện khác nhau cho cùng ◦ Đoạn văn canh lề trái,đoạn văn canh lề giữa và một thẻ HTML và áp dụng mỗi lớp vào một vị trí đoạn văn canh lề phải. Khi đó có thể định nghĩa 3 cần thiết trên trang web. Có 2 cách dùng: lớp riêng biệt cho 3 loại đoạn văn này như sau: ◦ Các CLASS gắn với 1 thẻ cụ thể p.trai {text-align: left} ◦ Các CLASS không gắn với một thẻ cụ thể (có thể gắn p.phai {text-align: right} với hầu như tất cả các thẻ) p.giua {text-align: center} 17 18  Tiếp theo, trong trang HTML sử dụng như  Áp dụng sai: sau: Đây là đoạn định nghĩa Đoạn văn này được canh lề trái. sai Đoạn văn này được canh lề phải. Ví dụ này không hoạt động Đoạn văn này được canh lề giữa. 19 20 5
6. 6/5/2012  Có thể tạo ra một lớp mà lớp đó có thể gắn vào  Trong trang HTML ta sử dụng như sau: hầu như các thẻ trong trang web bằng cách bỏ ạ ề ữ tên thẻ ở đầu đi nhưng nhớ giữ lại dấu chấm (.) Đo n này canh l gi a.  Ví dụ: định nghĩa một lớp "giua" có thể gắn với Câu này canh giữa. bất cứ thẻ nào: .giua { text-align="center“; } 21 22   Một thẻ có thể được gán nhiều lớp bằng Định danh(ID) cũng cho phép chia các thẻ thành nhiều loại khác nhau. cách chỉ ra danh sách tên các lớp được  Một lớp có thể áp dụng nhiều lần ở nhiều vị phân cách nhau bằng khoảng trắng trí trên trang web .warning { color: red }  Định danh chỉ có thể áp dụng được duy nhất ẻ ủ ị ả .highlight { background-color: yellow } cho 1 th và tên c a đ nh danh ph i là duy nhất trên 1 trang web. Danger  Qui tắc cho Style dùng ID làm phần tử chọn An important point. bắt đầu bằng dấu thăng (#) 23 24 6
7. 6/5/2012  Đoạn mã dưới đây có thể áp dụng cho thẻ  Đoạn mã dưới đây có thể có hiệu lực cho thẻ có ID là para1 đầu tiên có ID là xyz: p#para1 { #xyz {color: green} text-align: center;  Khi sử dụng: color: red Đoạn văn bản } ◦ Các thẻ khác không sử dụng được  Khi sử dụng như sau: Đoạn văn bản Đoạn văn bản không có hiệu lực 25 26  Đoạn mã dưới đây chỉ có thể áp dụng cho thẻ  Được sử dụng đối với các kiểu liên kết, ngoài đầu tiên: ra còn được sử dụng cho các mục đích khác p#wer345 {color: green} như bổ sung hiệu ứng cho các thẻ.  Khi sử dụng:  Sức mạnh của loại phần tử này sẽ được phát Đoạn văn bản huy đối với các liên kết đó là sự kết hợp của  Và đoạn dưới đây không có hiệu lực: các phần tử với phần tử lớp để tạo ra các kiểu Đoạn này không được áp ế ể ụ ộ dụng đa liên k t mà có th áp d ng cho m t trang. 27 28 7
8. 6/5/2012  Phần tử lớp giả lập liên kết bắt đầu bằng dấu neo  Có thể viết các luật cho mỗi phần tử chọn lớp (anchor), tiếp theo là dấu “:”, cuối cùng là tên lớp giả và chúng có thể ứng dụng đến toàn bộ các liên ậ ộ ố ầ ử ự ọ ớ ả ậ ế ớ l p. M t s ph n t l a ch n l p gi l p liên k t qui ư c kết như sau:  Có thể kết hợp các phần tử chọn trong một lớp, a:link: Bổ sung kiểu cho các liên kết chưa bấm lớp này cho phép tạo ra kiểu đa liên kết. a:visited: bổ sung kiểu cho liên kết đã được viếng thăm a.main:link a:hover: bổ sung kiểu khi di chuột qua liên kết a.subnav:link a:active: bổ sung kiểu khi kích chuột vào liên kết a.footer:link 29 30  ế ợ ớ K t h p l p CSS và Pseudo Class  Ví dụ trên áp dụng đối với con đầu tiền của ◦ Cú pháp: selector.class:pseudo-class {property: value} a.red:visited {color: #FF0000}  ụ ố ớ ấ ả  :first-child Pseudo-class Áp d ng đ i v i t t c con div > p:first-child { text-indent:25px } p:first-child em { font-weight:bold } This selector will match the first paragraph inside the div in For example, the em in the HTML below is the first the following HTML: First paragraph in div. This paragraph will be child of the paragraph: indented. Second paragraph in div. This I am a strong man. paragraph will not be indented. 31 32 8
9. 6/5/2012  Áp dụng đối với con của bất kì tag nào Có bốn phần tử trợ giúp nhà lập trình dành được mục tiêu in ấn được mô tả bảng dưới đây: a:first-child { text-decoration:none } Các phần tử chọn giả lập trong CSS2 Visit Visit :first-line Để lựa chọn và áp dụng tới dòng đầu tiên trong phần tử đã định sẵn :first-letter Để lựa chọn và áp dụng kiểu đến kí tự đầu tiên trong phần tử :before Cho phép xác định nội dụng trong tờ kiểu dáng được chèn phía trước phần tử định sẵn :after Cho phép xác định nội dung trong tờ kiểu dáng được chèn sau phần tử định sẵn 33 34  Cú pháp: selector:pseudo-element  :first-line Pseudo-element {property: value}  Để áp dụng kiểu khác nhau đến dòng đầu p {font-size: 12pt} tiên trong paragraph, sử dụng cú pháp p:first-line {color: #0000FF; font-variant: small-caps} phần tử giả lập: p:first-line ◦ Some text that ends up on two or more  Nếu muốn bổ sung nội dung sau hoặc trước lines một phần tử, cần phải định nghĩ nội dung trong tờ kiểu dáng.  Ví dụ: p:first:line {color:red;} 35 36 9
10. 6/5/2012  Một số thuộc tính của first-line  :first-letter Pseudo-element ◦ font properties p {font-size: 12pt} ◦ color properties p:first-letter {font-size: 200%; float: left} ◦ background properties The first words of an article. ◦ word-spacing  Sử dụng lớp CSS với Pseudo-element ◦ letter-spacing ◦ Cú pháp: selector.class:pseudo-element {property: ◦ text-decoration value} ◦ vertical-align ◦ ụ ◦ text-transform Ví d :p.article:first-letter {color: #FF0000} A paragraph in an article ◦ line-height ◦ clear 37 38 p {font-size: 12pt}  Để sinh ra nội dung sử dụng phần lựa lựa ọ ả ậ ớ ị p:first-letter {color: #FF0000; font-size: 200%} ch n gi l p trư c và sau, chúng ta đ nh nghĩa phần tử đến luật sẽ được áp dụng, p:first-line {color: #0000FF} phần tử giả lập trước, sau, thuộc tính nội The first words of an article dung, và nội dung trong dấu nháy kép: ◦ h1:after { content: "header note"} Kết quả: Câu “hearder note” xuất hiện sau h1 39 40 10
11. 6/5/2012  Nhóm phần tử lựa chọn cho phép người dùng nhóm các Selector Mục đích phần tử lựa chọn với nhau khi muốn gán các phần tử :hover Áp dụng cho các luật khi di chuyển chuột qua phân tử lựa chọn này những thuộc tính giống nhau. :active Áp dụng khi click chuột vào một đối tượng  Ví dụ dưới đây sẽ nhóm tất cả các thẻ Header lại, định nghĩa chúng sẽ có màu xanh, và sử dụng font arial hoặc sans-serif: :focus Áp dụng khi một phần tử đang được focus h1, h2, h3 {font-family: Arial, sans-serif; color: green } 41 42  Trong một số trường hợp cần áp dụng luật  Khác với descendant selector, child selectors cho thẻ nằm trong một thẻ khác -> sử dụng cho phép lựa chọn con(child) duy nhất descendant selector  Cú pháp : thẻ>thẻ  Ví dụ  div>em ◦ div p {color:red;} /* chỉ có thẻ p nằm trong thẻ div  div>p>em ảnh hưởng bởi các luật 43 44 11
12. 6/5/2012  Cho phép lựa chọn các phần tử dựa vào thuộc  Rất nhiều mẫu selector có thể được kết hợp để tạo tính của mà các phần tử có thành các luật cụ thể hơn ◦ div p a.definition { color: green } Mẫu Mô tả ◦ div p a.definition:hover { color: red } E[attr] Áp dụng phần tử E có thuộc tính là attr mà  Rule đầu áp dụng liện kết có class="definition" mà không quan tâm tới giá trị ế ằ ầ ử ả E[attr=“value”] Áp dụng phần tử E có thuộc tính là attr được liên k t này n m trong ph n t p, ngay b n thân p thiết lập giá trị xác định là value nằm trong phần tử div E[attr~="value Áp dụng phần tử E với thuộc tính attr chứa giá  Rule 2 thay đổi liên kết sang màu đỏ khi di chuyển "] trị xác định trong danh sách của nó ộ ế E.value Tương đương E[class~="value"]. chu t qua liên k t E#value Tương đương E[id="value"]. 45 46  Một vài thuộc tính định dạng được thừa kế  Ví dụ 1 theo mặc định. Có nghĩa là các phần tử con ◦ b { font-size: 12pt; } /* không có xung đột*/ ◦ thừa kế giá trị định dạng của các phần tử p b { color: red; }  ụ cha. Nhưng thuộc tính này như color, font Ví d 2: ◦ b { font-size: 12pt; } /* xung đột thuộc tính font-size và text-align */ ◦ p { color: red } ◦ p b { font-size: 14pt; color: red; } ◦ Sample paragraph with bold text. 47 48 12
13. 6/5/2012  Xác định tất cả các luật áp dụng cho phần  Từ khóa !important có thể được sử dụng tử. trong khai bảo kiểu để đảo ngược thứ tự  Sắp xếp theo thứ tự và mức độ quan trọng của tác giả và sheet định dạng người dùng (dựa vào từ khóa !important).  * in the user's style sheet */  Sắp xếp dựa vào nét riêng biệt ◦ p { color: red; font-size: 18pt !important; }  Sử dụng thứ tự định nghĩa luật, luật cuối  /* in the author's style sheet */ ◦ cùng được sử dụng p { color: green; font-size: 12pt; } 49 50  in, cm, mm: inches, centimeters và millimeters.  pt, pc: points và picas. 72 points bằng một inch và một pica bằng 12 point  em: liên quan đến kích thước font và lấy độ THIẾT LẬP VĂN BẢN rộng của kí tự “M”  ex: liên quan kích thước font và có chiều cao của kí tự ‘x’  px: pixels. 51 52 13
14. 6/5/2012 THIẾT LẬP FONT 53 54 55 56 14
15. 6/5/2012  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 ộ 57 h p. 58 59 60 15
16. 6/5/2012  Mỗi hộp được chia thành các vùng sau:  Mô hình box là một trong nền tảng của CSS ◦ Content area (text, objects) Vùng nội dung có và chỉ ra một phần tử sẽ được hiển thị như đỉnh nội dung bao quanh nội dung thực sự phần thế nào và đối với phần mở rộng, chúng tử. tương tác với nhau như thế nào. ◦ Padding Các đỉnh xung quanh padding của hộp  Mỗi một phần tử trong trang được xem như ◦ Borders Đỉnh border xác định border của hộp là một hình chữ nhật được tạo ra từ nội ◦ Margins Đỉnh mép margin xung quanh margin dung thành phần, padding, border và ộ ợ ị ở ỉ h p và đư c đ nh nghĩa b i đ nh: left, right, top, margin. bottom. 61 62  Padding bao quanh phần nội dung. Thường được  Nếu một margin có độ rộng bằng 0, nó trở sử dụng để tạo nền cho một phần tử. thành đỉnh border.  Border tạo ra đường viền bao quanh phần padding.  Nếu đỉnh border có độ dày bằng 0, nó trở  Margin trong suốt và không thể nhìn thấy, chúng thành đỉnh của padding. được sử dụng để ngăn cách giữa các phần tử  Nếu padding có độ dày bằng 0, nó trở thành (element). đỉnh content  Padding, border, và margin là lựa chọn không bắt buộc và có thể nhận giá trị bằng 0. Khi đó padding, border và margin sẽ sát nhật thành 1. 63 64 16
17. 6/5/2012  Thuộc tính width (độ rộng) và height (chiều cao) tham chiếu đến độ rộng và chiều cao của phần nội dụng.  Bằng cách bổ sung padding, border và margin sẽ không ảnh hưởng đển kích thước của phần nội dung nhưng sẽ tăng kích thước vòng ngoài của một box phần tử.  Ví dụ:nếu muốn một box (với margin là 10pixel và padding là 5 pixel trên mỗi mặt) là 100pixel thì độ 65 66 rộng của nội dung sẽ là 70pixel.  Chú ý: ◦ Padding, border và margin có thể được sử dụng đối với tất cả mặt của phần tử hoặc là tác dụng lên từng mặt riêng. Margin có thể thiết lập giá trị âm ◦ IE 5 và 6 sử dụng một chuẩn riêng 67 68 17
18. 6/5/2012  Kiểu box được thiết lập bởi thuộc tính  Có 2 loại hộp: display. Thiết lập giá trị của block trong phần ◦ Block-Level Elements là một trong phần tử được tử inline, gây cho phần tử inline được đối xử định dạng như một hộp. Nó có thể chứa các phần như phần tử block tử nội tuyến và các phần tử block-level khác. Block-box được sinh ra bởi thẻ p, div, table ◦ 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. 69 70  Block box được xem như là một containing block cho bất kì box nào trong block box.  Ví dụ: Some text More text This is the first sentence. This is the second sentence.  Phần tử div thiết lập một containing block cho cả dòng đầu tiên và phần tử P. Đến lượt phần tử P tạo ra một containing block cho dòng thứ 2  Containing block được sử dụng để xác định cả vị trị của box bên trong nó và trong vài trường hợp là mảng các box. Ví dụ, nếu một phần tử thiết lập width:50% có nghĩa là độ rộng của nó được thiết lập bằng một nửa của containg block 71 72 18
19. 6/5/2012  Some emphasized  Block-level box sẽ xuất hiện theo chiều thẳng đứng text sau một box khác, khoảng cách chiều thẳng đứng từ các box bằng margin chiều thẳng đứng hộp  Inline box được đặt trên một đường ngang. Khoảng cách ngang của chúng được căn chỉnh bằng cách sử dụng padding, border, margin ngang. Tuy nhiên, padding, border và margin dọc sẽ không ảnh hưởng đến độ cao của inline box. Box ngang tạo bởi các dòng gọi là inline box và một line box luôn luôn cao đủ để cho tất cả các line box mà nó chứa. Nếu tăng chiều cao của line có thể tăng độ cao của box này 73 74  Block: sinh ra một block box  inline : sinh ra một inline box  list-item: sinh ra danh sách box p{ display: block } em { display: inline } li { display: list-item } img{ display: none } /* Không hiển thị ảnh*/ 75 76 19
20. 6/5/2012   'margin-top', 'margin-right', 'margin-bottom', 'margin-top', 'margin-right', 'margin- bottom', 'margin-left‘ 'margin-left', và 'margin‘ ◦ Giá trị: | inherit  ‘margin’ là thuộc tính rút gọn thiết lập giá trị ◦ Khởi tạo: 0 ◦ Áp dụng: tất cả các phần tử margin cho 4 mặt ◦ Thừa kế: không  Kiểu giá trị : ◦ Phần trăm: tham chiếu đến độ rộng của nội dung ◦ length ◦ percentage ◦ auto. 77 78  'margin’  Nếu có một giá trị, áp dụng tất cả các mặt. ◦ Giá trị: {1,4} | inherit ◦ Khởi tạo: không định nghĩa  Nếu có 2 giá trị, top và bottom nhận giá trị 1, left ◦ Áp dụng: tất cả các phần tử và right nhận giá trị 2 ◦ Thừa kế: không  ◦ Phần trăm: tham chiếu đến độ rộng của nội dung Nếu có 3 giá trị, top nhận 1, left, right nhận 2 và bottom nhận 3  Nếu có 4 giá trị, tương ứng là top, right, bottom và left  Ví dụ: ◦ body { margin: 2em } /* all margins set to 2em */ 79 80 20
21. 6/5/2012  Margin collapsing: khi 2 hoặc nhiều margin gặp nhau, chúng sẽ thu hẹp để tạo thành một margin đơn. Chiều cao của margin này sẽ bằng với chiều cao lớn nhất của 2 margin bị thu hẹp  Khi 1 phần tử ở phía trên một phần tử khác, margin đáy của phần tử đầu tiên sẽ thu nhỏ ớ ỉ ủ ầ ử ứ cùng v i margin đ nh c a ph n t th 2. 81 82  Khi một phần tử nằm trong một phần tử khác, giả sử không có padding hoặc border , phần top và bottom margin sẽ hợp lại với nhau 83 84 21
22. 6/5/2012  padding-top  'padding-top', 'padding-right', 'padding-  padding-right  padding-bottom bottom', 'padding-left'  padding-left ◦ Giá trị: | inherit  padding ◦ Giá trị khởi tạo: 0 ◦ Áp dụng: tất cả các phần tử ◦ Thừa kế: không 85 86  Padding  Thuộc tính 'padding' là thuộc tính rút gọn thay thế ◦ Value: {1,4} | inherit cho các thuộc tính 'padding-top', 'padding-right', ◦ Initial: Không xác định 'padding-bottom', và 'padding-left’. ◦ Áp dụng: tất cả các phần tử  Nếu thuộc tính padding chỉ có một giá trị nó sẽ áp ◦ Thừa kế: không dụng cho tất cả các mặt ◦ Phân trăm: tham chiếu đến độ rộng của nội dung  Nếu có 2 giá trị, giá trị đầu áp dụng cho padding- khối top và padding-bottom. Giá trị 2 áp dụng cho padding-left và padding-right  Nếu có 3 giá trị, top được thiết lập giá trị đầu tiên, left và right được thiết lập với giá trị thứ hai và bottom được thiết lập với giá trị cuối cùng  Nếu có 4 giá trị thì áp dụng theo thứ tự top, right, bottom và left 87 88 22
23. 6/5/2012  Chỉ ra độ rộng, màu và kiểu của vùng border  Thuộc tính độ rộng border (border-width) chỉ của box. Thuộc tính này áp dụng cho tất cả ra độ rộng của vùng border. Thuộc tính này các phần tử  Độ rộng của border: nhận các giá trị ◦ 'border-top-width', 'border-right-width', 'border- ◦ thin bottom-width', 'border-left-width', và 'border- ◦ medium width' ◦ thick ◦ : giá trị. Giá trị không thể âm. 89 90  'border-top-width','border-right-  'border-width‘ width','border-bottom-width', 'border-left- ◦ Giá trị: {1,4} | inherit width‘ ◦ Khởi tạo: medium ◦ Giá trị: | inherit ◦ Áp dụng: tất cả các phần tử ◦ Khởi tạo: medium ◦ Thừ kế: không ◦ Áp dụng: tất cả các phần tử ◦ Phần trăm: không xác định ◦ Thừ kế: không  Thuộc tính rút gọn thay thế 'border-top- ◦ Phần trăm: không xác định width', 'border-right-width', 'border-  Các thuộc tính này thiết lập độ rộng của top, bottom-width', và 'border-left-width’ right, bottom và left border của box 91 92 23
24. 6/5/2012   Nếu có 1 giá trị, áp dụng tất cả các mặt Xác định kiểu đường của border  Tham chiếu kiểu giá trị với  Nếu có 2 giá trị, top và bottom nhận giá trị giá trị sau: thứ nhất, left và right nhận giá trị thứ 2 ◦ none: No border.-> border-width:0 ◦ dotted: đường chấm  Nếu có 3 giá trị, top nhận giá trị 1, left và ◦ dashed: gạch nhỏ right nhận giá trị 2 và bottom nhận g/t 3 ◦ solid: đường đơn. ◦ double: đôi. Khoảng cách giữa 2 đường và độ dày  Nếu có 4 giá trị, được áp dụng lần lượt theo của chúng bằng giá trị border-width ◦ thứ tự top, right, bottom, và left groove, ridge ◦ Inset, outset 93 94  'border-style'  'border-top-style', 'border-right-style', ◦ Value: {1,4} | inherit 'border-bottom-style', 'border-left-style' ◦ Initial: không có giá trị khởi tạo ◦ Applies to: tất cả các phần tử ◦ Value: | inherit ◦ Inherited: không ◦ Initial: không có giá trị khởi tạo ◦ Percentages: N/A ◦ Applies to: tất cả phần tử ◦ Inherited: Không ◦ Phần trăm: N/A 95 96 24
25. 6/5/2012  Rút gọn của 'border-top', 'border-bottom',  'border' 'border-right', 'border-left’. ◦ Giá trị: [ || ||  'border-top', 'border-right', 'border- ] | inherit ◦ Khởi tạo: phục thuộc thuộc tính bottom', 'border-left' ◦ Áp dụng: Tất cả các phần tử ◦ Giá trị: [ || || ] | inherit ◦ Phần trăm: N/A ◦ Khởi tạo: không có ◦ Áp dụng: tất cả các phần tử ◦ Thừa kế: không ◦ Phần trăm: N/A 97 98  p { border: solid red }  p { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red } 10 99 0 25
26. 6/5/2012  Normal Flow : theo mặc định của trình duyệt  Mỗi một box được thiết lập vị trí sử dụng đối với những phần tử không thiết lập position:absolute hoặc fixed và không float một trong các lược đồ trên.  Floats: được thiết lập theo chế độ của  Các box khác nhau có lược đồ khác nhau normal flow sau đó được dịch trái hoặc phải phụ thuộc vào thiết lập kiểu position và  Absolute Positioning : liên quan tới vị trí tuyệt đối của phần tử liên quan tới khối nội float dung  Trừ trường hợp đặc biệt, tất cả các hộp bắt  Relative Positioning : Lượng đồ vị trí được ầ ở ị ồ ờ sử dụng bởi hai thuộc tính position và float đ u b i v trí lu ng thư ng 10 10 1 2  Static: Box là một box cơ bản, nằm theo  Top:xác định khoảng cách đỉnh trên của box normal flow. Thuộc tính left và top không so với đỉnh trên của khối chứa đựng ụ có tác d ng  bottom:xác định khoảng cách đỉnh dưới của  ị ợ Relative: V trí box đư c tính toán theo box so với đỉnh dưới của khối chứa đựng normal flow. Box sẽ được dịch chuyển so  với normal flow. left: xác định khoảng cách đỉnh trái của box ả ủ ỉ ủ ố ứ  Absolute: Vị trí của box được xác định bởi sang bên ph i c a đ nh trái c a kh i ch a các thuộc tính top, bottom, left, right không đựng phụ thuộc vào normal flow  right: xác định khoảng cách đỉnh phải của  Fix: Được tính giống như absolute nhưng box sang bên trái của đỉnh phải của khối sẽ cố định. chứa đựng 10 10 3 4 26
27. 6/5/2012  Một box ở vị trị relative được sinh ra khi  Một phần tử ở vị trị tuyết đối được bố trí position:relative. Sự dịch chuyển so với normal liên quan đến cha có vị trị gần nhất. Nếu flow được xác định bởi các thuộc tính 'top', 'bottom', 'left', và 'right‘. một phần tử không nằm trong phần tử nào,  #myBox {position: relative;left: 20px;top: nó sẽ được đặt liên quan vị trí khởi tạo 20px;} chứa khối.  Bởi vì các box ở vị trị tuyệt đối có thể nằm ngoài luồng của tài liệu, chúng có thể đè nên các phần tử khác của trang. Có thể điều khiển ngăn xếp thứ tự của các hộp bằng cách thiết lập thuộc tính z-index. Giá trị càng cao, box nằm vị trí trên của ngăn xếp 10 10 5 6  #branding {width: 700px; height:100px; position: relative; }  #branding .tel {position: absolute; right:20px; bottom: 10px; text-align: right;}   Tel: 084 031 3735725  10 10 7 8 27
28. 6/5/2012  Một float là một box được dịch chuyển sang trái hoặc phải so với dòng hiện thời.  Đặc tính đáng quan tâm nhất của float đó là nội dung có thể chảy theo các phía của nó  Nội dung chảy xuống bên phải của hộp định trái và bên trái của hộp định phải 10 11 9 0  Left: Nội dung chạy bên phải của box, bắt đầu  Nội dung của phần tử từ đỉnh. Thuộc tính display sẽ bị loại bỏ trừ định vị tuyệt đối không bị khi giá trị display được gán bằng none. ảnh hưởng bởi các bất kì  ự ộ ụ Right: Tương t như left, nhưng n i d ng box nào. theo bên trái của box, bắt đầu từ đỉnh.  Sử dụng giá trị absolute  None và fixed của thuộc tính position 11 11 1 2 28
29. 6/5/2012  Nếu 'display' có giá trị 'none', không được sử dụng 'position' và 'float'.  Mặt khác, 'position' có giá trị là 'absolute' hoặc 'fixed', 'display‘ được thiết lập 'block' và 'float' thiết lập là 'none'. Vị trí của box sẽ được xác định bởi các thuộc tính 'top', 'right', 'bottom' và 'left'.  Mặt khác, nếu 'float' có giá trị khác 'none', 'display' được thiết lập 'block' và box được float. 11 11 3 4 29