Memahami Pseudo-Elemen sebelum dan selepas
Cascading Style Sheet (CSS) terutamanya bertujuan untuk menggunakan gaya untuk markup HTML, namun dalam beberapa kes apabila menambahkan markup tambahan pada dokumen itu adalah berlebihan atau tidak mungkin, sebenarnya ada ciri dalam CSS yang membolehkan kita menambah markup tambahan tanpa mengganggu dokumen sebenar, iaitu unsur-unsur pseudo.
Anda telah mendengar istilah ini, terutamanya apabila anda mengikuti beberapa tutorial kami.
Sebenarnya terdapat beberapa ahli keluarga CSS yang dikelaskan sebagai unsur-unsur pseudo seperti :Barisan pertama, :surat pertama, :: pemilihan, : sebelum dan : selepas. Tetapi, untuk artikel ini, kami akan menghadkan liputan kami hanya kepada : sebelum dan : selepas, “unsur-unsur pseudo” di sini secara khusus akan merujuk kepada kedua-duanya. Kita akan melihat subjek ini dari asas-asas.
Sokongan Sintaks dan Penyemak Imbas
The unsur-unsur pseudo sebenarnya telah sejak sekian lama CSS1, tetapi : sebelum dan : selepas yang kita sedang berbincang di sini telah dibebaskan CSS2.1. Pada permulaannya, unsur-unsur pseudo gunakan tanda tunggal untuk sintaks, kemudian apabila web berkembang, dalam CSS3 unsur-unsur pseudo telah disemak semula menggunakan dua kolon - menjadi :: sebelum ini & :: selepas - untuk membezakannya dengan pseudo-classes (i.e. : berlegar, : aktif, dan sebagainya).
Walau bagaimanapun, sama ada anda menggunakan satu kolon atau format dua kolon, peramban akan tetap mengenali sama ada. Dan sejak Internet Explorer 8 hanya menyokong format tunggal-kolon, lebih selamat untuk menggunakan tanda tunggal-tunggal jika anda mahu keserasian pelayar yang lebih luas.
Apa yang dilakukannya?
Pendek kata, yang unsur-unsur pseudo akan memasukkan elemen tambahan sebelum ini atau selepas elemen kandungan, jadi apabila kita menambah kedua-duanya, mereka secara teknikal sama, dengan markup berikut.
: sebelum Ini kandungan utama. : selepas
Tetapi unsur-unsur tersebut tidak dihasilkan oleh dokumen tersebut. Mereka masih kelihatan di permukaan tetapi anda tidak akan menemui mereka di sumber dokumen, jadi ia dikatakan secara praktikal palsu unsur-unsur.
Menggunakan unsur-unsur pseudo
Menggunakan unsur-unsur pseudo agak mudah; sintaks yang berikut pemilih: sebelum akan menambah elemen sebelum ini pemilih kandungan semasa sintaks ini pemilih: selepas akan menambah selepas itu, dan untuk menambah kandungan di dalamnya kita boleh menggunakannya kandungan harta.
Sebagai contoh, coretan di bawah akan menambah tanda petikan sebelum dan selepas blockquote.
blockquote: before content: open-quote; blockquote: selepas kandungan: kutipan dekat;
Styling pseudo-elements
Walaupun menjadi unsur palsu, yang unsur-unsur pseudo sebenarnya bertindak seperti a “sebenar” elemen; kami dapat menambahkan apa-apa deklarasi gaya kepada mereka, seperti menukar warna, menambah latar belakang, menyesuaikan saiz font, menjajarkan teks di dalamnya dan sebagainya.
blockquote: before content: open-quote; saiz fon: 24pt; teks-align: center; garis ketinggian: 42px; warna: #fff; latar belakang: #ddd; terapung: kiri; kedudukan: relatif; atas: 30px; blockquote: selepas kandungan: kutipan dekat; saiz fon: 24pt; teks-align: center; garis ketinggian: 42px; warna: #fff; latar belakang: #ddd; terapung: betul; kedudukan: relatif; bawah: 40px;
Menentukan dimensi
Unsur-unsur yang dihasilkan secara lalai adalah unsur tahap dalam-line, jadi apabila kita hendak menentukan ketinggian dan lebar, kita harus terlebih dahulu mentakrifkannya sebagai elemen blok menggunakan paparan: blok pengisytiharan.
blockquote: before content: open-quote; saiz fon: 24pt; teks-align: center; garis ketinggian: 42px; warna: #fff; latar belakang: #ddd; terapung: kiri; kedudukan: relatif; atas: 30px; jejari jejari: 25px; / ** mendefinisikannya sebagai elemen blok ** / paparan: blok; ketinggian: 25px; lebar: 25px; blockquote: selepas kandungan: kutipan dekat; saiz fon: 24pt; teks-align: center; garis ketinggian: 42px; warna: #fff; latar belakang: #ddd; terapung: betul; kedudukan: relatif; bawah: 40px; jejari jejari: 25px; / ** mendefinisikannya sebagai elemen blok ** / paparan: blok; ketinggian: 25px; lebar: 25px;
Lampirkan imej latar belakang
Kita juga boleh menggantikan kandungan dengan imej dan bukan hanya teks biasa. walaupun kandungan hartanah menyediakan a url () rentetan untuk memasukkan imej, tetapi dalam kebanyakan kes saya lebih suka menggunakan latar belakang harta untuk kawalan lebih terhadap imej yang dilampirkan.
blockquote: before content: ""; saiz fon: 24pt; teks-align: center; garis ketinggian: 42px; warna: #fff; terapung: kiri; kedudukan: relatif; atas: 30px; jejari jejari: 25px; latar belakang: url (images / quotationmark.png) -3px -3px #ddd; paparan: blok; ketinggian: 25px; lebar: 25px; blockquote: after content: ""; saiz fon: 24pt; teks-align: center; garis ketinggian: 42px; warna: #fff; terapung: betul; kedudukan: relatif; bawah: 40px; jejari jejari: 25px; latar belakang: url (images / quotationmark.png) -1px -32px #ddd; paparan: blok; ketinggian: 25px; lebar: 25px;
Walau bagaimanapun, seperti yang anda lihat dari coretan di atas, kami masih mengisytiharkan kandungan harta dan masa ini dengan tali kosong. The kandungan harta adalah satu keperluan dan harus selalu digunakan; jika tidak pseudo-element tidak akan berfungsi apa sahaja.
Menggabungkan dengan pseudo-kelas
Walaupun mereka adalah jenis yang berbeza pseudo, kita boleh menggunakannya pseudo-classes bersama dengan unsur-unsur pseudo bersama-sama dalam satu peraturan CSS, misalnya, jika kita ingin mengubahnya latar belakang tanda petikan sedikit lebih gelap apabila kita melayang ke atas blockquote.
blockquote: hover: after, blockquote: hover: before background-color: # 555;
Menambah Kesan Peralihan
Dan kita juga boleh memohon peralihan harta bagi mereka untuk mewujudkan kesan peralihan warna anggun.
peralihan: semua 350ms; -o-peralihan: semua 350ms; -moz-peralihan: semua 350ms; -webkit-peralihan: semua 350ms;
Malangnya, kesan peralihan seolah-olah hanya berfungsi dalam versi terkini Firefox. Semoga lebih banyak penyemak imbas akan mengejar untuk membolehkan harta peralihan diterapkan unsur-unsur pseudo pada masa hadapan.
- Demo
- Muat turun Sumber
Lebih inspirasi
Untuk memberi inspirasi kepada anda, kami telah memilih tiga contoh sejuk yang dapat memberi anda idea untuk reka bentuk web anda.
Shadows yang menarik
Dalam tutorial ini Paul Underwood menjelaskan bagaimana untuk mewujudkan kesan bayangan yang lebih realistik dan menarik menggunakan : sebelum dan : selepas unsur-unsur pseudo. Kedua-duanya diposisikan dengan sempurna dan diletakkan di belakang negatif z-indeks nilai.
Kesan Imej yang disusun
Menggunakan unsur-unsur pseudo untuk mewujudkan kesan imej yang disusun hanya dengan satu imej pada markup juga mungkin. The unsur-unsur pseudo digunakan untuk mencipta ilusi imej yang ditumpuk di belakang imej sebenar menggunakan negatif z-indeks.
Kesimpulannya
Punsur seudo semata-mata “sejuk” dan akhirnya boleh digunakan, pada dasarnya kita ada dua elemen bonus untuk setiap elemen yang kami tambahkan tanpa mengganggu struktur HTML sebenar sama sekali, dan kemudian menjadikannya hampir semua yang kita bayangkan.
Sebenarnya ada beberapa penambahbaikan unsur-unsur pseudo yang sedang diusahakan, seperti bersarang unsur-unsur pseudo div :: before :: before content: "; dan pelbagai elemen pseudo div :: before (3) content: "; yang jelas akan membuka lebih banyak kemungkinan dalam amalan reka bentuk web pada masa akan datang. Walaupun mereka sedang dilaksanakan dalam penyemak imbas semasa, mari tunggu dengan sabar sekarang.
