Nếu bạn là một Web Designer thì việc nhớ những lệnh thường gặp trong CSS là điều vô cùng quan trọng và cần thiết. Đây là một yếu tố để hình thành nên sự chuyên nghiệp cũng như là khả năng quản trị website của Web Designer. Chính vì vậy nếu bạn đang quan tâm và muốn tìm hiểu sâu hơn về các lệnh trong CSS thì hãy cùng chúng tôi khám phá tập hợp các lệnh thường gặp trong CSS Web Designer bạn phải nhớ
Sơ lược về CSS
CSS được phát triển vào năm 1996 bởi W3C với dạng là tên viết tắt của dòng chữ Cascading Style Sheets, nói cách khác nó là một dạng ngôn ngữ được sử dụng với mục đích tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu như HTML. Nói một cách dễ hiểu, CSS sẽ giúp người dùng có thể thêm được các style định dạng (Font chữ, màu sắc, cấu trúc, bố cục,...) vào các phần tử HTML một cách dễ dàng. Chính vì vậy mối liên kết giữa CSS và HTML là vô cùng mật thiết không thể tách rời nhau.
Giới thiệu về CSS
Các lệnh thường gặp trong CSS Web Designer
Sau đây sẽ là các lệnh thường gặp trong CSS Web Designer mà bạn có thể tham khảo:
Các lệnh thường gặp trong CSS Web Designer mà bạn nên nhớ
1.First-child selectors - Lệnh thường gặp trong CSS Web Designer
CODE
.footer em:first-child {
color:#ccc;
}
2.Lệnh margin - Lệnh thường gặp trong CSS Web Designer
Đầu tiên là đối với canh lề
Căn lề cả 2 bên
.ClassName {
margin:20px;
}
Căn lề chỉ dùng lệnh auto:
CODE
.ClassName {
margin:20px auto;
}
Khi sử dụng lệnh này thì lề phải lẫn lề trái của bạn sẽ được tự động căn giữa, còn lề trên và lề dưới sẽ được ăn lề với kích thước là 20px.
Lệnh Margins với cả 3 giá trị:
CODE
.ClassName {
margin:20px auto 50px;
}
Khi sử dụng lệnh Margins với cả 3 giá trị, lề trên sẽ được căn với kích thước là 20px, lề trái và lề phải thì căn giữa còn lề dưới sẽ được căn lề 50px.
3.Lệnh Padding - Lệnh thường gặp trong CSS Web Designer
Lệnh Padding trong CSS Web Designer
Các lệnh căn lề với padding:
CODE
.ClassName {
padding-top:10px; // Lề trên
padding-right:20px; // Lề phải
padding-bottom:30px; // Lề dưới
padding-left:40px; // Lề trái
}
Hoặc bạn có thể viết ngắn gọn hơn bằng cách:
CODE
.ClassName {
padding:10px 20px 30px 40px;
}
Mặc dù lệnh margin và lệnh Padding đều là căn lề nhưng chúng có những đặc điểm hoàn toàn khác nhau. Cụ thể:
Margin: Khi người dùng sử dụng lệnh này để căn lề thì phần kích thước khung nội dung vẫn sẽ được giữ nguyên.
Padding: Ngược lại với Margin thì khung nội dung khi sử dụng Padding sẽ bị thay đổi. Đó cũng chính lý do đối với những người chưa sử dụng thành thạo Padding thì sẽ đều gây ra hiện tượng xô lệnh.
4.First-child Selectors - Lệnh thường gặp trong CSS Web Designer
Để tạo màu chữ khác biệt cho lớp đầu tên Footer, có thể sử dụng câu lệnh như sau:
CODE
.footer em:first-child {
color:#ccc;
}
5.Lệnh Resize - Lệnh thường gặp trong CSS Web Designer
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;
}
6.Lệnh font - Lệnh thường gặp trong CSS Web Designer
CODE
.ClassName {
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:1.4em;
font-family:Georgia, serif;
}
7. First-letter - Lệnh thường gặp trong CSS Web Designer
CODE
p:first-letter{
color:#ff0000;
font-size:15px;
}[/CODE]
8.Outline - Lệnh thường gặp trong CSS Web Designer
Tạo đường viền cho ảnh có thể viết như sau:
CODE
img {
outline-width: 5px;
outline-style:solid;
outline-color: #000000;
}
9.Lệnh màu - Lệnh thường gặp trong CSS Web Designer
CODE
.ClassName {
color: #FFFFFF;
}
.ClassName {
color: #FFF;
}
.ClassName {
color: #fff;
}
.ClassName {
color: rgb(255, 255, 255);
}
10.Bo góc - Lệnh thường gặp trong CSS Web Designer
CODE
.rounded_corner {
-moz-border-radius:10px;
-webkit-border-radius:10px;
width:400px;
height:100px;
background-color:#000;
}
11.Lệnh Border - Lệnh thường gặp trong CSS Web Designer
Lệnh Border trong CSS Web Designer
CODE
.ClassName {
border-width:2px; // độ rộng của đường bao
border-style: solid; // kiểu đường bao
border-color: #4096EE; // màu sắc đường bao
}
Hoặc có thể viết như sau:
CODE
.ClassName {
border: 2px solid #4096EE; // trị màu : #4069EE có thể thay bằng màu rgb(64, 150, 238)
}
12. Cross browser transparency - Lệnh thường gặp trong CSS Web Designer
Lệnh Cross browser transparency trong CSS
Thiết lập riêng cho các trình duyệt khác nhau:
CODE
.ClassName {
filter:alpha(opacity=50); // Sử dụng cho trình duyệt IE
-moz-opacity:0.5; // Sử dụng cho trình duyệt mozilla
-khtml-opacity: 0.5; // Sử dụng cho trình duyệt Safari
opacity: 0.5; //Sử dụng cho rất nhiều các trình duyệt trừ IE.
}
13. First-line - Lệnh thường gặp trong CSS Web Designer
Thiết lập thuộc tính cho các dòng đầu tiên
CODE
#p:first-line {
color:#ff0000;
font-weight:bold;
}
14. Độ cao tối thiểu - Lệnh thường gặp trong CSS Web Designer
CODE
.ClassName {
min-height:200px;
}
Lưu ý là đoạn CODE trên không được sử dụng cho IE.
15. Lệnh Drop Shadow - Lệnh thường gặp trong CSS Web Designer
Có thể thực hiện lệnh tạo bóng đổ như sau:
CODE
.your_shadow {
width:600px;
height:500px;
background-color:#000;
-webkit-box-shadow: 6px 6px 3px #ccc;
}
Như vậy bài viết trên đây đã tổng hợp được những lệnh thường gặp trong CSS Web Designer một cách đầy đủ nhất để gửi đến bạn đọc. Hy vọng những thông tin trên sẽ thật sự có ích và giải đáp được thắc mắc của các bạn đặc biệt là đối với những bạn đang trên con đường theo đuổi Web Designer nhé!