Các lệnh thường gặp trong css
Đối với một Web Designer không biết về CSS thì quả thực sẽ là một thiệt thòi rất
lớn, nếu không muốn nói là kém. Vậy bài viết này sẽ trang bị cho các bạn những
kiến thức cơ bản cần và đủ là thiết kế một temp cho website hoàn chỉnh.
- Việc đầu tiên các bạn cần phải quan tâm đối với CSS đó chính là sự tương thích
với các trình duyệt web. Trên thế giới hiện nay có rất nhiều trình duyệt khác nhau,
nhưng có lẽ được tin dùng nhất chính là Mozila Firefox và Internet Explorer (trình
duyệt của window). Vì vậy mà viết các đoạn mã CSS sao cho tất cả các trình duyệt
đều hiểu được không phải là dễ, nhưng cũng không phải là quá khó như các bạn
tưởng tượng. 1.Lệnh margin
Ta bắt đầu với canh lề
a.Căn lề 2 bên
.ClassName {
margin:20px;
}

b. Căn lề dùng lệnh auto:
CODE
.ClassName {
margin:20px auto;
}

- với lệnh trên, lề trái và phải sẽ tự động được căn giữa, còn lề trên và dưới sẽ được
căn lề là 20px.
c. lệnh Margins với 3 giá trị:
CODE
.ClassName {
margin:20px auto 50px;

- các thuộc tính cơ bản của lệnh như bên dưới:
CODE
.ClassName {
background-color: transparent; // làm trong nền trong suốt
background-image: url('/image.jpg'); // ảnh nền
background-repeat: no-repeat; // thuộc tính lặp lại
background-position: top right; // vị trí nền
background-attachment: scroll; // nền trượt
}
- ví dụ như bạn muốn tạo ảnh nền trong suốt, nằm trên cùng bên phải, không lặp
lại, và di chuyển theo chuột, ta sẽ có lệnh như bên dưới:
CODE
.ClassName {
background: transparent url('image.jpg') no-repeat top right scroll;
}
4.Lệnh font:
CODE
.ClassName {
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:1.4em;
font-family:Georgia, serif;
}
5.Lệnh cho list (ul):
CODE
ul {
list-style-type:decimal-leading-zero;
list-style-position:inside;
list-style-image: none; // sử dụng ảnh, nếu muốn sử dụng ảnh cho list, bạn chỉ

img {
border: outline: 5px solid #000000;
}
8.Lệnh màu :
- có thể sử dụng 1 trong các cách dưới đều được
CODE
.ClassName {
color: #FFFFFF;
}
.ClassName {
color: #FFF;
}
.ClassName {
color: #fff;
}
.ClassName {
color: rgb(255, 255, 255);
}
9. Cross browser transparency:
- thiết lập cho từng trình duyệt
CODE
.ClassName {
filter:alpha(opacity=50); // trình duyệt IE
-moz-opacity:0.5; // trình duyệt mozilla
-khtml-opacity: 0.5; // trình duyệt Safari
opacity: 0.5; // hầu hết các trình duyệt, nhưng IE thì không.
}
10. First-child selectors
- ví dụ bên dưới tạo màu chữ riêng cho lớp đầu tiên của footer (nằm trong thẻ
<em>)

}
- code trên không hỗ trợ cho IE, để hiển thị trên IE, bạn tham khảo code bên dưới:
CODE
.ClassName{
min-height:200px;
height:auto !important;
height:200px;
}
15. Thuộc tính clip (hiển thị một phần)
- ví dụ ta có code bên dưới:
CODE
img {
clip:rect(50px 218px 155px 82px);
}
với code này, ảnh sẽ được clip phía trên 50px, bottom là 218px (tính từ trên
xuống), right là 155px (tính từ trái qua), left là 82px (cũng tính từ trái qua). xem ví
dụ bên dưới để rõ:

Hình gốc

Hình Đã Sửa với Clip
Bên dưới là 3 lệnh code CSS3 (lưu ý. CSS3 chỉ hỗ trợ trên Firefox, safariand, và
Chrome)
16. Bo góc:
CODE
.rounded_corner {
-moz-border-radius:10px;
-webkit-border-radius:10px;
width:400px;
height:100px;