• Chuyển tới điều hướng chính
  • Bỏ qua nội dung chính
  • Skip to sidebar chính
  • Bỏ qua tới chân

TechLila

Chảy máu mép, luôn luôn

  • Trang chủ
  • Giới thiệu
  • Liên hệ
  • Ưu đãi và Ưu đãi
Logo Techlila
Chia sẻ
Tweet
Chia sẻ
Pin
3 cổ phiếu
Các tính năng giới thiệu của Microsoft WebMatrix 3
Tiếp theo

Đơn giản hóa việc phát triển web của bạn với Microsoft WebMatrix

Khung CSS thuần túy từ Yahoo!

TechLila Thiết kế và phát triển web

Pure CSS: Khung CSS thuần túy nhất từ ​​Yahoo!

Avatar của Abhijith N Arjunan Abhijith N Arjunan
Cập nhật lần cuối vào: Tháng Bảy 21, 2013

Như bạn đã biết, đó không phải là thời điểm ra đời của internet và mọi người hầu như đã quên các trang web, có văn bản đoạn đơn và một số siêu liên kết. Nếu bạn muốn tiếp tục với các tiêu chuẩn web hiện tại, bạn phải làm cho trang web của mình trở nên thú vị hơn là có thể xem một cách thẳng thắn. Bất kể ngôn ngữ mã hóa chẳng hạn như HTML or PHP được sử dụng để xây dựng giao diện người dùng, CSS sẽ là công cụ của bạn để làm cho trang web trông có phong cách. Khi chúng tôi so sánh một trang web với cơ thể con người, HTML hoạt động như xương của bạn trong khi CSS là thứ gần gũi với da và cơ bắp, được tạo ra để tạo hình dạng và cấu trúc.

Khung CSS thuần túy từ Yahoo!

Cũng giống như tất cả những thứ khác trong thế giới thiết kế và phát triển, CSS cũng có những bản cập nhật nhỏ và lớn để phù hợp với CSS3, đây là cặp tốt nhất khi HTML5 đồng hành cùng cuộc hành trình. Tuy nhiên, ngôi sao của trò chơi là xu hướng hoặc mẫu CSS mà bạn chọn sử dụng! Như bạn đã biết, có nhiều khung CSS khác nhau có sẵn cho bạn với các giao diện và tính năng khác nhau, chẳng hạn như bootstrap, Zurb vv Những gì chúng tôi giới thiệu với bạn hôm nay là CSS thuần túy, một CSS Framework đơn giản dựa trên coolgrid từ Yahoo !, gã khổng lồ internet hàng đầu. Thật hạnh phúc, bạn có thể sử dụng khuôn khổ này mà không phải trả một xu nào.

CSS thuần túy

Bạn có thể đã sử dụng các khuôn khổ khác như Zurb Foundation để xây dựng các trang và trang web hấp dẫn. Sử dụng CSS framework rất hữu ích vì bạn có thể lấy các mẫu cho các phần tử khác nhau trong trang như phân chia, biểu mẫu, menu, v.v. Đây là chức năng tương tự của CSS thuần túy của Yahoo! Thay vì tải xuống và thêm tệp vào thư mục 'CSS', Pure CSS có thể hoạt động như Google Fonts, nơi bạn phải thêm một dòng mã để tích hợp khung vào HTML. Vì khung là phiên bản mới nhất nên nó hoàn toàn đáp ứng được. Trên hết, Pure CSS là một trong những khung công tác đơn giản nhất mà bạn có thể tìm thấy trên web. Bạn có thể sử dụng khuôn khổ để cung cấp năng lượng cho trang web của mình hoặc tải xuống các mô-đun cụ thể cho các phần tạo kiểu như biểu mẫu, menu, v.v. Có sáu mô-đun riêng lẻ có sẵn miễn phí. Các mô-đun của Pure CSS như sau, có vẻ như có kích thước nhẹ (nhỏ hơn 2 Kb) khi được trích xuất.

  • Căn cứ: Các phần tử trang web cơ bản như tiêu đề, đoạn văn, kiểu chữ
  • Buttons: Các nút khác nhau với các hiệu ứng như hoạt động, khi di chuột, v.v.
  • Những cái bàn: Các bảng cơ sở có sẵn với đường viền, v.v.
  • Thực đơn: Ngang, dọc, thả xuống.
  • Lưới: Lưới đáp ứng.
  • Các hình thức: Đầu vào theo nhóm, nhiều cột, v.v.

XEM THÊM: Bookmarklet các mẫu tinh tế: Xem trước các mẫu nền trên trang web của bạn.

Tại sao sử dụng CSS thuần túy

  • Mã ít sử dụng hơn: Một điều rất bình thường là bạn có thể thấy một số lượng lớn mã không được sử dụng khi sử dụng các khung công tác css khác. Mặt khác, trong trường hợp Pure CSS, bạn sẽ không bao giờ phải đối mặt với vấn đề này vì bạn có thể sử dụng phiên bản khung cụ thể và sử dụng nó để tạo kiểu cho các phần cụ thể của trang web. Tất nhiên, ít mã hơn dường như thậm chí còn tuyệt vời!
  • Tất cả các bên trong: Ít nhất trong một số khuôn khổ khác, chúng đang sử dụng các mã và plugin JavaScript của bên thứ ba để tạo tác động trực quan tốt hơn. Tuy nhiên, Pure CSS không sử dụng bất kỳ loại plugin JS nào ngoại trừ trường hợp plugin được sử dụng trong hiệu ứng thả xuống. Ít mã của bên thứ ba hơn có thể cung cấp cho bạn tải trang nhanh hơn và mã gọn gàng hơn.
  • Templates: Nếu bạn không phải là chuyên gia để thiết kế bố cục riêng cho trang web của mình, Pure CSS có thể giúp bạn trong phần đó. Trang web chứa một số ví dụ về bố cục, phù hợp với các trang web có mục đích khác nhau như tiếp thị, trang đích, v.v.
  • Bố cục CSS thuần túy

  • Trình tạo da: Trong trường hợp các mẫu và kiểu có thể làm hài lòng nhà thiết kế sáng tạo trong bạn, bạn có thể sử dụng trình tạo da của Pure CSS để xây dựng da của riêng mình. Như bạn có thể đoán, trình tạo da không xem xét kiến ​​thức chuyên môn về cấp độ mã hóa của bạn.
  • Sử dụng CSS Skin Builder

    XEM THÊM: Phông chữ biểu tượng: Ưu và nhược điểm của Trình tạo phông chữ tuyệt vời.

    Sử dụng CSS thuần túy

    Như đã chỉ rõ trước đó Pure CSS, có nhiều tính năng ưu việt khi so sánh với các khung công tác khác. Nhớ lại những gì chúng tôi đã nói trước đây, bạn có thể sử dụng Pure CSS thông qua cùng một phương pháp của Google Fonts. Bạn phải thêm một dòng liên kết tệp bên ngoài để mang lại phong cách cho trang web của bạn. Tính năng này khá hữu ích khi bạn phải xây dựng các trang web tệp đơn lẻ và khi bạn không có đủ dung lượng để đặt tất cả các tệp css (Đoán điều này sẽ không xảy ra bao giờ). Như Yahoo! quay bánh xe của dự án dự án, bạn không muốn căng thẳng về lỗi tải hoặc hỏng hóc kỹ thuật.

    Nếu bạn muốn sử dụng các mẫu CSS đầy đủ của Pure CSS, bạn có thể thêm mã sau vào trang web chính. Bạn cũng có thể nhấp vào liên kết tệp CSS và tải xuống tệp CSS để sử dụng.

    [HTML]

    [/ html]

    Trong trường hợp, nếu bạn chỉ muốn sử dụng các phiên bản CSS cụ thể như menu, biểu mẫu, v.v. thì có sẵn các mã đặc biệt cùng với các tệp CSS chuyên dụng. Danh sách các URL như sau:

    Danh sách liên kết CSS thuần túy

    Sử dụng trình tạo da của Pure CSS cũng là một nhiệm vụ dễ dàng hơn vì bạn có thể kiểm soát thuộc tính của các phần tử bằng cách sử dụng các nút điều khiển trực quan của trang trình tạo da. Tuy nhiên, chúng tôi khuyên bạn nên tải xuống các tệp CSS để hiểu tên của các phần tử. Như chúng tôi đã nói, việc đặt các tệp nhỏ hơn 2 Kb này sẽ không tiêu tốn dung lượng ổ đĩa của bạn.

    Trang web của Pure CSS được thiết lập theo cách mà ngay cả một người mới cũng có thể chèn các phần tử dựa trên Pure CSS vào trang web của họ. Bạn có thể thấy một thanh bên đơn giản ở phía bên trái, liệt kê các phần như biểu mẫu, nút, v.v. Trong mỗi trang, các bản xem trước có sẵn cùng với mã HTML để đưa hiệu ứng đó vào trang web của bạn. Do đó, rất dễ dàng để chèn các phần tử như vậy vào trang web của bạn. Dưới đây là bản xem trước và mã của một biểu mẫu đăng nhập duy nhất.

    Xem trước đăng nhập và mã mẫu

    Kết luận

    Khi phân tích tất cả các tính năng của Pure CSS, đây là một trong những đóng góp tối ưu của Yahoo! để thiết kế thế giới. Yahoo! Giao diện người dùng, thường được gọi là YUI hỗ trợ tất cả các chuỗi gắn liền với Pure CSS làm cho khung trở nên tốt nhất khi có sự so sánh. Ngoài việc sử dụng các phần tử được thiết lập trước, bạn cũng có thể tùy chỉnh Pure CSS. Bạn phải tự dẫn mình đến trang web Pure CSS để sử dụng và tìm hiểu thêm về framework đơn giản nhỏ gọn. Hãy cho chúng tôi biết ý kiến ​​của bạn về khuôn khổ này sau khi xem các ví dụ và sử dụng nó trong dự án của bạn.

Chia sẻ
Tweet
Chia sẻ
Pin
3 cổ phiếu

Tiết lộ: Nội dung được xuất bản trên TechLila hỗ trợ người đọc. Chúng tôi có thể nhận được hoa hồng cho các giao dịch mua được thực hiện thông qua các liên kết liên kết của chúng tôi mà bạn không phải trả thêm phí. Đọc của chúng tôi Trang tuyên bố từ chối trách nhiệm để biết thêm về tài trợ, chính sách biên tập và cách hỗ trợ chúng tôi.

Chia sẻ là quan tâm

Chia sẻ
Tweet
Chia sẻ
Pin
3 cổ phiếu
Avatar của Abhijith N Arjunan

Abhijith N Arjunan

Abhijith N Arjunan là một nhà văn và blogger đầy nhiệt huyết đến từ Kerala, người tìm thấy niềm vui tột độ khi viết về công nghệ thịnh hành, nội dung chuyên dụng và phát triển web.

Phân loại

  • Thiết kế và phát triển web

Tag

CSS

Tương tác người đọc

Mọi người đang nói gì

  1. Hình đại diện của rakesh kumarrakesh kumar

    Cảm ơn vì đã đăng bài đánh giá tuyệt vời này về css thuần túy. Vì tôi đang cố gắng phát triển các chủ đề wordpress của riêng mình cho cộng đồng, tôi nghĩ css mới này từ yahoo.com có ​​thể giúp tôi rất nhiều.

    đáp lại
  2. Hình đại diện của HariHari

    Tôi thấy nó thực sự rất hữu ích. Sẽ khám phá từng người trong số họ sau.

    đáp lại
  3. Hình đại diện của CassieCassie

    Ồ. Điều này thực sự thú vị. Cảm ơn bạn đã chia sẻ thông tin này.

    đáp lại
  4. Hình đại diện của Raymond SamRaymond Sam

    Bạn sẽ giới thiệu Pure thay vì Bootstrap hay Foundation vào thời điểm này? Tôi thấy Bootstrap ít hơn một chút so với tài liệu tối ưu khi là người dùng lần đầu tiên sử dụng nó.

    đáp lại
  5. Hình đại diện của Sajeshsajesh

    Xin chào Abhijith N Arjunan, tôi phải nói với bạn rằng bạn đã làm rất tốt và cảm ơn vì đã khai sáng kiến ​​thức và kỹ năng của tôi.

    đáp lại
  6. Hình đại diện của SantoshÔng già

    Bài báo tuyệt vời Abhijit. Tôi đã sử dụng PureCSS để tạo chủ đề cho hệ thống quản lý nội dung mới có tên là PyroCMS. Hãy xem [PyroPure]).

    Thật là vui khi phát triển chủ đề. Tôi nghĩ rằng nó nhẹ hơn nhiều so với các khuôn khổ khác ngoài kia. Kiểu dáng cũng rất có thể tùy chỉnh.

    đáp lại
  7. Hình đại diện của ErwinErwin

    Wow .. Đây là một điều thú vị để học, tôi biết mình không có tài lập trình và thiết kế, nhưng thật thú vị khi làm được điều đó. PureCSS có lẽ là thứ mà tôi rất cần.

    đáp lại
  8. Hình đại diện của AdamAdam

    Xin chào, tôi đã sử dụng tính năng thuần khiết (PureCss) từ Yahoo trên 3 dự án và nó thực sự là một khung công tác nhẹ tuyệt vời, có thể nói, so với Bootstrap hoặc nền tảng, trọng tâm của nó là ánh sáng và mang lại thiết kế cho nhà phát triển và dựa trên bộ giao diện người dùng 300kb rằng bạn không sử dụng 70% các phần tử, và nếu bạn lấy các phần từ Bootstrap ra khỏi Bootstrap thì nó vẫn cần Java, nó vẫn nằm trong phần 200kb. Chưa kể mọi trang web đều trông giống Bootstrappy, đó là lý do tại sao tôi sẽ không bao giờ sử dụng Bootstrap để xây dựng một trang web hoặc nền tảng Zurb, tất cả chúng đều nặng và bạn cần phải sử dụng lưới 12 cột của chúng, điều này thực sự nhàm chán. Tôi thấy tất cả các trang web đều trông đẹp và bắt mắt tuy nhiên chúng trông rất hình hộp và tốt là nền tảng Bootstrap, Yahoo PureCss là bộ giao diện người dùng tuyệt vời, nhẹ, dễ sử dụng, sửa đổi và tốt nhất là hoạt động rất nhanh với WordPress làm chủ đề! Tôi đã sử dụng nó cho 4 dự án WordPress với YUI PureCss và khách hàng đã rất ngạc nhiên sau khi chuyển từ Bootstrap, nhận thấy đầu tiên là tốc độ của trang web thứ hai là thiết kế FLAT đẹp theo mặc định.

    đáp lại

Thêm nhận xét của bạn Hủy bỏ trả lời

Chúng tôi sẽ không công khai email của bạn. Các ô đánh dấu * là bắt buộc *

Sidebar chính

Phổ biến

Cách tăng tốc độ băng thông rộng trên Windows

10 trình khởi chạy Android tốt nhất năm 2021

Những việc cần làm sau khi cài đặt Windows 10 - Mẹo và thủ thuật Windows 10

10 công cụ tìm kiếm hàng đầu mà bạn có thể sử dụng để tìm kiếm trên web một cách riêng tư

55 sự thật thú vị về máy tính sẽ thổi bay tâm trí của bạn

Cần tìm gì khi mua máy tính xách tay - Hướng dẫn mua máy tính xách tay

Fusion Drive Vs SSD - Những điều không ai nói với bạn về Fusion và SSD Storage

Công cụ hữu ích

• Grammarly - Trình kiểm tra ngữ pháp miễn phí
• SEMRush - Công cụ SEO tốt nhất được các chuyên gia tin cậy
• Setapp - Đăng ký một cửa cho Mac và iOS

Chủ đề xu hướng

  • Android
  • Internet
  • iPhone
  • Linux
  • Áo tơi đi mưa
  • Bảo vệ
  • Truyền thông xã hội
  • Công nghệ
  • cửa sổ

Kiểm tra giá trị

10 Bộ cân bằng âm thanh tốt nhất cho Windows 10 (Phiên bản 2022!)

14 Skins VLC tốt nhất được đề xuất cao và miễn phí

Footer Biểu trưng Biểu trưng Văn bản Chân trang

Footer

Giới thiệu

Xin chào và chào mừng bạn đến với TechLila, blog công nghệ nổi tiếng nơi bạn có thể tìm thấy các bài viết bổ ích để nắm vững kiến ​​thức cơ bản và hơn thế nữa.

Tại TechLila, mục tiêu chính của chúng tôi là cung cấp thông tin độc đáo, chẳng hạn như các mẹo và thủ thuật chất lượng, hướng dẫn, hướng dẫn cách thực hiện trên Windows, Macintosh, Linux, Android, iPhone, Security và một số chủ đề phụ khác như đánh giá.

Liên kết

  • Giới thiệu
  • Liên hệ Chúng tôi
  • Từ chối trách nhiệm
  • Chính sách Bảo mật
  • Các điều khoản

Theo

Chủ đề tùy chỉnh sử dụng khung Genesis

Dịch vụ lưu trữ đám mây của Cloudways

Ngôn ngữ

en English
bg Българскиzh-CN 简体中文nl Nederlandsen Englishtl Filipinofr Françaisde Deutschid Bahasa Indonesiait Italianoja 日本語pl Polskipt Portuguêsro Românăru Русскийsr Српски језикes Españolsv Svenskatr Türkçeuk Українськаvi Tiếng Việt

© Bản quyền 2012–2023 TechLila. Tất cả các quyền.