Hướng dẫn css nâng cao
|
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. Show
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 Bạn hãy theo dõi chỉ số width và height để rõ hơn.
Tuy nhiên, kết quả ở đây bạn có thể thấy rõ, 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: 100%; height: 0; padding-bottom: 100%; } Opacity có thể thay đổi việc sắp xếp theo thứ tự của z-index Giả sử bạn có 3 khối Ở đây chúng ta có 3 khối:
Theo thứ tự thì chúng ta có khối Bây giờ chúng ta sẽ thêm thuộc tính Để 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)<div style="margin-bottom: 20px">foodiv> <div style="margin-top: 20px">bardiv> Kết quả được hiển thị như trong hình. Bạn có thể thấy, ở đây khối Tuy nhiên, sẽ có những ngoại lệ: 1. Phần tử sử dụng 2. Phần tử sử dụng 3. Phần tử có thuộc tính 4. Các phần tử có thuộc tính 5. Phần tử đã clear Thuộc tính CSS tùy chỉnh và biếnSử 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: 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. --default-color: #000000; } header { --primary-color: #ff0000; } a { color: var(--primary-color, --default-color); } <a href="">this is blacka> <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ẻ 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 Trong trường hợp này, hãy sử dụng flexbox. 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 <body> <div style="height: 100%; background: red;">div> body> html> Trong trường hợp này chiều cao của Do đó thuộc tính Thế nên, sẽ không hoạt động đúng như bạn mong muốn. ID > Class Kiểu Điều này là do <h2 id="foo" class="bar">This will be red not greenh2> Trong ví dụ này, màu của 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 // 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: 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 Hoặc muốn nhắm mục tiêu bắt đầu bằng " 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 Điều này đúng với … Ngoại trừ
Nhiều backgroundBạ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 độngTương tự như background, bạn cũng có thể chồng hình ảnh động CSS: 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 Như ví dụ dưới đây. Ở đây, phần tử cha của khối 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. 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: Fanpage: https://facebook.com/NIIT.ICT/ #niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python |
