Chương 3: Level 3: Định dạng HTML nâng cao

Các Ví dụ:Trên đây chúng ta đã cùng nhau thảo luận những vấn đề chung nhất trong việc sử dụng CSS. Phần tiếp theo tôi xin giới thiệu với các bạn cách áp dụng CSS vào những trường hợp cụ thể. Điều quan trọng trong phần này các bạn cần nhớ đó là các thuộc tính, tác dụng và các giá trị có thể đặt vào của mỗi thuộc tính này. Áp dụng CSS với nền của trang web Thuộc tính Background cho phép chúng ta điều khiển nền của một thành phần nào đó trên trang web. Thành phần...
Nội dung trích xuất từ tài liệu:
Chương 3: Level 3: Định dạng HTML nâng cao Tự Học PHP Các Ví dụ: Trên đây chúng ta đã cùng nhau thảo luận những vấn đề chung nhất trong việc sử dụngCSS. Phần tiếp theo tôi xin giới thiệu với các bạn cách áp dụng CSS vào những trường hợp cụthể. Điều quan trọng trong phần này các bạn cần nhớ đó là các thuộc tính, tác dụng và các giátrị có thể đặt vào của mỗi thuộc tính này.Áp dụng CSS với nền của trang webThuộc tính Background cho phép chúng ta điều khiển nền của một thành phần nào đó trêntrang web. Thành phần này có thể là nền trang, nền nút, nền ô textbox,...Bạn thử tưởng tượng, chúng ta có thể đặt được những thuộc tính gì cho nền? CSS cho phépbạn lựa chọn những thuộc tính sau:Nền là màu đồng nhất hay là một bức ảnh?+ Trong trường hợp là màu đồng nhất thì đó là màu gì? Xanh, đỏ,...+ Trong trường hợp đó là ảnh:- Ảnh đó là ảnh nào?- Ảnh đó được sắp xếp thế nàoCác lựa chọn như vậy CSS cho phép qui định như sau:* Thuộc tính background-color:- Ý nghĩa: Cho phép đặt màu nền là một màu đồng nhất nào đó.- Các giá trị:+ Bộ màu RGB (RGB(255,0,0): Màu đỏ; RGB(0,255,0): Màu xanh lá cây,...)+ Màu được qui định bởi những con số HEX (#FF0000: Màu đỏ; #00FF00: Màu xanh lá cây,...)+ Màu cơ bản được đặt tên bằng từ tiếng Anh (red: đỏ; green: xanh lá cây,...)+ transparent: Trong suốt (có thể nhìn xuyên qua đối tượng có màu nền trong suốt được)Ví dụ: tạo một lớp nếu áp dụng nó thì đối tượng sẽ có màu nền đỏ..MauNenDo {background-color: #FF0000}* Thuộc tính backround-image đặt một ảnh có sẵn làm nền.- Các giá trị:+ url(địa chỉ): lấy ảnh được chỉ định trong địa chỉ làm nền.+ none: Không có ảnh nền.By traibingo 1|P a ge Tự Học PHP Đây là đoạn code menu dùng CSS3 tạo nên :window.onload=montre;function montre(id) {var d = document.getElementById(id);for (var i = 1; i Tự Học PHPdisplay: block;border: 0 none;height: 100%;}#menu li a:hover, #menu dt a:hover {background: #eee;}.mentions {position: absolute;top : 300px;left : 10px;color: #000;background-color: #ddd;}Menu 1Menu 2Sub Menu 2.1Sub Menu 2.2Sub Menu 2.3Menu 3Sub Menu 3.1Sub Menu 3.1Sub Menu 3.1Sub Menu 3.1Sub Menu 3.1Sub Menu 3.1Menu 4Sub Menu 4.1Sub Menu 4.1By traibingo 3|P a ge Tự Học PHPCSS3 mang lại cho người dùng nhiều sự lựa chọn trong trình bày và mạnh mẽ hơn so với CSS2.Tuy nhiên không phải trình duyệt nào cũng hỗ trợ đầy đủ CSS3 nhất là IE dở hơi, ngay đến IE8nhiều mã CSS3 vẫn chưa được hiểu. Hi vọng IE9 sẽ khác còn hiện tại hầu hết các trình duyệtkhác như Firefox 3x, Opera 9x, 10x Safari 3,4 và Chrome đều hiện thị CSS3 tương đối ngon. Tớnote lại một số kĩ thuật CSS3 mà tớ cho là khá phổ biến và hữu ích.Bo góc bằng CSS3Trong nhiều thiết kế tớ rất thích bo tròn góc của các block, các element ... việc này nhằm làmcho thiết kế mềm mại hơn. Tuy nhiên bo góc thì khi code html sẽ mất khá nhiều thời gian vàcode rườm rà. Thay vì mất công tạo tới vài cái div rỗng tuếch chỉ để bo góc, tớ hay dùng mộtthuộc tính CSS3 đơn giản hơn : border-radius.-moz-border-radius / -webkit-border-radius-moz-border-radius-topleft / -webkit-border-top-left-radius-moz-border-radius-topright / -webkit-border-top-right-radius-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius-moz-border-radius-bottomright / -webkit-border-bottom-right-radiusVí dụ: -moz-border-radius: 2px có ý nghĩa là bo cả 4 góc với độ cong là 2px. Nếu muốnbo từng góc sử dụng dạng -moz-border-top-radius và tương tự. Nếu dùng Firefox thì -mozcòn nếu dùng Safari, Opera hay Chrome thì dùng -webkit. Mà nói chung đã dùng là dùng cả hai.Hiệu ứng Text ShadowSử dụng Text Shadow để tạo hiệu ứng bóng đổ cho text. Trong thiết kế đôi khi có một chút hiệuứng shadow sẽ làm cho website có chiều sâu hơn và cool hơn.text-shadow: 2px 2px 0 #ccc;Đoạn mã trên có nghĩa là tạo một shadow cho text với mã màu là #cccccc dịch sang trái 2px,xuống dưới 2px và không làm mờ (blur).Sử dụng Font FaceNếu như trước kia rất .. rất ít font có thể sử dụng được trong thiết kế web vì không phải máy nàocũng cài sẵn các font mà các bạn dùng. Thường là người ta chỉ sử dụng các font sẵn có của hệthống như Arial, Tahoma, Time New Roman ... Điều này vô hình chung sẽ cả trở sự trình bàytext (typography) của bạn. Tuy nhiên hay ho là CSS có một tính năng đó là cho phép nhúng fontcủa mình vào web site. Và hay ho nữa là IE có hỗ trợ cái tính năng này..@font-face {font-family: Delicious;src: url(Delicious-Roman.otf);}Đoạn trên có ng ...