CSS (Cascading Style Sheets) là ngôn ngữ dùng để mô tả kiểu dáng của một trang web. CSS No JS (không sử dụng JavaScript) là phương pháp chỉ sử dụng CSS để tạo kiểu và bố cục trang web mà không cần đến JavaScript để thay đổi hoặc tương tác với giao diện người dùng.
Lợi ích của CSS No JS.
- Tính nhất quán : CSS No JS giúp trang web hiển thị đồng nhất trên nhiều trình duyệt và thiết bị.
- Tốc độ tải nhanh: Bỏ qua JavaScript giúp trang web tải nhanh hơn.
- Khả năng tiếp cận: Trang web dễ tiếp cận hơn cho người dùng khuyết tật và các thiết bị hỗ trợ công nghệ.
- Dễ bảo trì: Mã CSS thường dễ bảo trì hơn so với JavaScript.
19 CSS Phân Loại Theo Công Dụng :
19 CSS này được phân loại theo công dụng cụ thể trong việc tạo ra các thành phần và giao diện trên trang web. Dưới đây là một số loại CSS phổ biến theo kiểu phân loại này:
1. CSS Product Card:
Dùng để tạo thẻ sản phẩm hiển thị thông tin như hình ảnh, tên, giá, và mô tả sản phẩm. Ví dụ: Các thẻ sản phẩm trên trang thương mại điện tử.
2. CSS Carousel Slider:
Dùng để tạo các trình chiếu ảnh hoặc nội dung có thể trượt qua lại. Ví dụ: Trình chiếu banner hoặc ảnh sản phẩm.
3. CSS Navigation Menu:
Dùng để tạo thanh điều hướng với các liên kết đến các phần khác nhau của trang web. Ví dụ: Menu ở đầu trang hoặc thanh điều hướng bên cạnh.
4. CSS Modal/Popup:
Dùng để tạo cửa sổ thông báo hoặc cửa sổ nhỏ hiển thị thông tin khi người dùng tương tác. Ví dụ: Cửa sổ đăng nhập, thông báo lỗi.
5. CSS Form:
Dùng để tạo và định dạng các biểu mẫu nhập liệu. Ví dụ: Biểu mẫu đăng ký, biểu mẫu liên hệ.
6. CSS Buttons:
Dùng để tạo các nút bấm với kiểu dáng và hiệu ứng khác nhau. Ví dụ: Nút gửi biểu mẫu, nút gọi hành động (CTA).
7. CSS Grid Layout:
Dùng để tạo bố cục lưới giúp sắp xếp nội dung theo hàng và cột. Ví dụ: Bố cục danh sách bài viết, bố cục trang blog.
8. CSS Flexbox Layout:
Dùng để tạo bố cục linh hoạt và dễ dàng căn chỉnh các phần tử. Ví dụ: Bố cục thanh điều hướng, bố cục trang sản phẩm.
9. CSS Cards:
Dùng để tạo các thẻ thông tin chứa văn bản, hình ảnh, và các yếu tố khác. Ví dụ: Thẻ bài viết blog, thẻ thông tin nhân viên.
10. CSS Image Gallery:
Dùng để tạo thư viện ảnh với các hiệu ứng xem trước và phóng to ảnh. Ví dụ: Thư viện ảnh sự kiện, bộ sưu tập sản phẩm.
11. CSS Tooltips:
Dùng để tạo các chú thích nhỏ hiển thị khi người dùng di chuột qua phần tử. Ví dụ: Chú thích trên biểu đồ, chú thích trên nút bấm.
12. CSS Accordions:
Dùng để tạo các phần nội dung có thể thu gọn hoặc mở rộng. Ví dụ: Câu hỏi thường gặp (FAQ), danh sách bài viết.
13. CSS Tabs:
Dùng để tạo các tab chuyển đổi giữa các phần nội dung khác nhau. Ví dụ: Tab thông tin sản phẩm, tab mô tả và đánh giá.
14. CSS Breadcrumbs:
Dùng để tạo đường dẫn hiển thị vị trí hiện tại của người dùng trên trang web. Ví dụ: Đường dẫn phân cấp của trang web.
15. CSS Progress Bar:
Dùng để tạo thanh tiến trình hiển thị trạng thái hoàn thành của một tác vụ. Ví dụ: Thanh tiến trình tải file, thanh tiến trình thanh toán.
16. CSS Animation/Transition:
Dùng để tạo các hiệu ứng chuyển động và chuyển đổi mượt mà giữa các trạng thái của phần tử. Ví dụ: Hiệu ứng fade-in, hiệu ứng hover trên nút bấm.
17. CSS Hero Section:
Dùng để tạo phần tiêu đề chính nổi bật ở đầu trang web. Ví dụ: Banner chính trên trang chủ, phần giới thiệu dịch vụ.
18. CSS Footers:
Dùng để tạo phần chân trang chứa thông tin liên hệ, liên kết nhanh, và các phần tử khác. Ví dụ: Chân trang trang web công ty, chân trang blog cá nhân.
19. CSS Media Queries :
Dùng để tạo các bố cục và kiểu dáng khác nhau cho các thiết bị và kích thước màn hình khác nhau.
Ví dụ: Responsive design cho điện thoại di động, máy tính bảng và desktop.
Các phân loại này giúp người phát triển web dễ dàng hơn trong việc tổ chức và tạo ra các thành phần cụ thể cho trang web, đảm bảo tính thẩm mỹ và trải nghiệm người dùng tốt.
8 CSS ADS :
CSS cho quảng cáo (CSS Ads) thường được sử dụng để định dạng và trình bày các quảng cáo trực quan trên trang web. Có nhiều loại quảng cáo khác nhau mà bạn có thể sử dụng CSS để tạo và định dạng.
Dưới đây là một số loại quảng cáo phổ biến và cách CSS có thể được sử dụng để làm cho chúng trông hấp dẫn và hiệu quả:
1. Banner Ads:
Ví dụ: Quảng cáo nằm ngang ở đầu hoặc cuối trang.
CSS: Dùng để định dạng kích thước, màu nền, hình ảnh, và hiệu ứng chuyển động.
2. Sidebar Ads:
Ví dụ: Quảng cáo dọc nằm ở bên phải hoặc bên trái của trang. CSS: Dùng để định dạng kích thước, màu sắc, và vị trí cố định.
3. Interstitial Ads:
Ví dụ: Quảng cáo toàn màn hình xuất hiện khi tải trang mới. CSS: Dùng để định dạng bố cục toàn màn hình và hiệu ứng đóng/mở.
4. Popup Ads:
Ví dụ: Quảng cáo nhỏ xuất hiện giữa màn hình. CSS: Dùng để định dạng kích thước, vị trí, và hiệu ứng xuất hiện/ẩn.
5. Native Ads:
Ví dụ: Quảng cáo tích hợp tự nhiên vào nội dung trang. CSS: Dùng để định dạng giống như các phần tử nội dung khác trên trang.
6. Floating Ads:
Ví dụ: Quảng cáo di chuyển cùng với cuộn trang. CSS: Dùng để định dạng vị trí cố định và hiệu ứng di chuyển.
7. Video Ads:
Ví dụ: Quảng cáo video nhúng vào nội dung trang.
CSS: Dùng để định dạng khung video và các nút điều khiển.
8. Sponsored Content:
Ví dụ: Bài viết hoặc nội dung được tài trợ hiển thị cùng nội dung trang.
CSS : Dùng để định dạng và làm nổi bật nội dung tài trợ.
8 loại CSS này giúp bạn trong việc tạo ra các kiểu quảng cáo khác nhau một cách hiệu quả, đồng thời cải thiện trải nghiệm người dùng bằng cách giữ cho giao diện trang web rõ ràng và hấp dẫn.
Kết Luận & Lời Khuyên :
CSS No JS là một phương pháp hữu ích để tạo nên các trang web nhanh, dễ bảo trì và thân thiện với người dùng. Sử dụng các thuộc tính và ứng dụng CSS phù hợp, bạn có thể tạo ra các quảng cáo hấp dẫn và hiệu quả trên trang web của mình.
