5 projek untuk membantu anda menguasai CSS moden

Ramai orang berfikir CSS bukan bahasa pengaturcaraan, dan saya setuju - lebih sukar untuk menguasai. Kemahiran dalam CSS memerlukan keupayaan reka bentuk, penentuan, kreativiti, pengalaman, dan kemahiran pengekodan (terutamanya apabila menggunakan preprocessors seperti SASS).

CSS mencadangkan susun atur dan gaya kepada penyemak imbas. Penyemak imbas boleh menerangkan cadangan ini mengikut kehendak, dan juga pengguna atau peranti boleh mengabaikan atau menimpa sebarang atribut. Mewujudkan kod berprestasi tinggi yang berfungsi dengan baik pada semua peranti dan resolusi skrin adalah satu cabaran dan beberapa orang mencuba atau berjaya menyelesaikannya. Walau bagaimanapun, ganjaran boleh menjadi menarik.

Dari cara yang paling mudah untuk memulakan, cadangan projek berikut akan membantu anda memulakan laluan penguasaan CSS dengan buku yang disediakan oleh SitePoint Premium.

mata utama

Kemahiran dalam CSS memerlukan keupayaan reka bentuk, penentuan, kreativiti, pengalaman dan kemahiran pengekodan. Mewujudkan kod berprestasi tinggi yang berfungsi dengan baik pada semua peranti dan resolusi skrin boleh mencabar, tetapi ganjaran boleh menjadi menarik.

Lima projek yang dapat membantu meningkatkan kemahiran CSS termasuk membuat laman web lebih mudah untuk mencetak, menggunakan tema CSS moden ke laman web yang sedia ada, mendesain semula susun atur bentuk, meningkatkan kelajuan laman web, dan memulakan komponen projek atau CSS baru dari awal.
Menggunakan alat pemaju penyemak imbas moden boleh membantu menilai prestasi dan menemui matlamat pengoptimuman. Teknik seperti CSS kritikal dan pemuatan CSS progresif memastikan stylesheet dimuatkan dengan cekap.
Menguasai projek CSS moden memerlukan pemahaman asas CSS dan amalan terbaik, termasuk menggunakan CSS Resets, pendekatan mudah alih pertama untuk reka bentuk responsif, preprocessors CSS seperti SASS, CSS Grid dan Flexbox, dan menyimpan CSS yang dianjurkan dan menambah komen yang baik.

Buat laman web lebih mudah untuk mencetak

1. Dapatkan laman web yang anda sedang kerjakan dan cuba mencetak (atau mencetak pratonton) halaman. Adakah anda berpuas hati dengan hasilnya?
Halaman HTML adalah media berterusan dan tidak semestinya berfungsi dengan baik pada media percetakan. Bab -bab yang tidak sesuai, skala, saiz teks, saiz lajur, dan kandungan yang hilang atau dipotong semua boleh membawa kepada akses yang lemah kepada pengalaman mencetak, dan beberapa pemaju akan mempertimbangkan isu ini.

bernasib baik, mencetak CSS boleh dibangunkan dalam beberapa jam. Ini biasanya merupakan soal gaya menetapkan semula (teks putih pada hitam), memadam bab yang tidak perlu (menu, imej wira, bentuk, widget media sosial, dan lain -lain), susun atur linearizing, dan mengurangkan penggunaan kertas dan dakwat.

Dig ke dalam alat pemaju berasaskan pelayar (dari CSS Master) dan pelayar Devtool Secrets untuk mempelajari cara memeriksa dan mengubahsuai gaya selepas beralih ke cetak rendering.

Memohon CSS Conditionally (dari CSS Master) menerangkan cara menentukan peraturan @media pertanyaan, termasuk helaian gaya percetakan.

Pertimbangkan Panduan Strategi anda untuk CSS Custom Properties (dari Frontiers Baru dalam Reka Bentuk Web) untuk menentukan sama ada pembolehubah CSS dapat membantu dengan sifat percetakan. Juga pertimbangkan kebolehcapaian (dari CSS Animation 101) untuk mematikan animasi atau mencetaknya dengan sebaik -baiknya.

Akhirnya, bagaimana untuk membuat halaman mesra pencetak dengan CSS (dari CSS Tools & Skills) menyediakan tutorial pengoptimuman cetak lengkap dengan petua untuk menjimatkan kos dakwat dan kertas.

2. Sapukan tema CSS moden ke laman web yang sedia ada

Skema warna tunggal membosankan! Semua orang menjangkakan pilihan mod gelap dalam sistem operasi dan aplikasi mereka, jadi mengapa tidak menambah satu ke laman web anda?

Sehingga baru-baru ini, suis tema sering memerlukan satu set tambahan gaya dan kawalan suis yang didorong oleh JavaScript. Walau bagaimanapun, penyemak imbas moden menggunakan CSS Custom Properties (pembolehubah) dan prefers-color-scheme @media peraturan untuk menjadikan hidup lebih mudah.

Strategi untuk bertemakan (dari sempadan baru dalam reka bentuk web) menyediakan pelbagai idea dan nota ketika merancang tema baru.

Memohon CSS Secara kondusif (dari Master CSS) menerangkan cara menentukan peraturan pertanyaan @media, termasuk prefers-color-scheme.

Akhir sekali, CSS moden: Menambah tema gelap CSS (dari CSS moden) menyediakan tutorial lengkap mengenai membolehkan tema gelap.

3. reka bentuk semula susun atur borang

Semak borang di laman web anda, seperti pertanyaan atau borang pendaftaran. Kecuali ia dikodkan baru-baru ini, ia mungkin akan dilaksanakan menggunakan div kontena dan susun atur berasaskan terapung yang boleh memecahkan skrin yang lebih kecil. Bentuk yang lebih tua boleh menggunakan JavaScript yang tidak perlu atau mempunyai akses yang lemah.

Borang pendaftaran (dari corak reka bentuk borang) menerangkan cara terbaik untuk mereka bentuk, gaya dan bentuk bentuk menggunakan HTML5.

Grid CSS membolehkan anda menghapuskan tag yang tidak perlu dan membuat susun atur peluru dan responsif tanpa menggunakan pertanyaan media. Tutorial grid CSS berikut akan membantu anda memulakan dengan cepat:

• susun atur grid CSS yang siap pengeluaran (dari sempadan baru dalam reka bentuk web)
• Membuat susun atur dengan grid CSS (dari Master CSS), dan
• "susun atur grid CSS" (dari "Jump Mula Reka Bentuk Web Responsif")

Akhir sekali, buat borang yang hebat dengan grid CSS (dari susun atur grid CSS) menyediakan tutorial lengkap yang menyediakan susun atur bentuk berasaskan grid dan sandaran terapung untuk penyemak imbas yang lebih tua.

4. Meningkatkan kelajuan laman web

Pada awal tahun 2020, halaman web purata memerlukan 2MB muat turun, yang mengambil masa 20 saat untuk dipaparkan sepenuhnya pada peranti mudah alih biasa. CSS menyumbang 65kb dan diedarkan dalam tujuh fail. Ini nampaknya tidak penting, tetapi sifat -sifat stylesheet mempunyai kesan.

Luangkan masa beberapa jam untuk memeriksa laman web anda yang sedia ada untuk menentukan sama ada anda boleh menggantikan atau mengoptimumkan imej, fon, dan kesan JavaScript dengan CSS yang lebih cekap. Kod CSS anda mungkin berkembang, tetapi berat keseluruhan akan jatuh dan prestasi akan bertambah baik.

Alat ujian (dari Jump Start Web Prestasi) dan debug untuk respons UI (dari CSS Master) Jelaskan cara menggunakan alat pemaju pelayar moden untuk menilai prestasi dan menemui matlamat pengoptimuman.

Memuatkan aset di web (dari sempadan baru dalam reka bentuk web) menerangkan cara menggunakan teknologi seperti CSS kritikal dan pemuatan CSS progresif untuk memastikan bahawa helaian gaya dimuatkan dengan cekap. 20 petua untuk mengoptimumkan prestasi CSS (dari CSS moden) menyediakan beberapa petua praktikal.

Akhir sekali, lompat Mula Prestasi Web mengandungi berpuluh-puluh cadangan pembangunan yang cepat, mendalam dan mengubah hidup untuk memastikan laman web anda tetap cepat untuk semua orang.

5. Mulakan projek baru atau komponen CSS

Cadangan projek di atas boleh digunakan untuk memperbaiki laman web yang sedia ada, tetapi tidak ada sekatan atau kekangan ketika memulakan projek baru dari awal. Pilihan untuk dipertimbangkan:

1. Buat resume dalam talian. Mata Tambahan: Pastikan ia responsif, mencetak dengan baik, dan mengkodekan semua sumber ke dalam satu fail HTML yang boleh dihantar melalui e -mel. (Petua: Elakkan menambah JavaScript untuk memastikan ia tidak disekat oleh sistem e -mel.)
2. Buat portfolio interaktif. Senarai grafik semua laman web, maklumat tambahan akan dipaparkan apabila mengklik pada item. Susun atur grid adalah ideal, tetapi jika anda benar -benar ingin mencabarnya, cuba susun atur batu. (Grid CSS tidak dapat mencapai ini lagi, tetapi pertimbangkan bagaimana untuk melakukan ini menggunakan lajur CSS atau susun atur grid yang disusun secara menegak.)
3. Reka bentuk grafik pengekodan. Mungkin anda boleh memilih idea yang menarik dari dribbble atau komuniti reka bentuk yang serupa dan menyandarkannya menggunakan HTML5 dan CSS3. Mata tambahan: Buatnya tanpa rangka kerja atau JavaScript!
4. Buat imej CSS sahaja. Buat satu set ikon yang berguna menggunakan unsur-unsur pseudo dan bentuk CSS, atau membina imej dengan kecerunan dan bayang-bayang.
5. Cuba animasi SVG dan CSS. Cuba buat logo yang menarik, carta, bar kemajuan, pemintal aktiviti, dan banyak lagi.

alat pemaju dan penyemak imbas:

• 《DOM, CSS dan Animasi》 (dari "Pelayar Devtool Secrets")
• "Cara menggunakan Gulp.js untuk mengautomasikan tugas CSS anda" (dari "CSS: Tools & Skills")
• 《Jump Start Sass》
• "Debugging dan Pengoptimuman CSS: Alat Kualiti Kod" (dari "CSS: Alat & Kemahiran")
• "Debugging dan Pengoptimuman CSS: Alat Pemaju" (dari "CSS: Alat & Kemahiran")
• 《Diet mengubah hidup》 (dari Jump Start Web Prestasi)
• 《Visual Studio Code: Alat penyuntingan dan debug end-to-end untuk pemaju web》

konsep grid CSS:

• 《Reka bentuk semula tapak untuk menggunakan susun atur grid CSS》 (dari "susun atur grid CSS")
• "susun atur grid CSS moden yang mudah dan responsif" (dari "susun atur grid CSS")
• susun atur CSS yang dipertingkatkan secara progresif dari terapung ke flexbox ke grid》 (dari susun atur grid CSS)
• 《Reka bentuk semula susun atur tumblr berasaskan kad dengan grid CSS》 (dari "susun atur grid CSS")
• struktur responsif yang lebih baik dengan sistem grid (dari lompat mula reka bentuk web responsif)

Teknologi CSS Responsif:

• 《14 Teknik CSS responsif penting》
• 《Reka bentuk responsif》
• 《Jump Mula Reka Bentuk Web Responsif》

peralihan dan animasi CSS:

• 《CSS Animation 101》
• "Peralihan dan Animasi" (dari "CSS Master")
• 《Menggunakan CSS Transforms di dunia nyata》 (dari CSS moden)

Gunakan CSS dengan SVG:

• "animasi svg" (dari "praktikal svg")
• 《Menggunakan CSS dengan SVG》 (dari "CSS Master")
• 《penggunaan dunia sebenar CSS dengan SVG》 (dari CSS moden)

berhenti membaca sekarang dan mulakan pengekodan!

Soalan Lazim Menguasai Projek CSS Moden (Soalan Lazim)

Apakah beberapa amalan terbaik untuk menguasai projek CSS moden?

Menguasai projek CSS moden memerlukan pemahaman yang baik tentang asas -asas CSS dan amalan terbaik. Ini termasuk menggunakan CSS Reset untuk memastikan konsistensi antara pelayar yang berbeza, menggunakan pendekatan mudah alih pertama untuk reka bentuk responsif, dan menggunakan preprocessors CSS seperti SASS atau kurang untuk menjadikan CSS anda lebih mudah untuk mengekalkan. Di samping itu, pemahaman CSS Grid dan Flexbox dapat membantu anda membuat susun atur kompleks dengan kod kurang. Akhirnya, menjaga CSS anda teratur dan menambah komen yang baik dapat memudahkan orang lain (atau masa depan anda) untuk memahami kod anda.

Bagaimana untuk meningkatkan kemahiran pengekodan CSS saya?

Meningkatkan kemahiran pengekodan CSS anda melalui amalan dan pembelajaran yang berterusan. Mula -mula memahami asas -asas CSS, kemudian secara beransur -ansur bergerak ke topik yang lebih maju. Tutorial dalam talian, cabaran pengekodan, dan projek sumber terbuka dapat memberikan pengalaman tangan. Di samping itu, mengikuti pakar industri dan menyertai komuniti CSS dapat membantu anda mengetahui trend dan teknologi terkini.

Apakah beberapa cabaran biasa yang anda hadapi semasa menggunakan CSS? Bagaimana untuk mengatasi cabaran ini?

Beberapa cabaran biasa apabila menggunakan CSS termasuk pengendalian ketidakkonsistenan penyemak imbas, pemahaman model kotak, dan menguruskan susun atur kompleks. Ini dapat diatasi dengan menetapkan semula atau menormalkan dengan CSS, memahami sifat

, dan susun atur menggunakan grid CSS atau flexbox. Di samping itu, menggunakan preprocessor CSS boleh membantu menguruskan fail CSS yang besar dan menjadikan kod anda lebih mudah untuk dikekalkan. box-sizing

Bagaimana untuk membuat reka bentuk responsif menggunakan CSS?

Reka bentuk responsif boleh dibuat menggunakan CSS dengan menggunakan pertanyaan media, yang membolehkan anda menggunakan gaya yang berbeza untuk saiz skrin yang berbeza. Di samping itu, grid CSS dan Flexbox boleh digunakan untuk membuat susun atur fleksibel yang sesuai dengan saiz skrin. Pendekatan pertama mudah alih (bermula dengan saiz skrin terkecil dan secara beransur-ansur menambah gaya ke skrin yang lebih besar) juga boleh membantu mewujudkan reka bentuk responsif yang berkesan.

Teknik CSS apa yang harus saya pelajari?

Beberapa teknik CSS lanjutan yang harus anda pelajari termasuk animasi dan peralihan CSS, pembolehubah CSS, dan sifat adat CSS. Di samping itu, pemahaman cara menggunakan elemen pseudo dan kelas pseudo dapat membantu anda membuat gaya yang lebih kompleks. Ia juga bermanfaat untuk mempelajari preprocessors CSS seperti SASS atau kurang.

Bagaimana untuk mengoptimumkan CSS saya untuk prestasi yang lebih baik?

CSS boleh dioptimumkan untuk prestasi yang lebih baik dengan meminimumkan bilangan CSS yang digunakan, menggunakan sifat -sifat tersendiri, dan mengurangkan penggunaan sifat CSS mahal. Di samping itu, menggunakan pemampat CSS boleh membantu mengurangkan saiz fail CSS, dengan itu mempercepatkan masa pemuatan.

Apakah beberapa sumber untuk belajar CSS maju?

Terdapat banyak sumber dalam talian untuk mempelajari CSS maju, termasuk tutorial dalam talian, cabaran pengekodan dan dokumentasi. Laman web seperti trik CSS, dokumen web MDN, dan majalah Smashing menyediakan artikel dan panduan yang mendalam mengenai pelbagai topik CSS. Di samping itu, memberi tumpuan kepada pakar industri dan menyertai komuniti CSS dapat memberikan pandangan yang berharga dan peluang pembelajaran.

Bagaimana untuk menyahpepijat isu CSS?

Anda boleh menggunakan alat pemaju penyemak imbas untuk menyahpepijat isu CSS, yang membolehkan anda menyemak unsur -unsur, melihat gaya aplikasi anda, dan bereksperimen dengan gaya yang berbeza dalam masa nyata. Di samping itu, pemahaman CSS cascades, kekhususan, dan warisan dapat membantu anda memahami mengapa gaya tertentu tidak digunakan seperti yang diharapkan.

Bagaimana untuk menjaga CSS teratur dan mudah dijaga?

CSS boleh disimpan teratur dan mudah dipelihara dengan mengikuti konvensyen penamaan yang konsisten, menggunakan komen untuk menggambarkan kod anda, dan menganjurkan CSS ke bahagian logik atau fail berasingan. Di samping itu, menggunakan preprocessor CSS boleh membantu menguruskan fail CSS yang besar dan menjadikan kod anda lebih mudah untuk dikekalkan.

Apakah peranan CSS dalam pembangunan web?

CSS memainkan peranan penting dalam pembangunan web dengan mengawal penampilan dan rasa laman web. Ia membolehkan anda menggunakan gaya untuk elemen HTML, membuat reka bentuk responsif, dan juga membuat animasi dan peralihan. Tanpa CSS, laman web akan menjadi jelas dan tidak bergaya, menjadikannya alat penting bagi mana -mana pemaju web.

Atas ialah kandungan terperinci 5 projek untuk membantu anda menguasai CSS moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!