Pengenalan kepada kelas dalam html dan css

Ia tidak mengatakan bahawa pembangunan web adalah besar. Sebahagian besar itu adalah kerana hampir semua orang berada di Web. Walau bagaimanapun, terdapat kekurangan pemaju di lapangan, dan itu sebabnya kurikulum pembangunan web begitu mudah didapati, dan juga percuma. Dengan itu, kami akan menunjukkan kepada anda sedikit apa yang HTML dan CSS semua tentang. Secara lebih khusus, kami akan menunjukkan kepada anda bagaimana "kelas" berfungsi.

Kami tidak memulakan anda dari awal, kerana terdapat banyak kurikulum percuma di luar sana. Sebaliknya, kami secara khusus akan menunjukkan kepada anda bagaimana kelas berfungsi, kerana ia merupakan komponen yang diperlukan untuk menggayakan laman web anda. Kami juga fikir ia mungkin bernilai menutup sebelum kami menyiarkan paparan kami di API Bootstrap Twitter, kerana kelas adalah komponen yang diperlukan dalam hal itu juga.

Sebagai penafian, jika anda benar-benar baru kepada HTML dan CSS, ini mungkin bukan permulaan yang baik untuk anda. Jika anda sudah biasa dengannya, ia tidak sepatutnya terlalu sukar untuk dijemput. Tetapi, jika anda mencari tutorial pemula yang lengkap, terdapat banyak pilihan hebat dalam talian. Untuk menamakan beberapa, terdapat FreeCodeCamp, The Odin Project, CodeAcademy, School Code, Treehouse Team, Udacity, dan banyak lagi. Jika anda memilih untuk mula menggali ke dalam salah satu daripadanya, saya akan sangat menyarankan untuk melekat dengan satu (seperti Free Code Camp) dan menyelesaikannya sebelum memulakan yang lain, kerana banyak kandungan "asas" boleh menjadi berulang-ulang.

Dengan cara itu, mari kita menggali apa kelas-kelas.

Bagaimana Kerja Kelas

Kelas sangat berguna. Mereka mengambil repetitiveness daripada HTML gaya. Tanpa kelas, anda akan menggayakan setiap elemen dalam markup anda secara individu. Dan bagaimana jika anda mempunyai dua elemen yang sama, tetapi mahu gaya masing-masing berbeza? Ia akan menjadi keadaan huru-hara yang lengkap. Itulah sebabnya kita mempunyai kelas. Kelas menambahkan beberapa struktur organisasi HTML anda, membolehkan anda menyimpan kod anda secara relatif bersih. Bukan itu sahaja, tetapi kelas boleh digunakan lebih daripada sekali. Dengan kata lain, anda tidak perlu membuat peraturan gaya yang sama dua kali.

Inilah kelas yang kelihatan seperti dalam diri kita tag:

Seperti yang anda lihat, di bawah tag badan kami, kami mempunyai dua

elemen dengan kelas yang berbeza. Yang pertama

tag mempunyai kelas "head1" sementara tag kedua mempunyai kelas "head2." Jadi, dalam CSS kami, bukannya menerapkan gaya hanya dengan

elemen, kita boleh memohon gaya kepada kelas individu tersebut. Mengapa kita mahu berbuat demikian?

Sebab utama ialah anda tidak mahu semua anda

elemen untuk mempunyai gaya yang sama. Ia akan mewujudkan banyak sakit kepala ketika membuat laman web, dan di samping itu, laman web tidak akan kelihatan hebat. Kelas membenarkan kami menggunakan gaya untuk hanya satu contoh tag itu, bukan semua

tag merentas dokumen. Jadi, bagaimana anda menulis kelas dalam HTML? Seperti ini:

Sesetengah Kandungan

Anda boleh menambah harta "kelas" kepada hampir mana-mana elemen HTML.

Hebat! Jadi, kita mempunyai kelas, tetapi dalam keadaan semasa mereka, mereka sebenarnya tidak melakukan apa-apa. Ini kerana kami belum menambah peraturan gaya ke kelas lagi. Untuk melakukan itu, kita perlu membuat dokumen berasingan .css. Saya hanya akan memanggilnya main.css. Dalam dokumen itu, kita akan gaya kelas seperti ini:

Untuk memilih kelas yang kami mahu gaya, kami lakukan ini:

.head1 {color: red; teks-align: center; }

Dalam pendakap kerinting adalah semua "peraturan" (atau styling) yang kita gunakan untuk kelas itu. Terdapat banyak peraturan yang berbeza yang boleh dimasukkan ke dalam kelas itu. Dalam kes saya, saya menukar warna teks ke merah menggunakan peraturan "warna" dan saya memusatkan teks dengan menggunakan peraturan "jajaran teks". Anda boleh mendapatkan senarai penuh peraturan CSS serta dokumentasi mereka dari Rangkaian Pembangun Mozilla.

Sekarang, gaya kami masih tidak digunakan untuk kelas dalam dokumen HTML kami, dan itu kerana kami belum memautkan kedua-dua fail itu lagi. Kembali ke fail HTML anda, dan dalam tag, anda akan mahu menghubungkan fail CSS anda dengan melakukan ini:

Dokumen HTML anda sepatutnya kelihatan seperti ini:

Dan projek ujian kami harus kelihatan seperti ini di Web:

Untuk video yang lebih terperinci yang berjalan melalui langkah-langkah ini, sila lihat di bawah.

Video

Kesimpulannya

Dan itu semua ada kelas! Mereka benar-benar mudah difahami. Sudah tentu di laman web besar dan popular yang anda lawati, peraturan dalam kelas adalah jauh lebih rumit daripada apa yang kita dilindungi, tetapi dalam bentuk yang paling asas, itulah cara mereka bekerja.

Jika anda mempunyai sebarang soalan atau menghadapi masalah selepas itu, pastikan anda memberitahu kami di komen di bawah atau di dalam Forum PCMech! Atau, jika anda berminat dengan panduan pemula HTML / CSS lengkap di PCMech, pastikan anda tahu juga!