Panduan Fungsi CSS

Panduan Fungsi CSS: Alat yang berkuasa untuk mengawal Gaya

Seperti bahasa pengaturcaraan lain, CSS juga mempunyai fungsi. Fungsi -fungsi ini boleh dimasukkan ke dalam kedudukan nilai, atau dalam beberapa kes yang digunakan dengan perisytiharan nilai lain. Sesetengah fungsi CSS juga membolehkan anda bersarang fungsi lain!

Lebih

Dalam pengaturcaraan, fungsi adalah sekeping kod bernama yang melakukan tugas tertentu. Sebagai contoh, fungsi dalam JavaScript yang dipanggil sayWoof() :

 fungsi mengatakanWoof () {
 Console.log ("Woof!");
}

Kita boleh menggunakan fungsi ini selepas menentukan tingkah laku yang dikehendaki. Dalam contoh ini, bila -bila masa anda menaip sayWoof() di laman web anda atau JavaScript aplikasi web, ia akan mencetak "Woof!" ke konsol penyemak imbas.

Fungsi juga boleh menggunakan parameter, yang merupakan slot untuk serpihan angka atau teks, yang boleh anda masukkan ke dalam logik fungsi untuk mengubahnya. Di JavaScript, ia berfungsi seperti ini:

 CountDogs fungsi (jumlah) {
 Console.log ("Ada" jumlah "anjing!");
}

Di sini, kami mempunyai fungsi yang dipanggil countDogs() yang mempunyai parameter yang dipanggil amount . Apabila nombor disediakan untuk amount , ia mengambil nombor itu dan menambahkannya ke kalimat yang telah ditentukan sebelumnya. Ini membolehkan kita membuat ayat -ayat yang memberitahu kita berapa banyak anjing yang kita hitung.

 CountDogs (3); // Terdapat 3 anjing!
CountDogs (276); // Terdapat 276 anjing!
CountDogs ("banyak"); // Terdapat banyak anjing!

Sesetengah bahasa pengaturcaraan dilengkapi dengan fungsi terbina dalam untuk membantu anda mengelakkan mencipta semula roda untuk setiap projek baru. Secara umum, fungsi ini direka untuk membantu memudahkan menggunakan kelebihan dan ciri utama bahasa.

Sebagai contoh, perpustakaan. Perpustakaan adalah koleksi kod yang terdiri daripada koleksi fungsi yang dipilih dengan teliti yang direka untuk membantu mempercepatkan dan mempermudah pembangunan -seperti Fitvids.js, untuk mewujudkan elemen video yang fleksibel.

### Asas fungsi CSS

Tidak seperti bahasa pengaturcaraan lain, kita tidak boleh membuat fungsi kita sendiri dalam CSS. Logik ini dikhaskan untuk pemilih CSS, yang membolehkan anda membuat peraturan gaya bersyarat yang kuat.

Tidak seperti bahasa pengaturcaraan lain -output fungsi dalam bahasa pengaturcaraan lain biasanya secara tersirat mempengaruhi logik berikutnya -output fungsi CSS adalah visual. Output ini digunakan untuk mengawal susun atur dan pembentangan kandungan. Contohnya:

 .has-oren-glow {
  Penapis: drop-shadow (0.25REM 0 0.75REM #EF9035);
}

Fungsi filter CSS drop-shadow() menggunakan parameter yang kami sediakan untuk membuat kesan cahaya luar oren pada apa yang digunakannya.

Dalam demonstrasi berikut, saya mempunyai fungsi JavaScript yang dipanggil toggleOrangeGlow yang menukarkan permohonan kelas .has-orange-glow pada logo trik CSS. Menggunakan ini dengan peralihan CSS, kita boleh membuat kesan cahaya yang sejuk:

Anda mungkin sudah biasa dengan beberapa fungsi CSS, tetapi bahasa ini mempunyai senarai yang luar biasa!

Seperti mana -mana teknologi lain di web, fungsi CSS yang berbeza mempunyai tahap sokongan penyemak imbas yang berbeza. Pastikan anda melakukan penyelidikan dan ujian untuk memastikan pengalaman anda berfungsi untuk semua orang dan menggunakan sesuatu seperti @supports untuk memberikan pengalaman alternatif yang berkualiti tinggi.

Fungsi CSS yang biasa digunakan

url()

 .el {
  Latar Belakang: URL (/Images/image.jpg);
}

Gunakan url()

url() membolehkan anda menghubungkan ke sumber lain untuk memuatkannya. Ini termasuk imej, fon, dan juga helaian gaya lain. Atas sebab prestasi, sebaiknya hadkan apa yang anda muatkan melalui url() , kerana setiap perisytiharan adalah permintaan HTTP tambahan.

#### attr()

 /*<div data-example="foo"> */
div {
  Kandungan: ATTR (contoh data);
}<p><details><summary> Gunakan <code>attr()</code></summary><p> Fungsi ini membolehkan kami memasukkan HTML, mendapatkan kandungan harta itu, dan memberikannya kepada harta <code>content</code> CSS. Anda biasanya akan melihat <code>attr()</code> yang digunakan dalam helaian gaya, yang digunakan untuk memaparkan URL pautan selepas teks pautan. Satu lagi aplikasi yang baik dalam fungsi ini adalah menggunakannya untuk memaparkan penerangan alternatif imej jika ia gagal memuatkan.</p></details></p>
<p> #### <code>calc()</code></p>
<pre class="brush:php;toolbar:false"> .el {
  lebar: calc (100vw - 80px);
}

Gunakan calc()

Jika anda mempunyai fungsi yang perlu mengambil sedikit masa untuk bereksperimen, iaitu calc() . Kami mempunyai panduan lengkap mengenai calc() .

Fungsi ini mengambil dua parameter dan mengira hasilnya berdasarkan pengendali yang anda berikan (, -, *, /), dengan syarat parameter ini adalah nombor dengan atau tanpa unit yang disertakan.

Tidak seperti preprocessors CSS seperti SASS, calc() boleh mencampur unit, yang bermaksud anda boleh melakukan perkara seperti menolak 6REM dari 100%. calc() juga dikemas kini secara dinamik, jadi jika 100% mewakili lebar, ia masih akan berfungsi jika perubahan lebar itu. calc() juga boleh menerima sifat tersuai CSS sebagai parameter, yang memberikan anda fleksibiliti yang luar biasa.

#### lang()

 P: lang (en) {
  Petikan: "\ 201c" "\ 201d" "\ 2018" "\ 2019" "\ 201c" "\ 201d" "\ 2018" "\ 2019";
}

Gunakan lang()

Termasuk atribut lang dalam HTML anda adalah perkara yang sangat penting. Apabila ia muncul dalam HTML anda, anda boleh menggunakan fungsi lang() untuk mencari penampilan nilai harta dan memohon gaya yang sesuai mengikutnya.

Penggunaan umum pemilih ini adalah untuk menetapkan petikan khusus bahasa, yang sangat berguna untuk pengantarabangsaan, dll.

Pereka dan pemaju pintar juga boleh menggunakannya sebagai cangkuk untuk laman web dengan versi yang diterjemahkan gaya, di mana pertimbangan budaya dan/atau linguistik bermakna persepsi yang berbeza tentang perkara-perkara seperti ruang negatif.

#### :not()

 H3: tidak (: anak pertama) {
  margin-top: 0;
}

Gunakan not()

Pemilih kelas pseudo ini akan memilih apa sahaja yang tidak ditentukan oleh anda. Sebagai contoh, anda boleh menggunakan body:not(img) untuk mencari apa -apa yang bukan imej. Walaupun contoh ini sangat kuat, mengehadkan skop :not() kepada pemilih yang lebih berpusat (seperti kelas blok BEM) boleh memberi anda banyak fleksibiliti.

Pada masa ini :not() hanya menyokong satu pemilih sebagai parameternya, tetapi sokongan untuk pelbagai parameter yang dipisahkan koma sedang dibangunkan (mis. div:not(.this, .that) )!

Untuk maklumat lanjut mengenai fungsi, sila rujuk teks asal. Oleh kerana batasan ruang, baki besar fungsi CSS dalam teks asal ditinggalkan di sini. Sila rujuk teks asal untuk maklumat lengkap.