Thành viên
 
 
 
Những lệnh thường gặp trong CSS.
  Trung bình: 3.3 (Đã có 86 lượt đánh giá)
   06/07/2009 10:46 PM

Đố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 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 (tạo đừơng viền - đường bao)

.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 :

<p>This is an example usage of the first-letter property</p>

- 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;
}

- ví dụ: ta có code

<p>This is an example usage of the first-line property. This is an example usage of the first-line property.</p>

- kết quả :

This is an example usage of the first-line property. This is an example usage of the first-line property.

14. Độ cao tối thiểu

.ClassName {
min-height:200px;
}

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

.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:

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:

Zensoft.vn

Hình Đã Sửa với Clip

Zensoft.vn

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:

.rounded_corner {
-moz-border-radius:10px;
-webkit-border-radius:10px;
width:400px;
height:100px;
background-color:#000;
}

Zensoft.vn

 

17. Drop shadow (tạo bóng đổ)

.your_shadow {
width:400px;
height:200px;
background-color:#000;
-webkit-box-shadow: 5px 5px 2px #ccc;
} 

Zensoft.vn

 

18. Resize

.resize{
min-width:200px;
min-height:200px;
max-width:500px;
max-height:400px;
resize:both;
background-color:#ccc;
border:2px solid #666;
overflow:auto;
}

Trên đây là những cơ bản về CSS, hy vọng sau khi làm quen các bạn sẽ cảm thấy thích thú.


Gửi bởi: ngocdv
Lượt xem: 19650

 
Nguyễn văn An 07/07/09 10:32 AM
Bài viết rất hay, thanks bạn nhiều.

harvestmuun 07/07/09 11:00 AM
CSS là nền tảng của TK web..! Rất cảm ơn bài viết hữu ích này của bạn!

xau_zai 07/07/09 12:24 PM
Đúng vậy.cảm ơn bạn nhé^^

gàcon96 07/07/09 01:41 PM
hjc, chỉ tội là e hok bit gõ vào chỗ nào thui ^^

knight 07/07/09 03:34 PM
thường thì zensoft để bài đồ họa nên trang nhất hôm nay để bài này chứng tỏ zen định đi sâu thêm vào thị trường web

stv 07/07/09 03:47 PM
Hay quá
Từ lâu tui đã mún tự làm 1 trang web rùi nhưng mà chưa học CSS với PHP nên ko biết gì để làm cả
Nếu sắp tới Zen đi sâu vào Design web thì hay lắm

namtuoc0202 07/07/09 05:51 PM
Rất tuyệt cho người mới,nhất là trong phong trào làm blog = code CSS,thanks bác rất nhiều :D.Vote max

lonely_vn90 07/07/09 06:32 PM
những lệnh css này có phải dùng trong dreamweare không? mình bít mỗi 2 cái lệnh đầu tiên thoy ^^! bây giờ mà zen đi sâu vào phần thiết kế web nữa thì tuyệt ^^! khứa khứa !

gàcon96 07/07/09 10:32 PM
sao hok ai trả lời em hết vậy???gõ vào đâu >.<??????????

nhoc_ziozoa 08/07/09 09:46 PM
@gàcon96 : thì bạn gõ vào notepad trong win có đó .. hoặc bạn có thể tìm down notepad++ cái này thì nhìn tiện dụng hơn vì nó có thể viết php.css,html..v.v...v
-Bài viết hay lắm :) dành cho những người mới vào nghề web ^^ ủng hộ

ngocdv 08/07/09 11:42 PM
Có 2 cách để tích hợp CSS vào trong website:

- Cách 1 là khai báo trực tiếp ngay trong thẻ STYLE của trang muốn sử dụng:

- Cách 2 là Viết thành 1 file CSS rồi gọi lại bằng lệnh LINK như ví dụ bên dưới:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Eximcovn</title>
    <link href="Styles/MainStyle.css" type="text/css" rel="stylesheet" />
    <style type="text/css">

        .ClassName{
        min-height:200px;
        height:auto !important;
        height:200px;
        }

    </style>

</head>

<body>
...
</body>
</html>

kiddevil2206 10/07/09 04:57 PM
kaj' nay` hồi lúc em làm 4rum bên hnsv toàn ngồi mò Url trong đó để thay hình ko ^^! :D, bây h` thì hiểu rồi, thanks

thuyduong253 11/07/09 02:33 AM
Thank bài viết của ngocdv,đang hí hoáy với cái blogspot,chưa có kiến thức nền nên bài viết của bạn rất hữu ích.Đề nghị phát huy  thêm.

vuhoaithutuan 11/07/09 08:57 PM
-Nếu các bác có ý định tự làm một trang web thì rất hay nhưng cho em hỏi là viết code hay edit code. Cái nào cũng khó cả! Và em chọn dùng joomla, chỉ mất một buổi để chọn được template, module và host ưng ý! Các bác có thể qua xem web em tự làm nè vuhoaithutuan.plus.vn không phải mất nhiều công sức, chẳng phải viết mấy cái code (tuy biết vẫn ngon hơn). Thấy hay thì pm nick yahoo vuhoaithutuan nha!

HieuNguyenTrung 18/07/09 09:31 AM
Cảm ơn bạn về những chia sẻ rất hay về CSS của bạn. Chúc bạn sức khỏe và gặp nhiều may mắn trong cuộc sống !

phung le 01/08/09 11:02 AM
tui k hiu gi het huuuuuuuuuuuuuu

mum2510 04/08/09 03:38 PM
Các bạn ơi! có ai biết cách làm hiệu ứng lửa cháy trong flash không giúp mình với. Huhu.

lamdaubiec 07/08/09 05:46 PM
chưa thử, nhưng đúng là cai mình cần tìm bầy lâu nay!thanks!

nguyen van xinh 31/08/09 01:55 AM
tôi có 1 tấm ảnh cho nó vào viết html như thế này
<div style="width:"100px";height:"100px">
<ul>
<li>
<image src="/abc.jnp" </>
</li>
</ul>
</div>
khi tôi chạy trên firefox nó cách nề trái 5px
chạy trện IE nó cách nề trái 20px
mà tôi chỉ muốn nó cách nề trái 10px
tôi sử dụng margin-left:5px thì firefox dịch thêm 5px
còn iE thì nó dịch 25px .tôi không làm thế nào dể cho nó cách nề đúng như tôi mong muốn dc ai có cách nào giúp tôi với ????!!! cho ví dụ nhé.Xin càm ơn!!

vanxinh01 31/08/09 02:00 AM
tôi có 1 tấm ảnh cho nó vào viết html như thế này
<div style="width:"100px";height:"100px">
<ul>
<li>
<image src="/abc.jnp" </>
</li>
</ul>
</div>
khi tôi chạy trên firefox nó cách nề trái 5px
chạy trện IE nó cách nề trái 20px
mà tôi chỉ muốn nó cách nề trái 10px
tôi sử dụng margin-left:5px thì firefox dịch thêm 5px
còn iE thì nó dịch 25px .tôi không làm thế nào dể cho nó cách nề đúng như tôi mong muốn dc ai có cách nào giúp tôi với ????!!! cho ví dụ nhé.Xin càm ơn!!

ngocdv 31/08/09 04:38 PM
hihi, về ví dụ trên có rất nhiều cách để thể hiện như bạn nói. Bạn hãy thử bỏ cặp <ul> <li> đi nhé và thử lại. Chắc sẽ okie đó.

ha phuong 04/09/09 03:44 AM
mình đan muốn có cái này cám ơn nhé

ThanhPy 09/09/09 03:53 PM
thanhk Ban quản trị Zensoft ! Nhiều thủ thuật hay và cần thiết ! Giừo mới biết nhiều cái đọc sách không bằng học bạn bè !

tranhamy 15/10/09 08:37 AM
Thanks ban nhiu nha

doremon 15/10/09 09:33 AM
Các lệnh css bạn ghi trên, có lênh dùng font-size:1em. Mình không hiểu dùng em khác với px và pt như thế nào? và tại sao dùng em mà không đùng px? Mình thấy em khó dùng hơn

Huan 26/11/09 11:29 AM
mình mới vào trang này lần đầu nhưng thấy toàn bài viết hay, rất thực tế. Ca'm ơn các bạn rất nhiều.

ruanonglam 21/01/10 11:49 PM
Thanks so mụch !

phan thanh sang 15/05/10 03:59 PM
may anh oi! sao em lam menu =css khi dua vao file .html thi dong, con dua vao aspx trong vb2005 thi lai ko dong duoc? ai biet xin chi em voi

cuonganhit 15/10/10 05:09 PM
thanks. Bài này rất hữu ích cho tôi mới tìm hiểu

K IA ND 19/07/13 09:38 AM
ai chua hieu? ro? thi` vao web nay xem video cho ro~ hon nek http://www.izwebz.com/category/video-tutorials/css-html/

Quảng cáo Hải Phòng
Quảng cáo Hải Phòng
NHẬN XÉT CỦA BẠN
Trung bình: 3.3   
Kiểu gõ: Off Telex VNI VIQR Tổng hợp (Telex, Vni, Viqr)
Họ Tên:
Hòm thư:
Nội Dung:
Số ký tự còn lại: 3500