Penjelasan terperinci tentang kemahiran tutorial _html5 aplikasi HTML5 CSS3

Pereka web boleh mencapai beberapa perkara menarik menggunakan HTML4 dan CSS2.1. Kami boleh melengkapkan struktur logik dokumen dan mencipta laman web yang kaya dengan kandungan tanpa menggunakan reka letak berasaskan jadual lama. Kami boleh menambah gaya yang cantik dan halus pada tapak web kami tanpa menggunakan tag Malah, keupayaan reka bentuk semasa kami telah membawa kami jauh dari era perang pelayar yang dahsyat itu, protokol proprietari dan halaman web hodoh yang penuh dengan kelipan, skrol dan kilat.

Walaupun kini kami biasanya menggunakan HTML4 dan CSS2.1, kami boleh melakukan yang lebih baik! Kami boleh menyusun semula kod kami dan menjadikan kod halaman kami lebih semantik. Kami boleh mengurangkan jumlah kod penggayaan yang memberikan halaman rupa yang cantik dan menjadikannya lebih berskala. Kini, HTML5 dan CSS3 sedang menunggu untuk semua orang. Mari lihat sama ada mereka benar-benar boleh membawa reka bentuk kami ke peringkat seterusnya...

Dulu, pereka bentuk sering menggunakan reka letak berasaskan jadual tanpa sebarang semantik. Tetapi akhirnya, terima kasih kepada inovator seperti Jeffrey Zeldman dan Eric Meyer, pereka pintar perlahan-lahan menerima reka letak

yang agak lebih semantik dan bukannya reka letak meja dan mula memanggil helaian gaya luaran. Tetapi malangnya, reka bentuk web yang kompleks memerlukan banyak kod struktur teg yang berbeza, kami memanggilnya sindrom "

-soup". Mungkin anda biasa dengan kod berikut:

Salin kodKodnya adalah seperti berikut:

Demonstrasi Sup Div

Lorem ipsum text bla bla bla. ;

Lorem ipsum text bla bla bla.

Lorem ipsum text bla bla

Tag: HMTL, kod, demo

class=" aside">

Maklumat Tangensial

kandungan"> ;

Lorem ipsum text bla bla bla.

Lorem ipsum text bla bla bla.

Lorem teks ipsum bla bla bla.

Walaupun ini agak berat hati, contoh di atas masih boleh menggambarkan bahawa menggunakan HTML4 untuk mengekod reka bentuk yang kompleks masih terlalu banyak (sebenarnya, xHTML1.1 tidak lebih daripada itu). Tetapi apa yang mengujakan ialah HTML5 menyelesaikan sindrom "

-soup" dan memberi kita satu set elemen struktur baharu. Elemen HTML5 baharu ini mempunyai semantik yang lebih terperinci untuk menggantikan teg

yang tidak bermakna itu dan pada masa yang sama menyediakan cangkuk CSS "semula jadi" untuk panggilan CSS.

Berikut ialah contoh penyelesaian HTML5:





Salin kod


Kod tersebut adalah seperti berikut:

Demonstrasi Sup Div

Disiarkan pada 11 Julai 2009

Lorem ipsum text bla bla bla.

Lorem ipsum text bla bla bla.

Lorem ipsum text bla bla bla.

Tag: HMTL, kod, tunjuk cara

Maklumat Tangensial

Lorem ipsum text bla bla bla.

Lorem ipsum text bla bla bla.

Lorem ipsum text bla bla bla.

Tag: HMTL, kod, tunjuk cara

跟class属性说再见，欢迎整洁的标签　　

      结合了富有新的语义化标记的HTML5，CSS3为web设计师们的网页提供了神一與的设计师们的网页提供了神一與的家一與的。我们将得到更多的对文档代码的控制权，有了CSS3的能量，我们的控制权将趋于无穷大！

　　即使没有那些高级的CSS选择器，我们仍然可以通过强大的HTML5条调用不得同这类属性。像以往的DIV布局，我们在css中可能要这样调用: div #berita    {}

复制代码代码如下:

div.section {>} div.header {}
div.content {}
div.footer {}
div.aside {}

我们再来看看基于HTML5的实例: bahagian {}

复制代码代码如下:

artikel {>} pengaki {}
ketepikan {}


Ini adalah kemajuan, tetapi masih terdapat beberapa isu yang perlu diselesaikan. Dalam contoh

, kita perlu memanggil elemen dalam halaman melalui atribut kelas atau id. Logik ini akan membolehkan kami menggunakan gaya pada mana-mana elemen dalam dokumen, sama ada secara keseluruhan atau secara individu. Contohnya, dalam contoh

.section dan .content elemen mudah diletakkan. Tetapi dalam contoh HTML5, akan terdapat banyak elemen bahagian dalam dokumen sebenar. Sebenarnya, kita boleh menambah beberapa pemilih atribut khusus untuk memanggil elemen bahagian yang berbeza itu, tetapi syukurlah, saya tidak mempunyai beberapa pemilih CSS lanjutan untuk menyasarkan elemen bahagian yang berbeza sekarang.

Jangan gunakan kelas dan id untuk mencari elemen HTML-5

Sekarang mari kita lihat cara mencari tika elemen halaman HTML5 tanpa menggunakan kelas dan id Kita boleh menggunakan tiga pemilih CSS untuk mencari dan mengenal pasti elemen dalam contoh itu. Seperti berikut:

Pemilih keturunan: [CSS 2.1]: EF
Pemilih adik beradik: [CSS 2.1]: E F
Pemilih anak: [CSS 2.1]: E >

Mari kita lihat cara meletakkan elemen bahagian dalam dokumen tanpa menggunakan kelas dan id:

Cari elemen paling luar

Memandangkan contoh kami bukan set lengkap kod HTML5, kami menganggap bahawa terdapat elemen

Dalam kes ini, kita boleh mencari

paling luar seperti yang ditunjukkan dalam kod berikut:

Salin kodKod tersebut adalah seperti berikut:

bahagian navigasi badan {}

Cari elemen seterusnya

Sebagai satu-satunya elemen subset segera di bawah elemen ini mungkin diletakkan seperti ini:

Salin kodKod tersebut adalah seperti berikut:

bahagian>bahagian {}

Letakkan elemen

Terdapat banyak cara untuk mencari elemen tetapi kaedah yang paling mudah sudah tentu ialah pemilih keturunan:

Salin kodKodnya adalah seperti berikut:

artikel bahagian bahagian {}

Meletakkan

, dan

Tiga elemen ini muncul di dua tempat masing-masing, satu berada dalam elemen Perbezaan ini membolehkan kami mencari setiap elemen dengan mudah.

Salin kodKodnya adalah seperti berikut:

pengepala artikel {}

bahagian artikel {}
pengaki artikel {}

Atau takrifkan bersama:

Salin kodKod tersebut adalah seperti berikut:

pengepala bahagian bahagian {}

bahagian bahagian bahagian {}
pengaki bahagian bahagian {}

Setakat ini, kami telah menggunakan pemilih CSS2.1 untuk mengecualikan semua kelas dan id. Jadi mengapa kita masih perlu menggunakan CSS3? Saya gembira anda bertanya...

Kedudukan lanjutan elemen HTML5 menggunakan CSS3

Walaupun kami telah menggunakan pemilih CSS2.1 untuk mengecualikan semua kelas dan id, jelas terdapat banyak situasi yang lebih kompleks yang memerlukan pemilih lanjutan CSS3 untuk diselesaikan. Mari belajar cara menggunakan CSS3 untuk meletakkan elemen halaman tanpa menggunakan atribut kelas dan id yang tidak berguna dengan melengkapkan contoh berikut.

Cari semua siaran menggunakan ID siaran (siaran) unik

Wordpress memberikan kami output kod sumber untuk setiap siaran yang mengandungi ID. Maklumat ini biasanya digunakan untuk navigasi dan/atau memahami maksud bahan, tetapi CSS3 boleh menggunakan ID unik ini untuk menggayakan siaran ini. Sudah tentu, anda boleh menambah atribut class="post" pada setiap siaran seperti biasa, tetapi itu akan mengalahkan tujuan latihan kami (di samping itu tidak menyeronokkan). Menggunakan "Pemilih Padanan Substring", kita boleh mencari semua log dan elemen berbezanya seperti yang ditunjukkan di bawah.

Salin kodKodnya adalah seperti berikut:

article[id*=post-] {} /* Cari semua log*/
article[id*=post-] header h1 {} /* Cari semua log teg h1*/
artikel[id*=post-] bahagian p {} /* Cari teg p dalam semua log*/

Kami masih boleh meletakkan elemen komen dan anak mereka dengan cara yang sama.

Salin kod

Kod tersebut adalah seperti berikut:

artikel[id*=komen -] { } /* Cari semua ulasan*/
artikel[id*=komen-] pengepala h1 {} /* Cari teg h1 dalam semua ulasan*/
artikel[id*=komen-] bahagian p { } / * Cari tag p dalam semua komen*/

Cari beberapa bahagian atau artikel tertentu

Terdapat banyak blog dengan jumlah log dan ulasan yang besar akan terdiri daripada Untuk mencari elemen atau tertentu, kita perlu beralih kepada pemilih ":nth-child":

Salin kod

Kod adalah seperti berikut:

bahagian:nth-child( 1) { } /* Pilih */
artikel:nth-child(1) {} /* Pilih pertama */
bahagian:nth-child(2) { } /* Pilih */
artikel:nth-child(2) {} /* Pilih kedua */

Begitu juga, kita boleh menggunakan pemilih ":nth-last-child" untuk mencari beberapa elemen dalam susunan terbalik.

Salin kod

Kod tersebut adalah seperti berikut:

bahagian:nth-last- child(1 ) {} /* Pilih */
artikel:nth-last-child(1) {} /* Pilih

section:nth-last-child(2) {} /* Pilih second to last

*/
article:nth-last-child(2) {} /* Pilih second to last */

Gunakan lebih banyak cara untuk memilih elemen tertentu

Satu lagi cara untuk memilih elemen tertentu dalam HTML5 (seperti pengepala, bahagian dan pengaki) adalah dengan memanfaatkan pemilih ":only-of-type". Memandangkan elemen HTML5 ini sering muncul lebih daripada sekali di banyak tempat, kaedah ini mudah apabila kita ingin mencari teg yang hanya muncul sekali di bawah elemen induk. Contohnya, perkara yang ingin kita pilih ialah satu-satunya elemen dalam elemen tertentu, seperti kod berikut:

Salin kod

Kodnya adalah seperti berikut:

>
Cari elemen bahagian ini
bahagian> ; dan elemen bahagian


Kita hanya boleh menggunakan pemilih satu baris berikut:






Salin kod

Kod tersebut adalah seperti berikut:

bahagian>bahagian:sahaja- jenis {}

Sekali lagi, anda boleh menambah atribut ID pada setiap elemen secara degil, tetapi anda akan kehilangan kebolehskalaan, kebolehselenggaraan dan kesederhanaan mutlak kod dengan memisahkan struktur daripada pembentangan. CSS3 membenarkan kami dengan cepat dan mudah mencari hampir semua elemen halaman yang tidak mempunyai ID dan atribut kelas. Ringkasan

Saya percaya bahawa seiring dengan berlalunya masa dan lebih banyak penyemak imbas menyokongnya, HTML5 dan CSS3 akan menjadi semakin popular. (Teks/Onimusha)