Apakah perbezaan antara id dan kelas. CSS - apa itu

Sasaran Penciptaan CSS

BAWA BEBERAPA TAPAK

Susun atur menggunakan CSS.

Kita semua tahu apa itu Internet, laman web dan halaman web. Separuh daripada orang ini tahu dari mana mereka datang dan apa itu - halaman web. Malah lebih sedikit orang yang memahami cara halaman web dibina hari ini, menggunakan teknologi, peraturan dan piawaian. Saya tidak akan memberitahu anda keseluruhan rangkaian permintaan halaman daripada pelayan. Tugas saya adalah untuk memberitahu bagaimana halaman menjadi sangat berwarna-warni dan menarik dari segi grafik dan pelaksanaan yang anda mahu melawat dan melawatnya.

Teknologi yang membolehkan anda mencapai paparan berwarna-warni seperti tapak dalam penyemak imbas anda dipanggil CSS.

CSS ialah singkatan untuk Cascading Style Sheets - diterjemahkan sebagai Cascading Style Sheets. Bahasa penerangan formal penampilan dokumen yang ditulis menggunakan bahasa penanda.

Terutamanya digunakan sebagai cara untuk menerangkan dan mereka bentuk rupa halaman web yang ditulis menggunakan bahasa Penanda HTML dan XHTML.

Ciptaan unik manusia yang sangat memudahkan penciptaan laman web. CSS berfungsi dengan fon, jidar, jadual, padding, imej, dsb. dan mewakili lebih banyak lagi peluang yang banyak daripada html mudah.

Gaya ialah satu set parameter yang menentukan perwakilan luaran objek dalam persekitaran tertentu.

CSS digunakan oleh pencipta halaman web untuk menentukan warna, fon, peletakan blok dan aspek lain dari penampilan halaman web tersebut. Matlamat utama membangunkan CSS adalah untuk memisahkan penerangan struktur logik laman web (yang dihasilkan daripada menggunakan HTML atau bahasa penanda lain) daripada menerangkan rupa halaman web tersebut (yang kini dihasilkan menggunakan bahasa rasmi bahasa CSS). Pemisahan ini boleh meningkatkan kebolehcapaian dokumen, memberikan fleksibiliti dan kawalan yang lebih besar ke atas persembahannya, dan mengurangkan kerumitan dan pengulangan dalam kandungan struktur.

Hakikatnya ialah pada mulanya html digunakan secara eksklusif untuk menandakan kandungan dokumen. Itu. dengan bantuannya ia telah menunjukkan bahawa ini adalah perenggan, dan ini adalah jadual, dan ini adalah gambar.

Bilangan pengguna Internet meningkat setiap bulan. Keperluan reka bentuk yang lebih dan lebih serius dikemukakan, i.e. reka bentuk luaran muka surat. Tidak lama kemudian, pembangun mencipta teg baharu, seperti:

ialah bekas untuk menukar ciri fon seperti saiz, warna dan muka taip. Walaupun teg ini masih disokong oleh semua penyemak imbas, ia dianggap usang dan penggunaannya disyorkan untuk ditinggalkan demi gaya.

Untuk memahami apakah perbezaan antara CSS dan perbezaan HTML, anda perlu memahami apa itu CSS dan apa itu HTML.
Diterjemahkan daripada bahasa Inggeris, CSS bermaksud "Lembaran Gaya Lata". CSS ialah teknologi untuk menguruskan reka bentuk halaman web, ia menyediakan banyak pilihan untuk menerangkan penampilan halaman, dan juga membolehkan anda memudahkan penampilan halaman HTML dengan memindahkan reka bentuk untuk elemen halaman ke fail CSS. CSS membolehkan anda menggunakan satu reka bentuk untuk bilangan yang tidak terhad elemen HTML muka surat. Ini membolehkan anda menukar reka bentuk pada semua halaman tapak pada semua halaman yang menggunakan satu kelas untuk reka bentuk, menukarnya sekali setiap fail CSS, ini sangat mudah jika tapak mempunyai lebih daripada 50 halaman; anda tidak perlu menukar reka bentuk elemen dalam setiap halaman.
Apa itu HTML? Diterjemah daripada bahasa Inggeris, HTML bermaksud "Bahasa Penanda HyperTeks". HTML ialah bahasa standard penandaan dokumen HTML. Bahasa penanda hiperteks digunakan secara langsung kepada struktur kandungan HTML muka surat. Dengan bantuannya, anda boleh membuat jadual, mereka bentuknya, mencipta reka bentuk untuk teks, dsb.
halaman HTML tanpa menggunakan CSS menjadi rumit dan mengelirukan, kerana reka bentuk untuk setiap elemen ditulis semula, yang meningkatkan jumlah teks dengan ketara. Sebagai contoh, terdapat halaman HTML yang mengandungi 3 bahagian teks yang perlu diformat secara sama (saiz, warna), tetapi tidak mungkin untuk menggunakan tag HTML untuk memformat ketiga-tiga sekali gus, kerana serpihan ini berada dalam tempat berbeza halaman HTML. Untuk memformat teks sedemikian, kod tersebut perlu digunakan setiap kali, untuk setiap serpihan secara berasingan.
Apabila menggunakan CSS, kami akan membuat reka bentuk untuk kelas sekali, dan kemudian dalam kod halaman HTML kami hanya akan menetapkan kelas ini kepada setiap tiga serpihan. Sekarang kod HTML kelihatan kurang besar sekarang, bukan? Dengan menukar satu sahaja elemen CSS, kami boleh menukar reka bentuk semua halaman tapak sekaligus. Dan mungkin terdapat beribu-ribu halaman ini.

Laman web Kesimpulan

  1. HTML ialah bahasa di mana halaman web dibuat. CSS ialah teknologi yang mengawal reka bentuk halaman web ini.
  2. Dari sudut reka bentuk halaman, CSS lebih mudah daripada menulis reka bentuk dalam HTML, kerana membolehkan anda mengurangkan saiz kod dengan ketara dan menetapkan reka bentuk untuk banyak halaman sekaligus.

Untuk memahami perbezaan antara CSS dan HTML, anda perlu memahami apa itu CSS dan apa itu HTML.
Diterjemahkan daripada bahasa Inggeris, CSS bermaksud "Lembaran Gaya Lata". CSS ialah teknologi untuk menguruskan reka bentuk halaman web, ia menyediakan banyak pilihan untuk menerangkan rupa halaman, dan ia juga membolehkan anda untuk memudahkan penampilan halaman HTML dengan ketara dengan memindahkan reka bentuk elemen halaman ke fail CSS . CSS membolehkan anda menggunakan satu reka bentuk untuk bilangan elemen halaman HTML yang tidak terhad. Ini membolehkan anda menukar reka bentuk pada semua halaman tapak pada semua halaman yang menggunakan satu kelas untuk reka bentuk, menukarnya sekali dalam fail CSS, ini sangat mudah jika tapak mempunyai lebih daripada 50 halaman, anda tidak perlu menukar reka bentuk elemen dalam setiap daripada mereka.
Apa itu HTML? Diterjemah daripada bahasa Inggeris, HTML bermaksud "Bahasa Penanda HyperTeks". HTML ialah bahasa penanda standard untuk dokumen HTML. Bahasa penanda hiperteks digunakan secara langsung untuk menstruktur kandungan halaman HTML. Dengan bantuannya anda boleh membuat jadual, mereka bentuknya, mencipta reka bentuk untuk teks dan dokumen hiperteks.
halaman HTML tanpa menggunakan CSS menjadi rumit dan mengelirukan, kerana reka bentuk untuk setiap elemen ditulis semula, yang meningkatkan jumlah teks dengan ketara. Sebagai contoh, terdapat halaman HTML yang mengandungi 3 bahagian teks yang perlu diformat dengan cara yang sama (saiz, warna), tetapi tidak mungkin untuk menggunakan tag HTML untuk memformat ketiga-tiganya sekaligus, kerana serpihan ini terletak di tempat yang berbeza dalam halaman HTML. Untuk memformat teks sedemikian, kod tersebut perlu digunakan setiap kali, untuk setiap serpihan secara berasingan.
Apabila menggunakan CSS, kami akan membuat reka bentuk untuk kelas sekali, dan kemudian dalam kod halaman HTML kami hanya akan menetapkan kelas ini kepada setiap tiga serpihan. Sekarang kod HTML kelihatan kurang besar sekarang, bukan? Dengan menukar hanya satu elemen CSS, kami boleh menukar reka bentuk semua halaman tapak sekaligus. Dan mungkin terdapat beribu-ribu halaman ini.

Oleh itu, TheDifference.ru mendapati perbezaan berikut antara HTML dan CSS:

HTML ialah bahasa di mana halaman web dibuat. CSS ialah teknologi yang mengawal reka bentuk halaman web ini.
Dari sudut reka bentuk halaman, CSS lebih mudah daripada menulis reka bentuk dalam HTML, kerana membolehkan anda mengurangkan saiz kod dengan ketara dan menetapkan reka bentuk untuk banyak halaman sekaligus.

Salah satu yang paling soalan lazim dalam proses mengenali piawaian baharu - apakah perbezaan antara atribut "id" dan "kelas" elemen HTML. Lagipun, kesannya nampak sama.

Mereka mempunyai kesan yang sama hanya paling banyak kes mudah gunakan dalam CSS. Malah, terdapat banyak perbezaan.

Intipatinya

id ialah nama unik bagi elemen pada halaman, iaitu, tidak sepatutnya terdapat beberapa elemen pada halaman dengan id yang sama. Sebagai contoh, blok dengan pengepala tapak boleh diberikan id="title" . kelas ialah atribut percuma yang biasanya diberikan kepada beberapa elemen untuk membezakannya daripada yang lain. Contohnya, gambar yang hanya mengiringi teks boleh diberikan class="decor" , dan gambar yang penting untuk memahami teks boleh diberikan class="content" .

Akibat

Daripada intipati ini secara langsung atau tidak langsung ikuti perbezaan lain yang boleh dilihat dalam HTML, CSS dan skrip.

Pautan anchor Jika anda perlu meletakkan pautan ke beberapa elemen pada halaman, maka anda hanya perlu memberikannya id (

...

) dan pautkannya dengan sauh (http://site/path/#about). Ini, dengan cara ini, adalah kaedah pilihan dan bukannya yang lama . Tanda berbilang

Elemen boleh diberikan beberapa kelas yang dipisahkan oleh ruang: . Selain itu, mereka boleh digunakan secara berasingan:

/* semua elemen penting */ .penting (warna:merah;)

Dan dalam kombinasi:

/* elemen dengan penting dan berpusat pada masa yang sama */ .important.centered (sempadan:pejal hitam 1px;)

Ambil perhatian bahawa tiada ruang antara kelas dalam peraturan CSS.

Berat yang berbeza dalam CSS

Setiap peraturan dalam CSS mempunyai "berat" yang menentukan susunan peraturan tersebut digunakan. id mempunyai lebih berat. Oleh itu, jika elemen mempunyai kedua-dua id dan kelas:

...

Salah satu daripada dua peraturan

#tentang (warna:hijau;).penting (warna:merah;)

Yang pertama menang, warna tajuk akan menjadi hijau. (Berat peraturan adalah cerita yang berasingan; akan ada artikel mengenainya dalam masa yang ditetapkan.)

Mencari dalam skrip Elemen dengan "id" boleh didapati dengan mudah dalam skrip menggunakan fungsi document.getElementById(). Tiada fungsi sedemikian untuk kelas.

Artikel ini adalah sebahagian daripada siri yang sedang dijalankan di bawah tajuk kerja "Buku Teks". Saya mengesyorkan agar anda membaca artikel lain yang boleh didapati dalam kategori "Buku Teks", di mana ia kini dikumpulkan dalam susunan kronologi terbalik.

Artikel pengenalan tentang CSS, dari mana anda akan menjadi biasa dengannya konsep umum, apakah itu CSS, untuk apa ia. Mari kita lihat secara ringkas sintaks dan keupayaannya. Mari kita mulakan dengan definisi

1. Definisi CSS

CSS(daripada bahasa Inggeris "Cascading Style Sheets", cascading style sheets) - senarai gaya untuk tapak dalam html

Apakah gaya? Secara kasarnya, gaya ialah cara sesuatu elemen kelihatan di tapak. Contohnya, sebarang teks boleh ditulis dengan saiz 10 piksel atau 14 piksel. Anda boleh menulis dalam warna hitam, atau dalam warna biru. Anda boleh menggaris/mencondongkan/menyerang, dsb. Semua yang berkaitan dengan pemformatan teks dilakukan melalui CSS.

Tetapi ini hanya sebahagian kecil daripada kemungkinan. CSS bertanggungjawab untuk semua visualisasi semua tag html. Walaupun untuk perubahan dinamik: menu lungsur turun, menyerlahkan pautan pada tuding.

Senarai semua gaya sering dipanggil "helaian gaya CSS" dalam bahasa juruweb.

2. Matlamat dan Objektif CSS

  • Jadikan tapak lebih cantik (dari segi reka bentuk), buat antara muka yang mesra, dan hanya supaya tapak itu sekurang-kurangnya berbeza antara satu sama lain
  • Berpisah kod html daripada kod penerangan gaya dan reka bentuk

3. Sintaks CSS (Pemilih)

Setiap sifat dan gaya diterangkan melalui "Pemilih". Sintaksnya adalah seperti berikut

Pemilih (atribut: nilai;)

Pemilih- ini boleh menjadi nama gaya atau teg. DALAM pendakap kerinting peraturan tertentu diterangkan. Perihalan sentiasa mengikut standard yang sama: "nama atribut: nilai". Setiap peraturan mesti berakhir dengan koma bertitik.

Sebagai contoh

.style_name ( attribute1 : values1; attribute2 : values2; ... );

Terdapat banyak pilihan untuk menentukan gaya CSS. Mari lihat yang paling popular dengan contoh.

/*Menetapkan gaya keseluruhan*/ .global_style ( font-size : 12px ; color : red ; ) /**/ font.style1 ( font-size : 10px ; color: blue ; ) /* Menetapkan gaya umum hanya untuk tag fon */ #global_style2 ( saiz fon : 14px ; warna : merah ; ) h1 ( saiz fon : 19px ; )

Gaya global_style boleh digunakan sebagai kelas untuk semua teg. Sebagai contoh,

.

style1 hanya boleh digunakan pada tag kerana font.style1 telah dinyatakan dalam definisi.

Pilihan ketiga untuk tugasan adalah melalui grid (#). Seperti dalam kes pertama, ia ditakrifkan untuk semua elemen, tetapi ia mesti ditentukan bukan melalui kelas, tetapi melalui atribut id:

Dalam pilihan terakhir kami hanya menentukan nama tag

dan menetapkan gaya untuknya. Ini bermakna bahawa sekarang semua tag

akan mewarisi nilai gaya ini.

4. Bagaimana dan di mana untuk menetapkan gaya CSS

5. Apakah kelebihan menggunakan CSS

  • Mudah untuk menukar reka bentuk. Ia cukup untuk menukar gaya di satu tempat sahaja dan ia akan berubah pada setiap halaman tapak
  • ini satu-satunya cara menukar reka bentuk di tapak
  • Sintaks bahasa mudah

6. Isu CSS dengan pelayar

Tidak semua pelayar lama menyokong Ciri CSS. Ini menyebabkan masalah paparan. Sebagai contoh, kesan yang bertujuan untuk meningkatkan persepsi kandungan boleh membawa kepada kesan sebaliknya. Jika sesetengah harta tidak disokong, maka terdapat risiko blok, teks bertindih antara satu sama lain, dsb.

Awalan sebahagiannya menyelesaikan masalah ini. Pada asasnya ia hanyalah perkataan yang diletakkan sebelum hujah dalam helaian gaya. Setiap pelayar mempunyai awalan sendiri.

7. Jawapan kepada soalan lazim

7.1. Apakah itu CSS3

DALAM Kebelakangan ini Anda selalunya boleh menemui konsep CSS3. Pada asasnya ini adalah CSS yang sama, tetapi dengan satu set hujah baharu yang memberi ciri-ciri tambahan dari segi pelbagai kesan. Contohnya, teks bercahaya. Banyak penyemak imbas tidak menyokong sifat sedemikian, jadi disyorkan untuk menggunakan kesan sedemikian dalam kuantiti yang minimum.

7.2. Apakah perbezaan antara CSS dan HTML?

HTML ialah rangka kerja halaman anda (ini adalah pautan, gambar, kandungan). Dan CSS menentukan bagaimana semua ini akan dipaparkan kepada pengguna. Jadi HTML dan CSS pada asasnya adalah perkara yang berbeza, tetapi ia berkaitan. Peraturan bentuk yang baik adalah untuk memisahkan kod antara satu sama lain supaya tidak mencampurkannya pada satu halaman.



ARTIKEL BERKAITAN