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

Chia sẻ: Yukogaru | Ngày: | Loại File: PDF | Số trang:5

Thêm vào BST

Báo xấu

245
lượt xem 74
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 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ụ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à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ép bạ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ào Cá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 PHP display: 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 1 Menu 2 Sub Menu 2.1 Sub Menu 2.2 Sub Menu 2.3 Menu 3 Sub Menu 3.1 Sub Menu 3.1 Sub Menu 3.1 Sub Menu 3.1 Sub Menu 3.1 Sub Menu 3.1 Menu 4 Sub Menu 4.1 Sub Menu 4.1 By traibingo 3|P a ge
Tự Học PHP CSS3 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 IE8 nhiề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ệt khá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 CSS3 Trong 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àm cho 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ột thuộ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-radius Ví dụ: " -moz-border-radius: 2px " có ý nghĩa là bo cả 4 góc với "độ cong" là 2px. Nếu muốn bo từng góc sử dụng dạng "-moz-border-top-radius" và tương tự. Nếu dùng Firefox thì -moz cò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 Shadow Sử 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 Face Nế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ào cũ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ày text (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 font củ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ó nghĩa là : nhúng một font đặt tên là Delicious với đường dẫn url tới file font Delicious-Roman.otf. Khi khai báo xong bạn có thể gọi và sử dụng font bằng cách thông thường: By traibingo 4|P a ge
Tự Học PHP font-family: Delicious, sans-serif; Độ trong suốt (Opacity) Thuộc tính Opacity cũng là một thuộc tính mà tớ thấy là đáng giá trong CSS3. Opacity đơn giản là độ mờ ảo (ảo vãi) của element. Rất có ích nếu bạn có ý định thiết kế kiểu sử dụng mask hay làm hiệu ứng hover đơn giản. Hơn là như trước kia muốn dùng hiệu ứng kiểu này hầu hết tớ toàn dùng ảnh PNG và vì dùng ảnh nên load sẽ nặng hơn nhiều. opacity: 0.2; Mặc định là giá trị 1, tức là hổng trong suốt hay mờ đục gì cả. Giá trị 0.2 có nghĩa là trong hay mờ đục 20% và lúc này là áo em trong quá nhìn xuyên qua. IE cũng chơi được cái này nếu hack một chút. Lúc này là giá trị mặc định là 100(%). filter:alpha(opacity=20); Multiple backgrounds Cũng giống như kiểu border-radius, dùng Multiple backgrounds sẽ giảm bớt code html rườm rà. Ví dụ như trong thiết kế, phía trên là một hình nền ở dưới là một hình nền. Thông thường thì vì nội dung lúc dài lúc ngắn nên ta không thể fix chiều cao cho element đó được mà khi đó phải sử dụng ít nhất 2 element khác nhau. Tuy nhiên CSS3 đã đơn giản hóa điều đó cho phép sử dụng nhiều background trong 1 element. Khi đó cho dù nội dung động nhưng ta luôn đạt được mục đích 1 background trên và 1 background ở dưới. background: url(background-top.gif) top center no-repeat, url(background-bottom.gif) bottom center no-repeat; Muốn thêm background nào đó ta chỉ cần thêm đường dẫn background đó mà thôi. Đoạn trên có nghĩa là hình nền backgound-top.gif luôn được hiển thị nằm ở trên căn giữa, backgound- bottom.gif luôn hiển thị nằm dưới và căn giữa. Còn nhiều kĩ thuật CSS3 và CSS nói chung nhưng đây là những gì tớ thấy nó thực sự hữu ích và nên dùng dựa trên kinh nghiệm của tớ. Tất nhiên việc tương thích trình duyệt với CSS3 là một lý do bạn chưa "nên" sử dụng rộng rãi các kĩ thuật này. Tuy nhiên không sớm thì muộn CSS3 cũng sẽ được chuẩn hóa trên các trình duyệt mà thôi. Tớ thì tớ có thể chấp nhận bỏ qua IE để hướng tới những chuẩn cao hơn, không biết cảc bạn thế nào? By traibingo 5|P a ge