Trận chiến CSS hoạt động như thế nào?
Trong bài viết này, tôi sẽ giải quyết Thử thách CSS vuông đơn giản trong Trận chiến CSS. Hãy nhìn vào vấn đề đầu tiên
Vấn đề
Chúng ta cần tạo vùng chứa sau chỉ bằng cách sử dụng Thuộc tính CSS
Giải pháp
Vì vậy, bây giờ hãy xem Giải pháp và cách chúng ta sẽ đạt được điều này
HTML
Đầu tiên, hãy tạo một HTML cho việc này, tôi đã sử dụng hai vùng chứa để làm điều đó. bạn cũng có thể sử dụng các lớp giả
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
CSS
Bây giờ hãy tạo kiểu cho các thùng chứa
.box {
width: 400px;
height: 300px;
background: #5d3a3a;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sau khi áp dụng CSS cho .box
nó sẽ như thế này
Bây giờ chúng ta tạo kiểu cho con div
của .box
.box div {
background: #b5e0ba;
width: 200px;
height: 200px;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sau khi áp dụng CSS, đây là kết quả
Bây giờ vấn đề được giải quyết đơn giản bằng các kiểu trên
mã hóa
Giải pháp thay thế
Đây là một cách nữa bạn có thể làm điều này mặc dù có nhiều cách, tôi thích cách sau
HTML
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
CSS
body{
background: #5d3a3a;
margin:0;
}
div {
width: 200px;
height: 200px;
background: #b5e0ba;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
kết thúc
Nếu bạn thích điều này thì đừng quên ❤️ nó. Và tôi sẽ gặp bạn trong bài viết tiếp theo. hẹn sớm gặp lại
Trong một thế giới bị cản trở bởi CSS-in-JS so với SASS và cơn bão tweet “CSS không phải là ngôn ngữ thực”, đã xuất hiện một trò chơi cạnh tranh thú vị để gạt tất cả các cuộc thảo luận sang một bên và rèn luyện sức mạnh CSS của bạn
Được tạo bởi @chinchang457 và @kushsolitary, CSS battle [https. // cssbattle. dev] là một trò chơi CSS golf gây nghiện cao. Nó được ra mắt cách đây chưa đầy một tuần vào ngày 4 tháng 4 năm 2019 và đã có hơn 4000 người chơi đốt dầu lúc nửa đêm để mở rộng bảng xếp hạng
Cách chơi
Có 12 cấp độ trong trận chiến CSS, mỗi cấp độ có một mục tiêu mà bạn phải sao chép bằng HTML và CSS. Đây là mục tiêu đầu tiên trông như thế nào
Có hai mục tiêu đơn giản
- Viết mã để có được hình ảnh khớp 100%
- Tìm cách giảm số ký tự trong giải pháp của bạn
Ngoài ra còn có bảng xếp hạng cấp độ và toàn cầu mà bạn có thể xem ở bên phải để duy trì tinh thần cạnh tranh của mình và cung cấp tín hiệu về giải pháp tối ưu có thể là gì
Bạn có thể đọc thêm về cách trò chơi hoạt động trong phần Câu hỏi thường gặp
Trong phần còn lại của bài viết, tôi sẽ hướng dẫn bạn cách thực hiện mục tiêu đầu tiên như một ví dụ để chỉ cho bạn cách thực hiện lặp đi lặp lại theo cách của bạn để vượt qua mục tiêu và đạt điểm cao
Cảnh báo spoiler. Vui lòng tự mình thử trước. Chỉ cần nhìn vào giải pháp cuối cùng là có ngay niềm vui
Mục tiêu #1 - Giải pháp ngây thơ
Mục tiêu số 1 [Đơn giản hóa hình vuông] trực quan chỉ là một hộp màu xanh nhạt cùng với nền màu nâu
Mã mặc định được viết trong trình chỉnh sửa cung cấp giải pháp nửa vời cho sự cố. Hãy thử và hoàn thành nó
Nhớ. Mục tiêu đầu tiên của bạn phải luôn là đạt được hình ảnh phù hợp 100% với mục tiêu
Sử dụng đoạn mã sau, chúng tôi khớp với mục tiêu và nhận được số điểm là 688. 73. Giải pháp của chúng tôi đủ đơn giản
các thẻ có lề mặc định là 8px trong trình duyệt và chúng tôi phải đáp ứng điều đó. Trong hầu hết các mã sản xuất, bạn sẽ sử dụng thiết lập lại CSS để không bao giờ phải lo lắng về sự khác biệt/mặc định của trình duyệt
Các thuộc tính CSS khác là cơ bản cho giải pháp
Nhưng giải pháp của chúng tôi dài 158 ký tự, nhiều hơn khoảng 100 ký tự so với điểm cao nhất chỉ với 56 ký tự. Hãy xem cách chúng tôi có thể cải thiện giải pháp
Tối ưu hóa giải pháp hiện tại của bạn
Điều đầu tiên cần làm sau khi bạn khớp 100% là loại bỏ khoảng trắng
Bạn có thể sử dụng công cụ khai thác CSS để tiết kiệm thời gian. Không sử dụng công cụ khai thác thông thường vì nó sẽ mắc lỗi khi nói đến một số thuộc tính CSS nhất định như đường viền và bóng hộp
Bằng cách xóa tất cả các khoảng trắng, chúng tôi nhận được đoạn mã sau và chúng tôi giảm xuống còn 107 ký tự
Bạn sẽ nhận thấy cách nó loại bỏ dấu chấm phẩy cuối cùng khỏi mỗi khối khai báo CSS. Từ tài liệu MDN
Khai báo cuối cùng của một khối không cần phải kết thúc bằng dấu chấm phẩy, mặc dù đây thường được coi là cách tốt để làm điều đó vì nó tránh quên thêm nó khi mở rộng khối bằng một khai báo khác. ”
Thời gian cho một số thủ thuật CSS
Bây giờ đến phần thú vị
Khi bạn có một giải pháp ban đầu với khoảng trắng bị xóa, bạn có thể cải thiện giải pháp hiện tại của mình để tiến gần hơn đến điểm số cao nhất
Trận chiến CSS là gì?
CSSBattle là nền tảng đánh gôn mã đầu tiên dành cho những người yêu thích CSS mà tôi và bạn của tôi, Kushagra Agarwal, đã tạo ra. Mục đích của trò chơi này rất đơn giản - bạn có một mục tiêu hình ảnh mà bạn cần sao chép bằng mã CSS nhỏ nhất có thể [và HTML nhẹ nếu bạn muốn].
CSSBattle có miễn phí không?
Vua CSS là ai?
Pratham đã tìm thấy niềm đam mê của mình bằng cách tìm hiểu sâu về CSS và tạo các hướng dẫn viết tay mở rộng về mọi chủ đề CSS mà anh ấy đã học. Anh ấy đã xây dựng được hơn 120 nghìn người theo dõi trên Twitter. Anh ấy đã bán sách điện tử và cuối cùng nhận được công việc là người ủng hộ nhà phát triển tại RapidAPI.
Làm thế nào để thực hành HTML và CSS?
Nếu bạn muốn học các kỹ năng HTML và CSS và bắt đầu kiếm tiền, đây là một số dự án thực hành tuyệt vời để giúp bạn bắt đầu. .
Xây dựng một danh mục đầu tư hoặc trang web cá nhân đơn giản. .
Làm cho sơ yếu lý lịch của bạn tương tác. .
Tạo một Bản tin Email. .
Tạo một trang web đáp ứng tĩnh. .
Xây dựng một hình thức. .
Tạo hoạt ảnh