CSS | Istilah populer dalam situsweb 4 kali dilihat

Deskripsi

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, kelas, nilai kata kunci, dan at-rule. Dalam contoh, di bawah ini ada empat pengenal:
/* "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:
/* the selector is everything on the first line */
/* excluding the opening curly brace */
#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 kelas, ID, atau pemilih lain untuk menerapkan gaya yang diberikan. Sebaliknya, ini secara langsung menargetkan semua elemen nav HTML5 :
/* matches an HTML element by name */
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 kelas yang sama. Selektor pada contoh di bawah menargetkan elemen dengan nama kelasnya. Jadi setiap elemen dengan kelas "navigasi" akan menerima gaya yang dimaksud:
/* matches HTML element with 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:

/* matches HTML element with id="navigation" */
#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:
/* the asterisk character is the universal selector */
.navigation ul * {
  width: 100px;
  float: left;
}

Jadi, setiap elemen yang muncul sebagai file keturunan elemen daftar tak berurutan di dalam elemen yang memiliki kelas "navigasi" 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 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>Tautan dengan atribut "target" mendapat latar belakang kuning:</p>

<a href="https://www.google.com">Google Internasional</a>

<!-- latar belakang berwarna kuning -->
<a href="https://www.google.co.id" target="_blank">Google Indonesia</a>
<a href="https://www.google.org" target="_top">Google Organisasi</a>
<!-- latar belakang berwarna kuning -->

</body>
</html>
  • Pseudo-Classes adalah kelas yang diterapkan ke elemen berdasarkan informasi yang tidak ada di markup, misalnya :first-child atau :last-child. Anda tidak dapat menggunakan section article:first-childuntuk memilih kemunculan pertama article, jika anak pertama dari section adalah h1dan bukan article. 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:

  1. Descendant selector (space)
  2. Child selector (>)
  3. Adjacent sibling selector (+)
  4. General sibling selector (~)

Apa arti dari keempat istilah di atas :

  1. Descendant Combinator Ini adalah penggunaan yang paling umum, mis #responsive h1.
  2. 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;
}
  1. Adjacent Sibling Combinator adalah Elemen yang berbatasan langsung dengan elemen lain.
  2. 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, and @font-face.
  • Media Features adalah Dengan kueri media, Anda dapat menargetkan gaya bergantung pada fitur media tersebut. Penggunaan populer dari fitur media adalah min-widthdan max-widthuntuk 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)
/*!
 * 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: Kode Referensi pada 15 September 2020

Komentar

Forum Diskusi

Post a reply
3055 views

Balas ke diskusi ini