Hướng dẫn sử dụng css cho trang web/wap, cách sử dụng css cho trang. Để sử dụng css cho trang đầu tiên bạn hãy tạo một file style.css sau đó ta sẽ viết code css ở đây, cách để html sử dụng css này thì bạn xem ở bài trước.

Mã màu nền cho thành phần:

body {background:#f5f5f5;} /*Đây là phần chú thích khi viết css*/ /*Thuộc tính background sẽ giúp bạn tạo nền cho bất cứ thành phần html nào*/

Mã chèn ảnh nền phần cho thành:

body {background: url('/images/anhnen.jpg') repeat;} /*giá trị url chính là địa chỉ của hình ảnh mà bạn muốn làm nền*/ /*repeat có nghĩa là bức ảnh nền của bạn sẽ được lặp lại và hiển thị kín nền trang. Một số kiểu lặp lại khác là repeat-x, repeat-y. Nếu chọn no-repeat thì ảnh của bạn sẽ không được lặp lại*/

Mã tạo đường viền cho thành phần

p {border:1px #cdcdcd solid;} /*1px là độ rộng của đường viền*/ /*solid là kiểu đườn viền*/ /*Có các kiểu đường viền là: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden */

Chỉnh độ cao và độ rộng cho thành phần:

div {width:100; /*chỉnh chiều rộng*/ height:200;/*chỉnh chiều cao*/ }

Css cho các liên kết a

/* liên kết chưa ghé thăm */ a:link { color: red; } /* liên kết đã ghé thăm*/ a:visited { color: green; } /* khi di chuột qua liên kết */ a:hover { color: hotpink; } /* liên kết hoạt động */ a:active { color: blue; }

Căn lề cho text

h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; }

Trang trí text

h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; }

Tạo viền bằng hình ảnh cho thành phần

div{ border: 10px solid transparent; padding: 15px; -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */ border-image: url(border.png) 30 round; }

Mã chỉnh độ cong của viền

p { border:1px #008000 double; border-radius:3px 3px 3px 3px; -o-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; -moz-border-radius:3px 3px 3px 3px;}

Các thuộc tính giao diện người dùng

div { border: 2px solid; padding: 20px; width: 300px; resize: horizontal; /*người dùng có thể thay đổi chiều rộng của thành phần*/ /*Nếu bạn muốn thay cho người dùng thay đổi chiều dọc thì thay horizontal bằng vertical, nếu muốn cho đổi cả rộng và cao thì thay bằng both */ overflow: auto; /*Cái này là phần quan trọng nó giúp thành phần có thể thay đổi kích cỡ được*/ }