Artikel dan Koleksi Template

Halaman katalog ini menayangkan artikel representatif dan koleksi template terbaik Nickgenom yang diambil dari berbagai sumber menarik di internet

css.webp
Kode, Referensi

CSS | Istilah populer dalam situsweb

Azkiya
15 September 2020

Dalam kesempatan ini kita akan mencoba memahami apa itu CSS. Sudah sering kita mendengar tentang CSS atau para pengembang situsweb akan sangat terbiasa dengan istilah ini. Cascading Style Sheets (CSS) adalah bahasa style sheet yang digunakan untuk mendeskripsikan presentasi dokumen yang ditulis dalam bahasa markup seperti HTML. CSS adalah teknologi landasan World Wide Web, bersama dengan HTML dan JavaScript. CSS bagi para pengembang situsweb dikenal berguna untuk memberi gaya pada situs web, font, warna, ukuran, spasi, batas, latar belakang, dan bayangan hanyalah beberapa contoh yang dapat disesuaikan menggunakan CSS. Akan tetapi, sebagian orang mungkin belum memahami istilah ini terlebih bagi pengembang yang baru terjun ke dunia koding situs web.

Ada banyak referensi mengenai istilah CSS ini. Tapi di sini penulis akan mencoba mereduksi istilah ini menjadi satu kesatuan sehingga dapat memberi kemudahan pemahaman bagi pengembang situs web yang baru sekalipun.

CSS seperti yang telah kita sering dengar bukan merupakan istilah tunggal yang hanya itu saja, yang hanya memiliki kegunaan sebagai pengatur gaya situs web dan hanya itu. Akan tetapi ada cukup banyak istilah yang harus kita ketahui bersama untuk mencapai pemahaman yang serius mengenai istilah CSS ini.

CSS yang kita pahami

CSS adalah kode yang memudahkan para pengembang situs web untuk mengubah gaya di beberapa atau seluruh halaman web, menentukan tata letak, membuat gaya teks mulai dari menentukan ketebalan teks, warna teks, jenis teks, kemiringan terhadap elemen lainnya, dan sebagainya, dari halaman Web yang sebelumnya hanya dapat ditentukan dalam halaman HTML.

CSS saat ini

Bersyukurlah Anda yang berada di zaman baru CSS saat ini. Saat ini adalah zaman bagi CSS3 yang telah melampaui waktu jauh ke depan dan sudah sangat berkembang dari zaman CSS2 sebelumnya. Berkat CSS3 kita dimungkinkan untuk membuat sudut membulat dan efek drop-shadow dapat ditampilkan di browser. CSS3 juga menawarkan alat baru untuk mendeskripsikan warna dalam dokumen. HSL (Hue-Saturation-Lightness) adalah tambahan terbaru untuk HSLA yang menyertakan saluran Alpha untuk mengurangi opacity.

Pemilih atribut adalah langkah maju yang besar dalam hal gaya markup lurus. Dengan gaya kode ini Anda dapat menargetkan nama elemen tertentu yang berisi atribut dengan nilai tertentu. Ini sebagian besar berguna saat bekerja dengan markup seperti XML di mana tidak ada prinsip desain standar untuk memanipulasi node. Contoh di bawah ini adalah ide yang relatif sederhana :

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

Kode di atas adalah bagian dari pustaka pemilih CSS. Ini akan mempengaruhi semua elemen div dengan atribut attrib yang juga memegang nilai 1. Jika ini masih membingungkan lihat contoh di bawah ini untuk memperjelas. Secara teori, kedua penyeleksi ini harus melakukan tindakan yang sama.

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

CSS saat ini telah berdiri dengan sangat bangga sebagai bahasa dominan untuk mengatur gaya situs web front-end kita.

Istilah-istilah penting dalam CSS

Istilah-istilah berikut dibuat berdasarkan artikel Divya Manian yang dimodifikasi dengan berbagai sumber representatif lainnya.

Property adalah Gaya yang Anda terapkan ke selector. Secara sederhana property adalah apa yang muncul sebelum titik dua di setiap baris CSS. Pada contoh di bawah ini, kata width adalah properti.

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

Value adalah Nilai yang dapat dimiliki properti. Secara sederhana, Nilai adalah apa yang muncul segera setelah titik dua di setiap baris CSS. Dalam contoh di bawah, 200px adalah nilainya.

#box
width : 200px; /* setelah titik dua, tanpa titik koma */
}

Keyword adalah Kata yang didefinisikan dalam spesifikasi CSS dan karenanya tidak boleh muncul dalam tanda kutip saat digunakan. Contoh : red, solid, dotted. Keyword merupakan nilai untuk properti dan agak seperti kata yang dipesan untuk properti tertentu. Properti yang berbeda memiliki kata kunci yang berbeda, dan semua properti mengizinkan kata kunci inherit. Pada contoh di bawah, nilai auto adalah kata kunci.

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

Ada pendapat yang setuju jika kata : !important memenuhi syarat sebagai kata kunci, berdasarkan bagaimana kata kunci dibedakan dari nilai.

Length Units adalah Nilai dapat dideklarasikan dalam satuan (contoh : 1px, 2%). Functional Notation adalah Nilai apa pun yang ditentukan sebagai fungsi (pengidentifikasi diikuti oleh ()). Terutama digunakan untuk menentukan warna, URI, atribut, dan transformasi, contoh : rgba(0, 0, 0, 0.5), url('im.png'), attr('href'), scale(20).

Identifier adalah berupa apa saja yang muncul sebagai properti, id, class, kata kunci value, dan at-rule. Dalam contoh, di bawah ini ada empat identifier :

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

Kata body adalah Identifier atau pengenal; kata background adalah pengenal juga; kata none adalah pengenal; dan kata font-size adalah pengenal. Nilai terakhir 14px bukanlah pengenal, karena ini bukan kata kunci.

Declaration adalah Kumpulan nama dan nilai properti. Biasanya berupa satu baris CSS yang muncul di antara tanda kurung kurawal, baik singkatan maupun tulisan tangan. Pada contoh di bawah, semua setelah kurung kurawal pertama, dan sebelum kurung kurawal terakhir (tidak termasuk komentar) adalah deklarasi :

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

Dalam contoh berikut ini, ada dua declaration di antara tanda {} :

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

Declaration Block adalah bagian CSS tempat pasangan properti / nilai muncul. Dalam contoh di bawah ini, semua yang ditemukan di antara tanda {} (tidak termasuk komentar) adalah blok deklarasi :

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

Rule or Rule Set adalah Penyeleksi atau selektor yang diikuti dengan blok deklarasi. Ini adalh satu bagian CSS termasuk selektor, tanda {} dan baris yang berbeda dengan properti dan nilai. Kode pada contoh di bawah ini terdiri dari satu set aturan :

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

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

Selector adalah cara Anda mendeklarasikan elemen mana yang harus diterapkan gaya. Lebih jelasnya, selector bagian dari garis CSS yang menyeleksi apa elemen target dengan pasangan properti / nilai. Pada contoh di bawah ini, #container, #box adalah selektor :

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

Element Type Selector adalah pemilih yang menargetkan elemen dengan nama tag. Selektor pada contoh di bawah ini adalah pemilih jenis elemen, karena tidak menggunakan class, ID, atau pemilih lain untuk menerapkan gaya yang diberikan. Sebaliknya, ini secara langsung menargetkan semua elemen nav HTML5 :

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

Class Selector adalah selektor yang paling umum digunakan. Contoh : .gaya, .pen, .mystyle, dan sebagainya, untuk memilih elemen dengan classname gaya, pen, mystyle, itu. Ini diperbolehkan untuk lebih dari 1 elemen dengan nama class yang sama. Selektor pada contoh di bawah menargetkan elemen dengan nama classnya. Jadi setiap elemen dengan class "navigasi" akan menerima gaya yang dimaksud :

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

ID Selector adalah gunakan ini dengan hemat. Anda tidak dapat menggunakan kembali ID dalam halaman yang sama dan hanya digunakan untuk mengidentifikasi elemen secara unik. Contoh :

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

Pemilih pada contoh di bawah menargetkan elemen menurut ID-nya. Jadi setiap elemen dengan ID navigation akan menerima gaya yang dimaksud :

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

Universal Selector Selektor universal mencocokkan elemen apa pun dalam konteks di mana ia ditempatkan di selektor. Pada contoh di bawah, karakter * adalah pemilih universal :

/* karakter asterisk adalah pemilih universal */
.navigation ul * {
  width: 100px;
  float: left;
}

Jadi, setiap elemen yang muncul sebagai file keturunan elemen daftar tak berurutan di dalam elemen yang memiliki class navigation akan menerima gaya yang dideklarasikan. Penyeleksi universal umumnya tidak disarankan karena alasan kinerja.

Attribute Selector adalah jika Anda menggunakan atribut selain class atau id untuk mengidentifikasi elemen dalam stylesheet, Anda akan menggunakan Attribute Selectors. Anda juga dapat melakukan pencocokan pola dasar dalam pemilih atribut (jadi jika Anda ingin melakukan pencocokan pola dasar untuk pemilih menggunakan atribut class 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-Classes adalah class yang diterapkan ke elemen berdasarkan informasi yang tidak ada di markup, misalnya :first-child atau :last-child. Anda tidak dapat menggunakan section article :first-child untuk memilih kemunculan pertama article, jika anak pertama dari section adalah h1 dan bukan artikel. Begitu juga dengan :nth-child, dan :last-childpseudo-class.

Pseudo-Elements adalah Pseudo-elements berbeda dari Pseudo-Classes karena mereka benar-benar membuat elemen di pohon dokumen. Ini hampir merupakan contoh pertama CSS yang memodifikasi pohon dokumen HTML. Idealnya Anda harus menggunakan pseudo-elemen dengan :: bukan : (tetapi sebagian besar browser menerima notasi : untuk pseudo-elemen CSS 2.1). Pseudo-unsur tersebut adalah : ::first-line, ::first-letter, ::before, ::after.

Combinators adalah Pemilihan elemen berdasarkan kejadian dalam kaitannya dengan unsur lain (dipilih oleh pilihan combinator : spasi, >, +, atau ~).

Ada empat kombinator berbeda di CSS :

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

Apa arti dari keempat istilah di atas :

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

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

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

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

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

  • Media Features adalah Dengan kueri media, Anda dapat menargetkan gaya bergantung pada fitur media tersebut. Penggunaan populer dari fitur media adalah min-width dan max-width untuk mendeteksi perangkat iOS.

  • Vendor-specific Extension adalah Persis seperti yang disebutkannya. Mereka menyediakan fungsionalitas khusus untuk vendor tertentu (yaitu browser). Mereka tidak selalu mewakili fitur yang dideklarasikan dalam standar.

  • Comment atau Statement adalah Bahasa yang menjadi penjelasan atas kode CSS yang disusun di bawahnya. Contoh : komentar di sini mengatakan tentang 4 hal :

    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;

Tinggalkan Komentar

Kirimkan balasan
24336 dilihat

1-1 dari 1

Balas diskusi ini

Anda tidak dapat mengedit posting atau membuat balasan: Anda harus masuk sebelum dapat memposting.

Kata-kata Bijak

" Musibah itu menjadi lucu, asalkan itu terjadi pada orang lain. Bukankah saya seorang yang berengsek? "

Referensi Artikel :

Platform Situsweb CMS Modern

Tag posting: Referensi 05 Agustus 2021

Ragam Jenis Lisensi

Tag posting: Kode, Referensi 29 September 2020

CSS | Istilah populer dalam situsweb

Tag posting: Kode, Referensi 15 September 2020

HTML | Istilah populer dalam situsweb

Tag posting: Kode, Referensi 13 September 2020

Koleksi Animasi Guna Pakai Codepens

Tag posting: Kode, Referensi 07 September 2020

Koleksi Template Situsweb :

We Build

Tag posting: Bootstrap, Modifikasi, Template 04 Agustus 2021

Blueprint - (Template Cetakbiru)

Tag posting: Bootstrap, Template 04 Agustus 2021

Above - Template Pendidikan

Tag posting: Bootstrap, Template 04 Agustus 2021

Portofolio - (Template Cetakbiru)

Tag posting: HTML5, Template 04 Agustus 2021

Coming Sssoon + Modifikasi

Tag posting: Bootstrap, Modifikasi, Template 30 Oktober 2020

Mobster + Modifikasi

Tag posting: Bootstrap, Template 29 Oktober 2020

Material Kit React + Modifikasi

Tag posting: Modifikasi, React, Template 06 Oktober 2020

SB Admin + Modifikasi

Tag posting: Bootstrap, Modifikasi, Template 06 Oktober 2020

Space Science + Modifikasi

Tag posting: HTML5, Modifikasi, Template 01 Oktober 2020

Moderna + Modifikasi

Tag posting: Bootstrap, Modifikasi, Template 30 September 2020
Tentang
Rss
  • Artikel Bebas | Artikel dan Koleksi Template https://nickgenom.com/id/forum Artikel dan Koleksi Template https://nickgenom.com/id/forum-topik/artikel-dan-koleksi-template-2 Rab, 20 Okt 2021 00:11:34 +0000

    apa sih ini?
    Artikel dan Koleksi Template https://nickgenom.com/id/forum-topik/artikel-dan-koleksi-template Sen, 18 Okt 2021 20:10:22 +0000