Mẹo CSS mà mọi lập trình viên đều cần biết
CSS được dùng để tạo phong cách cho một trang web sau khi thiết lập khung HTML. Hơn nữa, bạn còn có thể tạo các thiết kế bóng bẩy trong CSS bằng một vài dòng code.

Mọi lập trình viên đều cần biết những mẹo CSS này để phát triển dự án nhanh chóng và hiệu quả. Chúng chắc chắn sẽ đưa hiệu suất công việc của bạn lên tầm cao mới.
Mẹo dùng CSS hữu ích
-
0 1
Hiệu ứng di chuột
Bạn có thể thêm hiệu ứng di chuột vào một nhân tố HTML bằng :hover.
Ví dụ: Thêm hiệu ứng di chuột vào một nút bấm.
Code HTML:
<button>Hover Over Me</button>
Code CSS:
button:hover { color: #0062FF; border: #0062FF solid 1px; background: #FFFF99; }
Bạn có thể tùy chỉnh code này, thêm hiệu ứng như fade-in, grow-in, skew…
Hiệu ứng làm mờ khi di chuột
button{ opacity:0.5; } button:hover{ opacity:1; }
Hiệu ứng làm trỏ chuột to dần
button:hover{ -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
-
0 2
Chỉnh lại kích thước ảnh vừa khít với container div
Bạn có thể chỉnh lại kích thước ảnh vừa khít một container div bằng các thuộc tính height, width và object-fit.
Code HTML:
<img class="random-image" src="https://picsum.photos/200/300" />
Code CSS:
.random-image { height: 100%; width: 100%; object-fit: contain; }
-
0 3
Ghi đè toàn bộ Style
Bạn có thể ghi đè tất cả khai báo kiểu Style của một thuộc tính (bao gồm cả các kiểu nội tuyến) bằng cách dùng chỉ thị !important ở cuối của giá trị.
Code HTML:
<p class="className" id="idName" style="background-color: orange;"> Hello World! </p>
Code CSS:
p { background-color: yellow; } .className { background-color: blue !important; } #idName { background-color: green; }
Ở ví dụ này, quy tắc !important ghi đè tất cả khai báo background-color khác và đảm bảo mầu nền sẽ được tô màu xanh lam, không phải xanh lá.
-
0 4
Cắt ngắn văn bản bằng dấu chấm lửng
Bạn có thể cắt ngắn văn bản bị tràn ra ngoài bằng một dấu chấm lửng (…) nhờ thuộc tính CSS text-overflow.
Code HTML:
<p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor. </p>
Code CSS:
.text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px; }
-
0 5
Dùng text-transform
Bạn có thể định dạng text thành dạng viết hoa, viết thường hoặc viết hoa toàn bộ bằng thuộc tính CSS text-transform.
Viết hoa
Code HTML:
<p class="uppercase"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
Code CSS:
.uppercase { text-transform: uppercase; }
Viết thường
Code HTML:
<p class="lowercase"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
Code CSS:
.lowercase { text-transform: lowercase; }
Chữ in hoa
Code HTML:
<p class="capitalize"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
Code CSS:
.capitalize { text-transform: capitalize; }
-
Trên đây là một số mẹo CSS cơ bản mà mọi lập trình viên đều nên biết. Hãy chia sẻ cùng độc giả Eballsviet.com những thủ thuật CSS khác mà bạn biết nhé!
Xem thêm bài viết khác
-
Hướng dẫn tham gia Mùa hè kỳ thú VioEdu 2022
-
Hướng dẫn cài đặt và sử dụng Socratic trên điện thoại
-
Cách thay đổi thông tin IOE phù hợp năm học 2023 - 2024
-
Điểm mới Thông tư 08/2023/TT-BGDĐT sửa Thông tư 01, 02, 03, 04
-
Hướng dẫn cài đặt SoundFont và SFZ cho MuseScore
-
Hướng dẫn dùng ClassPoint cho người mới bắt đầu
-
Học PowerPoint - Bài 18: Hướng dẫn chèn video vào PowerPoint
-
Google Meet: Cách bật chế độ tiết kiệm pin và dữ liệu mạng
-
Khan Academy: Cách tìm bài tập cho học sinh
-
Lịch nộp báo cáo tình hình giáo dục Mầm non
-
Hướng dẫn nạp tiền và thanh toán khóa học trên TuyenSinh247
-
Cách sửa lỗi TranS khi học online
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:
