CSS | Istilah popular di laman web

Halaman ini menerangkan secara terperinci mengenai perkara yang anda ingin ketahui

| English | | Filipino | | Indonesia | | Malay | | Thai | | Vietnamese |
0 masa dilihat

CSS | Istilah popular di laman web

diterbitkan pada : 15 September 2020

Dalam kesempatan ini kita akan cuba memahami apa itu CSS. Kita sering mendengar mengenai CSS atau pembangun laman web akan sangat memahami istilah ini. Cascading Style Sheets (CSS) adalah bahasa kepingan gaya yang digunakan untuk menggambarkan penyampaian dokumen yang ditulis dalam bahasa markup seperti HTML. CSS adalah teknologi landasan World Wide Web, bersama dengan HTML dan JavaScript. CSS untuk pembangun laman web diketahui berguna untuk menggayakan laman web, fon, warna, ukuran, jarak, sempadan, latar belakang, dan bayangan adalah beberapa contoh yang dapat disesuaikan menggunakan CSS. Walau bagaimanapun, sebilangan orang mungkin tidak memahami istilah ini, terutamanya bagi pembangun yang baru mengenal dunia laman web pengekodan.

Terdapat banyak rujukan untuk istilah ini CSS. Tetapi di sini penulis akan berusaha mengurangkan istilah ini menjadi satu unit sehingga dapat memberi pemahaman yang mudah bahkan kepada pembangun laman web baru.

CSS seperti yang sering kita dengar bukan satu istilah sahaja, ia hanya mempunyai fungsi gaya laman web dan itu sahaja. Namun, ada cukup istilah yang harus kita ketahui bersama untuk mencapai pemahaman serius mengenai istilah CSS ini.

CSS yang kami fahami

CSS adalah kod yang memudahkan pembangun laman web mengubah gaya di beberapa atau semua laman web, menentukan susun atur, membuat gaya teks mulai dari menentukan ketebalan teks, warna teks, jenis teks, huruf miring hingga elemen lain, dll. sebelumnya dinyatakan hanya di halaman HTML.

CSS semasa

Bersyukurlah anda berada di era baru CSS hari ini. Sekarang adalah masa untuk CSS3 yang telah melampaui masa depan dan telah banyak berkembang dari era CSS2 sebelumnya. Terima kasih kepada CSS3 adalah mungkin untuk membuat sudut bulat dan kesan drop-shadow dapat dipaparkan di penyemak imbas. CSS3 juga menawarkan alat baru untuk menggambarkan warna dalam dokumen. HSL (Hue-Saturation-Lightness) adalah tambahan terbaru untuk HSLA yang merangkumi saluran Alpha untuk mengurangkan kelegapan.

Pemilih atribut adalah langkah maju yang besar dalam hal gaya markup lurus. Dengan gaya pengekodan ini, anda dapat menargetkan nama elemen tertentu yang mengandungi atribut dengan nilai tertentu. Ini sangat berguna ketika bekerja dengan markup seperti XML di mana tidak ada prinsip reka bentuk standard untuk memanipulasi nod. Contoh di bawah adalah idea yang agak mudah:

  • 1. div[attrib^="1"] { /* styles here */ }

Kod di atas adalah sebahagian dari perpustakaan pemilih CSS. Ini akan mempengaruhi semua elemen div dengan atribut "attrib" yang juga memegang nilai "1". Sekiranya ini masih mengelirukan, lihat contoh di bawah untuk menjelaskan. Secara teori, kedua-dua pemilih ini harus melakukan perkara yang sama.

  • 1. p[id^="primary"] { /* styles */ }
  • 2. p#primary { /* styles */ }

CSS kini berdiri dengan bangga sebagai bahasa dominan untuk menggayakan laman web depan kami.

Istilah penting dalam CSS

Syarat berikut berdasarkan artikel Divya Manian diubahsuai dengan pelbagai sumber perwakilan lain.

Property adalah Gaya yang anda gunakan pada pemilih. Secara sederhana, harta benda adalah apa yang muncul sebelum titik dua pada setiap baris CSS. Dalam contoh di bawah, perkataan "lebar" adalah harta benda.

  • #box {
    width : 200px; /* sifatnya adalah "width" (tanpa kolon) */
    }

Value adalah Nilai yang boleh dimiliki oleh harta tanah. Secara sederhana, Nilai adalah apa yang muncul sejurus selepas titik dua di setiap baris CSS. Dalam contoh di bawah, "200px" adalah nilai.

  • #box {
    width : 200px; /* selepas usus besar, tanpa titik koma */
    }

Keyword adalah perkataan yang ditentukan dalam spesifikasi CSS dan oleh itu tidak boleh muncul dalam tanda petik semasa digunakan. Contoh: merah, padat, titik. Kata kunci adalah nilai untuk sifat dan agak seperti kata yang dikhaskan untuk sifat tertentu. Properti berbeza mempunyai kata kunci yang berbeza, dan semua sifat membenarkan kata kunci "inherit". Dalam contoh di bawah, nilai “auto” adalah kata kunci.

  • #container {
    height: auto; /* "auto" adalah kata kunci */
    }

Ada pendapat yang setuju sekiranya dikatakan : !important memenuhi syarat sebagai kata kunci, berdasarkan bagaimana mereka dibezakan dari nilai.

Length Units adalah Nilai boleh dinyatakan dalam unit (contoh: 1px, 2%).

Functional Notation adalah Nilai yang ditakrifkan sebagai fungsi (pengecam diikuti oleh ()). Terutamanya digunakan untuk menentukan warna, URI, atribut, dan penjelmaan: contoh: rgba(0, 0, 0, 0.5), url('im.png'), attr('href'), scale(20).

Identifieradalah apa-apa yang muncul sebagai harta, id, kelas, nilai kata kunci, dan at-rule. Sebagai contoh, di bawah ini terdapat empat pengecam:

  • /* "body", "background", "none", dan "font-size" ialah identifiers */
    body {
    background: none;
    font-size: 14px;
    }
    /* "14px" adalah bukan sebuah identifier */

Perkataan "badan" adalah pengecam atau pengenal; perkataan "latar belakang" juga pengecam; perkataan "none" adalah pengecam; dan perkataan "font-size" adalah pengecam. Nilai terakhir "14px" bukan pengecam, kerana bukan kata kunci.

Declaration adalah set nama dan nilai harta tanah. Biasanya satu baris CSS muncul di antara kurungan keriting, sama ada disingkat atau ditulis tangan. Dalam contoh di bawah, segala sesuatu selepas pendakap pertama, dan sebelum pendakap terakhir (tidak termasuk komen) adalah perisytiharan:

  • body {
    font-family: Arial, sans-serif; /* garis ini adalah pengisytiharan */
    background: red; /* garis ini adalah pengisytiharan */
    }

Dalam contoh berikut, terdapat dua pernyataan antara tanda-tanda tersebut {} :

  • body {
    font-family: Arial, sans-serif; /* satu pengisytiharan */
    color: #555; /* pengisytiharan lain */
    }

Declaration Block adalah bahagian CSS di mana pasangan harta / nilai muncul. Dalam contoh di bawah, semua yang terdapat di antara tanda {} (tidak termasuk komen) adalah blok pengisytiharan:

  • body {
    font-family: Arial, sans-serif; /* bermula dengan baris ini */
    color: #555;
    font-size: 14px;
    line-height: 20px; /* berakhir di sini, sebelum penutup keriting ditutup */
    }

Rule or Rule Set adalah pemilih diikuti dengan blok deklarasi. Ini adalah satu bahagian CSS termasuk pemilih, {} tanda dan garis yang berbeza dengan sifat dan nilai. Kod dalam contoh di bawah terdiri daripada sekumpulan peraturan:

  • body {
    font-family: Arial, sans-serif;
    color: #555;
    font-size: 14px;
    }

    #responsive {
    clear: both;
    color: #000;
    background-color: chocolate;
    }

Selector adalah bagaimana anda menyatakan elemen mana untuk menerapkan gaya. Secara khusus, pemilih adalah bahagian garis CSS yang memilih elemen sasaran apa dengan pasangan harta / nilai. Dalam contoh di bawah, "#container #box" adalah pemilih:

  • /* pemilih adalah segalanya di baris pertama * /
    / * tidak termasuk pendakap keriting pembuka * /
    #container #box {
    width: 200px;
    }

Element Type Selector adalah pemilih yang mensasarkan elemen dengan nama tag. Pemilih dalam contoh di bawah adalah pemilih jenis elemen, kerana tidak menggunakan kelas, ID, atau pemilih lain untuk menerapkan gaya tertentu. Sebaliknya, ia secara langsung menyasarkan semua elemen HTML5 nav:

  • /* sepadan dengan elemen HTML dengan nama */
    nav {
    font-family: Arial, sans-serif;
    color: #555;
    font-size: 14px;
    }

Class Selector adalah pemilih yang paling biasa digunakan. Contoh: .style, .pen, .mystyle, dan sebagainya, untuk memilih elemen dengan gaya classname, pen, mystyle, itu. Ini dibenarkan untuk lebih daripada 1 elemen dengan nama kelas yang sama. Pemilih dalam contoh di bawah menyasarkan elemen mengikut nama kelasnya. Jadi setiap elemen dengan kelas "navigasi" akan menerima gaya yang dimaksudkan:

  • /* memadankan elemen HTML dengan class="navigation" */
    .navigation {
    width: 960px;
    margin: 0 auto;
    }

ID Selector adalah menggunakannya dengan berhati-hati. Anda tidak boleh menggunakan semula ID dalam halaman yang sama dan ID tersebut hanya digunakan untuk mengenal pasti elemen secara unik. Contoh:

Pemilih dalam contoh di bawah menyasarkan elemen mengikut ID mereka. Jadi setiap elemen dengan ID "navigasi" akan menerima gaya yang dimaksudkan:

  • /* memadankan elemen HTML dengan id="navigation" */
    #navigation {
    width: 960px;
    margin: 0 auto;
    }

Universal Selector Pemilih universal sesuai dengan elemen apa pun dalam konteks di mana ia diletakkan di pemilih. Dalam contoh di bawah, watak * adalah pemilih universal:

  • /* watak asterisk adalah pemilih sejagat */
    .navigation ul * {
    width: 100px;
    float: left;
    }

Jadi, setiap elemen yang muncul sebagai keturunan dari elemen senarai yang tidak tersusun di dalam elemen yang mempunyai kelas "navigasi" akan menerima gaya yang dinyatakan. Pemilih universal umumnya tidak digalakkan kerana prestasi.

Attribute Selector ialah jika anda menggunakan atribut selain kelas atau id untuk mengenal pasti elemen dalam helaian gaya anda, anda akan menggunakan Pemilih Atribut. Anda juga dapat melakukan pencocokan templat dalam pemilih atribut (jadi jika anda ingin melakukan pencocokan templat untuk pemilih menggunakan atribut kelas atau ID, Anda dapat menggunakan pemilih atribut). Contoh:

Pseudo-Classes adalah kelas yang diterapkan pada elemen berdasarkan maklumat yang tidak ada dalam markup, misalnya :first-child atau :last-child. Anda tidak boleh menggunakan bahagian artikel :first-child untuk memilih kejadian pertama artikel, jika anak pertama bahagian itu h1 dan bukan artikel. Serta :nth-child, dan :last-childpseudo-class.

Pseudo-Elements adalah unsur-unsur Pseudo yang berbeza dari Kelas-kelas Pseudo kerana ia sebenarnya mencipta unsur-unsur di dalam pohon dokumen. Ini adalah contoh pertama CSS mengubah struktur dokumen HTML. Sebaik-baiknya anda harus menggunakan elemen pseudo dengan “::” tidak “:” (tetapi kebanyakan penyemak imbas menerima notasi “:” ke pseudo-elemen CSS 2.1). Elemen pseudo adalah: ::first-line, ::first-letter, ::before, ::after.

Combinators adalah pemilihan elemen berdasarkan peristiwa yang berkaitan dengan elemen lain (dipilih oleh pilihan penggabung: ruang,>, +, atau ~).

Terdapat empat penggabung yang berbeza dalam CSS:

  • Descendant selector (space)
  • Child selector (>)
  • Adjacent sibling selector (+)
  • General sibling selector (~)

Apa maksud empat istilah di atas:

  • Descendant Combinator Ini adalah penggunaan yang paling biasa, mis #responsive h1.
  • Child Combinator adalah pemilih kanak-kanak memilih semua elemen yang merupakan anak dari elemen tertentu. Contoh berikut memilih semua >pdiv<:> div > p {
    background-color: yellow;
    }

Adjacent Sibling Combinator adalah Unsur yang berdekatan dengan unsur lain.

General Sibling Combinator adalah Elemen bersebelahan, tetapi tidak langsung ke elemen lain.

At-Rules adalah Peraturan yang bermula dengan @karakter, contoh: @import, @page, @media, and @font-face.

Media Features adalah Dengan pertanyaan media, anda boleh menargetkan gaya bergantung pada ciri media. Penggunaan ciri media yang popular adalah lebar minimum dan lebar maksimum untuk mengesan peranti iOS.

Vendor-specific Extension adalah tepat apa yang tertulis. Mereka menyediakan fungsi khusus untuk vendor tertentu (iaitu penyemak imbas). Mereka tidak selalu mewakili ciri-ciri yang dinyatakan dalam standard.

Comment atau Statement adalah bahasa yang merupakan penjelasan kod CSS yang disusun di bawahnya. Contoh: komen di sini mengatakan mengenai 4 perkara:

  • 1. Bootstrap v4.3.1 (https://getbootstrap.com/)
  • 2. Copyright 2011-2019 The Bootstrap Authors
  • 3. Copyright 2011-2019 Twitter, Inc.
  • 4. Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

Perhatikan kode ini :

/*!
Bootstrap v4.3.1 (https://getbootstrap.com/)
Copyright 2011-2019 The Bootstrap Authors
Copyright 2011-2019 Twitter, Inc.
Licensed under MIT
(https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;

Tags:

Komen