12 Mẹo CSS nâng cao giúp bạn viết CSS tốt hơn

Ngày đăng: 06/02/2020   -    Cập nhật: 14/04/2021

Nếu bạn đã học được kha khá các thuộc tính về CSS hay CSS3 xong mà vẫn cảm thấy khó khăn trong việc viết CSS cho trang web của mình thì bạn đã tìm đúng bài viết này.

 

Bài viết này mình sẽ hướng dẫn bạn 12 mẹo CSS nâng cao, nó sẽ giúp bạn giải quyết rất nhiều vướng mắc khi viết CSS.

 

12 Mẹo CSS Nâng cao giúp bạn viết CSS tốt hơn


12 Mẹo CSS Nâng cao giúp bạn viết CSS tốt hơn



Chúng ta sẽ bắt đầu ngay.

 

LƯU Ý!

"ĐỂ XEM ĐƯỢC CODE MẪU. BẠN CẦN MỞ TAB KHÁC, VÀO CODEPEN.IO (VƯỢT CAPTCHA) TRƯỚC VÀ F5 LẠI BÀI VIẾT"


 

Verical padding liên quan đến chiều rộng chứ không phải chiều cao.



Cụ thể để thấy vertical padding liên quan đến chiều rộng chúng ta hãy xem ví dụ.
 

 

 


Trong đoạn code trên mình lấy 1 div lớn làm container có width: 200px;height: 600px;

 

Bạn hãy theo dõi chỉ số widthheight để rõ hơn.

 

  • Trong khoi1 mình đã để padding-top: 100%;
  • khoi2padding-top: 50%;
     


Tuy nhiên, kết quả ở đây bạn có thể thấy rõ, padding-top: 100%; là bằng 200pxpadding-top: 50%; là bằng 100px.

 

Vậy, ở đây, padding-top là chỉ số gắn với chiều rộng của phần tử cha, chứ không phải là theo chiều cao.

 

Biết được điều này chúng ta dễ dàng tạo ra các yếu tố giúp giữ tỷ lệ width / height:

 


.square {
    width100%;
    height0;
    padding-bottom100%;
}
 


 

Opacity có thể thay đổi việc sắp xếp theo thứ tự của z-index



Đây là sự thực.

 

Giả sử bạn có 3 khối div. Mỗi khối được thêm thuộc tính z-index để chúng xếp chèn lên nhau.


 


 

Ở đây chúng ta có 3 khối:

 

  • red (z-index: 10;)
  • green (z-index: 2;)
  • và blue (z-index: 1;)



Theo thứ tự thì chúng ta có khối green chèn lên trên khối blue và khối red chèn lên trên tất cả.

 

Bây giờ chúng ta sẽ thêm thuộc tính opacity: 0.99; vào khối red. Kết quả nhận được là khối red nằm bên dưới tất cả.

 

Để giải thích điều này chúng ta có lẽ sẽ cần tới 1 bài viết khác. Ở bài viết này mình chỉ tập trung giới thiệu về các mẹo CSS.

 

Lề trùng lặp (margins overlap)



Chúng ta có ví dụ sau:

 


<div style="margin-bottom: 20px">foo</div>
<div style="margin-top: 20px">bar</div>
 



Kết quả được hiển thị như trong hình.


 


 

Bạn có thể thấy, ở đây khối div có khoảng cách với nhau là 20px mà không phải là cộng dồn thành 40px.

 

Tuy nhiên, sẽ có những ngoại lệ:

 

1. Phần tử sử dụng float

2. Phần tử sử dụng position: absolute;

3. Phần tử có thuộc tính inline-block

4. Các phần tử có thuộc tính overflow

5. Phần tử đã clear

6. Phần tử gốc (root)

 

Thuộc tính CSS tùy chỉnh và biến



Sử dụng SASS hoặc LESS chúng ta có thể có sức mạnh phi thường của của thuộc tính CSS tùy chỉnh và biến ở trong bộ tiền xử lý đó.

 

> Đọc thêm ngay: HỌC SASS (CSS) trong 10 phút



Nhưng có một vài điểm khác biệt.

 


// bạn có thể thiết lập thuộc tính tùy chỉnh như vậy:
:root {
    --foo#000;
}
button {
    background-colorvar(--foo); //background màu #000
}
 



Chúng có tính kế thừa, vì vậy, nếu bạn gán lại cho biến cục bộ nó sẽ ảnh hưởng đến tất cả các phần tử con và ngược lại trong bộ tiền xử lý.



Trình duyệt sẽ tính toán lại tất cả các biến và biểu thức có thể xảy ra.

 

Bạn có thể sử dụng các dấu gạch chéo ngược bằng dấu phẩy, bạn có thể ngăn xếp nhiều lần dự phòng sau dấu phẩy, thậm chí các biến khác:

 


.foo {
    colorvar(—-my-var'blue');
}
 



Điều này dẫn chúng ta đến sự khác biệt chính từ bộ tiền xử lý: Biến CSS nhận thức được cấu trúc của DOM và tính dynamic.

 


:root {
    --default-color#000000;
}
header {
    --primary-color#ff0000;
}
a {
    colorvar(--primary-color--default-color);
}
 

 


<a href="">this is black</a>
 


 


<header>
    <a href="">this is red.</a>
</header>
 


 

Trái ngược với ví dụ đầu tiên về khả năng kế thừa, ví dụ này dựa trên tính kế thừa từ cha.

 

Thẻ a sẽ không có màu đỏ như màu đã khai báo trong header, vì nó không nằm trong header.


Và nó có thiết lập thêm lựa chọn màu thứ hai.

 

 


 

Hơn nữa, chúng cũng có thể dễ dàng thay đổi bằng javascript:

 


// lấy biến từ kiểu inline style
element.style.getPropertyValue("—-my-var");
// set biến trên kiểu inline style
element.style.setProperty("--my-var"jsVar + 4);
 



*Được hỗ trợ kể từ Edge15.


 

Vertical align: top | middle | bottom



Vertical-align: top | middle | bottom: hoạt động cho inline (và cả inline-block) và table-cell, đó không phải là cách đúng để căn chỉnh phần tử bên trong phần tử gốc theo cách mà người ta có thấy một cách trực quan.
 

Trong trường hợp này, hãy sử dụng flexbox.
 


Đọc ngay:

Tự học Flexbox (Toàn Tập)


 

Height: 100% có thể không làm đúng những gì bạn nghĩ



Trong nhiều trường hợp đặt height: 100%; không mang lại kết quả như bạn mong đợi vì chiều cao của phần tử gốc chưa được thiết lập.

 

Ví dụ:

 


<html>
    <body>
        <div style="height: 100%; background: red;"></div>
    </body>
</html>
 



Trong trường hợp này chiều cao của bodyhtml chưa được thiết lập.



Do đó thuộc tính height: 100%; của khối div trên không xác định được chiều cao gốc là như thế nào.

 

Thế nên, sẽ không hoạt động đúng như bạn mong muốn.

 

ID > Class



Kiểu id sẽ ghi đè tất cả các kiểu class.


Điều này là do id là duy nhất, nó chính xác hơn class, xem ví dụ sau:


 


#foo { colorred; } 
.bar { colorgreen; }
 


 


<h1 id="foo" class="bar">This will be red not green</h1>
 



Trong ví dụ này, màu của h1 sẽ là màu đỏ thay vì màu xanh (mặc dù .bar được viết bên dưới nhằm mục đích ghi đè).

 

Nhắm mục tiêu theo thuộc tính



Bạn có thể nhắm mục tiêu vào các thuộc tính cụ thể và nội dung của chúng, ví dụ như nội dung thuộc tính src hoặc href.

 


// Nhắm mục tiêu vào các thuộc tính có giá trị kết thúc bằng .zip
a[href$=".zip" i] { }
// Nhắm mục tiêu vào thuộc tính có giá trị chứa "google.com"
[href*="google.com"] { colorred; }
 



Điều này rất hữu ích khi gỡ lỗi, ví dụ như hiển thị hình ảnh không có thuộc tính Alt hoặc trống:

 


img:not([alt]) {
    border2px dashed red;
}
img[alt=""] {
    border2px dashed red;
}
 


 

Nếu bạn đang sử dụng Angular, kiểu CSS Selector này rất hữu ích khi muốn nhắm mục tiêu một số thành phần chứa [ng-click].


Hoặc muốn nhắm mục tiêu bắt đầu bằng "http" hoặc "https".

 


Tham khảo ngay:

8 Loại CSS Selector cần phải biết


 

Các giá trị trục Horizontal / Vertical không nhất quán.


 

Khi khai báo giá trị cho trục ngang và trục dọc, thường là số đầu tiên khai báo giá trị dọc và thứ hai là chiều ngang.


Ví dụ: Trong padding: 10px 20px;, 10px ở trên và dưới, 20px là trái và phải).


Điều này đúng với padding, margin, border, v.v.. và khá nhiều thứ.


 

… Ngoại trừ border-spacing (khoảng cách đường viền) trong các bảng, trong đó:

 

  • Số đầu tiên đặt cho giá trị ngang
  • Giá trị dọc là số thứ hai…


 

Nhiều background



Bạn có thể thêm nhiều background vào một phần tử duy nhất và định vị chúng hoàn toàn khác nhau, chỉ cần tách biệt bằng dấu phẩy như sau:

 


background: url('name.png') no-repeat center 50px,
            url('name2.png') no-repeat bottom top;
 



* Hỗ trợ từ IE11


 

Xếp chồng hình động


 

Tương tự như background, bạn cũng có thể chồng hình ảnh động CSS:

 


@keyframes foo { 
    0% { opacity0; } 
    100% { opacity1; } 
}

@keyframes bar { 
    0% { transformtranslateX(-100px); } 
    100% { transformtranslateX(0px); } 
}

.element {
    animation: foo 2s 0s, bar 1s 0s;
}
 


 

Hành vi lạ của "position: fixed;" và "translateZ".


 

Thêm transform: translateZ(0); vào container có chứa một phần tử có position: fixed; làm cho phần tử cố định căn chỉnh với container thay vì window.

 

Như ví dụ dưới đây.
 

 


 

Ở đây, phần tử cha của khối fixed đang căn theo window. Nhưng sau khi thêm thuộc tính transform: translateZ(0) thì nó bây giờ căn theo khối div cha.

 

Chúc mừng bạn đã biết thêm nhiều mẹo CSS Nâng cao!


 

Trên đây là 12 mẹo CSS Nâng cao rất hữu ích trong quá trình lập trình Front end hay lập trình web.

 

*Note: Nếu bạn đang muốn có kỹ năng tốt hơn thì tham khảo ngay khóa học Fullstack (Gồm cả Front end và Back end) tại đây.



Khóa học PHP Full stack

Khóa học JAVA Full stack


 

Mình nghĩ điều khó khăn nhất khi viết CSS là do những hành vi lạ, không rõ ràng khiến nhiều khi CSS của bạn hoạt động không như mong muốn.


Nhưng bây giờ, với 12 mẹo CSS nâng cao này bạn đã biết cách nó hoạt động và sửa chữa rồi.


Hi vọng bạn có thể nắm bắt và vận dụng được trong các trường hợp khác nhau.


 

Có thể bạn muốn xem:

CSS Nâng Cao: Advanced Positioning (Định vị nâng cao)



---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
 
#niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python

Bình luận Facebook
Khóa học liên quan đến bài viết

Khóa học PHP Full stack [2023] cho người mới bắt đầu

96 giờ
Khóa học Lập trình PHP Full stack, phiên bản cập nhật lần thứ 8. Dạy Lập trình PHP bài bản từ Front end đến Back end + Laravel. Hướng dẫn làm 2 Dự Án Web lớn

KHÓA HỌC PYTHON HƯỚNG ĐỐI TƯỢNG

50 giờ
Khóa học giúp học viên sử dụng thành thạo ngôn ngữ Lập trình Python (3x). Hiểu và phát triển được Ứng dụng Web với Django Framework. Học thực hành với Giảng viên cao cấp.

Lập trình PHP với Laravel Framework

42 giờ
Khóa học Lập trình PHP với Laravel Framework được NIIT - ICT HÀ NỘI xây dựng nhằm hoàn thiện kỹ năng lập trình web các các bạn đã biết Lập trình Web PHP thuần.

Khóa học Java Full stack (IJFD)

104 giờ
Học lập trình Java Fullstack với khóa học được xây dựng theo lộ trình bài bản, từ JAVA CƠ BẢN đến JAVA WEB và nâng cao về JAVA FRAMEWORK như: Spring Boot, Hibernate
Mục lục
Đăng ký tư vấn
Nhân viên gọi điện tư vấn miễn phí sau khi đăng ký
Được cập nhật các ưu đãi sớm nhất
Hotline: 0383180086
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Hãy đăng ký để nhận những thông tin mới nhất về học bổng mới nhất tại NIIT - ICT Hà Nội
top
Đóng lại Đăng ký học tại NIIT - ICT Hà Nội
6260+ học viên đã theo học tại NIIT - ICT Hà Nội và có việc làm tốt trong ngành lập trình. Nắm lấy cơ hội ngay hôm nay!
Chọn khóa học
  • KHÓA HỌC LẬP TRÌNH FRONT END VỚI REACT.JS
  • KHÓA HỌC LẬP TRÌNH PHP WEB
  • Khóa học PHP Full stack [2023] cho người mới bắt đầu
  • Khóa học BIG DATA với Hadoop và Spark
  • Khóa học Lập trình Android tại Hà Nội
  • [Tuyển sinh 2023] Lập trình viên Quốc tế DigiNxt
  • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại Hà Nội
  • LẬP TRÌNH GAME
    • Khóa học Lập trình Game Unity
  • LẬP TRÌNH WEB FRONT END
    • KHÓA HỌC PYTHON HƯỚNG ĐỐI TƯỢNG
    • KHÓA HỌC ANGULAR & TYPESCRIPT (FRONT END)
  • LẬP TRÌNH WEB BACK END
    • LẬP TRÌNH JAVA WEB VỚI FRAME WORK
    • Lập trình Web với Django
    • Lập trình PHP với Laravel Framework
  • CHƯƠNG TRÌNH ĐÀO TẠO ỨNG DỤNG CÔNG NGHỆ
    • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại TP HCM
  • LẬP TRÌNH WEB FULL STACK
    • Khóa học Java Full stack (IJFD)
  • LẬP TRÌNH MOBILE
    • FRONT-END VỚI REACTJS VÀ REACT NATIVE
    • Lập trình Android Nâng cao
  • ĐÀO TẠO CHO DOANH NGHIỆP
    • KHÓA HỌC BUSINESS ANALYSIC TỪ CƠ BẢN ĐẾN NÂNG CAO 2023
    • Khóa học Magento: Làm chủ CMS TMĐT lớn nhất
    • Khóa học IOT: Xây dựng Sản phẩm IOT với Raspberry Pi
    • Khóa học Automation Testing Chuyên nghiệp
  • KHÓA HỌC DỰ ÁN
    • Học sử dụng bộ Office: Word, Excel, Power Point, Mail chuyên nghiệp
  • KHÓA HỌC KHÁC
    • VBA Excel Toàn Tập (Cơ Bản - Nâng Cao)
    • VBA Excel Nâng cao
    • Khóa học JMeter: Performance Testing
    • Khóa học Tester đạt chuẩn Quốc tế ISTQB Foundation Level
    • Khoá Học Tester đạt chuẩn quốc tế ISTQB Advanced Level
Bạn chưa chọn khóa học cần đăng ký
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Đăng ký học thành công!
Cảm ơn bạn đã đăng ký học tại NIIT - ICT HÀ NỘI!