Trong quá trình học về lập trình, chắc hẳn các bạn sẽ đều gặp nhiều lỗi về CSS. Hy vọng những chia sẻ trong bài viết này sẽ góp phần giúp ích các bạn học tập hiệu quả hơn!
Xuất hiện khoảng trống giữa các thẻ: nguyên nhân có thể là do margin, padding, thẻ inline-block hoặc chưa dùng reset CSS.
Kích thước lớn hơn dự kiến dù đã set width, height: nguyên nhân là chưa dùng box-sizing: border-box dẫn đến width height thêm padding và border vô nên to hơn.
Khi dùng flexbox co lại màn hình nhưng cấu trúc không rớt xuống hàng: nguyên nhân là do mặc định flex-wrap: nowrap nên nó sẽ không rớt.
Lỗi chèn link, nhập văn bản: khi làm việc với chữ đặc biệt là dạng người dùng nhập vào nhiều người cố ý spam với 1 từ dài như aaaaaaaaaaaaa hoặc chèn link thì giao diện sẽ bị bể, lúc này để fix mấy trường hợp này thì dùng word-break: break-word, hoặc break-all.
Không CSS width height, margin top bottom, padding top bottom được: nguyên nhân là đang làm với thẻ inline để giải quyết chúng ta nên dùng display block hoặc inline block hoặc flex hoặc dùng thẻ block.
Set giá trị các thẻ: Các thẻ như input, select, button, textarea nó sẽ lấy giá trị mặc định từ trình duyệt chứ không lấy từ body như font-size, font-family vì thế khi code đừng quên set cho chúng.
Tô màu nền cho chữ: Khi bôi đen các chữ có màu nền thì dùng css `:selection`
Placeholder: CSS cho placeholder bằng `input::-webkit-input-place, input::-moz-input-placeholder`
Khung ảnh: Ảnh quá to không co lại theo khung bao ngoài, chắc do thiếu `max-width: 100%`
Ảnh bị méo: do thiếu `object-fit: cover`
Hình nền không hiển thị: do chưa set width height hoặc đường dẫn sai.
Position absolute chạy sai chỗ: chắc là phần tử cha chưa set position.
Border: Đôi khi dùng border: 1px solid red bị lỗi cái border ko đều thì có thể đổi sang dùng border: thin solid red
Thẻ a: Thẻ a không bọc trực tiếp thẻ a, 1 trang web tối đa 1 thẻ h1, các ID không được trùng nhau, thẻ img nên có alt tối ưu cho SEO.
Thẻ ul li: thẻ li không bọc trực tiếp li mà phải li ul li chứ không được li li cũng render ra HTML sai như thẻ a bọc thẻ a.
Khi reset: Khi dùng reset css thì các thẻ strong, b, em, i không còn đậm với nghiêng là vì do các trình duyệt hiển thị khác nhau nên ngta reset lại, ở firefox thẻ strong nó sẽ đậm hơn so với ở Chrome.
Css Outline: Mặc định các input, button, textarea khi nhấn vô sẽ có đường line, đó chính là outline để fix thì css outline: none
Để custom scrollbar gõ google css scrollbar ra trang CSS Tricks có chi tiết, hoặc ẩn dấu mũi tên của input type number tìm ở CSS tricks có luôn.
Để ẩn scrollbar chúng ta dùng đoạn code sau:
Lý do khi dùng flexbox(row) các cột cao bằng nhau: là vì thuộc tính align-items: stretch.
Để ẩn spinner trong input có type là number: ta dùng đoạn code sau:
Khi dùng flexbox với 3 phần tử mà muốn đưa phần tử số 3 về cuối: thì chỉ cần đơn giản dùng margin-left: auto
Khi làm chức năng load more(tải thêm) mà không muốn bị thanh scroll chạy xuống: thì dùng overflow-anchor: none
Khi làm chức năng click vào một phần tử nào đó: tuy nhiên trên phần tử đó lại có phần tử khác nằm lên nhưng bạn không muốn nhấn vô phần tử đó thì CSS cho phần tử đó pointer-events: none
Đừng quên thêm cursor: pointer vào cho phần tử nào mà bạn muốn người dùng hiểu có thể nhấn vô được, button là một ví dụ.
Tìm hiểu emmet để code nhanh hơn, học cách dùng custom snippets để làm nhanh hơn nữa.
Muốn nhấn vào thẻ a có href bắt đầu bằng dấu # để scroll tới phần tử nào đó một cách mượt mà mà không dùng Javascript thì có thể CSS cho thẻ html scroll-behavior: smooth
Muốn bỏ resize trong thẻ textarea: thì dùng resize: none trong CSS
Muốn chữ hiển thị trong trang web mượt mà hơn: thì dùng đoạn code này cho body
- Muốn tạo lớp nền mờ phía sau đặc biệt là khi làm lớp overlay phủ lên: thì dùng đoạn code này, các bạn thay đổi giá trị sao cho phù hợp
Tóm lại, Việc viết CSS hiệu quả là một quá trình liên tục và đòi hỏi sự chú ý đến từng chi tiết. Các bí kíp trên hy vọng có thể giúp các bạn là làm cho mã CSS của mình đạt được kết quả như mong muốn, hơn nữa còn dễ đọc, dễ bảo trì và mở rộng.
Giảng viên: Trịnh Thị Thu Giang
Bộ môn Công nghệ Thông tin
Trường Cao đẳng FPT Polytechnic cơ sở TP HCM
