Lệnh Css thường Gặp

Đố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ốnnó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 sẽ bắt đầu với lệnh căn lề margins.
a. Căn lề cho cả 4 cạnh:
.ClassName {
margin:20px;
}
b. Căn lề dùng lệnh auto:
.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ị:
.ClassName {
margin:20px auto 50px;
}
- với lệnh này lề trên căn lề 20px, lề
trái & phải
sẽ được tự động căn giữa, lề dưới căn lề
50px.
2. Lệnh Padding:
- Các lệnh căn lề với padding:
.ClassName {
padding-top:10px; // căn lề trên
padding-right:20px; // căn lề phải
padding-bottom:30px; // căn lề dưới
padding-left:40px; // căn lề trái
}
- Để dễ dàng hơn ta có thể viết:
.ClassName {
padding:10px 20px 30px 40px;
}
- Như vậy cấu trúc lênh sẽ là : padding :
top
right bottom left;
Ta thấy 2 lệnh trên đều là căn lề, vậy
chúng có gì
khác nhau, chúng ta sẽ nói thêm về điều
này:
+ margin : khi dùng lệnh này để căn lề
thì kích
thước của khung nội dung của bạn sẽ
được giữ
nguyên.
+ padding: với việc căn lề bằng lệnh
padding thì
kích thước của khung nội dung sẽ bị thay
đổi.
Lấy ví dụ: khung nội dung của bạn có độ
rộng
100px, khi dùng lệnh căn lề trái
padding-
left:30px; thì khung sẽ bị dịch sang phải
30px, và
khi đó độ rộng của khung sẽ được cộng
thêm
vào là 30px, tức là 130px. Đó chính là
mấu chốt
khiến các bạn mới làm quen thường bị
xảy ra
hiện tượng xô lệch do khi dùng padding
vì chúng
ta padding bao nhiêu thì sẽ + thêm vào
chiều
rông cũ bấy nhiêu để tạo thành một
chiều rộng
mới.
3. Background:
- các thuộc tính cơ bản của lệnh như bên
dưới:
.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:
.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,
như bên dưới:
ul {
list-style:decimal-leading-zero inside
url
('image.jpg');
}
6. lệnh Border 0
.ClassName {
border-width:2px; // độ rộng đường
bao
border-style: solid; // kiểu
border-color: #4096EE; // màu
}
- đơn giản có thể viết
.ClassName {
border: 2px solid #4096EE; // trị màu :
#4069EE
có thể thay bằng rgb(64, 150, 238)
}
7. Outline (tương tự lệnh border)
- ví dụ bên dưới là tạo đương viền cho
ảnh
img {
outline-width: 5px;
outline-style:solid;
outline-color: #000000;
}
- đơn giản có thể viết
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
.ClassName {
color: #FFFFFF;
}
.ClassName {
color: #FFF;
}
.ClassName {
color: #fff;
}
.ClassName {
color: rgb(255, 255, 255);
}
9. dùng dấu "," để gộp chung các class
khi có
cùng thuộc tính:
ví dụ như bên dưới:
h1, h2, h3, h4, h5, h6 {
font-family:Helvetica, Verdana, sans-
serif;
}
10. 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.
}
11. 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>)
(lệnh này
mình không rành lắm)
.footer em:first-child {
color:#ccc;
}
12. First-letter (kí tự đầu tiên)
p:first-letter{
color:#ff0000;
font-size:60px;
}
- ví dụ ta có code sau :
This is an example usage of the first-
letter
property
- kết quả :
This is an example usage of the first-
letter
property
13. First-line
- thiết lập thuộn tính cho dòng đầu tiên
#p:first-line {
color:#ff0000;
font-weight:bold;
}