Bảng cheat flex regex
|
Tìm hiểu từ hơn 300 ví dụ. Với trình chỉnh sửa của chúng tôi, bạn có thể chỉnh sửa CSS và nhấp vào nút để xem kết quả Show
Chuyển đến ví dụ về CSS Sử dụng thực đơnChúng tôi khuyên bạn nên đọc hướng dẫn này, theo trình tự được liệt kê trong menu Nếu bạn có màn hình lớn, menu sẽ luôn ở bên trái Nếu bạn có màn hình nhỏ, hãy mở menu bằng cách nhấp vào ký hiệu menu trên cùng ☰ Mẫu CSSChúng tôi đã tạo một số W3 đáp ứng. Các mẫu CSS để bạn sử dụng Bạn có thể tự do sửa đổi, lưu, chia sẻ và sử dụng chúng trong tất cả các dự án của mình Mẫu CSS miễn phí bài tập cssKiểm tra bản thân với các bài tậpCâu đố về CSSKiểm tra kỹ năng CSS của bạn bằng một bài kiểm tra Bắt đầu bài kiểm tra CSS Việc học của tôiTheo dõi tiến trình của bạn với chương trình "Học tập của tôi" miễn phí tại W3Schools Đăng nhập vào tài khoản của bạn và bắt đầu kiếm điểm Đây là một tính năng tùy chọn. Bạn có thể học W3Schools mà không cần sử dụng My Learning Tài liệu tham khảo CSSTại W3Schools, bạn sẽ tìm thấy các tham chiếu CSS hoàn chỉnh của tất cả các thuộc tính và bộ chọn với cú pháp, ví dụ, hỗ trợ trình duyệt, v.v. Từ đó thuật ngữ BEM (Block-Element-Modifiers) ra đời. Đây là một phương pháp đặt tên lớp CSS được phát triển bởi Yandex. Theo lý thuyết, BEM giúp bạn xây dựng các lớp theo từng khối, mỗi khối lại có phần tử con, và các phần tử này có thể sẽ có giao diện khác nhau tùy thuộc vào công cụ sửa đổi của nó Ví dụ về BEM And when apply to HTML BEM là phương pháp hiệu quả để chia từng thành phần, và bạn có thể tránh được những xung đột ở trên. Ngoài ra, khi thành phần không còn sử dụng tới nữa thì bạn hoàn toàn có thể xóa đi mà không ảnh hưởng đến các thành phần khác Tuy nhiên, BEM cũng có những vấn đề khó chịu như việc bạn sẽ phải bỏ qua thời gian để suy nghĩ cách đặt tên, ngữ nghĩa của lớp sao cho đúng. Bạn phải cân nhắc việc chặn đặt tên này là gì, có những thành phần nào. Cách đặt tên sao cho đúng cũng là một vấn đề của khoa học máy tính. Ngoài ra khi muốn cấu trúc lại khối đó thì chúng ta lại phải nghĩ ra tên khác cho nó Rồi các bạn đã biết đến Bootstrap, một framework với các template html, css, javascript. Bootstrap bao gồm những cái cơ bản có sẵn như. kiểu chữ, biểu mẫu, nút, bảng, điều hướng, phương thức, băng chuyền hình ảnh và nhiều thứ khác. Trong bootstrap có thêm nhiều Component, Javascript Hỗ trợ cho công việc thiết kế reponsive của bạn dễ dàng, thuận tiện và nhanh chóng hơn. Bootstrap giúp bạn khởi động nhanh trong quá trình phát triển web Cái gì cũng có những ưu nhược điểm của nó, Bootstrap cũng không phải ngoại lệ. Khi dự án lớn hơn, đồng nghĩa với việc tùy chỉnh lại các lớp của Bootstrap trở nên khó khăn hơn, chúng ta phải thường xuyên ghi đè lại các lớp của Bootstrap để phù hợp với thiết kế. Việc tối ưu mã cũng khó hơn. Trong các dự án, chúng tôi không thể tận dụng được hết 100% thành phần của Bootstrap, chúng tôi chỉ sử dụng khoảng 10% trong đó nên Bootstrap sẽ nặng nề hơn đối với các dự án lớn Lan man nhiều rồi, chúng ta cùng đi vào vấn đề chính thôi 1. Tailwind CSS là gì?Tailwind CSS là gì?Tailwindlà một khung CSS ưu tiên cho tiện ích, nó cũng giống như Bootstrap, nó có những lớp tích hợp sẵn mà chúng ta có thể sử dụng. Tailwind CSS có nhiều lớp bao gồm các thuộc tính CSS khác nhau và quan trọng, chúng ta có thể dễ dàng mở rộng việc tạo mới ra các lớp bằng chính các lớp đó Với quy tắc đặt tên cực kỳ thân thiện với người dùng, người dùng cũng có thể nhìn vào lớp đó và có thể biết được lớp này nó đang kiểu cái gì. Chúng ta cũng phải nói đến khả năng tùy biến và mở rộng cao, hãy đến với chúng ta sự linh hoạt không giới hạn 2. Cài đặt TailwindCài đặt TailwindUse 1 in 2 command after to install Tailwind Sau đó mở tệp CSS của bạn lên và thêm Tailwind như sau Sau khi bổ sung, các bạn cần phải xây dựng lại tệp này mới có thể chạy được bằng cách cd đến thư mục tệp css của bạn và chạy lệnh sau Nếu thành công, trong thư mục đó sẽ có thêm 1 tệp là đầu ra. css, các bạn add file này vào file html nhé Ngoài ra, Tailwind còn hỗ trợ liên kết CDN để các bạn thuận tiện hơn trong quá trình cài đặt thông tin qua liên kết sau Cuối cùng là xong bước cài đặt, chúng ta cùng khám phá xem Tailwind có những gì nhé. Mình sẽ so sánh 2 nút với nhau. Một cái sử dụng Tailwind, còn một cái sử dụng Bootstrap để các bạn thấy sự khác biệt Xem Nút so sánh bút Tailwind vs Bootstrap của Linh Nguyễn (@LinhNT) trên CodePen. Các bạn để ý đến nút 2 trên thì khi nhìn vào lớp của nút Tailwind các bạn có thể dễ dàng đoán ra ngay các thuộc tính của nút này như. có màu xanh dương đậm, đệm theo trục x là 3, đệm theo trục y là 2, không có viền ngoài, bo tròn các góc, chữ màu trắng. Còn khi nhìn qua class của button Bootstrap các bạn khó có thể đoán ra được button đó thuộc tính gì mà không nhìn qua css của nó 3. Trích xuất linh kiện Trích xuất linh kiệnTrích xuất các thành phần là quá trình trích xuất các lớp tiện ích cho các lớp mới. Làm thế nào để chúng ta trích xuất các lớp tiện ích? ____10. Trong ví dụ dưới đây, chúng ta có CSS cho cùng một nút như trên nhưng với các lớp được trích xuất.Làm thế nào để chúng ta trích xuất các lớp tiện ích? . Khi muốn sử dụng lại các nút giống nhau, ta chỉ cần gọi lớp 4. ResponsiveResponsiveMỗi lớp của Tailwind đều có hành vi Responsive của nó, giúp bạn dễ dàng Responsive nhanh chóng các lớp mà không cần tạo kiểu lại. Tailwind cung cấp một phương thức đơn giản để đưa các lớp tiện ích đã có vào một bối cảnh cảnh phản ứng, đó là sử dụng tiền tố Các ví dụ được đưa ra trên ta thấy như sau, đối với màn hình từ 1024px trở lên thì sẽ sử dụng lớp Có một số tùy chọn kích thước màn hình đã được xác định trước trong Tailwind.  Dưới đây là một ví dụ khác về Responsive Xem bản demo Pen Tailwind của Linh Nguyễn (@LinhNT) trên CodePen. Các bạn có thể mở codepen lên để xem chi tiết hơn nha 5. FlexboxFlexboxKhi so sánh khả năng đáp ứng với Bootstrap có thể còn một tiện ích còn thiếu ở Tailwind đó là Grid. Tailwind không đi kèm class Grid cho chúng ta, tuy nhiên ta vẫn có thể làm điều tương tự bằng Flexbox. Resume ví dụ dưới đâyGrid. Tailwind không đi kèm class Grid cho chúng ta, tuy nhiên ta vẫn có thể làm điều tương tự bằng Flexbox. Resume ví dụ dưới đây Xem Pen Flexbox Tailwind của Linh Nguyễn (@LinhNT) trên CodePen. Ta hoàn toàn có thể tạo ra các flexbox theo ý muốn hoặc kết hợp với responsive. Mặc định lớp flex sẽ hiển thị các thẻ div bên trong theo trục x, nếu muốn hiển thị theo trục y ta có thể thêm lớp flex-col. Hoặc đảo ngược vị trí của thẻ div bên trong trục x bằng lớp flex-row-reverse, tương tự đối với trục y ta có flex-col-reverse. 6. Được thiết kế để tùy chỉnh Được thiết kế để tùy chỉnhNếu bạn muốn tùy chỉnh các thuộc tính cho phù hợp với thiết kế, Tailwind cho phép bạn làm điều đó. Bạn có thể tùy chỉnh lại màu sắc, kích thước phông chữ, tiện ích giãn cách, điểm ngắt, đổ bóng,… Tailwind được viết bằng PostCSS và được cấu hình bằng JavaScript, có nghĩa là bạn hoàn toàn có thể làm chủ được các thuộc tính của từng lớp mà bạn muốn
Mặc dù vậy, khi bạn cài đặt Tailwind, họ sẽ cung cấp một tệp cấu hình là Ví dụ config Theme của Tailwind Cấu hình Responsive cho lớp Không giống như các Framework CSS khác, cấu hình Tailwind không phụ thuộc. Điều này có nghĩa là bất kỳ lớp tiện ích nào cũng có thể bị xóa mà không ảnh hưởng đến phần còn lại của cấu hình 7. Kết luậnKết luậnTailwindCSS là một framework CSS đơn giản, được thực hiện một cách chuyên nghiệp, giúp chúng ta giảm thiểu lượng CSS tối thiểu trong quá trình phát triển giao diện web, rất đáng để thử. Ngoài ra, người tạo ra Tailwind là một người có kinh nghiệm trong ngành và đang tiếp tục cải tiến Tailwind |
