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

Nội dung chính Show

• Vấn đề
• Giải pháp
• Giải pháp thay thế
• kết thúc
• Cách chơi
• Mục tiêu #1 - Giải pháp ngây thơ
• Tối ưu hóa giải pháp hiện tại của bạn
• Thời gian cho một số thủ thuật CSS
• Trận chiến CSS là gì?
• CSSBattle có miễn phí không?
• Vua CSS là ai?
• Làm thế nào để thực hành HTML và CSS?

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ả

 class="box">
  

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

1. Viết mã để có được hình ảnh khớp 100%
2. 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 có miễn phí không?

Vua CSS là ai?

Làm thế nào để thực hành HTML và CSS?