Tổng hợp đầy đủ kiến thức CSS từ cơ bản đến nâng cao

Tổng hợp đầy đủ kiến thức CSS từ cơ bản đến nâng cao

Khám phá đầy đủ kiến thức CSS từ cơ bản đến nâng cao với hướng dẫn chi tiết, dễ hiểu. Tìm hiểu Selector, Box Model, Flexbox, Grid, Responsive, Animation, CSS Variables và các kỹ thuật tối ưu giúp xây dựng giao diện website chuyên nghiệp, chi tiết như nào hãy cùng chúng tôi phân tích:

CSS (Cascading Style Sheets) là nền tảng tạo nên giao diện của hầu hết mọi website hiện đại. Nếu HTML chịu trách nhiệm xây dựng cấu trúc thì CSS đảm nhận việc trình bày, định dạng và nâng cao trải nghiệm người dùng. Một website có nội dung tốt nhưng thiếu CSS sẽ trở nên khô cứng, khó sử dụng và không tạo được ấn tượng với người truy cập.

Bài viết này được Web Mới biên soạn theo hướng dẫn từ nền tảng đến chuyên sâu, giúp bạn hiểu bản chất thay vì chỉ ghi nhớ cú pháp. Nội dung không chỉ phù hợp với người mới bắt đầu mà còn hữu ích đối với lập trình viên muốn hệ thống lại toàn bộ kiến thức CSS trước khi học các framework hoặc xây dựng những giao diện hiện đại.

Tổng hợp đầy đủ kiến thức CSS từ cơ bản đến nâng cao

CSS là gì và vai trò trong phát triển website

CSS là ngôn ngữ dùng để mô tả cách hiển thị của tài liệu HTML. Khi trình duyệt đọc một trang web, HTML sẽ tạo nên cấu trúc còn CSS quyết định màu sắc, khoảng cách, kích thước, vị trí, hiệu ứng chuyển động và khả năng hiển thị trên nhiều loại thiết bị.

Nhờ CSS, cùng một nội dung HTML có thể hiển thị theo rất nhiều phong cách khác nhau mà không cần thay đổi cấu trúc bên trong.

Lợi ích khi sử dụng CSS

  • Tách biệt giao diện và nội dung.
  • Dễ dàng bảo trì và nâng cấp.
  • Giảm dung lượng mã HTML.
  • Tăng tốc độ phát triển giao diện.
  • Hỗ trợ Responsive Design.
  • Dễ tái sử dụng các thành phần.
  • Cải thiện trải nghiệm người dùng.
  • Hỗ trợ tối ưu SEO gián tiếp thông qua trải nghiệm và hiệu suất.

CSS hoạt động như thế nào

Khi trình duyệt tải một trang web, quá trình xử lý thường diễn ra theo các bước sau.

  1. Đọc tài liệu HTML.
  2. Phân tích cây DOM.
  3. Đọc các tệp CSS.
  4. Tạo CSSOM.
  5. Kết hợp DOM và CSSOM.
  6. Tính toán giao diện.
  7. Render lên màn hình.

Việc hiểu quy trình này sẽ giúp bạn tối ưu hiệu năng khi xây dựng website lớn.

Các cách đưa CSS vào website

Có ba phương pháp phổ biến để áp dụng CSS cho tài liệu HTML.

Inline CSS

CSS được viết trực tiếp bên trong thuộc tính style của phần tử HTML.

<p style="color:red;">Xin chào Web Mới</p>

Ưu điểm là nhanh, phù hợp thử nghiệm. Tuy nhiên không nên sử dụng trong các dự án thực tế vì khó bảo trì.

Internal CSS

CSS được đặt bên trong thẻ style của tài liệu HTML.

<style>
p{
    color:blue;
}
</style>

Phù hợp với những trang đơn giản hoặc trang thử nghiệm.

External CSS

Đây là phương pháp được sử dụng nhiều nhất trong các dự án chuyên nghiệp.

<link rel="stylesheet" href="style.css">

Tất cả mã CSS sẽ được đặt trong tệp riêng giúp tái sử dụng và quản lý dễ dàng.

Cấu trúc của một quy tắc CSS

Mỗi quy tắc CSS đều gồm bộ chọn và tập hợp các thuộc tính.

p{
    color:red;
    font-size:18px;
}

Trong đó:

  • Selector xác định phần tử cần áp dụng.
  • Property là tên thuộc tính.
  • Value là giá trị của thuộc tính.

Tìm hiểu bộ chọn trong CSS

Selector là nền tảng quan trọng nhất của CSS. Việc hiểu rõ selector sẽ giúp bạn viết mã ngắn gọn, dễ đọc và tránh xung đột về sau.

Bộ chọn theo tên phần tử

p{
    color:#333;
}

Áp dụng cho tất cả phần tử p.

Bộ chọn theo class

.button{
    background:#0d6efd;
    color:white;
}

Một class có thể sử dụng cho nhiều phần tử khác nhau.

Bộ chọn theo id

#header{
    background:#222;
}

ID chỉ nên xuất hiện một lần trong một tài liệu HTML.

Bộ chọn đa phần tử

h1,
h2,
h3{
    font-family:Arial;
}

Nhiều phần tử có thể dùng chung một nhóm thuộc tính.

Bộ chọn kết hợp

article p{
    line-height:1.8;
}

Chỉ những đoạn văn nằm bên trong article mới được áp dụng.

Bộ chọn con trực tiếp

ul>li{
    margin-bottom:10px;
}

Chỉ áp dụng với phần tử con trực tiếp.

Bộ chọn anh em liền kề

h2+p{
    margin-top:0;
}

Được sử dụng khá nhiều khi xây dựng bố cục bài viết.

Bộ chọn thuộc tính

input[type="text"]{
    border:1px solid #ccc;
}

Cho phép chọn phần tử dựa trên giá trị của thuộc tính.

Độ ưu tiên của CSS

Nhiều người mới học thường gặp tình trạng CSS không hoạt động mặc dù cú pháp hoàn toàn chính xác. Nguyên nhân phổ biến nhất là do quy tắc về độ ưu tiên.

Thứ tự ưu tiên từ thấp đến cao thường là:

  1. Selector theo tên phần tử.
  2. Selector theo class.
  3. Selector theo thuộc tính.
  4. Pseudo class.
  5. Selector theo ID.
  6. Inline CSS.
  7. Thuộc tính sử dụng !important.

Trong quá trình phát triển website, nên hạn chế sử dụng !important vì sẽ làm mã nguồn khó kiểm soát khi dự án ngày càng lớn.

Đơn vị đo trong CSS

CSS hỗ trợ rất nhiều đơn vị đo khác nhau. Việc lựa chọn đúng đơn vị sẽ giúp giao diện hiển thị linh hoạt trên nhiều kích thước màn hình.

Đơn vị Ý nghĩa Khi nào nên dùng
px Điểm ảnh Kích thước cố định
% Theo phần trăm Bố cục linh hoạt
em Theo phần tử cha Khoảng cách, font chữ
rem Theo phần tử gốc Thiết kế hiện đại
vw Chiều rộng màn hình Responsive
vh Chiều cao màn hình Banner toàn màn hình

Trong các dự án hiện đại, rem thường được ưu tiên hơn px đối với kích thước chữ nhằm tăng khả năng mở rộng và hỗ trợ người dùng thay đổi kích thước font trong trình duyệt.

Tìm hiểu mô hình Box Model trong CSS

Box Model là một trong những kiến thức quan trọng nhất khi học CSS. Mọi phần tử HTML đều được trình duyệt xem như một hình chữ nhật gồm nhiều lớp khác nhau. Hiểu rõ Box Model sẽ giúp bạn kiểm soát chính xác kích thước, khoảng cách và bố cục của website.

Một Box Model bao gồm bốn thành phần chính.

  1. Content (nội dung).
  2. Padding (khoảng cách từ nội dung đến đường viền).
  3. Border (đường viền).
  4. Margin (khoảng cách bên ngoài phần tử).

Thiết lập chiều rộng và chiều cao

Hai thuộc tính được sử dụng phổ biến nhất là width và height.

.box{
    width:300px;
    height:180px;
}

Khi chỉ định kích thước, cần lưu ý rằng giá trị mặc định chỉ áp dụng cho vùng nội dung, chưa bao gồm padding và border.

Padding

Padding tạo khoảng cách giữa nội dung và đường viền của phần tử.

.box{
    padding:20px;
}

Cũng có thể thiết lập riêng từng cạnh.

.box{
    padding-top:20px;
    padding-right:15px;
    padding-bottom:20px;
    padding-left:15px;
}

Cú pháp rút gọn.

.box{
    padding:20px 15px;
}

Margin

Margin tạo khoảng cách giữa phần tử hiện tại và các phần tử xung quanh.

.box{
    margin:30px;
}

Để căn giữa một khối theo chiều ngang.

.container{
    width:900px;
    margin:0 auto;
}

Border

Border dùng để tạo đường viền bao quanh phần tử.

.box{
    border:2px solid #333;
}

Có thể thiết lập riêng từng cạnh nếu cần.

Box Sizing

Mặc định, CSS sử dụng content-box. Điều này khiến kích thước thực tế của phần tử lớn hơn width hoặc height đã khai báo nếu có thêm padding hoặc border.

Trong các dự án hiện đại nên sử dụng border-box.

*{
    box-sizing:border-box;
}

Khi đó width sẽ bao gồm luôn padding và border, giúp việc xây dựng giao diện dễ dàng hơn.

Thuộc tính hiển thị trong CSS

Display quyết định cách phần tử xuất hiện trên trang web. Đây là thuộc tính ảnh hưởng trực tiếp đến bố cục.

Display Block

Phần tử block luôn chiếm toàn bộ chiều ngang có sẵn.

.item{
    display:block;
}

Một số phần tử mặc định thuộc kiểu block gồm div, p, section, article, header và footer.

Display Inline

Phần tử inline chỉ chiếm đúng kích thước nội dung.

.item{
    display:inline;
}

Những phần tử phổ biến gồm span, strong và em.

Display Inline-block

Inline-block kết hợp ưu điểm của block và inline.

.item{
    display:inline-block;
    width:200px;
}

Phần tử vẫn nằm trên cùng một dòng nhưng có thể thiết lập width và height.

Display None

Ẩn hoàn toàn phần tử khỏi giao diện.

.hidden{
    display:none;
}

Phần tử sẽ không chiếm bất kỳ không gian nào trên trang.

Thuộc tính Position

Position giúp xác định vị trí của phần tử theo nhiều cách khác nhau.

Position Static

Đây là giá trị mặc định của mọi phần tử HTML.

.box{
    position:static;
}

Position Relative

Relative giữ nguyên vị trí ban đầu nhưng cho phép dịch chuyển bằng top, right, bottom và left.

.box{
    position:relative;
    top:20px;
    left:15px;
}

Position Absolute

Absolute giúp phần tử thoát khỏi luồng tài liệu thông thường.

.parent{
    position:relative;
}

.child{
    position:absolute;
    top:0;
    right:0;
}

Absolute luôn lấy phần tử cha gần nhất có position khác static làm mốc.

Position Fixed

Fixed giúp phần tử cố định trên cửa sổ trình duyệt.

.button-top{
    position:fixed;
    bottom:20px;
    right:20px;
}

Nút quay về đầu trang thường sử dụng kiểu này.

Position Sticky

Sticky kết hợp giữa relative và fixed.

.menu{
    position:sticky;
    top:0;
}

Khi người dùng cuộn đến vị trí xác định, phần tử sẽ bám theo màn hình.

Làm việc với màu sắc trong CSS

CSS hỗ trợ nhiều cách khai báo màu sắc khác nhau. Mỗi cách đều có ưu điểm riêng tùy theo từng tình huống.

Sử dụng tên màu

.title{
    color:red;
}

Sử dụng mã HEX

.title{
    color:#1e88e5;
}

Sử dụng RGB

.title{
    color:rgb(30,136,229);
}

Sử dụng RGBA

.overlay{
    background:rgba(0,0,0,0.5);
}

RGBA cho phép điều chỉnh độ trong suốt.

Sử dụng HSL

.title{
    color:hsl(210,80%,50%);
}

HSL giúp điều chỉnh màu sắc trực quan hơn trong quá trình thiết kế.

Làm việc với Background

Background không chỉ dùng để tô màu mà còn có thể hiển thị hình ảnh, tạo hiệu ứng lặp và nhiều kỹ thuật khác.

Background Color

.box{
    background-color:#f5f5f5;
}

Background Image

.banner{
    background-image:url("banner.jpg");
}

Background Repeat

.banner{
    background-repeat:no-repeat;
}

Background Size

.banner{
    background-size:cover;
}

Cover giúp hình phủ kín toàn bộ phần tử.

Background Position

.banner{
    background-position:center;
}

Background Attachment

.banner{
    background-attachment:fixed;
}

Thuộc tính này thường được dùng để tạo hiệu ứng Parallax đơn giản.

Định dạng văn bản trong CSS

Màu chữ

p{
    color:#444;
}

Căn lề văn bản

p{
    text-align:justify;
}

Khoảng cách dòng

p{
    line-height:1.8;
}

Khoảng cách giữa các chữ

p{
    letter-spacing:1px;
}

Khoảng cách giữa các từ

p{
    word-spacing:5px;
}

Thụt đầu dòng

p{
    text-indent:40px;
}

Viết hoa chữ

.title{
    text-transform:uppercase;
}

Gạch chân và trang trí văn bản

a{
    text-decoration:none;
}

Quản lý Font chữ

Font chữ ảnh hưởng lớn đến khả năng đọc và trải nghiệm người dùng. Không nên sử dụng quá nhiều font trên cùng một website.

Thiết lập Font Family

body{
    font-family:Arial, Helvetica, sans-serif;
}

Kích thước chữ

body{
    font-size:16px;
}

Độ đậm

strong{
    font-weight:700;
}

Kiểu chữ

em{
    font-style:italic;
}

Rút gọn thuộc tính Font

body{
    font:400 16px/1.8 Arial, Helvetica, sans-serif;
}

Cú pháp rút gọn giúp mã nguồn ngắn gọn hơn nhưng cần viết đúng thứ tự các giá trị.

Làm việc với danh sách trong CSS

Danh sách xuất hiện rất nhiều trong website như menu điều hướng, danh mục sản phẩm, bài viết liên quan hay các mục liệt kê. CSS cung cấp nhiều thuộc tính để tùy chỉnh cách hiển thị của danh sách.

Thay đổi kiểu ký hiệu của danh sách

ul{
    list-style-type:square;
}

Một số giá trị thường gặp gồm disc, circle, square và none.

Ẩn ký hiệu mặc định

ul{
    list-style:none;
    padding:0;
    margin:0;
}

Đây là cách thường dùng khi xây dựng menu điều hướng.

Sử dụng hình ảnh làm ký hiệu

ul{
    list-style-image:url("icon.png");
}

Hiện nay cách này ít được sử dụng, thay vào đó các lập trình viên thường dùng background hoặc pseudo element để dễ kiểm soát hơn.

Định dạng liên kết

Liên kết là thành phần không thể thiếu trên mọi website. Việc định dạng đúng sẽ giúp người dùng dễ nhận biết và tăng khả năng tương tác.

Thay đổi màu liên kết

a{
    color:#0066cc;
}

Xóa gạch chân

a{
    text-decoration:none;
}

Hiệu ứng khi di chuột

a:hover{
    color:#d35400;
}

Hiệu ứng khi nhấn chuột

a:active{
    color:red;
}

Liên kết đã truy cập

a:visited{
    color:purple;
}

Thuộc tính Overflow

Overflow quyết định cách trình duyệt xử lý khi nội dung vượt quá kích thước của phần tử.

Hiển thị mặc định

.box{
    overflow:visible;
}

Ẩn nội dung dư

.box{
    overflow:hidden;
}

Hiển thị thanh cuộn

.box{
    overflow:scroll;
}

Tự động xuất hiện thanh cuộn

.box{
    overflow:auto;
}

Auto là lựa chọn phù hợp trong đa số trường hợp vì chỉ hiển thị thanh cuộn khi cần thiết.

Thuộc tính Float và Clear

Trước khi Flexbox và Grid ra đời, Float là phương pháp phổ biến để xây dựng bố cục website. Mặc dù ngày nay ít được sử dụng cho layout chính nhưng bạn vẫn nên hiểu nguyên lý hoạt động của nó.

Sử dụng Float

.left{
    float:left;
}

.right{
    float:right;
}

Phần tử được float sẽ thoát khỏi luồng hiển thị thông thường.

Clear Float

.clear{
    clear:both;
}

Thuộc tính clear giúp phần tử tiếp theo không bị ảnh hưởng bởi float.

Flexbox trong CSS

Flexbox là một trong những công nghệ quan trọng nhất của CSS hiện đại. Flexbox giúp căn chỉnh phần tử theo cả chiều ngang và chiều dọc dễ dàng hơn rất nhiều so với các kỹ thuật cũ.

Kích hoạt Flexbox

.container{
    display:flex;
}

Khi đó tất cả phần tử con sẽ trở thành flex item.

Hướng sắp xếp

.container{
    display:flex;
    flex-direction:row;
}

Một số giá trị thường dùng.

  • row
  • row-reverse
  • column
  • column-reverse

Canh theo chiều ngang

.container{
    display:flex;
    justify-content:center;
}

Các giá trị phổ biến gồm flex-start, center, flex-end, space-between, space-around và space-evenly.

Canh theo chiều dọc

.container{
    display:flex;
    align-items:center;
}

Cho phép xuống dòng

.container{
    display:flex;
    flex-wrap:wrap;
}

Đây là thuộc tính rất quan trọng khi xây dựng giao diện Responsive.

Khoảng cách giữa các phần tử

.container{
    display:flex;
    gap:20px;
}

Gap giúp mã nguồn ngắn gọn hơn rất nhiều so với việc sử dụng margin.

Tăng hoặc giảm kích thước linh hoạt

.item{
    flex:1;
}

Các phần tử sẽ tự chia đều không gian còn lại.

Ví dụ bố cục ba cột

.container{
    display:flex;
    gap:20px;
}

.item{
    flex:1;
}

Đây là kiểu bố cục được sử dụng rất phổ biến trong website doanh nghiệp và thương mại điện tử.

CSS Grid Layout

Nếu Flexbox phù hợp với bố cục một chiều thì CSS Grid được thiết kế cho bố cục hai chiều. Grid đặc biệt hiệu quả khi xây dựng dashboard, landing page hoặc giao diện có nhiều hàng và cột.

Kích hoạt Grid

.container{
    display:grid;
}

Tạo số cột

.container{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
}

Ba cột sẽ có chiều rộng bằng nhau.

Thiết lập khoảng cách

.container{
    display:grid;
    gap:20px;
}

Định nghĩa chiều cao hàng

.container{
    grid-template-rows:150px 200px;
}

Tự động lấp đầy không gian

.container{
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}

Đây là một trong những kỹ thuật Responsive mạnh mẽ nhất của CSS hiện đại.

Pseudo Class

Pseudo Class giúp áp dụng CSS dựa trên trạng thái của phần tử thay vì chỉ dựa vào tên phần tử hoặc class.

Hover

.button:hover{
    background:#0056b3;
}

Focus

input:focus{
    border-color:#007bff;
}

First Child

li:first-child{
    font-weight:bold;
}

Last Child

li:last-child{
    margin-bottom:0;
}

Nth Child

tr:nth-child(even){
    background:#f7f7f7;
}

Nth-child thường được dùng để tạo hiệu ứng xen kẽ trong bảng dữ liệu.

Disabled

button:disabled{
    opacity:.5;
}

Pseudo Element

Pseudo Element cho phép định dạng một phần của phần tử hoặc tạo nội dung mà không cần chỉnh sửa HTML.

Before

.title::before{
    content:"★ ";
}

After

.title::after{
    content:" ✔";
}

First Letter

p::first-letter{
    font-size:36px;
}

First Line

p::first-line{
    font-weight:bold;
}

Selection

::selection{
    background:#ffe08a;
}

Pseudo Element giúp giảm số lượng phần tử HTML và làm mã nguồn gọn gàng hơn.

Transition trong CSS

Transition giúp tạo hiệu ứng chuyển đổi mượt mà khi giá trị của một thuộc tính CSS thay đổi. Nếu không có transition, các thay đổi sẽ diễn ra ngay lập tức, khiến giao diện trở nên cứng và thiếu tự nhiên.

Cấu trúc của Transition

.button{
    transition:all .3s ease;
}

Thuộc tính transition gồm bốn thành phần.

  • Thuộc tính cần chuyển đổi.
  • Thời gian thực hiện.
  • Kiểu chuyển động.
  • Thời gian chờ (nếu có).

Chuyển đổi màu nền

.button{
    background:#0d6efd;
    transition:background .3s ease;
}

.button:hover{
    background:#084298;
}

Chuyển đổi kích thước

.card{
    transition:transform .3s ease;
}

.card:hover{
    transform:scale(1.05);
}

Chuyển đổi độ trong suốt

.image{
    opacity:.8;
    transition:opacity .3s;
}

.image:hover{
    opacity:1;
}

Các kiểu Timing Function phổ biến

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out

Trong thực tế, ease và ease-in-out được sử dụng nhiều nhất vì tạo cảm giác chuyển động tự nhiên.

Transform trong CSS

Transform cho phép thay đổi hình dạng hoặc vị trí của phần tử mà không ảnh hưởng đến bố cục xung quanh.

Dịch chuyển phần tử

.box:hover{
    transform:translateX(20px);
}

Phóng to hoặc thu nhỏ

.box:hover{
    transform:scale(1.1);
}

Xoay phần tử

.box:hover{
    transform:rotate(10deg);
}

Nghiêng phần tử

.box:hover{
    transform:skew(10deg);
}

Kết hợp nhiều Transform

.box:hover{
    transform:translateY(-10px) scale(1.05) rotate(3deg);
}

Việc kết hợp nhiều hiệu ứng sẽ tạo giao diện sinh động hơn, tuy nhiên không nên lạm dụng vì có thể gây rối mắt.

Animation trong CSS

Animation cho phép tạo chuyển động liên tục mà không cần JavaScript. Đây là giải pháp phù hợp cho các hiệu ứng nhẹ như loading, nút bấm hoặc banner.

Khai báo Keyframes

@keyframes fadeIn{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

Áp dụng Animation

.box{
    animation:fadeIn 1s ease;
}

Animation lặp vô hạn

.loading{
    animation:spin 2s linear infinite;
}

Animation chạy một lần

.banner{
    animation:fadeIn .8s ease forwards;
}

Animation Delay

.item{
    animation:fadeIn .5s ease .3s;
}

Responsive Design trong CSS

Responsive Design là kỹ thuật giúp website hiển thị phù hợp trên điện thoại, máy tính bảng, laptop và màn hình lớn mà không cần tạo nhiều phiên bản khác nhau.

Viewport

Responsive bắt đầu từ việc trình duyệt hiểu đúng kích thước màn hình thiết bị.

Media Query

@media (max-width:768px){

    .container{
        width:100%;
    }

}

Khi chiều rộng màn hình nhỏ hơn hoặc bằng 768px, CSS bên trong sẽ được áp dụng.

Thay đổi số cột

@media (max-width:992px){

    .grid{
        grid-template-columns:1fr 1fr;
    }

}

Hiển thị một cột trên điện thoại

@media (max-width:576px){

    .grid{
        grid-template-columns:1fr;
    }

}

Ẩn thành phần trên thiết bị nhỏ

@media (max-width:768px){

    .sidebar{
        display:none;
    }

}

Responsive hình ảnh

img{
    max-width:100%;
    height:auto;
}

Đây là quy tắc gần như bắt buộc trong mọi dự án web hiện đại.

Biến CSS (CSS Variables)

CSS Variables giúp quản lý màu sắc, khoảng cách và nhiều giá trị dùng chung trong toàn bộ website. Khi cần thay đổi giao diện, bạn chỉ cần sửa một lần thay vì tìm kiếm nhiều vị trí.

Khai báo biến

:root{
    --primary:#0d6efd;
    --secondary:#6c757d;
}

Sử dụng biến

.button{
    background:var(--primary);
}

Thiết lập giá trị mặc định

.button{
    background:var(--main-color,#0d6efd);
}

Nếu biến chưa được khai báo, trình duyệt sẽ sử dụng giá trị mặc định phía sau dấu phẩy.

Hàm thường dùng trong CSS

calc()

Cho phép thực hiện phép tính trực tiếp trong CSS.

.content{
    width:calc(100% - 250px);
}

min()

.container{
    width:min(1200px,100%);
}

max()

.title{
    font-size:max(18px,2vw);
}

clamp()

h1{
    font-size:clamp(30px,5vw,56px);
}

Clamp là giải pháp rất hiệu quả để tạo kích thước chữ Responsive mà không cần nhiều Media Query.

Thuộc tính Object Fit

Object-fit giúp kiểm soát cách hình ảnh hoặc video hiển thị bên trong phần tử.

Cover

img{
    object-fit:cover;
}

Contain

img{
    object-fit:contain;
}

Fill

img{
    object-fit:fill;
}

None

img{
    object-fit:none;
}

Thuộc tính Box Shadow

Box Shadow giúp tạo chiều sâu cho giao diện và làm nổi bật các thành phần như thẻ bài viết, hộp thông tin hoặc nút bấm.

Đổ bóng đơn giản

.card{
    box-shadow:0 5px 15px rgba(0,0,0,.15);
}

Đổ nhiều lớp bóng

.card{
    box-shadow:
    0 2px 6px rgba(0,0,0,.1),
    0 10px 25px rgba(0,0,0,.08);
}

Nhiều lớp bóng thường cho cảm giác mềm mại hơn so với chỉ sử dụng một lớp.

Thuộc tính Text Shadow

Text Shadow thường được dùng cho banner hoặc tiêu đề nổi bật.

h1{
    text-shadow:2px 2px 5px rgba(0,0,0,.3);
}

Không nên sử dụng quá mạnh trong phần nội dung vì sẽ làm giảm khả năng đọc.

Opacity

Opacity điều chỉnh độ trong suốt của phần tử.

.box{
    opacity:.7;
}

Giá trị nằm trong khoảng từ 0 đến 1, trong đó 0 là hoàn toàn trong suốt và 1 là hiển thị đầy đủ.

Cursor

Cursor thay đổi hình dạng con trỏ chuột khi người dùng tương tác.

.button{
    cursor:pointer;
}

Một số giá trị thường gặp gồm pointer, move, wait, help, not-allowed, grab và zoom-in.

Filter và Backdrop Filter

Filter và Backdrop Filter giúp tạo các hiệu ứng xử lý hình ảnh trực tiếp bằng CSS mà không cần chỉnh sửa ảnh gốc. Đây là nhóm thuộc tính được sử dụng nhiều trong các giao diện hiện đại.

Làm mờ phần tử

.image{
    filter:blur(3px);
}

Điều chỉnh độ sáng

.image{
    filter:brightness(120%);
}

Điều chỉnh độ tương phản

.image{
    filter:contrast(150%);
}

Chuyển sang ảnh đen trắng

.image{
    filter:grayscale(100%);
}

Tăng độ bão hòa màu

.image{
    filter:saturate(180%);
}

Đảo ngược màu sắc

.image{
    filter:invert(100%);
}

Làm mờ nền phía sau phần tử

.glass{
    backdrop-filter:blur(12px);
}

Backdrop Filter thường được kết hợp với nền trong suốt để tạo hiệu ứng Glassmorphism.

Gradient trong CSS

Gradient giúp tạo nền chuyển màu mượt mà mà không cần sử dụng hình ảnh. Đây là giải pháp tối ưu cho hiệu suất và dễ dàng thay đổi theo thiết kế.

Linear Gradient

.banner{
    background:linear-gradient(to right,#0d6efd,#20c997);
}

Radial Gradient

.banner{
    background:radial-gradient(circle,#0d6efd,#084298);
}

Conic Gradient

.chart{
    background:conic-gradient(red,orange,yellow,green,blue,purple);
}

Kết hợp nhiều màu

.banner{
    background:linear-gradient(135deg,#0d6efd,#6610f2,#20c997);
}

CSS Mask

CSS Mask cho phép ẩn một phần của phần tử dựa trên hình ảnh hoặc gradient. Thuộc tính này phù hợp khi cần tạo các hiệu ứng cắt hình mà không phải chỉnh sửa ảnh.

Sử dụng Mask với Gradient

.image{
    mask-image:linear-gradient(to bottom,black,transparent);
}

Mask hiện chưa được hỗ trợ đồng đều trên mọi trình duyệt nên cần kiểm tra trước khi áp dụng vào dự án thực tế.

Thuộc tính Clip Path

Clip Path cho phép cắt phần tử thành nhiều hình dạng khác nhau.

Cắt thành hình tròn

.avatar{
    clip-path:circle();
}

Cắt thành hình elip

.image{
    clip-path:ellipse();
}

Cắt theo đa giác

.image{
    clip-path:polygon(
        50% 0%,
        100% 100%,
        0% 100%
    );
}

Clip Path được sử dụng nhiều trong Landing Page và các website có thiết kế sáng tạo.

Scroll Behavior

Scroll Behavior giúp tạo hiệu ứng cuộn mượt khi người dùng di chuyển đến các liên kết trong cùng trang.

html{
    scroll-behavior:smooth;
}

Đây là một trong những cách đơn giản nhất để cải thiện trải nghiệm người dùng.

Scroll Snap

Scroll Snap giúp nội dung tự động dừng đúng vị trí sau khi người dùng cuộn, rất phù hợp với slider hoặc thư viện ảnh.

Khai báo vùng cuộn

.container{
    scroll-snap-type:x mandatory;
}

Khai báo điểm dừng

.item{
    scroll-snap-align:start;
}

Aspect Ratio

Aspect Ratio giúp giữ đúng tỷ lệ giữa chiều rộng và chiều cao mà không cần tính toán bằng JavaScript.

.video{
    aspect-ratio:16/9;
}

Thuộc tính này đặc biệt hữu ích khi hiển thị video, banner hoặc ảnh sản phẩm.

Z-Index

Z-Index quyết định thứ tự hiển thị của các phần tử khi chúng chồng lên nhau.

Ví dụ sử dụng

.modal{
    position:fixed;
    z-index:9999;
}

Z-Index chỉ hoạt động khi phần tử có thuộc tính position khác static.

Visibility và Display

Nhiều người mới học CSS thường nhầm lẫn giữa visibility và display.

Thuộc tính Ẩn phần tử Giữ khoảng trống
display:none Có Không
visibility:hidden Có Có

Nếu muốn phần tử biến mất hoàn toàn khỏi bố cục, hãy sử dụng display:none.

Thuộc tính White Space

White Space kiểm soát cách trình duyệt xử lý khoảng trắng và xuống dòng.

Không xuống dòng

.title{
    white-space:nowrap;
}

Giữ nguyên định dạng

.content{
    white-space:pre-wrap;
}

Text Overflow

Thuộc tính này giúp xử lý văn bản quá dài trong một vùng có kích thước cố định.

.title{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

Nội dung vượt quá sẽ được hiển thị bằng dấu ba chấm.

CSS Custom Properties theo chủ đề

Ngoài việc khai báo biến toàn cục, CSS Variables còn được sử dụng để xây dựng nhiều giao diện khác nhau như Light Mode và Dark Mode.

Biến giao diện sáng

:root{
    --bg:#ffffff;
    --text:#222222;
}

Biến giao diện tối

.dark{
    --bg:#1f1f1f;
    --text:#f5f5f5;
}

Áp dụng biến

body{
    background:var(--bg);
    color:var(--text);
}

Tổ chức mã CSS hiệu quả

Khi dự án phát triển lớn, việc tổ chức mã nguồn đóng vai trò quan trọng không kém việc viết đúng cú pháp.

Đặt tên có ý nghĩa

Class nên phản ánh đúng chức năng của thành phần thay vì chỉ mô tả hình thức.

  • card
  • card-title
  • button-primary
  • product-item
  • main-navigation

Không viết Selector quá dài

Selector càng lồng nhiều cấp thì CSS càng khó bảo trì và hiệu suất cũng giảm nhẹ trên các tài liệu lớn.

Nên ưu tiên selector ngắn gọn, rõ ràng và dễ đọc.

Nhóm các thuộc tính liên quan

Một quy tắc CSS nên được sắp xếp theo nhóm như bố cục, kích thước, khoảng cách, màu sắc, font chữ và hiệu ứng. Điều này giúp việc đọc mã dễ dàng hơn.

Những lỗi phổ biến khi học CSS

Lạm dụng !important

Đây là lỗi rất phổ biến khiến việc bảo trì CSS trở nên khó khăn. Hãy ưu tiên xử lý bằng selector hoặc cấu trúc mã hợp lý.

Sử dụng quá nhiều ID

ID phù hợp với các trường hợp đặc biệt. Trong đa số dự án nên ưu tiên class để tăng khả năng tái sử dụng.

Không sử dụng Box Sizing

Nếu bỏ qua border-box, việc tính toán kích thước phần tử sẽ phức tạp hơn rất nhiều.

Lồng Selector quá sâu

Selector dài nhiều cấp vừa khó đọc vừa làm tăng khả năng xung đột CSS.

Không kiểm tra Responsive

Website có thể hiển thị đẹp trên máy tính nhưng bị vỡ bố cục trên điện thoại nếu không kiểm tra ở nhiều kích thước màn hình.

Sử dụng đơn vị không phù hợp

Không phải lúc nào px cũng là lựa chọn tối ưu. Hãy kết hợp rem, %, vw, vh và fr để giao diện linh hoạt hơn.

Hiệu ứng quá nhiều

Animation và Transition chỉ nên hỗ trợ trải nghiệm người dùng. Quá nhiều hiệu ứng sẽ gây mất tập trung và ảnh hưởng đến hiệu suất.

Tối ưu hiệu suất CSS

Hiệu suất CSS ảnh hưởng trực tiếp đến tốc độ hiển thị website. Một tệp CSS được tổ chức tốt không chỉ giúp trình duyệt render nhanh hơn mà còn giúp việc bảo trì và mở rộng dự án dễ dàng hơn.

Giảm số lượng tệp CSS

Mỗi tệp CSS là một yêu cầu tải tài nguyên. Việc gộp các tệp có liên quan sẽ giúp giảm số lượng yêu cầu HTTP và cải thiện thời gian tải trang.

Loại bỏ CSS không sử dụng

Trong quá trình phát triển, nhiều đoạn CSS cũ không còn được sử dụng nhưng vẫn tồn tại trong dự án. Việc loại bỏ chúng sẽ giúp giảm dung lượng tệp và tăng tốc độ tải.

Ưu tiên Selector đơn giản

Selector ngắn gọn sẽ giúp trình duyệt tìm kiếm phần tử nhanh hơn.

Ví dụ nên ưu tiên.

.product-title{
    color:#333;
}

Thay vì viết quá nhiều cấp.

.wrapper .content .main .product .header .title{
    color:#333;
}

Hạn chế sử dụng Universal Selector

Universal Selector có thể tác động đến toàn bộ tài liệu.

*{
    margin:0;
    padding:0;
}

Việc sử dụng để reset CSS là chấp nhận được, tuy nhiên không nên lạm dụng trong các selector phức tạp.

Tránh Animation ảnh hưởng đến Layout

Các thuộc tính như width, height, margin hoặc top có thể khiến trình duyệt phải tính toán lại bố cục liên tục.

Nên ưu tiên animation trên transform và opacity vì chúng thường được GPU tăng tốc.

Phương pháp đặt tên class phổ biến

Một hệ thống đặt tên thống nhất sẽ giúp dự án dễ đọc và dễ bảo trì khi số lượng thành phần ngày càng nhiều.

BEM

BEM là viết tắt của Block, Element và Modifier. Đây là phương pháp được sử dụng rất phổ biến trong các dự án lớn.

.card{}

.card__title{}

.card__image{}

.card--active{}

Ưu điểm của BEM.

  • Dễ đọc.
  • Dễ bảo trì.
  • Giảm xung đột CSS.
  • Dễ mở rộng.

Utility Class

Utility Class là cách xây dựng nhiều class nhỏ, mỗi class chỉ đảm nhận một nhiệm vụ.

.text-center{
    text-align:center;
}

.mt-20{
    margin-top:20px;
}

.d-flex{
    display:flex;
}

Phương pháp này là nền tảng của nhiều CSS Framework hiện đại.

Reset CSS và Normalize CSS

Mỗi trình duyệt đều có các thiết lập mặc định khác nhau. Reset CSS và Normalize CSS được tạo ra nhằm giảm sự khác biệt đó.

Reset CSS

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

Reset CSS đưa hầu hết phần tử về trạng thái gần như ban đầu.

Normalize CSS

Normalize CSS không xóa toàn bộ định dạng mặc định mà chỉ điều chỉnh để các trình duyệt hiển thị đồng nhất hơn.

Trong các dự án hiện đại, Normalize CSS thường mang lại trải nghiệm ổn định hơn.

Các thuộc tính CSS được sử dụng nhiều nhất

Thuộc tính Mục đích
display Quy định cách hiển thị phần tử.
position Định vị phần tử.
margin Khoảng cách bên ngoài.
padding Khoảng cách bên trong.
width Chiều rộng.
height Chiều cao.
color Màu chữ.
background Màu hoặc hình nền.
border Đường viền.
font-size Kích thước chữ.
font-weight Độ đậm.
line-height Khoảng cách dòng.
text-align Căn lề văn bản.
overflow Xử lý nội dung tràn.
z-index Thứ tự hiển thị.
transform Biến đổi phần tử.
transition Hiệu ứng chuyển đổi.
animation Hiệu ứng động.
box-shadow Đổ bóng.
gap Khoảng cách giữa các phần tử Flexbox hoặc Grid.

Kinh nghiệm viết CSS sạch và dễ bảo trì

Ưu tiên tái sử dụng

Không nên viết nhiều đoạn CSS giống nhau cho các thành phần có chức năng tương tự. Hãy tạo class dùng chung khi có thể.

Viết theo từng thành phần

Mỗi thành phần nên có nhóm CSS riêng để việc chỉnh sửa không ảnh hưởng đến các khu vực khác.

Hạn chế ghi đè nhiều lần

Nếu cùng một thuộc tính liên tục bị ghi đè ở nhiều nơi, cấu trúc CSS cần được xem xét lại.

Sử dụng biến cho màu sắc

Màu sắc, khoảng cách và kích thước nên được lưu trong CSS Variables để việc thay đổi giao diện trở nên nhanh chóng.

Luôn kiểm tra trên nhiều trình duyệt

Một số thuộc tính CSS mới có thể chưa được hỗ trợ hoàn toàn trên các trình duyệt cũ. Trước khi triển khai, nên kiểm tra khả năng tương thích để tránh lỗi hiển thị.

Lộ trình học CSS dành cho người mới

Việc học theo đúng trình tự sẽ giúp bạn hiểu bản chất thay vì ghi nhớ rời rạc từng thuộc tính.

  1. Nắm vững cấu trúc HTML.
  2. Hiểu Selector và Specificity.
  3. Thành thạo Box Model.
  4. Làm quen với Margin, Padding và Border.
  5. Học Display và Position.
  6. Nắm chắc Flexbox.
  7. Thành thạo CSS Grid.
  8. Học Responsive Design và Media Query.
  9. Tìm hiểu Transition, Transform và Animation.
  10. Sử dụng CSS Variables.
  11. Học các phương pháp tổ chức CSS như BEM.
  12. Tối ưu hiệu suất và khả năng bảo trì.

Khi nào nên sử dụng CSS Framework

CSS thuần vẫn là nền tảng quan trọng nhất mà mọi lập trình viên cần nắm vững. Sau khi hiểu rõ CSS, bạn có thể sử dụng các framework để tăng tốc quá trình phát triển giao diện.

Một số trường hợp nên cân nhắc sử dụng framework.

  • Dự án cần hoàn thành trong thời gian ngắn.
  • Website có nhiều giao diện lặp lại.
  • Làm việc theo nhóm lớn.
  • Cần xây dựng giao diện Responsive nhanh chóng.

Tuy nhiên, việc phụ thuộc hoàn toàn vào framework mà không hiểu CSS sẽ khiến bạn gặp khó khăn khi cần tùy chỉnh hoặc xử lý các yêu cầu đặc biệt.

Kết luận

CSS không chỉ đơn thuần là công cụ giúp website đẹp hơn mà còn là nền tảng quyết định trải nghiệm người dùng, khả năng hiển thị trên nhiều thiết bị và hiệu suất của toàn bộ giao diện. Từ những kiến thức cơ bản như Selector, Box Model, Margin, Padding đến các kỹ thuật hiện đại như Flexbox, Grid, CSS Variables, Animation hay Responsive Design, mỗi chủ đề đều đóng vai trò quan trọng trong quá trình xây dựng một website chuyên nghiệp.

Để thành thạo CSS, bạn không nên chỉ ghi nhớ cú pháp mà cần hiểu nguyên lý hoạt động của từng thuộc tính, luyện tập thường xuyên với các bố cục thực tế và hình thành thói quen viết mã sạch, dễ đọc, dễ bảo trì. Khi đã nắm vững CSS thuần, việc tiếp cận các framework hoặc thư viện giao diện sẽ trở nên đơn giản hơn rất nhiều, đồng thời giúp bạn linh hoạt xử lý các yêu cầu thiết kế từ cơ bản đến nâng cao trong mọi dự án phát triển website.

  • ★★★★★ ★★★★★
  • 0 Bình luận
Trần Thị Vân | Content Creator Web Mới
Trần Thị Vân
Trần Thị Vân là Content Creator tại Web Mới, phụ trách nghiên cứu, biên soạn nội dung và chia sẻ kiến thức về website, SEO, lập trình cùng các xu hướng công nghệ
Chia sẻ nội dung đánh giá của bạn về Tổng hợp đầy đủ kiến thức CSS từ cơ bản đến nâng cao
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Đăng ký tư vấn thiết kế website
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn