CSS mengandungi peraturan gaya yang ditafsirkan oleh penyemak imbas dan kemudian digunakan pada elemen yang sesuai dalam dokumen anda. Peraturan gaya terdiri daripada tiga bahagian:

• Pemilih ialah teg HTML yang gaya akan digunakan. Ini boleh menjadi sebarang teg, contohnya,

  atau dan lain-lain.

  Harta benda ialah jenis atribut tag HTML. Ringkasnya, semua atribut dalam HTML ditukar kepada sifat CSS. Ini boleh menjadi warna, sempadan, padding, dsb.

  Maknanya- ditetapkan kepada hartanah. Sebagai contoh, sifat warna boleh menjadi hijau, #008000, dsb.

  Sintaks untuk pemilih dalam CSS adalah seperti berikut:

  Pemilih ( sifat: nilai )

  Contoh. Anda boleh menetapkan sempadan jadual seperti ini:

  Jadual ( sempadan: 2px pepejal #FF8C00; )

  Di sini sintaks pemilih ialah: jadual ialah pemilih dan sempadan ialah sifat dan 2px pepejal #FF8C00 ialah nilai bagi sifat itu.

  Anda boleh menentukan pemilih dalam pelbagai cara mengikut kesesuaian anda. Di bawah ialah jenis pemilih.>

  Pemilih standard

  Ini ialah pemilih yang sama yang anda lihat di atas. Sekali lagi, contoh lain untuk memberi warna kepada semua tajuk peringkat pertama:

  H1 ( warna: #8B4513; )

  Pemilih universal

  Daripada memilih elemen jenis tertentu, pemilih universal agak sepadan dengan nama mana-mana jenis elemen:

  * ( warna: #808080; )

  Peraturan ini memaparkan kandungan setiap elemen dalam dokumen kami dalam warna kelabu.

  Pemilih keturunan atau pemilih bersarang

  Katakan anda ingin menggunakan peraturan gaya pada elemen tertentu hanya apabila ia berada di dalam elemen tertentu, maka pemilih bersarang atau pemilih keturunan akan membantu anda dengan perkara ini. Seperti yang ditunjukkan dalam contoh berikut, peraturan gaya akan digunakan pada elemen hanya apabila ia berada di dalam tag

  .

  Ul em ( warna: #CD5C5C; )

  Pemilih kelas

  Anda boleh menetapkan peraturan gaya untuk elemen berdasarkan atribut kelas. Semua elemen yang mempunyai kelas ini akan diformatkan mengikut peraturan tertentu.

  Biru ( warna: #0000FF; )

  class="biru". Anda boleh membuat pemilih kelas sedikit lebih khusus. Sebagai contoh:

  H1.biru ( warna: #0000FF; )

  dengan atribut class="biru".

  Anda boleh menggunakan berbilang pemilih kelas pada satu elemen. Pertimbangkan contoh berikut:

  Perenggan ini akan diformatkan dengan kelas pusat Dan berani.

  pemilih ID

  Anda boleh menetapkan peraturan gaya untuk elemen berdasarkan atribut id. Semua elemen yang mempunyai ID ini akan diformatkan mengikut peraturan tertentu.

  #biru ( warna: #0000FF; )

  Peraturan ini memaparkan kandungan dalam dokumen kami dalam warna biru untuk setiap elemen dengan atribut id="biru". Anda boleh menjadikan pemilih id lebih spesifik sedikit. Sebagai contoh:

  H1#biru (warna: #0000FF; )

  Peraturan ini memaparkan kandungan dalam warna biru hanya untuk elemen

  dengan atribut id="biru".

  Kuasa sebenar pemilih id ialah apabila ia digunakan sebagai asas untuk pemilih keturunan, contohnya:

  #biru h2 ( warna: #0000FF; )

  Dalam contoh ini, semua tajuk tahap kedua akan muncul dalam warna biru apabila ia berada dalam teg dengan atribut id="biru".

  Pemilih kanak-kanak

  Anda sudah mengetahui pemilih keturunan. Terdapat satu lagi jenis pemilih yang hampir sama dengan pemilih kanak-kanak tetapi mempunyai fungsi yang berbeza, pemilih kanak-kanak. Pertimbangkan contoh berikut:

  Badan > p ( warna: #0000FF; )

  Peraturan ini akan memaparkan semua perenggan dengan warna biru jika ia merupakan anak langsung unsur tersebut . Perenggan lain diletakkan di dalam elemen jenis lain

  atau

  Pemilih bersebelahan Elemen HTML yang mengikut satu sama lain dipanggil elemen bersebelahan. Pertimbangkan contoh berikut: Kuat + em ( warna: #0000FF; ) Peraturan ini akan memaparkan kandungan teg dalam warna biru jika ia datang selepas elemen . Tag lain , tidak datang selepas tag , tidak akan memberi kesan kepada peraturan ini. Pemilih atribut Anda juga boleh menggunakan gaya pada elemen HTML dengan atribut tertentu. Peraturan gaya di bawah akan memadankan semua elemen input yang mempunyai atribut jenis dengan teks nilai: Input ( warna: #0000FF; ) Kelebihan menggunakan pemilih atribut ialah elemen tidak berubah, dan warna hanya digunakan pada medan teks yang diingini. Peraturan berikut digunakan untuk pemilih atribut: p - memilih semua elemen perenggan dengan atribut lang. p - memilih semua elemen perenggan di mana atribut lang mempunyai nilai tepat "ru". p - memilih semua elemen perenggan di mana atribut lang mengandungi perkataan "ru". p - memilih semua elemen perenggan di mana atribut lang mengandungi nilai yang tepat "ru" atau bermula dengan "ru". Beberapa peraturan gaya Anda mungkin perlu menentukan berbilang peraturan gaya untuk satu elemen. Anda boleh menentukan peraturan ini untuk menggabungkan berbilang sifat dan nilai sepadannya ke dalam satu blok, seperti yang ditunjukkan dalam contoh berikut: H1 ( warna: #00CED1; jarak huruf: .2em; transformasi teks: huruf kecil; jidar bawah: 2em; berat fon: 700; ) Semua pasangan sifat dan nilai dipisahkan oleh koma bertitik (;). Anda boleh menyimpannya pada satu baris atau berbilang baris. Untuk kebolehbacaan yang lebih baik, simpannya pada baris yang berasingan. Jangan risau tentang sifat-sifat yang disebutkan dalam blok di atas. Sifat-sifat ini akan dijelaskan dalam pelajaran berikut. Mengumpulkan pemilih dalam CSS Anda boleh menggayakan banyak pemilih jika anda mahu. Hanya pisahkan pemilih dengan koma, seperti yang ditunjukkan dalam contoh berikut: H1, h2, h3 ( warna: #00CED1; jarak huruf: .2em; transformasi teks: huruf kecil; jidar bawah: 2em; berat fon: 700; ) Peraturan gaya ini akan digunakan pada elemen h1, h2 dan h3. Susunan senarai tidak penting apabila mengumpulkan pemilih. Semua elemen dalam pemilih akan mempunyai pengisytiharan yang sepadan digunakan padanya. Anda boleh mengumpulkan id pemilih yang berbeza bersama-sama seperti di bawah: #header, #content, #footer ( kedudukan: mutlak; lebar: 300px; kiri: 250px; ) ". Jadi, pemilih ialah elemen yang pengisytiharan dalam peraturan gaya digunakan. Istilah yang digunakan dalam menerangkan peraturan CSS. Rajah 1. Peraturan CSS biasa. Rajah.2. Contoh peraturan CSS. Secara ringkas tentang sintaks untuk menulis peraturan CSS: Pengisytiharan gaya dalam parvil disertakan dengan pendakap kerinting - () Harta dan nilai dalam pengisytiharan dipisahkan oleh titik bertindih - : Satu pengisytiharan (sepasang pendakap kerinting) boleh mengandungi sebarang bilangan pasangan harta: nilai Pada akhir setiap pasangan harta: nilai letak titik bertitik - ; Selepas pasangan terakhir harta: nilai Titik koma tidak diperlukan. Sintaks CSS tidak sensitif kepada ruang putih (ruang, tab, sempang). Sintaks CSS tidak sensitif huruf besar-besaran. Mana-mana teg HTML boleh bertindak sebagai pemilih; terdapat juga pemilih kelas atau pemilih id. Mari kita lihat semuanya mengikut urutan. Pemilih teg Seperti yang ditulis sebelum ini, sebarang teg boleh menjadi pemilih dalam peraturan CSS. Mari kita lihat satu contoh. hello! Tajuk h2! Dengan cara ini, anda boleh menetapkan satu pengisytiharan kepada kumpulan pemilih. Sebagai contoh, kami mahukan tag tajuk , Dan berwarna biru dan dijajarkan ke tengah blok. Untuk melakukan ini, anda boleh menyenaraikan teg ini dalam pemilih, memisahkannya dengan koma. Berikut ialah contoh kod: Hello h1! Tajuk h2! Entri gaya ini bersamaan dengan kumpulan peraturan berikut: Pemilih keturunan Anda boleh menetapkan peraturan gaya kepada elemen bergantung pada sama ada elemen itu bersarang dalam elemen lain. Jika satu teg bersarang dalam yang lain, maka teg bersarang dipanggil anaknya, dan teg di mana kanak-kanak itu bersarang dipanggil moyangnya. Sebagai contoh, anda perlu menetapkan perenggan Di dalam meja warna teks merah. Untuk menyelesaikan masalah ini, elemen dalam pemilih disusun dalam susunan bersarang dan dipisahkan oleh ruang. Maksudnya, masalah kita diselesaikan seperti ini: hello! Teks perenggan dalam jadual. Teks perenggan di luar jadual. Semua tag Semua jadual dalam dokumen akan memaparkan warna merah. Sila ambil perhatian bahawa tag Terletak di dalam tag juga memaparkan teks dalam warna merah. Malah, bukannya adalah mungkin untuk menentukan teg , sejak tag mesti sentiasa mengandungi tag . Untuk meneroka lebih lanjut pemilih CSS, anda perlu menguasai beberapa istilah mudah yang berkaitan dengan struktur dokumen. Pokok dokumen ialah gambar rajah untuk membina dokumen HTML, menunjukkan susunan teg dan sarangnya di antara satu sama lain. Mari kita berikan contoh skema sedemikian: Pepohon dokumen dengan jelas menunjukkan sambungan dalam dokumen HTML, susunan tag dan sarangnya. Pembangun menggunakannya untuk menulis gaya CSS dan skrip JavaScript. Berikut ialah contoh kod yang sepadan dengan rajah pokok unsur dari Rajah 1. hello! Teks perenggan Dan berlemak. Fasal 1.1 Fasal 1.2 Fasal 1.3 Fasal 2.1 Fasal 2.2 Fasal 2.3 Jadi, terdapat hubungan antara tag dokumen HTML. Ia dinyatakan dalam penyusunan teg atau susunan di mana satu teg mengikut yang lain. Hubungan ini dipanggil ikatan persaudaraan, dan istilah seperti moyang dan keturunan, ibu bapa dan anak, dan istilah "keluarga" lain digunakan untuk merujuk kepada jenis hubungan kekerabatan yang berbeza. Sekarang mari kita lihat semua jenis sambungan. Nenek moyang dan keturunan Nenek moyang ialah unsur yang mengandungi unsur lain iaitu unsur nenek moyang semua orang unsur bersarang di dalamnya. Keturunan ialah unsur yang bersarang dalam unsur lain. Pemilih keturunan telah pun dibincangkan di atas. Ibu bapa dan Anak Induk ialah nenek moyang peringkat pertama (nenek moyang terdekat) sesuatu unsur. Elemen kanak-kanak ialah kanak-kanak peringkat pertama. Elemen ibu bapa boleh mempunyai bilangan anak yang tidak terhad. Dalam pokok unsur kami pada tag elemen kanak-kanak berikut: , , dan satu lagi Unsur adik beradik Unsur abang atau kakak, (adik beradik Inggeris - adik beradik), kumpulan unsur yang mempunyai ibu bapa yang sama. Contohnya, tag , , dan kedua Saudara perempuan, kerana mereka mempunyai ibu bapa yang sama . Elemen Bersebelahan Unsur bersebelahan ialah unsur adik beradik bersebelahan, iaitu unsur yang mempunyai induk sepunya dan terletak bersebelahan dalam pokok unsur. Dalam contoh kami, elemen bersebelahan akan menjadi pasangan: Dan , DAN , Dan Sekarang mari kita kembali kepada pemilih. Pemilih kanak-kanak Apabila kita tidak berminat dengan semua keturunan, tetapi hanya dalam keturunan peringkat pertama, iaitu elemen kanak-kanak, pemilih kanak-kanak digunakan dalam CSS. Untuk menunjukkan bahawa peraturan gaya hanya digunakan pada elemen kanak-kanak, pemilih menggunakan simbol ">". hello! Teks perenggan dalam jadual. Teks perenggan dalam jadual (dalam bekas div). Teks perenggan di luar jadual. Kod HTML untuk contoh ini adalah sama seperti kod contoh untuk pemilih keturunan, hanya peraturan gaya yang berbeza. Hasil daripada menggunakan pemilih kanak-kanak, teks perenggan dalam jadual dalam bekas tidak lagi merah, kerana untuk perenggan ini teg ibu bapa dan tag moyang. Pemilih bersebelahan Pemilih elemen bersebelahan memilih elemen yang bersebelahan serta-merta dengan elemen lain yang ditentukan. Sintaks pemilih ini ialah: pemilih elemen sebelumnya, diikuti dengan tanda "+", diikuti oleh pemilih elemen yang akan dipilih. Mari kita lihat contoh sebenar. Dalam artikel besar yang mengandungi beberapa bahagian yang bertajuk dengan tag , adalah dinasihatkan untuk meningkatkan margin atas (harta margin atas). Lekukan 20px akan menjadikan teks boleh dibaca. Tetapi jika tag datang sejurus selepas itu , dan ini boleh jadi pada permulaan artikel, inden atas di atas teg akan berlebihan. Masalah ini boleh diselesaikan menggunakan pemilih elemen bersebelahan. Berikut ialah kod html dengan contoh cara pemilih elemen bersebelahan berfungsi. hello! Tajuk h2 Tajuk h2 Teks perenggan adalah mengenai pengembaraan yang luar biasa. Nama lain untuk pemilih bersebelahan: pemilih bersebelahan, di sini anda boleh membaca lebih lanjut mengenai jenis pemilih ini. Pemilih berkaitan Pemilih adik beradik adalah serupa dengan pemilih jiran, cuma ia digunakan pada semua elemen yang ditentukan selepas elemen yang dipilih. Sintaks pemilih adik beradik ialah pemilih elemen sebelumnya, diikuti dengan tanda "~" (tilde), diikuti dengan pemilih elemen untuk dipilih. Contoh penggunaan pemilih kakak. hello! Teks perenggan No. 1 adalah mengenai pengembaraan yang luar biasa. Teks perenggan No. 2 adalah mengenai pengembaraan yang luar biasa. Teks div No. 1 tentang pengembaraan yang luar biasa. Teks perenggan No. 3 adalah mengenai pengembaraan yang luar biasa. Daripada contoh itu jelas bahawa selepas teks tag perenggan No. 3 juga berwarna merah. Iaitu, untuk menetapkan gaya, elemen kakak tidak perlu datang selepas satu sama lain. Pemilih universal Jika pemilih peraturan CSS mengandungi aksara "*", maka peraturan ini digunakan untuk semua elemen halaman tanpa pengecualian. Sukar untuk membayangkan kes di mana peraturan sedemikian masuk akal. Tetapi terdapat satu kes apabila pembangun mahu "sifar" semua inden luaran dan dalaman. Kemudian anda perlu menggunakan gaya ini: * ( margin: 0; padding: 0; ) Tetapi aksara "*" boleh digunakan dalam pemilih kompaun. Ul * (warna: merah) Kod ini memberikan warna teks semua keturunan unsur merah . Kelas Kelas dalam CSS ialah cara paling biasa untuk menetapkan gaya kepada sekumpulan elemen. Kelas digunakan apabila anda perlu menetapkan gaya yang berbeza untuk elemen dokumen HTML yang dibuat oleh satu teg. Sintaks kelas: Tag.Nama Kelas Dalam pemilih gaya, teg yang dikehendaki ditulis terlebih dahulu, kemudian nama kelas ditunjukkan melalui titik. Nama kelas mesti bermula dengan huruf Latin dan boleh mengandungi aksara sempang (-) dan garis bawah (_). Contoh apabila kelas digunakan: pada tapak web, menu atas, sisi dan bawah dibuat menggunakan teg , ketiga-tiga menu ini perlu mencipta tiga gaya yang berbeza. Dalam CSS, tiga kelas dicipta: ul.menu-top, ul.menu dan ul.menu-bottom. Dalam badan dokumen HTML, pelbagai menu dicipta dengan kelas yang ditentukan dalam atribut kelas: class="menu-top">... class="menu">... class="menu-bottom">... Kelas ialah alat CSS yang kerap digunakan. Ia mudah dan juga menjadikan kod gaya lebih mudah dibaca. Anda boleh membuat kelas yang akan digunakan pada mana-mana teg. Pemilih universal digunakan untuk ini. *.Nama kelas (property1: value; property2: value; ...) Entri ini boleh dipendekkan dengan mengalih keluar simbol "*". Nama kelas (property1: value; property2: value; ...) Pemilih ID (pengecam) Pengecam ialah jenis pemilih yang menentukan nama unik untuk elemen. Unik bermakna berlaku sekali dalam kod dokumen. Anda boleh mencipta gaya menggunakan pengecam, tetapi tujuan utama mereka adalah untuk mengaksesnya menggunakan skrip. Apabila menerangkan pengecam, simbol cincang (#) ditunjukkan dahulu, diikuti dengan nama pengecam. #Nama pengecam(harta1: nilai; harta2: nilai; ...) Sama seperti nama kelas, nama pengecam mesti bermula dengan huruf Latin dan boleh mengandungi aksara sempang (-) dan garis bawah (_). Pemilih atribut Terdapat beberapa teg dalam HTML yang mengubah kesannya bergantung pada atribut. Contohnya, tag Bergantung pada nilai atribut jenis, ia boleh mencipta medan borang, butang dan elemen bentuk lain. Jadi jika anda menggunakan gaya pada pemilih input, ia akan mengubah semua elemen bentuk yang dibuat oleh teg itu. Untuk mengawal elemen sedemikian dengan tepat, CSS menyediakan pemilih atribut. Terdapat pelbagai jenis pemilih atribut. Menggunakan pemilih atribut, anda boleh menggayakan teg jika ia mempunyai atribut tertentu atau jika atribut teg tertentu mempunyai nilai tertentu. Pemilih atribut ialah topik artikel besar yang berasingan. Untuk tujuan artikel ini, kami hanya akan ambil perhatian bahawa ia wujud. Kelas pseudo Satu lagi topik besar dalam CSS ialah kelas pseudo. Awalan "pseudo" menandakan khayalan atau kepalsuan. Hakikatnya ialah unsur-unsur dokumen html berubah bergantung pada tindakan pengguna. Contohnya, pautan berubah bergantung pada masa anda mengarahkan kursor ke atasnya. Menggunakan kelas pseudo, kesan dinamik dicipta pada halaman. Sintaks kelas pseudo: Pemilih:kelas pseudo(harta1: nilai; harta2: nilai; ...) Anda boleh menggunakan kelas pseudo pada id atau pemilih kelas (ul.menu:hover (warna : hijau )). Untuk pemula, saya perhatikan: sementara pembangun menghasilkan nama untuk nama kelas dan pengecam sendiri, maka nama kelas pseudo dalam CSS ialah perkataan simpanan. Kelas pseudo :active melaksanakan peraturan gaya jika elemen aktif. Sebagai contoh, kursor dilegar pada pautan dan klik dibuat. Pseudo-class :hover - kursor tetikus hanya dilegar pada elemen, contohnya pautan. Terdapat banyak lagi kelas pseudo. Topik kelas pseudo boleh diliputi sepenuhnya dalam artikel berasingan. Di sini kita telah menyentuhnya secara dangkal sahaja. unsur pseudo Menggunakan elemen pseudo, anda boleh menambah kandungan tambahan pada kandungan halaman yang tiada dalam kod sumber. Anda juga boleh menukar sebahagian daripada elemen, seperti huruf pertama dalam perenggan. Iaitu, cipta elemen html khayalan - huruf pertama dengan gaya paparannya sendiri. Elemen pseudo CSS juga merupakan topik yang luas yang memerlukan artikel berasingan untuk dibincangkan sepenuhnya. Sintaks pseudo-elemen adalah sama seperti pseudo-class: Pemilih:unsur pseudo(harta1: nilai; harta2: nilai; ...) Terdapat tujuh jenis pemilih secara keseluruhan. ini: Pemilih teg Pemilih kelas pemilih ID Pemilih universal Pemilih atribut Pemilih kelas pseudo Pemilih unsur pseudo Yang paling mudah ditulis sebagai nama tag tanpa kurungan sudut. Sebagai contoh, div. Dengan entri ini kami mengatakan bahawa keseluruhan kandungan semua tag dokumen atau dokumen kami akan ditulis dalam fon merah. Jika kita perlu memberikan satu perenggan beberapa, katakan, latar belakang. Kemudian kita boleh menggunakan pemilih kelas. Tetapi sebelum menulis peraturan, kita perlu dalam tag Tulis atribut perenggan ini kelas, dalam maksud yang anda boleh menulis apa sahaja yang anda mahukan (selain huruf Latin, anda boleh menggunakan tanda sempang dan nombor), tetapi anda perlu memberi nama kepada pemilih kami supaya kemudiannya jelas apa yang dirujuk. Kemudian dalam helaian gaya, atau dalam teg dokumen kami antara kita menulis titik, dan selepas itu nilai atribut kelas, dan dalam pendakap kerinting kami menetapkan peraturan untuk perenggan ini. Jika dalam dokumen: Itu dalam helaian gaya: Pravilo ( … } Pada masa yang sama, elemen dokumen yang berbeza boleh mempunyai nilai atribut kelas yang sama. Iaitu, kita boleh menetapkan beberapa teg kepada kelas yang sama dan kandungannya akan diformalkan dalam beberapa cara. Ini membolehkan kami mencipta peraturan universal, contohnya, untuk menyerlahkan bahagian penting teks dan hanya menambah atribut dalam dokumen kelas dalam tag. Perkara pertama yang patut disebut ialah nilai atribut id dalam HTML adalah unik. Tidak seperti kelas, kami tidak boleh menetapkannya kepada mana-mana teg, tetapi hanya kepada satu! Dalam helaian gaya ia digambarkan sebagai tanda cincang, dan dalam dokumen anda perlu menambah atribut id dengan beberapa nilai pada teg. Jika dalam dokumen: Itu dalam helaian gaya: #pravilo( … } Pemilih universal ditulis sebagai asterisk. Jika anda menetapkan peraturan untuk pemilih ini dalam jadual, maka peraturan ini akan digunakan pada kandungan semua teg. *{ … } Keempat-empat jenis pemilih ini berfungsi dalam semua penyemak imbas hari ini. Tetapi terdapat pemilih yang tidak berfungsi di mana-mana, contohnya, dalam Internet Explorer versi 7.6 dan lebih rendah. Mereka ditulis seperti ini: { … } Dengan entri ini kami mengatakan bahawa semua yang terkandung dalam tag yang mempunyai atribut tajuk, akan mempunyai bentuk yang ditulis dalam kurungan kerinting. Selain itu, tidak kira sama ada sifat ini mempunyai makna. Ia boleh kosong dan ditulis seperti ini: Bagaimanapun kepada tag Peraturan yang ditulis dalam pemilih akan digunakan. Jika anda mahu peraturan digunakan pada atribut (contohnya, tajuk) dengan nilai tertentu, maka anda harus menulisnya seperti ini: { … } Jika anda mahu peraturan digunakan pada kandungan teg tertentu dengan beberapa atribut (contohnya, tajuk), mempunyai makna tertentu, maka hendaklah ditulis seperti ini: p( … } Jika kita mahu peraturan digunakan pada kandungan tag dengan atribut tajuk(atau yang lain), yang maknanya mengandungi beberapa perkataan keseluruhan, maka anda perlu menulisnya seperti ini: { … } tajuk(atau yang lain), dalam makna yang tidak terdapat keseluruhan perkataan, tetapi hanya beberapa sekeping teks (contohnya, perkataan Caspian mengandungi Caspian). Kemudian anda perlu menulisnya seperti ini: { … } Jika kita mahu peraturan digunakan pada kandungan tag yang mempunyai atribut tajuk(atau yang lain), maknanya bermula dengan beberapa simbol (huruf). Kemudian anda perlu menulisnya seperti ini: { … } Jika kita mahu peraturan digunakan pada kandungan tag yang mempunyai atribut tajuk(atau yang lain), yang maknanya berakhir dengan beberapa simbol (huruf). Kemudian anda perlu menulisnya seperti ini: { … } Pemilih atribut ialah alat yang sangat berkuasa yang, malangnya, tidak digunakan secara meluas hari ini, "terima kasih" kepada Microsoft dan IE 6.7 dan ke bawahnya. Tetapi, tidak lama lagi, apabila IE versi 6.7 dan lebih rendah akhirnya mati, pemilih ini akan menjadi sebahagian daripada CSS dan akan digunakan secara meluas. Pemilih kelas pseudo bertanggungjawab untuk penampilan kandungan elemen apabila ia berada dalam keadaan tertentu. Pemilih ini ialah :link, :visited, :active, :hover, :focus dan :first-child. Dua yang pertama hanya berkaitan dengan pautan, i.e. kepada kandungan tag , dan selebihnya boleh digunakan pada mana-mana teg yang mempunyai kandungan. :pautan memformat pautan yang disentuh pengguna. a:pautan (warna:biru) Dengan entri ini kami mengatakan bahawa semua pautan dalam dokumen atau dokumen yang tidak disentuh oleh pengguna akan diwarnakan biru. a:dilawati (warna:merah;) :aktif menghiasi elemen aktif (pada saat klik tetikus). Boleh digunakan pada mana-mana elemen, tetapi dalam IE 6 hanya berfungsi untuk hiperpautan. p:aktif (warna:merah) Dengan entri ini kami mengatakan bahawa semua perenggan pada saat mengkliknya dengan tetikus akan diwarnakan merah (huruf). :hover – menghiasi elemen apabila pengguna melayang di atasnya dengan tetikus. Juga boleh digunakan untuk mana-mana elemen, tetapi dalam IE 6 hanya berfungsi untuk hiperpautan. p:fokus (warna:merah;) Apabila anda menekan Tab, teks dalam elemen akan menjadi merah :first-child – menetapkan peraturan untuk “anak-anak” pertama semua elemen. Tidak berfungsi dalam IE 6. Kami akan bercakap lebih lanjut tentang kanak-kanak dan ibu bapa dalam artikel lain, tetapi buat masa ini saya hanya akan mengatakan bahawa tag yang berada di dalam tag lain ialah "anak"nya. Sebagai contoh, kami mempunyai kod: Apabila dilihat dalam penyemak imbas, kandungan teg pertama Ia akan bertukar menjadi merah. Terdapat hanya dua pemilih unsur pseudo. Ini adalah: baris pertama dan: huruf pertama :baris pertama – baris pertama (baris) :huruf pertama – watak pertama Jika kita menulis: p:baris pertama (warna:biru), kemudian Dalam semua perenggan dokumen atau dokumen, baris pertama akan diwarnakan biru. Jika kita menulis: p:huruf pertama (warna:biru), kemudian dalam semua perenggan huruf pertama akan diwarnakan biru. Kedua-dua pemilih ini tidak berfungsi dalam IE 6. Nampaknya itu semua tentang pemilih; jika anda terlepas sesuatu atau membuat kesilapan di suatu tempat, tulis dalam ulasan kepada bahan tersebut. Pemilih digunakan untuk mengenal pasti secara unik elemen dalam dokumen HTML yang kami mahu gunakan gaya CSS tertentu. Pemilih mengikut elemen; Pemilih mengikut kelas; Pemilih mengikut id; Pemilih konteks; Pemilih elemen Sehingga ini, kami telah bekerja dengan pemilih ini. Nama elemen html yang kami mahu gunakan gaya ini telah digunakan sebagai pemilih. Itu. Setelah menulis kelas sebagai contoh untuk perenggan (P), semua perenggan pada halaman memperoleh gaya kelas ini. P( saiz fon: 12px } Sekarang bayangkan situasi di mana anda perlu membuat perenggan pertama dalam satu gaya, yang kedua dalam yang lain, yang ketiga dalam yang ketiga, dsb. Di sini ia akan membantu kami pemilih mengikut kelas. Pemilih mengikut kelas Mari lihat cara membuat kelas generik dalam CSS. Dan sangat mudah untuk melakukan ini: mula-mula kita meletakkan noktah, kemudian dengan serta-merta, tanpa ruang, kita menulis nama kelas, dan kemudian gaya dalam pendakap kerinting. Sebagai contoh: .hijau( font-family: arial, verdana, sans-serif; saiz fon: 12px; warna:hijau; } Bagaimana untuk menggunakan gaya ini? Katakan kita mahu menggunakan gaya ini pada perenggan tertentu dalam dokumen. Inilah yang akan kelihatan seperti dalam html: Teks perenggan... Seperti yang anda lihat, atribut digunakan kelas dengan maksud nama gaya. CONTOH: Ini adalah perenggan biasa, ia menggunakan pemilih elemen Perenggan ini berwarna hijau kerana kelas telah digunakan padanya Dan perenggan ini dalam fon yang lebih besar dan merah Perenggan ini sekali lagi normal, mengikut kelas pemilih elemen p( font-family:arial,verdana,sans-serif; saiz fon:18px; } .hijau (warna:hijau;) .merah besar( saiz fon:28px; warna:merah; } Kami mula-mula menentukan gaya asas untuk semua perenggan (pemilih mengikut elemen), dan kemudian, jika kami ingin menukar sesuatu dalam mana-mana perenggan, cipta gaya khas untuknya (pemilih mengikut kelas) dan tetapkan kepada perenggan ini. Apabila kita mencipta kelas yang sangat istimewa ini, kita mesti menulis di sana hanya sifat-sifat yang ingin kita tambah atau ubah berkaitan dengan gaya asas untuk elemen ini. Kelas daripada contoh di atas boleh digunakan bukan sahaja pada perenggan, tetapi juga, sebagai contoh, pada tajuk, atau, sebagai contoh, pada sel jadual, atau pada keseluruhan jadual; ringkasnya, ia boleh digunakan di mana sahaja mereka boleh. mempengaruhi sesuatu (dalam kes ini di mana sahaja terdapat parameter warna dan teks). Anda boleh membuat kelas bertindak hanya pada elemen tertentu (contohnya, perenggan) dengan menyatakan nama elemen sebelum titik: P.hijau (warna:hijau;) Sekarang kelas hijau tidak akan bertindak pada apa-apa selain elemen P. Pemilih mengikut id Pemilih ini digunakan jika anda perlu memilih satu elemen tunggal, unik, berbeza daripada semua yang lain dalam dokumen. Sebagai contoh, mari kita serlahkan tajuk pertama pada halaman dengan cara tertentu: bahagian html: <Н1 id="firstheader">Tajuk pertama di halaman css - bahagian: H1#firstheader ( warna: merah; font-weight: bold; text-align: center ) Seperti yang anda lihat, dalam bahagian html, bukannya atribut kelas, atribut id digunakan, dan dalam css, bukannya titik, tanda # digunakan. Pada dasarnya, perkara yang sama boleh dilakukan menggunakan pemilih oleh kelas J Pemilih konteks Ini adalah perkara yang sangat berguna. Katakan kita mempunyai halaman dengan jadual dan perenggan teks, dan kedua-duanya dalam jadual dan dalam perenggan terdapat perkataan dalam huruf tebal. Adalah perlu untuk memastikan bahawa perkataan dalam perenggan yang diserlahkan dalam huruf tebal menjadi hijau. Jadi inilah: p kuat (warna:hijau) Itu. pada mulanya P kemudian ruang, kemudian KUAT, dan barulah gayanya. Baris ini berbunyi seperti ini: Jika di dalam elemen P ada unsur KUAT kemudian tetapkan gaya hijau kepada elemen kuat. Bersarang boleh dari mana-mana peringkat. Berikut ialah contoh lain: "Jika tiba-tiba di dalam sel meja ( td), perenggan ( P), di dalamnya akan terdapat perkataan yang diserlahkan dalam huruf tebal ( KUAT), maka biarkan perkataan ini menjadi merah! " td p kuat (warna:merah;) Vlad Merzhevich Pengecam (juga dipanggil "pemilih ID") mentakrifkan nama unik untuk elemen, yang digunakan untuk menukar gayanya dan merujuknya melalui skrip. Sintaks untuk menggunakan pengecam adalah seperti berikut. Pemilih universal Vlad Merzhevich Kadangkala anda perlu menetapkan satu gaya untuk semua elemen halaman web pada masa yang sama, contohnya, tetapkan gaya fon atau teks. Dalam kes ini, pemilih universal yang sepadan dengan mana-mana elemen halaman web akan membantu. Simbol asterisk (*) digunakan untuk menandakan pemilih universal, dan secara umum sintaksnya adalah seperti berikut. * (Penerangan peraturan gaya) Pemilih atribut Vlad Merzhevich Banyak teg berbeza dalam kesannya bergantung pada atribut yang mereka gunakan. Contohnya, tag boleh mencipta butang, medan teks dan elemen bentuk lain hanya dengan menukar nilai atribut jenis. Walau bagaimanapun, menambah peraturan gaya pada pemilih INPUT akan menggunakan gaya secara serentak pada semua elemen yang dibuat menggunakan teg ini. Untuk mengawal gaya elemen sedemikian secara fleksibel, pemilih atribut telah diperkenalkan ke dalam CSS. Pemilih kanak-kanak Vlad Merzhevich Elemen anak ialah elemen yang terletak terus di dalam elemen induk. Untuk lebih memahami hubungan antara elemen dokumen, mari kita lihat sedikit kod (contoh 12.1). Contoh 12.1. Bersarang elemen dalam dokumen HTML5 CSS 2.1 IE Cr Op Sa Fx Pemilih bersebelahan Vlad Merzhevich Elemen halaman web dipanggil bersebelahan apabila ia segera mengikuti satu sama lain dalam kod dokumen. Mari kita lihat beberapa contoh hubungan unsur. Lorem ipsum dolor duduk amet. Dalam contoh ini tag adalah anak kepada tag Kerana ia berada di dalam bekas ini. Masing-masing Bertindak sebagai ibu bapa . Pemilih konteks Vlad Merzhevich Apabila membuat halaman web, anda sering perlu meletakkan beberapa teg di dalam yang lain. Untuk memastikan gaya untuk teg ini digunakan dengan betul, pemilih yang berfungsi hanya dalam konteks tertentu akan membantu. Sebagai contoh, tetapkan gaya untuk teg hanya apabila ia terletak di dalam bekas Dengan cara ini anda boleh menetapkan gaya secara serentak untuk teg individu, serta untuk teg yang berada di dalam tag yang lain. ARTIKEL BERKAITAN Perumahan Bagaimana untuk menetapkan semula Samsung dengan cara yang berbeza Perumahan Bagaimana untuk mengambil tangkapan skrin pada Samsung Bekalan kuasa Bagaimana untuk memindahkan aplikasi Android ke kad memori? papan induk Meizu U10 - Ciri teknikal Ulasan Meizu u10 dalam bahasa Rusia Internet Mengapakah Vodafone mengikuti jejak MTS dan memperkenalkan pemantauan? Multimedia Satu tetapan semula kilang M8 dan tetapan semula kata laluan Bekalan kuasa Dari dunia satu demi satu (Berita terbaik, terpilih dan eksklusif) phablets Xiaomi Mi Mix Multimedia Telefon Pintar Mi4 Xiaomi: ulasan dan spesifikasi teknikal Kajian Xiaomi mi4 hitam Bekalan kuasa Solo pada papan kekunci Bagaimana untuk belajar menaip sentuh dengan cepat pada papan kekunci Kami mengesyorkan Kad video Bagaimana untuk memasang fail XAP pada telefon pintar Windows Phone Pemilik gembira telefon pintar berdasarkan sistem pengendalian Windows Phone 8.0 tidak semua tahu cara memasang *.xap files pada telefon pintar dengan... Memasang perisian tegar rasmi pada Samsung Galaxy J5 SM-J500F Perumahan Perisian tegar Spade skrin tinggi, pemulihan, akar Bekalan kuasa Papan kekunci solo Solo dalam bahasa Rusia Pemantau Format fail video manakah yang lebih baik daripada yang lain? Windows 7 Pengklonan cakera keras Windows 7 Bagaimana untuk menyambung cakera keras dari komputer ke komputer riba (netbook) Bagaimana untuk menyambungkan hdd biasa ke komputer riba Windows 7 Perbandingan model pelbagai sukan daripada jenama jam tangan GARMIN, POLAR dan SUUNTO Sejarah syarikat Finland Polar Electro O Bagaimana untuk menukar enjin carian lalai Radio peranti mudah alih ialah penerima FM terbina dalam Bagaimana untuk menetapkan semula Samsung dengan cara yang berbeza Bagaimana untuk menetapkan semula Samsung dengan cara yang berbeza Bagaimana untuk mengambil tangkapan skrin pada Samsung Bagaimana untuk memindahkan aplikasi Android ke kad memori? Meizu U10 - Ciri teknikal Ulasan Meizu u10 dalam bahasa Rusia Mengapakah Vodafone mengikuti jejak MTS dan memperkenalkan pemantauan? Satu tetapan semula kilang M8 dan tetapan semula kata laluan Dari dunia satu demi satu (Berita terbaik, terpilih dan eksklusif) phablets Xiaomi Mi Mix Telefon Pintar Mi4 Xiaomi: ulasan dan spesifikasi teknikal Kajian Xiaomi mi4 hitam Solo pada papan kekunci Bagaimana untuk belajar menaip sentuh dengan cepat pada papan kekunci Bagaimana untuk memasang fail XAP pada telefon pintar Windows Phone Memasang perisian tegar rasmi pada Samsung Galaxy J5 SM-J500F Perisian tegar Spade skrin tinggi, pemulihan, akar Papan kekunci solo Solo dalam bahasa Rusia Format fail video manakah yang lebih baik daripada yang lain? Hak Cipta 2024 - Pembaikan komputer dan komputer riba. Kad video, cakera keras, Internet, monitor.