Bạn đang muốn nâng cao kỹ năng phát triển front-end của mình? Không cần tìm đâu xa hơn 10 kỹ năng CSS cơ bản này sẽ biến bạn thành một chuyên gia ngay lập tức!

1) Tìm hiểu về Box Model

Mô hình hộp là nền tảng của bố cục CSS. Nó bao gồm bốn phần :

1. nội dung,
2. đệm,
3. Ranh giới,
4. Lề.

.box {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  padding: 20px;
  margin: 10px;
}

Bộ chọn CSS được sử dụng để nhắm mục tiêu các phần tử HTML và áp dụng các kiểu cho chúng. Biết cách sử dụng bộ chọn một cách chính xác là điều cần thiết để tạo các trang web được thiết kế tốt. Các bộ chọn phổ biến bao gồm:

• Lớp học,
• Nhận dạng,
• Bộ chọn phần tử.

/* Class selector */
.button {
  background-color: blue;
  color: white;
}
/* ID selector */
#title {
  font-size: 24px;
}
/* Element selector */
p {
  line-height: 1.5;
}

body {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 16px;
  font-weight: 400;
}

CSS cung cấp một số kỹ thuật bố cục, bao gồm:

1. nổi ,
2. hộp linh hoạt ,
3. Lưới .

/* Float layout */
.left {
  float: left;
  width: 50%;
}
.right {
  float: right;
  width: 50%;
}
/* Flexbox layout */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Grid layout */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

Thiết kế đáp ứng là một kỹ thuật được sử dụng để tạo các trang web thích ứng với các kích cỡ màn hình khác nhau . Sử dụng các truy vấn phương tiện và các đơn vị đáp ứng như emvà remđể đạt được một thiết kế đáp ứng.

@media only screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

Hoạt hình có thể làm cho các trang web của bạn hấp dẫn và tương tác hơn. CSS cung cấp một số thuộc tính hoạt hình, bao gồm:

• chuyển tiếp ,
• biến đổi ,
• Khung hình chính .

/* Transition animation */
.button {
  transition: background-color 0.5s ease;
}
.button:hover {
  background-color: red;
}
/* Transform animation */
.box {
  transform: rotate(45deg);
}
/* Keyframes animation */
@keyframes slide {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 100px;
  }
}
.box {
  animation: slide 1s ease infinite alternate;
}

:root {
  --primary-color: #007bff;
}
.button {
  background-color: var(--primary-color);
}

Các trình duyệt khác nhau hiển thị CSS khác nhau, do đó, điều cần thiết là kiểm tra các trang web của bạn trên các trình duyệt khác nhau để đảm bảo khả năng tương thích giữa các trình duyệt .

/* Vendor prefixes */
.box {
  -webkit-box-shadow: 0px 0px 10px #000;
  box-shadow: 0px 0px

Các bộ tiền xử lý CSS như Sass và Less cho phép bạn viết mã CSS theo mô-đun và hiệu quả hơn. Chúng cung cấp các tính năng như biến , mixin và lồng nhau .

/* Sass code */
$primary-color: #007bff;
.button {
  background-color: $primary-color;
}

Các khung CSS như Bootstrap và Foundation cung cấp mã CSS được viết sẵn cho các thành phần giao diện người dùng phổ biến như nút, biểu mẫu và bảng. Chúng có thể giúp bạn tiết kiệm thời gian và cải thiện tính nhất quán của thiết kế.

<!-- Bootstrap example -->
<div class="container">
  <h1>My Website</h1>
  <p>Welcome to my website!</p>
  <button class="btn btn-primary">Get Started</button>
</div>

Chúc mừng mã hóa!