Apa Itu Cascading Style Sheets (CSS)?

Feb 27, 2024

4 menit maca

Apa CSS? Lembar Gaya Cascading, CSS Responsif, CSS Sassy, Compress, Minify, Unminify, Uncompress Tool

Waca ing ngisor iki kanggo panjelasan lengkap babagan cara kerja gaya cascading. Kita nampilake aplikasi ing sisih ndhuwur kaca supaya gampang ditemokake lan digunakake. Yen sampeyan maca artikel iki liwat email utawa feed, klik menyang kompres CSS sampeyan.

Yen sampeyan ora bener-bener ngembangake situs, sampeyan bisa uga ora ngerti kabeh lembar gaya cascading (CSS). CSS minangka basa stylesheet sing digunakake kanggo njlèntrèhaké tampilan lan format dokumen sing ditulis HTML or XML. CSS bisa digunakake kanggo nemtokake gaya kanggo macem-macem unsur kayata font, werna, spasi, lan tata letak. CSS ngidini sampeyan misahake presentasi dokumen HTML saka isine, supaya luwih gampang kanggo njaga lan nganyari gaya visual situs web sampeyan.

Struktur Basa CSS

The pamilih punika unsur HTML sing pengin gaya, lan property lan Nilai nemtokake gaya sing pengin ditrapake kanggo unsur kasebut:

selector {
  property: value;
}

Contone, CSS ing ngisor iki bakal nggawe kabeh <h1> unsur ing kaca nduweni werna abang lan ukuran font 32px:

CSS

h1 {
  color: red;
  font-size: 32px;
}

output

judhul

Sampeyan uga bisa nemtokake CSS kanggo ID unik ing unsur:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

output

Intro

Utawa aplikasi kelas ing pirang-pirang unsur:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

output

Aku pengin murup tembung ing tag span.

Sampeyan bisa nyakup CSS ing dokumen HTML kanthi telung cara:

Inline CSS, nggunakake style atribut ing unsur HTML
CSS internal, nggunakake a <style> unsur ing <head> dokumen HTML sampeyan
CSS njaba, nggunakake file .css kapisah sing disambung menyang dokumen HTML nggunakake <link> unsur ing <head> dokumen HTML sampeyan

CSS responsif

CSS iku luar biasa fleksibel lan bisa digunakake kanggo nyetel tampilan unsur adhedhasar resolusi layar, supaya sampeyan bisa duwe HTML padha nanging mbangun iku. responsif kanggo resolusi piranti:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

Kompresi CSS

Sampeyan bisa ndeleng ing conto ing ndhuwur yen ana komentar, pitakon media, lan macem-macem gaya sing nggunakake spasi lan feed baris kanggo ngatur tampilan CSS. Praktek sing apik kanggo nyilikake utawa ngompres CSS ing situs sampeyan kanggo nyuda ukuran file lan, sabanjure, wektu sing dibutuhake kanggo njaluk lan nggawe gaya sampeyan. Iku dudu jumlah cilik… sampeyan bisa ndeleng luwih saka 50% tabungan ing sawetara conto ing ndhuwur.

Akeh konfigurasi server nawakake alat sing bakal ngompres CSS kanthi otomatis kanthi cepet lan nyimpen file sing diminimalisir supaya sampeyan ora kudu nindakake kanthi manual.

Apa SCSS?

CSS sassy (SCSS) minangka preprocessor CSS sing nambah fungsi lan sintaks tambahan menyang basa CSS. Iki ngluwihi kemampuan CSS kanthi ngidini panggunaan variabel, mixin, fungsi, lan fitur liyane sing ora kasedhiya ing CSS standar.

Kaluwihan SCSS

Pangopènan sing luwih apik: Kanthi nggunakake variabel, sampeyan bisa nyimpen nilai ing sak panggonan lan digunakake maneh ing lembar gaya, dadi luwih gampang kanggo njaga lan nganyari gaya.
Organisasi sing luwih apik: Kanthi mixin, sampeyan bisa ngelompokake lan nggunakake maneh set gaya, nggawe stylesheet luwih teratur lan luwih gampang diwaca.
Fungsi sing tambah: SCSS kalebu akeh fitur sing ora kasedhiya ing CSS standar, kayata fungsi, struktur kontrol (contone, yen / liya), lan operasi aritmetika. Iki ngidini gaya sing luwih dinamis lan ekspresif.
Kinerja sing luwih apik: File SCSS dikompilasi dadi CSS, sing bisa ningkatake kinerja kanthi ngurangi jumlah kode sing kudu diurai dening browser.

Kekurangan SCSS

Kurva sinau: SCSS nduweni sintaks sing beda karo CSS standar, lan sampeyan kudu sinau sintaks anyar iki sadurunge bisa nggunakake kanthi efektif.
Kerumitan tambahan: Sanajan SCSS bisa nggawe stylesheet luwih teratur lan luwih gampang dijaga, nanging uga bisa nambah kerumitan tambahan menyang basis kode, utamane yen sampeyan ora ngerti fitur lan sintaks anyar.
Piranti: Kanggo nggunakake SCSS, sampeyan butuh kompiler kanggo nerjemahake kode SCSS menyang CSS. Iki mbutuhake persiyapan lan perkakas tambahan, sing bisa dadi alangan kanggo mlebu kanggo sawetara pangembang.

Ing conto ing ngisor iki, kode SCSS nggunakake variabel kanggo nyimpen nilai ($primary-color lan $font-size) sing bisa digunakake maneh ing lembar gaya. Kode CSS sing digawe saka kode SCSS iki padha, nanging ora kalebu variabel. Nanging, nilai-nilai variabel digunakake langsung ing CSS.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

Fitur liyane saka SCSS sing dituduhake ing conto iki yaiku gaya bersarang. Ing kode SCSS, ing h1 gaya sing nested ing body gaya, kang ora bisa ing CSS standar. Nalika kode SCSS wis nyawiji, gaya nested ditambahi menyang gaya kapisah ing kode CSS.

Sakabèhé, SCSS menehi akeh kaluwihan saka CSS standar, nanging iku penting kanggo nimbang trade-off lan milih alat nengen kanggo project adhedhasar kabutuhan lan alangan.