Rumah > hujung hadapan web > tutorial css > ASAS VANILA CSS ANDA PERLU TAHU

ASAS VANILA CSS ANDA PERLU TAHU

DDD
Lepaskan: 2024-12-28 05:29:10
asal
519 orang telah melayarinya

VANILLA CSS BASICS YOU SHOULD KNOW

ASAS CSS (Lembaran Gaya Lantunan)

Di sini dalam CSS, kami mendapat sasaran dan mengambil elemen khusus yang ingin kami usahakan, daripada halaman web.

Cara CSS berfungsi.

CSS mempunyai terutamanya 2 bahagian, iaitu;

  • Pemilih
  • Pengisytiharan:Ini juga dibahagikan kepada : harta dan kemudian, nilai.

TIGA PERINGKAT CSS;

CSS Sebaris

   * Here, CSS is used within the target element.
   * For example:`<p color="white"> This is inline CSS </p>`
Salin selepas log masuk

CSS Dalaman

  * Here, CSS is written within the html file above the body tag and within the head tag.
  * This is done with the help of `<style>` tags.
Salin selepas log masuk

CSS Luaran

  • Untuk kes ini, fail CSS dipautkan ke fail index.html.

  • Apabila menyusun kod CSS, CSS juga berdasarkan keutamaan. Dalam kes sedemikian, CSS sebaris sentiasa mempunyai keutamaan tertinggi, diikuti oleh CSS dalaman kemudian CSS luaran.

PEMILIH CSS

  • Pemilih ini membolehkan kami mengetahui cara memilih elemen daripada fail html. Untuk pemilih CSS, kita hanya perlu mengetahui jenis pemilih yang ingin kita gunakan, dan juga fungsinya terhadap elemen sasaran.

Berikut ialah beberapa pemilih CSS yang biasa digunakan.

Pemilih Universal: Apabila pemilih sedemikian digunakan, semua dalam fail html (semua teg html) disasarkan atau dipilih.

Contohnya:
*{
warna latar belakang: kelabu
}
Ini bermakna semua halaman web akan mempunyai warna latar belakang kelabu

Pemilih Individu

  • Ini menyasarkan elemen individu sebagai contoh,

    menyasarkan semua perenggan dalam index.html dengan sewajarnya.

  • Sekiranya anda mahu setiap perenggan mempunyai warna atau rupa tersendiri, kami boleh menggunakan *Pemilih Kelas atau Id.

Pemilih Kelas dan Id

  • Untuk pemilih kelas, kami menggunakan titik semasa menerapkannya .Kemudian untuk pemilih id, kami menggunakan cincang (#) apabila menerapkannya.

Contohnya;
.amaran{
selaraskan item: tengah;
}

  • Nama id tidak boleh digunakan atau digunakan beberapa kali, walaupun, walaupun anda berbuat demikian, tidak akan ada ralat yang dilemparkan dalam fail kami semasa penyusunan. Tetapi ini akan menjadi amalan pengekodan yang tidak baik.

  • Namun untuk nama kelas, anda boleh menggunakan nama yang sama beberapa kali .

Pemilih Kanak-kanak

  • Dalam pemilih ini, kami menyasarkan anak kepada elemen induk.
  • Contohnya: nav ul{ paparan: flex }
  • Ini bermakna kami menyasarkan elemen ul yang merupakan anak kepada ibu bapa, nav.

Kami juga mempunyai pemilih lain

  • Seperti pemilih anak ke-n.

Pemilih yang paling biasa digunakan ialah pemilih kelas dan id

NOTA:

  • Apabila menggunakan warna untuk CSS, amalan terbaik sentiasa menggunakan kod warna standard (seperti #4d4d4d) tidak seperti warna perkataan seperti merah atau hijau.

  • Ini kerana, penyemak imbas yang berbeza melihat warna dengan cara yang berbeza, tetapi jika kod warna digunakan, ini bertindak seperti warna keseluruhan standard yang dilihat sebagai warna yang sama walaupun dalam penyemak imbas berbeza.

MARGIN DAN PADDING.

  • Margin ialah jumlah ruang dari luar dan padding ialah jumlah ruang dari dalam tempat teks berada.*

Nota: Kami hanya menggunakan FOKUS pada teg input.

JAWATAN PADA CSS

Mutlak;

  • Ini memberikan kedudukan sasaran bergantung pada halaman web induk, iaitu, sempadan keseluruhan halaman web.

Saudara;

  • Ini memberikan kedudukan kepada elemen sasaran bergantung pada badan atau kotak di mana sasaran semasa berada , iaitu, bergantung pada kedudukan asal sasaran.

Lekit;

  • Ini memberikan kedudukan kepada sasaran, dan selepas ini, ia tidak akan bergerak ke kedudukan lain.

Tetap;

  • Selepas menggunakan ini, sasaran tidak akan diubah atau diubah suai. Ia akan berada dalam kedudukan ini ditetapkan kerana ia telah diperuntukkan.

KOTAK FLEX

Apabila flex digunakan, ini bermakna elemen sasaran boleh diletakkan hanya dalam satu dimensi mendatar.

  • Oleh itu, flex adalah satu arah. Apabila menggunakan flex, kami melenturkan induk. Dan berdasarkan ibu bapa, anak akan berkelakuan.

Sekiranya kita mahukan paparan dinamik, di sinilah kita boleh menggunakan grid.

  • Grid adalah dwiarah.

KESIMPULAN

Kami menggunakan CSS untuk mengubah suai halaman web kami kerana ia membantu kami menggayakan teks kami dengan mudah.

Atas ialah kandungan terperinci ASAS VANILA CSS ANDA PERLU TAHU. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan