mata utama
- Fungsi CSS boleh digunakan untuk membuat pelbagai kesan dan fungsi seperti tooltip, tajuk kecil, kaunter, dan kesan kaca frosted tanpa JavaScript.
- Fungsi -fungsi boleh digunakan untuk mewujudkan sistem grid yang lebih bijak dan penjajaran elemen kedudukan tetap, memberikan fleksibiliti dan ketepatan yang lebih besar dalam reka bentuk. Fungsi CSS
- juga membolehkan animasi kreatif menggunakan fungsi
calc()
, serta potensi untuk menggunakan elemen HTML sebagai imej latar belakang menggunakan fungsi , walaupun yang terakhir hanya disokong oleh Firefox. -
cubic-bezier()
element()
Banyak laman web masih menggunakan JavaScript untuk membuat tooltips, tetapi sebenarnya lebih mudah menggunakan CSS. Penyelesaian yang paling mudah adalah menggunakan sifat data dalam kod HTML untuk menyediakan teks tooltip, seperti . Dengan tag ini, anda boleh meletakkan perkara berikut ke CSS untuk memaparkan teks tooltip dalam fungsi
:
data-tooltip="…"
attr()
Ia sangat mudah dan jelas, bukan? Sudah tentu, lebih banyak kod diperlukan untuk benar -benar gaya tooltips, tetapi jangan risau, terdapat perpustakaan CSS tulen yang khusus untuk tujuan ini yang dipanggil HINT.CSS.
.tooltip::after { content: attr(data-tooltip); }
kami telah menggunakan untuk tooltips, tetapi ia mempunyai beberapa kes penggunaan lain. Menggabungkan sifat data, anda boleh membina imej kecil dengan tajuk dan penerangan menggunakan hanya satu baris kod HTML:
attr()
Anda kini boleh menggunakan fungsi
<a class="caption" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-title="禿鷲" data-description="..."> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174011191897662.jpg" class="lazy" alt="8 Clever Tricks with CSS Functions " /> </a>
attr()
Ini adalah contoh kerja lakaran kecil dengan tajuk animasi paparan hover: [pautan contoh codepen] (dengan asumsi bahawa pautan codepen harus dimasukkan di sini)
.caption::after { content: attr(data-title); ... }
NOTA: Kandungan yang dihasilkan mungkin mempunyai masalah dengan aksesibiliti. Artikel ini mengenai sokongan aksesibiliti untuk kandungan CSS yang dihasilkan memberikan tafsiran yang berguna mengenai topik ini.
counter css
Walaupun anda tidak boleh menggunakan kaunter CSS untuk senarai yang diperintahkan (<ol>
), kaunter sangat bagus untuk penomboran atau memaparkan nombor di bawah item di galeri. Anda juga boleh mengira bilangan item yang dipilih, yang sangat mengagumkan memandangkan anda memerlukan kod yang sangat sedikit (dan tiada JavaScript): [Pautan Sampel Codepen] (dengan mengandaikan bahawa pautan codepen harus dimasukkan di sini).
kaunter CSS juga bagus untuk nombor berubah secara dinamik dalam senarai projek, yang boleh disusun semula oleh seret dan drop: [pautan contoh codepen] (dengan mengandaikan bahawa pautan codepen harus dimasukkan di sini).
Seperti contoh terakhir, ingat bahawa kandungan yang dihasilkan mungkin mempunyai masalah dengan aksesibiliti.
Dengan pelepasan iOS 7, Apple membawa kita kesan "frosted kaca" -unsur -unsur kabur yang kelihatan seperti tingkap kaca beku. Diilhamkan oleh pelaksanaan Apple, kesan ini mula muncul di banyak tempat. Menghasilkan semula kesan ini agak rumit sebelum anda mempunyai penapis CSS, anda perlu menggunakan imej kabur untuk membuat kesan kaca beku. Sekarang, hampir semua pelayar utama menyokong sepenuhnya penapis CSS, jadi lebih mudah untuk menghasilkan semula kesan ini. [Bolehkah saya menggunakan CSS-Filters?] (Dengan mengandaikan bahawa boleh saya gunakan pautan harus dimasukkan di sini)
Pada masa akan datang, kita boleh menggunakan fungsi
dan untuk menghasilkan kesan yang sama, tetapi kedua -dua fungsi ini hanya disokong oleh Safari. backdrop-filter
filter()
Biasanya, anda menentukan fail JPEG atau PNG sebagai imej latar belakang, atau mungkin kecerunan. Tetapi adakah anda tahu bahawa menggunakan fungsi
, anda juga boleh menggunakan sebagai imej latar belakang? Pada masa ini, fungsi element()
hanya disokong oleh Firefox: [Bolehkah saya menggunakan fungsi CSS-elemen?] (Dengan mengandaikan bahawa boleh saya gunakan pautan hendaklah dimasukkan di sini) <div>
element()
Kemungkinan hampir tidak terbatas, di sini adalah contoh dari MDN.
Mesh cecair adalah perkara yang hebat, tetapi ada beberapa masalah yang serius. Sebagai contoh, tidak mungkin untuk membuat jarak di antara bahagian atas dan bawah saiz yang sama dengan jarak antara kiri dan kanan. Juga, penandaan sangat mengelirukan, bergantung kepada sistem grid yang anda gunakan. Malah Flexbox sendiri bukan penyelesaian akhir, tetapi menggunakan fungsi
(yang boleh digunakan sebagai nilai dalam CSS), grid boleh menjadi lebih baik. Dalam tutorial ini di laman web ini, George Martsoukos menunjukkan beberapa contoh praktikal, seperti grid galeri dengan jarak yang sempurna. Menggunakan preprocessors CSS seperti SASS, membina sistem mesh kreatif boleh menjadi sangat mudah dan mudah dijaga. Oleh kerana sokongan penyemak imbas hampir sempurna, adalah ciri yang mudah anda pastinya digunakan. [Bolehkah saya menggunakan calc?] (Dengan asumsi bahawa boleh saya gunakan pautan harus dimasukkan di sini) calc()
calc()
Satu lagi kes penggunaan untuk fungsi adalah untuk menyelaraskan elemen dengan kedudukan tetap. Sebagai contoh, jika anda mempunyai pembalut kandungan di sebelah kiri dan kanan dengan jarak cecair, dan anda ingin menyelaraskan unsur -unsur tetap di dalam pembungkus itu - anda akan mengalami kesukaran menentukan pemilihan atribut "kanan" atau "kiri" ? Dengan , anda boleh menggabungkan nilai relatif dan mutlak untuk menyelaraskan elemen dengan sempurna:
calc()
calc()
.tooltip::after {
content: attr(data-tooltip);
}
Untuk membuat UI laman web atau aplikasi lebih menarik, anda boleh menggunakan animasi, tetapi pilihan pelonggaran standard sangat terhad. Sebagai contoh, "linear" atau "mudah-dalam-keluar". Sesuatu seperti animasi melantun tidak mungkin walaupun dengan pilihan standard. Menggunakan fungsi
, anda boleh menghidupkan unsur -unsur tepat seperti yang anda kehendaki.
cubic-bezier()
Terdapat dua cara untuk menggunakan
. cubic-bezier()
cubic-bezier
jujur, saya akan memilih yang terakhir.
Penggunaan fungsi CSS yang mahir bukan sahaja menyelesaikan masalah yang diketahui (seperti membina sistem grid yang lebih bijak), tetapi juga memberikan anda kebebasan kreatif yang lebih besar. Sebagai sokongan penyemak imbas menjadi lebih baik, anda harus melihat dengan teliti CSS anda dan memperbaikinya menggunakan fungsi seperti
.
calc()
sebagai pemula, apakah fungsi asas CSS yang harus saya fahami?
Fungsi CSS digunakan untuk menetapkan nilai atribut CSS. Beberapa fungsi asas yang perlu diketahui oleh setiap pemula termasuk
,, rgb()
, rgba()
, hsl()
, dan hsla()
. Fungsi calc()
dan rgb()
digunakan untuk menentukan warna, manakala fungsi rgba()
dan hsl()
digunakan untuk menentukan warna berdasarkan warna, ketepuan, dan kecerahan. Fungsi hsla()
membolehkan anda melakukan pengiraan untuk menentukan nilai atribut CSS. calc()
Fungsi
dalam dalam CSS digunakan untuk melakukan pengiraan yang boleh digunakan sebagai nilai atribut. Fungsi ini boleh menggunakan "" "(tambahan),"-"(penolakan),"*"(berganda), dan"/"(bahagian) pengendali matematik. Sebagai contoh, anda boleh menggunakan calc()
untuk membuat div yang sentiasa tolak 20 piksel untuk lebar viewport 50% seperti yang ditunjukkan di bawah: calc()
. div { width: calc(50% – 20px); }
Perbezaan utama antara fungsi
dan dalam rgb()
CSS ialah rgba()
mengandungi saluran alfa yang menentukan kelegapan warna. Parameter alfa adalah nombor antara 0.0 (telus sepenuhnya) dan 1.0 (sepenuhnya legap). Sebagai contoh, untuk menetapkan merah lut, anda boleh menggunakan: rgba()
. color: rgba(255, 0, 0, 0.5);
Bagaimana untuk membuat kecerunan menggunakan fungsi CSS?
Fungsi CSS boleh digunakan untuk membuat kecerunan menggunakan fungsi linear-gradient()
dan radial-gradient()
. Sebagai contoh, untuk mencipta kecerunan linear dari merah ke biru, anda boleh menggunakan: background: linear-gradient(red, blue);
. Begitu juga, untuk mewujudkan kecerunan radial dari pusat merah ke pinggir biru, anda boleh menggunakan: background: radial-gradient(red, blue);
.
Bolehkah saya menukar elemen menggunakan fungsi CSS?
Ya, fungsi CSS boleh digunakan untuk menukar elemen. Atribut transform
boleh digunakan dengan pelbagai fungsi seperti rotate()
, scale()
, skew()
, dan translate()
untuk mengubah suai rupa elemen. Sebagai contoh, untuk memutar elemen 45 darjah, anda boleh menggunakan: transform: rotate(45deg);
.
Apakah tujuan fungsi ATTR () dalam CSS?
Fungsi dalam attr()
dalam CSS digunakan untuk mengembalikan nilai atribut elemen yang dipilih. Ini berguna untuk menghasilkan kandungan, dll. Sebagai contoh, anda boleh menggunakan attr()
untuk memaparkan nilai harta "HREF" pautan dalam tooltip: a:after { content: attr(href); }
.
Bagaimana menggunakan fungsi VAR () dalam CSS?
fungsi var()
dalam CSS digunakan untuk memasukkan nilai harta tersuai (juga dikenali sebagai "pembolehubah CSS". Sebagai contoh, anda boleh menentukan harta tersuai --main-color: blue;
dan kemudian gunakannya dalam CSS seperti berikut: color: var(--main-color);
.
Bolehkah saya membuat animasi menggunakan fungsi CSS?
Ya, fungsi CSS boleh digunakan untuk membuat animasi. Atribut animation
dalam CSS disingkat atribut untuk lapan atribut yang berbeza, termasuk animation-name
, animation-duration
, animation-timing-function
, dan lain -lain. Sebagai contoh, untuk membuat animasi 2 saat yang dipanggil "Slidein", anda boleh menggunakan: animation: slidein 2s;
.
Fungsi
dalam dalam CSS digunakan untuk memasukkan fail. Penggunaan fungsi yang paling biasa adalah untuk menghubungkan ke stylesheets luaran atau termasuk imej. Sebagai contoh, untuk menetapkan imej latar belakang elemen, anda boleh menggunakan: url()
. url()
background-image: url('image.jpg');
Bolehkah saya membuat transformasi 3D menggunakan fungsi CSS?
Ya, fungsi CSS boleh digunakan untuk membuat transformasi 3D. Atribut
dalam CSS boleh digunakan dengan fungsi seperti, transform
, rotateX()
, rotateY()
, rotateZ()
, dan scale3d()
untuk membuat transformasi 3D. Sebagai contoh, untuk memutar elemen di sekitar paksi-x, anda boleh menggunakan: translate3d()
. transform: rotateX(45deg);
Atas ialah kandungan terperinci 8 Trik Clever Dengan Fungsi CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

CSS Blok halaman yang diberikan kerana pelayar melihat CSS dalam talian dan luaran sebagai sumber utama secara lalai, terutamanya dengan stylesheet yang diimport, header sejumlah besar CSS sebaris, dan gaya pertanyaan media yang tidak dapat dioptimumkan. 1. Ekstrak CSS kritikal dan membenamkannya ke HTML; 2. Kelewatan memuatkan CSS bukan kritikal melalui JavaScript; 3. Gunakan atribut media untuk mengoptimumkan pemuatan seperti gaya cetak; 4. Memampatkan dan menggabungkan CSS untuk mengurangkan permintaan. Adalah disyorkan untuk menggunakan alat untuk mengekstrak CSS utama, menggabungkan REL = "Preload" pemuatan asynchronous, dan menggunakan media yang ditangguhkan dengan munasabah untuk mengelakkan pemisahan yang berlebihan dan kawalan skrip kompleks.

Thebestapproachforcssdependonstantheproject'ssspecificneeds.forlargerprojects, externalcssisbetterduetomaintainabilityability;

Tidak, cssdoesnothavetobeinlowercase.however, menggunakanLowerCaseisRecommendorfendfor: 1) Consistencyandreadability, 2) Mengelakkaningerrorsinrelatedtechnologies, 3) potensiformanceBenefits, dan4) peningkatan yang lebih baik.

Cssismostlycase-insensitive, buturlsandfontfamilynamesarecase-sensitif.1) propertiesandvalueslikecolor: merah; arenotcase-sensitif.2) urlsmustmatchtheserver'scase, mis.,

AutoPrefixer adalah alat yang secara automatik menambah awalan vendor ke atribut CSS berdasarkan skop penyemak imbas sasaran. 1. Ia menyelesaikan masalah mengekalkan awalan secara manual dengan kesilapan; 2. Bekerja melalui borang pemalam postcss, menghuraikan CSS, menganalisis atribut yang perlu diawali, dan menjana kod mengikut konfigurasi; 3. Langkah-langkah penggunaan termasuk memasang pemalam, menetapkan senarai pelayar, dan membolehkan mereka dalam proses membina; 4. Nota termasuk tidak menambah awalan secara manual, menyimpan kemas kini konfigurasi, awalan tidak semua atribut, dan disyorkan untuk menggunakannya dengan preprocessor.

Csscounterscanautomaticallynumbersectionsandlists.1) useCounter-resettoinitialize, counter-incrementToinCrease, andCounter () orcounters () todisplayvalues.2) CombinWithjavascriptfordynamicContentToenSureAccurateupdates.

Dalam CSS, nama pemilih dan atribut adalah sensitif kes, manakala nilai, warna yang dinamakan, URL, dan atribut tersuai adalah sensitif kes. 1. Nama pemilih dan atribut adalah kes-tidak sensitif, seperti warna latar belakang dan warna latar belakang adalah sama. 2. Warna heksadesimal dalam nilai adalah sensitif kes, tetapi warna bernama adalah sensitif kes, seperti merah dan merah tidak sah. 3. URL adalah sensitif kes dan boleh menyebabkan masalah pemuatan fail. 4. Sifat tersuai (pembolehubah) adalah sensitif kes, dan anda perlu memberi perhatian kepada konsistensi kes apabila menggunakannya.

Cssselectorsandpropertynamesarecase-insensitive, whilevaluescanbecase-sensitivedependingoncontext.1) selectorslike'div'and'div'areequivalent.2) propertiesuchas'background-color'and'and'aretaretreatheatthlegase.3)
