Koleksi Artikel dan Templat

Halaman katalog ini mempunyai artikel perwakilan dan koleksi templat Nickgenom terbaik yang diambil dari pelbagai sumber menarik di internet

css.webp
Kod, Rujukan

CSS | Istilah popular di laman web

Azkiya
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. Namun, sebilangan orang mungkin tidak memahami istilah ini terutama bagi pembangun yang baru mengenal dunia pengekodan laman web.

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

CSS seperti yang kita dengar berkali-kali bukanlah istilah tunggal, hanya berfungsi sebagai styler laman web dan itu sahaja. Walau bagaimanapun, terdapat sebilangan istilah yang mesti kita ketahui bersama untuk mencapai pemahaman serius mengenai syarat CSS ini.

CSS yang kami faham

CSS adalah kod yang memudahkan pembangun laman web mengubah gaya beberapa atau semua laman web, menentukan susun atur, membuat gaya teks bermula dari menentukan ketebalan teks, warna teks, jenis teks, kecondongan ke elemen lain, dan sebagainya. sebelum ini hanya boleh ditentukan dalam halaman HTML.

CSS Semasa

Bersyukurlah anda berada di era baru CSS hari ini. Sekarang adalah masa untuk CSS3 yang telah melampaui masa jauh ke depan dan telah banyak berkembang dari era CSS2 sebelumnya. Terima kasih kepada CSS3 adalah mungkin untuk membuat sudut bulat dan kesan drop-shadow yang 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 besar ke depan dalam hal gaya markup lurus. Dengan gaya kod 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"] { /* gaya di sini */ }

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 tindakan yang sama.

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

CSS hari ini berdiri dengan bangga sebagai bahasa dominan untuk menggayakan laman web front-end kami.

Istilah penting dalam CSS

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

Property adalah Gaya yang anda terapkan pada selector. Secara mudahnya property adalah apa yang muncul sebelum titik dua di setiap baris CSS. Dalam contoh di bawah, kata `width adalah property.

#box  {
width : 200px; /* property adalah "width" (tanpa titik dua) */
}

Value adalah Nilai yang boleh dimiliki oleh property. Secara sederhana, Vakue adalah apa yang muncul sejurus selepas titik dua di setiap baris CSS. Dalam contoh di bawah, 200px adalah value.

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

Keyword adalah kata yang ditentukan dalam spesifikasi CSS dan oleh itu tidak boleh muncul dalam tanda petik semasa digunakan. Contoh: red, solid, dotted. Keyword adalah nilai untuk property dan agak seperti kata yang dikhaskan untuk property tertentu. Property yang berbeza mempunyai kata kunci yang berbeza, dan semua sifat membenarkan kata kunci inherit. Dalam contoh di bawah, nilai auto adalah keyword.

#container {
height: auto; /* "auto" adalah keyword */
}

Terdapat pendapat yang bersetuju bahawa kata: !important memenuhi syarat sebagai keyword, berdasarkan bagaimana kata kunci dibezakan dari value.

Length Units adalah Nilai yang dapat dinyatakan dalam unit (mis. 1px, 2%). Functional Notation adalah Nilai yang ditentukan sebagai fungsi (pengenal diikuti oleh ()). Terutamanya digunakan untuk menentukan warna, URI, atribut dan transformasi, mis. rgba(0, 0, 0, 0.5), url('im.png'), attr('href'), scale(20).

Identifier adalah apa-apa yang muncul sebagai property, id, class, keyword value, and at-rule. Contohnya, di bawah ini terdapat empat identifiers :

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

Perkataan body adalah Identifier atau identifier; perkataan background adalah identifier juga; perkataan none adalah identifier; dan perkataan font-size adalah identifier. Nilai terakhir 14px bukan pengecam, kerana bukan keyword.

Declaration adalah kumpulan nama dan nilai property. Biasanya satu baris CSS muncul di antara pendakap kerinting, sama ada disingkat atau ditulis tangan. Dalam contoh di bawah, segala sesuatu selepas pendakap kerinting pertama, dan sebelum pendakap terakhir (tidak termasuk komen) adalah declaration :

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

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

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

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

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

Rule or Rule Set adalah Selector atau selector diikuti dengan blok declaration. Ini adalah sekeping CSS termasuk pemilih, bendera {} 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 yang harus digayakan. Lebih khusus lagi, pemilih adalah bahagian garis CSS yang memilih elemen sasaran dengan pasangan property/value. Dalam contoh di bawah, #container, #box adalah pemilih :

/* pemilih adalah segala-galanya pada baris pertama */
/* tidak termasuk pendakap kerinting pembukaan */
#container #box {
  width: 200px;
}

Element Type Selector adalah pemilih yang menargetkan elemen dengan nama tag. Pemilih dalam contoh di bawah adalah selector jenis elemen, kerana tidak menggunakan class, 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 nameclass, pen, mystyle, dan itu. Ini dibenarkan untuk lebih daripada 1 elemen dengan nama class yang sama. Selector dalam contoh di bawah menyasarkan elemen dengan nama kelasnya. Jadi mana-mana elemen dengan kelas "navigation" akan menerima gaya yang dimaksudkan :

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

ID Selector digunakan dengan hemat. Anda tidak boleh menggunakan semula ID dalam halaman yang sama dan hanya digunakan untuk mengenal pasti secara unik. Contoh :

<div class="text-center gaya" id=ini-idselektor></div>

Pemilih dalam contoh di bawah menyasarkan elemen mengikut ID mereka. Jadi mana-mana elemen dengan ID navigation akan menerima gaya yang dipersoalkan :

/* 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 selector universal */
.navigation ul * {
  width: 100px;
  float: left;
}

Jadi mana-mana elemen yang muncul sebagai fail keturunan elemen senarai yang tidak tersusun di dalam elemen yang mempunyai kelas navigation akan menerima gaya yang dinyatakan. selector universal umumnya tidak digalakkan atas sebab prestasi.

Attribute Selector adalah jika anda menggunakan atribut selain kelas atau id untuk mengenal pasti elemen dalam helaian gaya, 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 :

<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
a[target] {
background-color: yellow;

}
</style>
<!-- CSS -->
</head>
<body>
<p>Links with the "target" attribute receive a yellow background:</p>
<a href="https://www.google.com">Google Internasional</a>
<!-- yellow background -->
<a href="https://www.google.co.id" target="_blank">Google Indonesia</a>
<a href="https://www.google.org" target="_top">Google Organization</a>
<!-- yellow background -->
</body>
</html>

Pseudo-Class adalah "class" "yang diterapkan pada elemen berdasarkan maklumat yang tidak ada di markup, misalnya": first-child "" atau "" last-child "" ". Anda tidak boleh menggunakan bahagian artikel ": anak pertama" untuk memilih kejadian pertama artikel, jika anak pertama bahagian itu adalah h1 dan bukan artikel. Begitu juga dengan "": nth-child "", dan "": last-childpseudo-class "".

Pseudo-Elements adalah elemen Pseudo yang berbeza dari Pseudo-Classes kerana mereka sebenarnya membuat elemen di pohon dokumen. Ini adalah contoh pertama CSS mengubah struktur dokumen HTML. Sebaik-baiknya anda harus menggunakan elemen pseudo dengan :: bukannya ``` (tetapi kebanyakan penyemak imbas menerima notasi:untuk elemen pseudo CSS 2.1). Elemen pseudo adalah :::first-line,::first-letter,::before,::after```.

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

Terdapat empat penggabung yang berbeza dalam CSS :

  • Pemilih keturunan (space)
  • Pemilih kanak-kanak (>)
  • Pemilih saudara sebelah (+)
  • Pemilih saudara am (~)

Apa maksud empat istilah di atas :

  • Descendant Combinator Ini adalah penggunaan yang paling umum, misalnya #responsive h1.

  • Child Combinator adalah pemilih kanak-kanak yang memilih semua elemen yang merupakan anak dari elemen tertentu. Contoh berikut memilih semua elemen <p> yang merupakan anak dari elemen <div> :

    div > p {
     background-color: yellow;
    }
  • Adjacent Sibling Combinator adalah Elemen yang berdekatan dengan elemen lain.

  • General Sibling Combinator adalah Elemen yang berdekatan dengan, tetapi tidak secara langsung dengan elemen lain.

  • At-Rules adalah Peraturan yang dimulai dengan karakter @, misalnya: @import, @page, @media, dan @font-face.

  • Media Features adalah Dengan pertanyaan media, Anda dapat menargetkan gaya bergantung pada fitur media. Penggunaan ciri media yang popular adalah min-width dan max-width untuk mengesan peranti iOS.

  • Vendor-specific Extension adalah tepat seperti yang dinyatakannya. Mereka menyediakan fungsi khusus untuk vendor tertentu (iaitu penyemak imbas). Mereka tidak semestinya mewakili ciri-ciri yang dinyatakan dalam standard.

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

    1. Bootstrap v4.3.1 (https://getbootstrap.com/)
    2. Hak Cipta 2011-2019 Pengarang Bootstrap
    3. Hak Cipta 2011-2019 Twitter, Inc.
    4. Berlesen di bawah MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

Perhatikan kod 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;

Tinggalkan komen

Kata-kata hikmat

" Sekiranya anda fikir saya malas, maka anda salah! Sebenarnya saya menggunakan mod penjimatan tenaga. "

Rujukan Artikel :

Platform Laman Web CMS Moden

Teg jawatan: Rujukan 05 Ogos 2021

Pelbagai Jenis Lesen

Teg jawatan: Kod, Rujukan 29 September 2020

CSS | Istilah popular di laman web

Teg jawatan: Kod, Rujukan 15 September 2020

Javascript | Istilah popular di laman web

Teg jawatan: Kod, Rujukan 15 September 2020

HTML | Istilah popular di laman web

Teg jawatan: Kod, Rujukan 13 September 2020

Koleksi Animasi Gunakan Codepens

Teg jawatan: Kod, Rujukan 07 September 2020

Koleksi Templat Laman Web :