CSS apa yang anda mesti tahu pada tahun 2022?

CSS berkembang pesat, dengan fungsi yang semakin kuat, dan lengkung pembelajaran lebih curam. Artikel ini akan meneroka pengetahuan CSS yang sangat diperlukan dalam pembangunan front-end hari ini.

Sacha Greif secara terbuka mempersoalkan sama ada CSS terlalu besar. Dalam tahun -tahun kebelakangan ini, penyemak imbas telah menambah banyak ciri baru - pertanyaan kontena, sintaks warna relatif, lapisan cascade, sifat logik, skop pertanyaan media, transformasi bebas ,: mempunyai () pemilih, dan lain -lain. Ini tidak diragukan lagi membawa cabaran pembelajaran baru kepada kedua-dua pemula dan jurutera depan kanan.

Ia telah menjadi tegang masa lalu untuk memahami sepenuhnya semua sifat CSS dan bagaimana mereka bekerja. Jadi, pengetahuan CSS yang benar -benar diperlukan?

Vincas Stonys dan Chris cuba menyenaraikan senarai berkaitan masing -masing. Sekiranya anda perlu menyenaraikan lima sifat dan pemilih CSS yang paling penting, senarai saya adalah seperti berikut:

Atribut writing-mode

adalah penting, terutamanya ketika belajar. Ia membantu anda menguasai prinsip reka bentuk inklusif dan membuat susun atur yang betul tanpa mengira bahasa pengguna. Memahami

akan membimbing anda untuk memahami sifat dan nilai logik, dan kemudian memahami aliran dokumen, dan berfikir dari arah logik seperti blok, inline, bermula dan berakhir daripada arah fizikal. writing-mode writing-mode

tanpa pengetahuan atribut pepejal, sukar untuk menulis kod CSS yang sangat baik. Ia adalah harta dan rangka kerja untuk membuat susun atur. Tanpa itu, tidak ada flexbox atau grid CSS, jadi ia adalah kunci untuk memahami ciri -ciri penting ini. display

Di samping itu, atribut

dan atribut display melengkapkan satu sama lain. Sekali

memberi anda idea aliran dokumen dan arah logik, atribut

adalah apa yang anda perlukan. Anda boleh menggunakannya untuk menukar aliran normal elemen (mis., Tukar elemen blok ke elemen sebaris) atau mulakan susun atur (mis., Buat konteks susun atur yang fleksibel). display writing-mode writing-mode, display dan

sifat

margin Tiga sifat ini adalah sebahagian daripada model kotak dan digunakan untuk mengawal jarak dan gaya, dan semua memerlukan pemahaman unit panjang CSS. Memahami fungsi sifat -sifat ini dan bagaimana ia mempengaruhi saiz elemen yang dikira akan meningkatkan kawalan gaya anda dan menghapuskan isu -isu CSS yang biasa di mana saiz elemen tidak sepadan dengan jangkaan. padding border

dan

pseudo-elements

::before dan ::after adalah dua elemen pseudo yang biasanya dipelajari bersama. Mereka boleh digunakan untuk membuat pelbagai kesan UI, walaupun ilustrasi div tunggal penuh, menunjukkan kuasa CSS.

::before pertanyaan ::after

Pertanyaan adalah kunci untuk mewujudkan susun atur responsif yang fleksibel dan konteks tontonan yang berbeza. Sebagai pertanyaan kontena matang, ia boleh diganti, tetapi buat masa ini, @media pertanyaan adalah pengenalan yang sangat baik untuk mempelajari reka bentuk responsif.

Di samping itu, pertanyaan @media memberi anda pemahaman awal tentang ciri -ciri bersyarat CSS. Sama ada berdasarkan jenis peranti (mis., Skrin atau cetak) atau syarat Viewport penyemak imbas (mis., Lebar & gt; = 768px), sintaks @media sangat berguna untuk membuat susun atur yang dioptimumkan untuk keadaan yang berbeza. Pertanyaan @media juga berkaitan dengan kebolehcapaian kerana ia boleh menggunakan gaya mengikut keutamaan pengguna (mis., ). prefers-reduced-motion

atribut dan pemilih lain yang patut disebutkan

Sudah tentu, terdapat banyak ciri dan pemilih CSS yang penting, seperti:

• calc()
• has()
• color
• font (terutamanya penting)
• overflow
• Pembelajaran CSS lebih penting daripada senarai atribut Rote. Ia adalah proses langkah demi langkah, dan lima sifat dan pemilih yang saya pilih dapat membantu anda meletakkan asas yang baik dan menyediakan anda untuk pembelajaran CSS yang lebih mendalam. position

Atas ialah kandungan terperinci CSS apa yang anda mesti tahu pada tahun 2022?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!