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é!
Nội dung bài viết
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.
Bài viết liên quan
Cách tăng lượt người xem trên Tiktok
Cách tăng lượng người xem trên TikTok (Mẹo để trở nên nổi bật) Điều gì [...]
Th2
CÁCH SỬ DỤNG HIỆU ỨNG TRÊN TIKTOK
TikTok nổi tiếng với các hiệu ứng đặc biệt và việc tìm hiểu chúng cho [...]
Th2
CÁCH TẠO VIDEO TIKTOK
Cách tạo video TikTok Để tạo TikTok bằng thiết bị Android hoặc iOS của bạn, [...]
Th2
Cách tạo kế hoạch nội dung TikTok
Tạo một kế hoạch nội dung TikTok sẽ giúp bạn tiến xa hơn khi bạn [...]
Th2
Tại sao nên xây dựng thương hiệu trên Tiktok
Một số lý do tại sao thương hiệu của bạn nên thực hiện tiếp thị [...]
Th2
Hướng dẫn tạo tài khoản và sử dụng Chat GPT cực đơn giản
Trò chuyện GPT rất phổ biến vì các chức năng tuyệt vời của nó, nhưng [...]
Th2
CHIẾN LƯỢC MARKETING TRÊN TIKTOK
Trước khi bắt đầu tạo video TikTok, bạn cần tạo chiến lược tiếp thị TikTok [...]
Th2
CÁCH BÁN HÀNG TRÊN TIKTOK 2023
Cách bán hàng trên Tiktok một cách hiệu quả nhất 2023Nội dung: TikTok là gì? [...]
Th2
6 MẸO ĐỂ LIVESTREAM TIKTOK HIỆU QUẢ
Nếu bạn đang tìm kiếm một cách mới, sáng tạo để kết nối với khán [...]
Th1
CÁCH QUẢNG CÁO LIVESTREAM TIKTOK
Ra mắt vào tháng 8 năm 2022, Quảng cáo mua sắm TikTok LIVE mới giúp [...]
Th1
HƯỚNG DẪN CHẠY QUẢNG CÁO TIKTOK ADS 2023 TỪ A – Z
Quảng cáo TikTok cho người mới bắt đầu Với hơn 1 tỷ người dùng hoạt [...]
Th1
TẠI SAO NÊN CHẠY QUẢNG CÁO TIKTOK ADS
Tại sao lại quảng cáo TikTok? Nội dung bài viết1. TikTok bị chi phối bởi [...]
Th1
CÁCH SÁNG TẠO NỘI DUNG TRÊN TIKTOK
10 mẹo TikTok để tạo nội dung hấp dẫn Cho dù bạn là người chuyên [...]
Th1
XÁC ĐỊNH PHÂN KHÚC KHÁCH HÀNG
Câu chuyện về “phân khúc” có thể hiểu đơn giản như thế này: Hôm nay [...]
Th1
CÁCH PHÂN LOẠI KHÁCH HÀNG TIỀM NĂNG
– Phân loại khách hàng theo tâm lý mua hàng + Nhóm khách hàng chuộng [...]
Th1