CSS có thể tạo ra nhiều định dạng khác nhau. Hình vuông và hình chữ nhật rất dễ dàng vì chúng là hình dạng tự nhiên của web. Thêm chiều rộng và chiều cao, và bạn đã có được hình chữ nhật chính xác mà bạn cần. Thêm bán kính đường viền, bạn có thể biến hình dạng này thành một vòng tròn. Với đủ bán kính viền, bạn có thể biến các hình chữ nhật này thành hình tròn và hình elip.
Tôi rất hiểu những bạn làm về backend đó là đa số là có kiến thức rất mơ hồ về CSS. Ngay cả bản thân tôi, tôi cũng rất yếu về mảng css này. Chính vì điều đó mà tôi khi có cơ hội là tôi luôn viết lại trong bộ sưu tập của tôi và hôm nay tôi cũng muốn chia sẻ cho các bạn một bài viết của thủ thuật css. com. Ngoài ra các bạn cũng có thể tìm hiểu những bài viết giúp mình nâng cao về css tại "thủ thuật về css"
1 - Cách tạo hình vuông trong css
#square { width: 100px; height: 100px; background: red; }
2. Tạo chữ nhật trong css
#rectangle { width: 200px; height: 100px; background: red; }
3. Create circle with css
#circle { width: 100px; height: 100px; background: red; border-radius: 50% }
4. Tạo bầu dục [hình bầu dục] với css
#oval { width: 200px; height: 100px; background: red; border-radius: 100px / 50px; }
5. Create tam giác up with css
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
6. Tạo hình tam giác bên dưới
#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }
7. Tạo tam giác hướng về phía bên trái bằng css
#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; }
8. Tạo hình tam giác hướng về phía phải
#triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }
9. Góc trên side left
10. Góc trên bên phải
#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }
11. Góc dưới bên trái
#rectangle { width: 200px; height: 100px; background: red; }0
12. Góc dưới bên phải
#rectangle { width: 200px; height: 100px; background: red; }1
13. Mũi tên img
#rectangle { width: 200px; height: 100px; background: red; }2
14. Hình thang trong css
#rectangle { width: 200px; height: 100px; background: red; }3
15. Hình bình hành trong css
#rectangle { width: 200px; height: 100px; background: red; }4
Trên đây là một số mẫu được tạo định dạng với css. Ngoài ra còn rất nhiều thủ thuật nữa về css các bạn có thể đọc ở đây. thủ thuật css. com
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ả
Chuyển đến ví dụ về CSS
Sử dụng thực đơn
Chú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 CSS
Chú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 css
Kiểm tra bản thân với các bài tập
Câu đố về CSS
Kiể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ôi
Theo 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 CSS
Tạ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.
ưu điểm. Không thể thay đổi chiều rộng hoặc chiều cao của phần tử đó => tránh làm hỏng bố cục Dễ dàng tùy chỉnh lại màu sắc, thời lượng hay kích thước hiệu ứng Đơn giản nhưng hiệu quả
Căn giữa phần tử theo chiều dọc và ngang Khá nhiều người sử dụng css lâu năm vẫn mệt mỏi với việc căn giữa phần tử không có hardcode kiểu margin-top. 15px hay padding-left. 20px. And with display flex in CSS3 version, very easy to căn giữa phần tử với vài dòng mã như sau. . phần tử cha mẹ. trưng bày. flex + biện minh cho nội dung. trung tâm + sắp xếp các mục. trung tâm Ví dụ codepen
Vỡ layout khi thêm viền Thường nhiều bạn trong 1 số trường hợp khi chúng viền vào 1 div nào đó và khiến bố cục lỗi tung tóe lên, anh div bên cạnh đang nằm cạnh thì nhảy xuống dòng Giải pháp. Use box-sizing. hộp viền lên phần tử có đường viền, như vậy chiều rộng của phần tử đó sẽ bao gồm luôn chiều rộng đường viền. Ko dung border nữa mà sử dụng box-shadow để thay thế, ví dụ minh họa