Hampir rumit atau belajar CSS3. Bagian 2. Jenis penyeleksi CSS

Halo, para pembaca yang terhormat dari situs remontcompa.ru! Nama saya Roman Nahvat dan saya sajikan kepada Anda bagian kedua dari serangkaian artikel tentang bahasa gaya CSS. Pada bagian pertama, kami melihat tiga cara untuk menambahkan gaya ke halaman web, yaitu, kami memeriksa gaya internal, yang merupakan ekstensi untuk satu tag dari dokumen HTML, gaya global, ketika menggunakan properti gaya mana yang ditulis antara tag dan, serta gaya terkait, yang didefinisikan dalam file .css terpisah dari dokumen HTML. Konsep yang sangat penting dalam CSS adalah pemilih. Selektor menentukan elemen (atau elemen) mana dalam dokumen HTML gaya yang akan diterapkan. Ada beberapa jenis penyeleksi dalam CSS yang akan kita bahas dalam artikel ini..

Hampir rumit atau belajar CSS3. Bagian 2. Jenis penyeleksi CSS


Buat struktur dokumen HTML berikut ini di mana selector_type.css () stylesheet sudah terhubung

Simpan dokumen ini sebagai selecror.html pada flash drive di folder CSS

Dengan cara yang sama, buat dan simpan file selector_type.css pada flash drive di folder CSS

Tambahkan ke halaman web selecror.html judul "Selectors CSS" dan paragraf "Selector is ...."

Kami juga menambahkan tabel ke halaman web selecror.html, untuk ini kami akan menulis tag dan

Kami akan menyelaraskan tabel yang dibuat di tengah halaman web (atribut menyelaraskan dengan pusat nilai), dan juga mengatur ketebalan batas tabel menjadi 1 piksel (border = "1")

Antara tag dan tunjukkan nama tabel (Jenis pemilih CSS)

Antara tag dan
tulis tag dan , ini akan membuat satu baris tabel

Antara tag dan tulis tag dua kali ... , tindakan ini akan membuat dua kolom di tabel. Kami akan menunjukkan nama kolom sebagai "Selector" dan "Contoh penggunaan"

Demikian pula, tambahkan tujuh baris lagi ke tabel (tag dan ), dan di setiap baris kami akan membuat dua kolom (tag dan )

Akibatnya, halaman web selector.html akan mengambil formulir berikut

Dari tabel yang dibuat dapat dilihat bahwa ada beberapa jenis pemilih CSS berikut: Jenis pemilih Pemilih pemilih Kelas pemilih universal Pemilih keturunan Pemilih pemilih Pemilih elemen terkait generik Mari kita lihat setiap jenis pemilih menggunakan halaman web selector.html sebagai contoh Pemilih jenis sesuai dengan beberapa nama elemen dalam Dokumen HTML. Misalnya, halaman web selector.html memiliki tajuk “Selektor CSS” yang ditandai

...

. Sejajarkan teks judul di tengah halaman web dan atur menjadi merah

Dalam file gaya selector_type.css, kami menetapkan tag header sebagai pemilih jenis

, lebih lanjut dalam kurung kurawal kami menunjukkan properti gaya dan nilainya, yang ingin kami terapkan pada header dengan teks "Selektor dalam CSS"

Seperti yang Anda lihat, teks judul terletak di tengah halaman web dan berwarna merah

Selektor elemen saudara berhubungan dengan elemen saudara dalam kaitannya dengan elemen lain. Misalnya, sebuah tag

(paragraf "Selector is ....") adalah saudara untuk tag

(tajuk "Selektor dalam CSS").

Ubah warna teks dalam paragraf ("Selector is ...") mengikuti heading ("Selectors in CSS") menjadi blueviolet menggunakan pemilih saudara. Dalam file gaya selector_type.css, tambahkan baris h1 + p color: blueviolet

Seperti yang Anda lihat, warna teks paragraf telah berubah menjadi blueviolet

Tambahkan dua paragraf yang lebih identik ke halaman web setelah judul "CSS Selectors"

Kami mendapatkan yang berikut: teks paragraf pertama adalah blueviolet, dan warna teks dari dua paragraf lainnya tetap secara default.

Ubah warna teks dari ketiga paragraf mengikuti "CSS Selectors" menuju ke blueviolet menggunakan pemilih elemen terkait generik. Selektor dari elemen terkait yang digeneralisasikan sesuai dengan elemen yang sifatnya serupa dengan elemen lain. Misalnya, beberapa tag

(tiga paragraf "Selector is ....") adalah saudara dari tag

(tajuk "Selektor dalam CSS"). Dalam file selector_type.css, tulis baris berikut h1 ~ p color: blueviolet

Sebagai hasil dari menggunakan pemilih elemen terkait yang digeneralisasi, warna teks dari ketiga paragraf setelah tajuk “Selektor dalam CSS” berubah menjadi blueviolet

Pertimbangkan jenis pemilih CSS yang lain, seperti pemilih pengidentifikasi. Selektor pengidentifikasi terkait dengan elemen yang atribut id-nya memiliki nilai yang cocok dengan yang ditunjukkan oleh simbol # Tingkatkan ukuran font dan ubah warna teks pada nama tabel (tag ...) menggunakan pemilih identifier. Di dalam tag, tulis pengenal dengan nama "capt", seperti yang ditunjukkan di bawah ini ()

Dalam file selector_type.css, tambahkan baris berikut #capt color: red; ukuran font: 20px, di mana pengenal "tangkap" ditunjukkan setelah simbol #

Seperti yang Anda lihat, ukuran font dan warna teks dalam nama tabel telah berubah sesuai dengan properti gaya yang ditentukan dalam file selector_type.css

Anda dapat membuat banyak pengidentifikasi dalam dokumen HTML, tetapi hanya dengan syarat nama mereka tidak pernah diulang. Mari kita menulis pengenal lain dengan nama "tr1" di dalam tag , seperti yang ditunjukkan di bawah ini ()

Menggunakan pengenal "tr1", kami akan menyelaraskan teks dalam nama kolom dari tabel di tengah, mengaturnya menjadi hijau, dan juga membuat font dalam huruf tebal. Dalam file selector_type.css, tulis # tr1 text-align: center; font-weight: bold; warna: hijau

Kami mendapatkan yang berikut ini

Jenis pemilih berikutnya yang kami pertimbangkan adalah pemilih kelas. Pemilih kelas terkait dengan elemen yang atribut kelasnya memiliki nilai yang cocok dengan yang ditentukan setelah titik. Ubah warna batas tabel pada halaman web selector.html menjadi biru menggunakan pemilih kelas. Untuk ini di dalam tag tulis nama kelas sebagai berikut: tabel, di mana class1 adalah nama kelas

Dalam file gaya selector_type.css, tambahkan baris berikut .class1 border-color: blue

Seperti yang Anda lihat, warna bingkai meja telah berubah menjadi biru

Ubah warna teks dalam tabel menjadi hijau. Dalam file selector_type.css, tulis baris .class1 color: green

Kami melihat bahwa warna teks dalam tabel telah berubah menjadi hijau

Tambahkan beberapa gambar latar belakang ke halaman web menggunakan pemilih universal. Pada flash drive di folder CSS, kami memiliki file gambar dengan nama gambar dan ekstensi .jpg

Dalam file gaya selector_type.css, tambahkan baris * background-image: url (image.jpg)

Akibatnya, halaman web akan mengambil bentuk berikut

Pertimbangkan jenis pemilih yang terakhir, seperti pemilih yang turun. Pemilih anak cocok dengan elemen yang merupakan turunan dari elemen lain. Misalnya, dalam ketiga paragraf (tag

dan

) lampirkan frasa "dokumen HTML" dan "aturan CSS" di antara tag ... , seperti yang ditunjukkan di bawah ini. Dalam hal ini, tag akan menjadi turunan dari tag

. Tag ubah font dari frasa "dokumen HTML" dan "aturan CSS" menjadi miring

Kombinasi "dokumen HTML" dan "aturan CSS" dalam huruf miring

Ubah warna teks dari frasa "dokumen HTML" dan "aturan CSS" menjadi merah menggunakan pemilih keturunan. Untuk melakukan ini, dalam file gaya selector_type.css, tambahkan baris p I color: red

Akibatnya, halaman web akan mengambil bentuk berikut

Lanjutan dalam artikel: Hampir rumit atau belajar CSS3. Bagian 3. Cara mengatur warna dalam CSS. Tetapkan transparansi ke elemen dalam dokumen HTML

Kategori