Các lệnh thường dùng trong CSS

xin giới thiệu tới các bạn các lệnh thường dùng trong CSS. Việc đầu tiê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. Hiện nay có rất nhiều trình duyệt khác nhau, nhưng có lẽ dùng nhiều nhất là Chrome và Mozila . 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ó


1. Lệnh margin
gồm có:

.ClassName{

margin-left:20px ;

margin-right:20px ;

margin-top:20px ;

margin-bottom:20px ;

}

ta có thể viết gộp lại như sau:

.ClassName{

margin: 20px;

}

hoặc

.ClassName{

margin: 20px 30px;

}

căn lề trên và dưới 20px, lề trái và phải là 30px.

hoặc:

.ClassName{

margin: 20px 30px 50px;

}

lề trên căn 20px, lề trái và phải căn 30px, lề dưới căn 50px;

hoặc:

.ClassName{

margin: 20px 30px 40px 50px;

}

sẽ có thứ tự là margin: top right bottom left;
2. Lệnh padding.
Cũng có các thành phần và cách viết gộp như margin nên mình không nhắc lại nữa.

Sự khác nhau giữa lệnh padding và lệnh margin là:

– Khi dùng margin để căn lề thì kích thước của khung nội dung được giữ nguyên.

– Khi dùng padding thì kích thước nội dung sẽ thay đổi. Ví dụ: khung nội dung có độ rộng 200px, dùng dùng căn lề trái là padding-left: 20px, khu sẽ bị dịch sang phải 20px đồng thời độ rộng của khung sẽ được cộng thêm 20px thành 220px.
3. Lệnh background.
.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, lệnh sẽ là:

CODE .ClassName {
background: transparent url(‘image.jpg’) no-repeat top right scroll;
}
4. Lệnh font:
.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):

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ỉ việc thay none bằng url(‘link ảnh’)
}

để đơn giản ta gộp các thuộc tính chung lại:

ul {
list-style: decimal-leading-zero inside url(‘image.jpg’);
}

6.lệnh Border- đường bao)

.ClassName {
border-width:2px; // độ rộng đường bao
border-style: solid; // kiểu
border-color: #333FFF; // màu có thể thay bằng rgb()

}

đơn giản có thể viết

.ClassName {
border: 2px solid #333FFF;

}

7.Lệnh màu : có thể sử dụng 1 trong các cách dưới đều được

.ClassName {
color: #FFFFFF;
}
.ClassName {
color: #FFF;
}
.ClassName {
color: #fff;
}
.ClassName {
color: rgb(255, 255, 255);
}

joomla minify css xin giới thiệu thêm một số lệnh nâng cao hơn 1 chút:
8. Cross browser transparency: – thiết lập cho từng trình duyệt
.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.
}
9. First-child selectors
Ví dụ bên dưới tạo màu chữ riêng cho lớp đầu tiên thẻ p

.p:first-child {
color:#fff;
}
10. Drop shadow (tạo bóng đổ)
.your_shadow {
width:400px;
height:200px;
background-color:#000;
-webkit-box-shadow: 5px 5px 2px #ccc;
}
11. Resize
.ClassName{
min-width:100px;
min-height:100px;
max-width:900px;
max-height:900px;
resize:both;
background-color:#ccc;
border:2px solid #666;
overflow:auto;
}
12.dùng dấu “,” để gộp chung các class khi có cùng thuộc tính:
h1, h2, h3, h4, h5, h6 {
font-family: ‘Arial';
}