Tài liệu Chương 3: Level 3: Định dạng HTML nâng cao ppt

Đ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 Backgro

Trang 1

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

Trang 2

Đây là đoạn code menu dùng CSS3 tạo nên :

<head>

window.onload=montre;

function montre(id) {

var d = document.getElementById(id);

for (var i = 1; i<=10; i ) {

if (document.getElementById('smenu' i)) {document.getElementById('smenu' i).style.display='none';}

}

if (d) {d.style.display='block';}

}

</script>

body {

margin: 0;

padding: 0;

background: white;

font: 80% verdana, arial, sans-serif;

}

dl, dt, dd, ul, li {

margin: 0;

padding: 0;

list-style-type: none;

}

#menu {

position: absolute;

top: 0;

left: 0;

}

#menu {

width: 15em;

}

#menu dt {

cursor: pointer;

margin: 2px 0;;

height: 20px;

line-height: 20px;

text-align: center;

font-weight: bold;

border: 1px solid gray;

background: #ccc;

}

#menu dd {

border: 1px solid gray;

}

#menu li {

text-align: center;

background: #fff;

}

#menu li a, #menu dt a {

color: #000;

text-decoration: none;

Trang 3

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;

}

</style>

</head>

<body>

<ul>

</ul>

</dd>

<ul>

</ul>

</dd>

<ul>

</ul>

</dd>

</dl>

</body>

</html>

Trang 4

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:

Trang 5

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

Tiêu đề	Áp dụng CSS với nền của trang web
Tác giả	Traibingo
Thể loại	Tài liệu

Định dạng
Số trang	5
Dung lượng	518,18 KB