Thủ thuật css
|
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. Show
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 left10. 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;
}012. Góc dưới bên phải#rectangle {
width: 200px;
height: 100px;
background: red;
}113. Mũi tên img#rectangle {
width: 200px;
height: 100px;
background: red;
}214. Hình thang trong css#rectangle {
width: 200px;
height: 100px;
background: red;
}315. Hình bình hành trong css#rectangle {
width: 200px;
height: 100px;
background: red;
}4Trê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 đơ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. ư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ả
|
