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
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; và height: 600px;
Bạn hãy theo dõi chỉ số width và height để rõ hơn.
-
Trong
khoi1 mình đã để padding-top: 100%;
-
khoi2 có padding-top: 50%;
Tuy nhiên, kết quả ở đây bạn có thể thấy rõ, padding-top: 100%; là bằng 200px và padding-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 {
width: 100%;
height: 0;
padding-bottom: 100%;
}
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-color: var(--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 {
color: var(—-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 {
color: var(--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 body và html 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 { color: red; }
.bar { color: green; }
<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"] { color: red; }
Đ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]) {
border: 2px dashed red;
}
img[alt=""] {
border: 2px 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% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes bar {
0% { transform: translateX(-100px); }
100% { transform: translateX(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