10 fungsi CSS yang perlu diketahui oleh setiap pembangun bahagian hadapan

CSS (Cascading Style Sheets) ialah bahasa helaian gaya yang digunakan untuk menerangkan rupa dan pemformatan dokumen yang ditulis dalam HTML. Ia merupakan bahagian penting dalam pembangunan web kerana ia membolehkan pembangun mengawal penampilan tapak web dan aplikasi mereka.

Dalam artikel ini, kami akan membincangkan beberapa fungsi CSS yang paling berguna yang setiap pembangun bahagian hadapan harus biasa. Fungsi ini boleh digunakan untuk menambah gaya dan pemformatan pada tapak web atau aplikasi anda dan boleh meningkatkan pengalaman pengguna dengan banyak.

Seperti bahasa pengaturcaraan lain, fungsi dalam CSS memudahkan tugas dengan menyediakan penyelesaian satu baris. Tetapi tidak seperti bahasa pengaturcaraan lain, hasil fungsi dalam CSS sebenarnya tidak menjejaskan mana-mana logik pada laman web, ia hanya digunakan untuk mempengaruhi elemen visual yang terdapat dalam laman web.

Disenaraikan di bawah adalah pelbagai jenis fungsi yang tersedia dalam CSS:

• Fungsi atribut tersuai

• Fungsi warna

• Fungsi pemilih kelas pseudo

• Fungsi animasi

• Fungsi penapis

• Fungsi dimensi dan penskalaan

• Fungsi perbandingan

• Fungsi logik

Terdapat banyak jenis fungsi lain yang tersedia dalam CSS. Tetapi artikel ini hanya membincangkan 10 daripadanya untuk kegunaan kita.

var() fungsi

Satu-satunya fungsi sifat tersuai yang tersedia dalam CSS ialah fungsi var. Setiap kali kami perlu menggunakan sifat tersuai dalam CSS, kami menggunakan fungsi var untuk merujuknya

Contoh

Diberikan di bawah ialah contoh menggunakan fungsi var untuk merujuk sifat tersuai -

html {
   --background-color: teal;
}
div {
   background-color: var(--background-color);
}

fungsi calc()

Fungsi yang paling biasa digunakan untuk pengiraan matematik/aritmetik dalam CSS ialah fungsi calc. Ia digunakan secara meluas bersama-sama dengan fungsi var yang kami bincangkan di atas untuk mengira nilai harta secara dinamik.

Contoh

p {
   height: calc(100px – 80px);
}

Kita juga boleh menggunakan calc dengan unit formal lain, seperti em, rem, dll.

fungsi url()

Sumber yang perlu anda tambahkan pada tapak web anda selalunya terletak di beberapa lokasi berbeza. Jadi pada masa ini, kita memerlukan fungsi yang boleh digunakan untuk memuatkan sumber ini ke dalam fail CSS. Fungsi url berbuat demikian, ia memaut dan memuatkan sumber dari lokasi sumber ke lokasi sasaran, iaitu fail CSS. Anda boleh memautkan semua jenis sumber seperti imej, svg, fon, helaian gaya dan banyak lagi

Contoh

body{
   background-image: url(/fonts/myFont);
}

rgb() fungsi

Apabila mereka bentuk laman web, kita selalunya perlu menggunakan warna. CSS menyediakan banyak cara untuk menggunakan warna, seperti kod heksadesimal, nama warna, dsb. Satu cara untuk mewakili warna adalah dengan menggunakan nilai RGB mereka, dan fungsi rgb() membolehkan kami menukar kod heks ini kepada RGB dan menggunakannya dalam helaian gaya.

Contoh

html{
   color: rgb(255, 255, 255);
}

Kita boleh menggunakan fungsi lain rgba, yang boleh digunakan untuk mengawal kelegapan warna yang ditentukan.

fungsi hsl()

Fungsi lain yang boleh digunakan untuk mewakili warna ialah fungsi hsl. Ia mentakrifkan warna sebagai warna, tepu dan kecerahannilai. Sesetengah pembangun lebih suka menggunakannya berbanding RGB.

Contoh

html{
   color: hsl(100, 50%, 80%);
}

Sama seperti rgb, hsl juga mempunyai versi yang diubah hsla yang juga mengawal kelegapan warna yang ditentukan.

fungsi blur()

Untuk membezakan antara elemen, kami menggunakan fungsi kabur.

Contoh

.someClass{
   filter: blur(67%);
}

Fungsi Opacity()

Kelegapan unsur ialah keterlihatan unsur yang sepadan. Ia menentukan berapa banyak latar belakang yang boleh dilihat melalui latar belakang ini.

Contoh

.someClass{
   filter: opacity(0.75);
}

Terjemahan bahasa Cina bagi

Fungsi ke-nth-child()

ialah:

fungsi ke-nth-child()

Apabila kita perlu memilih elemen anak tertentu bagi elemen induk, kita boleh menggunakan fungsi anak-anak. Ia adalah fungsi pemilih kelas pseudo dengan beberapa perubahan untuk menyasarkan elemen berbeza berdasarkan keperluan anda.

Contoh

.someClass:nth-child(3){
   Color: black;
}

Beberapa variasinya ialah anak-terakhir, jenis-jenis, jenis-terakhir, dsb.

fungsi skala()

Fungsi ini membolehkan anda mengawal saiz elemen dan anak-anaknya. Kita juga boleh menentukan paksi yang kita mahu perubahan ini berlaku.

Contoh

.someClass{
   transform: scale(100%);
}

fungsi terjemah()

Fungsi ini membolehkan anda menukar kedudukan elemen. Kita juga boleh menentukan paksi yang perlu diubah oleh elemen.

Contoh

.someClass{
   transform: translate(30%);
}

Kesimpulan

Dalam artikel ini, kami membincangkan fungsi, tujuannya dalam CSS, cara ia berbeza daripada fungsi dan bahasa pengaturcaraan lain. Kami juga mempelajari tentang pelbagai jenis fungsi yang tersedia dalam CSS. Akhirnya kami melihat 10 fungsi yang paling biasa digunakan dalam CSS yang perlu diketahui oleh setiap pembangun bahagian hadapan. Ini hanyalah beberapa ciri yang paling popular, tetapi sentiasa ada lagi yang perlu dipelajari.

Atas ialah kandungan terperinci 10 fungsi CSS yang perlu diketahui oleh setiap pembangun bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!