Các Câu Lệnh Trong CSS3 – Hướng Dẫn Toàn Tập

1. Giới thiệu về CSS3

CSS3 (Cascading Style Sheets level 3) là phiên bản nâng cấp của CSS2, bổ sung nhiều thuộc tính mới giúp tạo giao diện đẹp, hiện đại và hiệu ứng mượt mà hơn cho website.

Câu lệnh CSS3 thường được viết dưới dạng:

selector {

    property: value;

}

Ví dụ:

h1 {

    color: red;

    font-size: 24px;

}

2. Các nhóm câu lệnh chính trong CSS3

2.1. Câu lệnh về màu sắc

CSS3 hỗ trợ nhiều cách định nghĩa màu hơn CSS2:

p {

    color: #ff0000;        /* Mã HEX */

    color: rgb(255, 0, 0); /* RGB */

    color: rgba(255, 0, 0, 0.5); /* RGB có độ trong suốt */

    color: hsl(0, 100%, 50%);    /* HSL */

    color: hsla(0, 100%, 50%, 0.5); /* HSL có alpha */

}

2.2. Câu lệnh về font và văn bản

body {

    font-family: ‘Arial’, sans-serif; /* Font chữ */

    font-size: 16px;                   /* Cỡ chữ */

    font-weight: bold;                 /* Độ đậm */

    text-align: center;                 /* Căn giữa */

    text-shadow: 2px 2px 5px #999;     /* Đổ bóng chữ */

}

2.3. Câu lệnh về nền (background)

CSS3 cho phép dùng ảnh nền, gradient, nhiều lớp nền cùng lúc.

div {

    background-color: #f0f0f0;  

    background-image: url(‘bg.jpg’);  

    background-size: cover; /* Bao phủ toàn bộ */

    background-repeat: no-repeat;  

    background-position: center;  

}

/* Gradient nền */

.gradient {

    background: linear-gradient(to right, red, yellow);

}

2.4. Câu lệnh về border (viền)

.box {

    border: 2px solid black;  

    border-radius: 10px; /* Bo tròn góc */

    box-shadow: 5px 5px 15px rgba(0,0,0,0.3); /* Đổ bóng */

}

2.5. Câu lệnh về kích thước và bố cục

.container {

    width: 80%;  

    max-width: 1200px;  

    margin: auto;  

    padding: 20px;  

    display: flex; /* Bố cục Flexbox */

    gap: 10px;     /* Khoảng cách giữa các phần tử */

}

2.6. Câu lệnh về hiệu ứng (transitions & animations)

Transition – chuyển đổi mượt mà khi thuộc tính thay đổi:

.button {

    background-color: blue;

    transition: background-color 0.5s ease;

}

.button:hover {

    background-color: red;

}

Animation – tạo hoạt cảnh:

@keyframes myMove {

    0% { transform: translateX(0); }

    100% { transform: translateX(100px); }

}

.box {

    animation: myMove 2s infinite alternate;

}

2.7. Câu lệnh về biến trong CSS3 (Custom Properties)

:root {

    –main-color: #3498db;

    –padding: 10px;

}

.card {

    background-color: var(–main-color);

    padding: var(–padding);

}

2.8. Câu lệnh Responsive (Media Queries)

@media (max-width: 768px) {

    body {

        font-size: 14px;

    }

    .container {

        flex-direction: column;

    }

}

3. Một số tính năng mới nổi bật của CSS3

• Flexbox & Grid: Bố cục linh hoạt, dễ căn chỉnh.
• Transform: Xoay, phóng to, nghiêng phần tử.
• Filter: Làm mờ, đổi màu ảnh.
• Clip-path: Cắt hình dạng tùy ý.
• Backdrop-filter: Tạo hiệu ứng kính mờ.

4. Kết luận

CSS3 mở ra khả năng thiết kế web mạnh mẽ, không chỉ làm đẹp mà còn tối ưu trải nghiệm người dùng.

Khi kết hợp các câu lệnh từ cơ bản đến nâng cao, bạn có thể xây dựng giao diện web hiện đại, nhẹ và tương thích mọi thiết bị.