18 Lệnh thường gặp trong CSS Web Designer không thể không biết

Là 1 Web Designer mà không biết về các lệnh thường gặp trong CSS thì thực sự là 1 điều vô cùng kém cỏi. Sẽ trở thành trở ngại vô cùng lớn nếu như bạn quản trị Website mà cũng không có hiểu biết về CSS.

Ở bài viết này, PA Marketing sẽ giới thiệu tới các bạn 18 lệnh thường gặp trong CSS. Hãy tìm hiểu và lấy chúng làm hành trang cho công cuộc tìm kiếm kiến thức chuyên sâu về CSS của bạn nhé!

Lưu ý khi bắt đầu tìm hiểu về CSS:

Lưu ý khi sử dụng CSS

• Đầu tiên, khi nói về CSS bạn cần phải xem xét đó là sự tương thích của CSS với các trình duyệt Web. Trên thế giới hiện nay có không ít các trình duyệt khác nhau. Nhưng trình duyệt phổ biến nhất và được tin dùng nhất có lẽ chính là Mozila Firefox và Internet Explorer (trình duyệt của Window). Chính vì vậy, vấn đề đưa ra là viết các đoạn mã CSS sao cho phù hợp với tất cả các trình duyệt; Giúp các trình duyệt đều đọc và hiểu được các đoạn mã CSS đó không phải là điều quá khó nhưng cũng không phải quá dễ.
• Giờ thì hãy cùng đi vào tìm hiểu lệnh thường gặp trong CSS nhé!

18 lệnh thường gặp trong CSS.

18 lệnh CSS thường gặp

Để có thể tạo ra 1 thiết kế Temp cho Website, hãy bắt đầu với những kiến thức cơ bản và tổng quan nhất về các lệnh phổ biến trong CSS nhé!

1.Lệnh Margin.

Hãy bắt đầu với 2 đoạn mã CSS của lện căn lề:

• Căn lề 2 bên, bạn dùng lệnh:

.ClassName {
margin:20px;
}

• Căn lề dùng lệnh auto:

CODE

.ClassName {
margin:20px auto;
}
Khi bạn sử dụng lệnh trên, cả lề trái và lề 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.

• 3 giá trị của lệnh Margin:

CODE

.ClassName {
margin:20px auto 50px;
}

Đây là lệnh căn lề trên 20px, lề trái và phải sẽ được tự động căn giữa. Còn lề dưới căn lề 50px.

 2.Lệnh Padding.

• Các câu lệnh căn lề với Padding:

CODE

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

• Để đơn giản hơn, bạn có thể viết:

CODE

.ClassName {
padding:10px 20px 30px 40px;
}
Bạn có thể hiểu, cấu trúc lệnh ở đây sẽ là: padding : top right bottom left;

So sánh 2 lệnh căn lề Margin và Padding:

• Với Margin: Khi dùng lệnh này để căn lề, bạn sẽ thấy kích thước khung nội dung của bạn được giữ nguyên.
• Với Padding: Khi bạn sử dụng lệnh Padding để căn chỉnh lề. Kích thước của khung nội dung sẽ bị thay đổi.

Ví dụ:

Khung nội dung của bạn có độ rộng 120px. Thì khi bạn sử dụng lệnh căn lề trái padding-left:30px. Khung nội dung của bạn sẽ bị dịch sang phải 30px. Và độ rộng của khung nội dung cũng sẽ được cộng thêm vào là 30px, tức là 150px.
Đây chính là nguyên nhân các bạn mới làm quen với CSS dễ gặp phải- Khung nội dung thường bị xô lệch khi sử dụng Padding. Điều này được hiểu đơn giản là: Khi chúng ta Padding bao nhiêu px đồng nghĩa với việc sẽ cộng thêm vào chiều rông cũ bấy nhiêu px. Giúp tạo thành một chiều rộng mới.

 3.Background.

Với lệnh thướng gặp trong CSS- Background sẽ bao gồm 1 số thuộc tính:
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ụ:

Bạn muốn tạo ảnh với nền trong suốt, nằm trên cùng bên phải,không lặp lại, và có thể di chuyển theo chuột. Bạn sẽ viết lệnh như sau:
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ỉ việc thay none bằng url(‘link ảnh’)
}
Để đơn giản hơn câu lệnh, bạn có thể gộp các thuộc tính chung lại như sau:
CODE

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

 6.Tạo đường viền- đường bao với lệnh Border.

CODE

.ClassName {
border-width:2px; // độ rộng đường bao
border-style: solid; // kiểu
border-color: #4096EE; // màu
}
Hay bạn cũng có thể viết đơn giản thành:
CODE

.ClassName {
border: 2px solid #4096EE; // trị màu : #4069EE có thể thay bằng rgb(64, 150, 238)
}

 7.Lệnh Outline .

Ví dụ, bạn muốn tạo đường viền cho ảnh:
CODE

img {
outline-width: 5px;
outline-style:solid;
outline-color: #000000;
}
Cũng có thể biết đơn giản thành:
CODE

img {
border: outline: 5px solid #000000;
}

 8.Lệnh màu.

Để đặt câu lệnh màu, bạn có thể sử dụng 1 trong các đoạn mã CSS dưới đây:
CODE

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

9. Cross Browser Transparency.

Đây sẽ là đoạn mã được 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.

Nếu bạn muốn tạo màu chữ riêng cho lớp đầu tiên của Footer (nằm trong thẻ <em>). Hãy sử dụng câu lệnh:
CODE

.footer em:first-child {
color:#ccc;
}

11. First-letter- Kí tự đầu tiên.

p:first-letter{
color:#ff0000;
font-size:15px;
}[/CODE] Ví dụ, ta có đoạn Code:
<p>This is an example usage of the first-letter property</p>
Thì kết quả bạn nhận được sẽ là:
This is an example usage of the first-letter property

12. First-line

Hãy sử dụng đoạn CSS này nếu bạn muốn thiết lập thuộc tính cho dòng đầu tiên.
CODE

#p:first-line {
color:#ff0000;
font-weight:bold;
}
Ví dụ với đoạn 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ả nhận được:
This is an example usage of the first-line property. This is an example usage of the first-line property.

13. Độ cao tối thiểu.

CODE

.ClassName {
min-height:200px;
}
Đoạn Code trên không hỗ trợ cho IE. Để có thể hiển thị trên IE, bạn hãy tham khảo Code:
CODE

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

14. Thuộc tính Clip- Hiển thị một phần.

CODE

img {
clip:rect(50px 218px 155px 82px);
}
Với đoạn Code này, ảnh sẽ được Clip phía trên 50px, Bottom là 218px (tính từ trên xuống), Right sẽ là 155px (tính từ trái qua), Left là 82px (cũng tính từ trái qua).
Hình gốc

15. Bo góc.

CODE

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

}

16. Drop Shadow- Tạo bóng đổ

CODE

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

17. Lệnh Resize.

CODE

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

18.Gộp các Class cùng thuộc tính.

Khi có các Class cùng thuộc tính, bạn có thể gộp chung chúng lại bằng cách dùng dấu “,”
Ví dụ:
CODE
h1, h2, h3, h4, h5, h6 {
font-family:Helvetica, Verdana, sans-serif;
}
Trên đây, chúng tôi vừa chia sẻ với các bạn về các lệnh thường gặp trong CSS– Những kiến thức nền tảng cơ bản và cần thiết nhất. Cơ sở để xây dựng 1 Website hoàn chỉnh. Nếu bạn muốn tìm hiểu thêm về nền tảng Facebook. Bạn cũng có thể liên hệ với chúng tôi để được hỗ trợ. Hoặc đăng ký tham gia các Khóa học Facebook Marketing của chúng tôi. Hi vọng bài viết thực sự hữu ích với bạn.

Xem ngay