Apa itu CSS dan daftarnya - Wavker Blog

Apa itu CSS dan daftarnya

Setelah kita mempraktek kan nya ada guna nya dulu kita memahami susunan selektor css beserta contoh dan penjelasana nya. Tapi apa masih ada ...

Setelah kita mempraktek kan nya ada guna nya dulu kita memahami susunan selektor css beserta contoh dan penjelasana nya.

Tapi apa masih ada yang belum tau apa itu CSS kalo begitu yok kita pahami dulu apa itu CSS.
CSS adalah singkatan Cascading Style Sheets. CSS adalah bahasa pengkodean yang digunakan untuk menata gaya tampilan halaman web agar lebih baik dan indah saat kita tampilkan di website kita.

dan cara memahami tag tag css untuk desain blog

CSS hadir sebagai pelengkap HTML pastinya. yaa seperti kita tau HTML lebih fokus pada aspek pendefinisian konten, maka untuk membuat layout dan tata warna menjadi masalah pada pengkodean HTML, maka di kembangkanlah CSS yang untuk membagi atau memisahkan aspek konten dengan tampilan, Nah CSS difungsikanlah untuk menangani tata letak pada website kita, CSS juga sebuah halam web, lihat kode sumber halaman dan buka URL rujukan tag <link> yang akan mengarah ke sebuah file berektensi .CSS

Nah sudah paham bukan ? yok kita lihat daftar nya seperti apa sih CSS tersebut

SusunanContoh selectorBerlaku di
ElemenpSemua Elemen
.class .kotakSemua Class .kotak
#id#awalSemua id #awal
**Semua Elemen HTML
elemen, elemen div, pSemua elemen <div> dan <p>
elemen elemendiv pSemua elemen <p> didalam elemen <div>
elemen > elemendiv > psemua elemen<p> besarnya <div>
elemen + elemendiv + psemua elemen <p> yang persis setelah <div>
elemen1 ~ elemen2p ~ ulsemua elemen <ul> diawali <p>
[atribut][target]semua atribut gadget
[atribut=nilai][target=_blank]semua elemen dengn targettarget=_blank
[atribut~=nilai][title~=sesuatu]Semua Elemen beratribut title
[atribut|=nilai][lang|=id]Semua Elemen beratribut dengan awal "id"
[atribut^=nilai]a[href^="https"]Elemen <a> yang href-nya awal https
[atribut$=nilai]a[href$="pdf']semua elemen <a> href diakhiri nilai pdf
[atribut*=nilai]a[href*="sesuatu"Semua Elemen<a> yang atribut "sesuatu
:activea:activeSemua link aktif
::afterp::afterSemua Elemen <p> disispi setelahnya
::beforep::beforeSemua Elemen <p> disispi sbelumnya
:chekedinput:chekedSemua Elemen <input> atribut cheked
:disableinput:disablesemua elemen <input> atribut disable
:emptyp:emptySemua elemen <p> tdk memiliki anak
:enableinput:enableSemua Elemen <p> atribut enable
:first-childp:first-childSemua Elemen <p> menjadi anak dari elemen utama
::first-letterp::first-letterSemua Huruf pertama di elemen<p>
::first-linep::first-linesemua baris pertama di elemen <p>
:first-of-typep:first-of-typesemua elemen <p> yang menjadi elemen <p> pertama
:focusinput:focusSemua Elemen atribut fokus
:hovera:hoversemua link saat di hover
:in-rangeinput:in-rangesemua elemen input dgn nilai rage yg ditentukan
:invalidinput:invalidSemua Elemen input dgn nilai invalid
:lang(bahasa)p:lang(id)Semua Elemen <p> dengan atribut lang bernilai id
:last-childp:last-childsemua elemen <p> yg mnjadi terakhir elemen induk
:last-of-typep:last-of-typeSemua Elemen <p> yg mjd elemen <p> trakhir induk
:linka:linkSemualink yg blum dibuka
:not(selector):not(p)Semua Elemen selain <p>
:nth-child(n)p:nth-child(2)Semua Elemen<p> yg mjd anak kedua elemen induk
:nth-last-child(n)p:nth-last-child(2)semua elemen <p> yg mjd anak kedua
:nth-last-of-type(n)p:nth-last-of-type(2)semua elemen <p> yg mjd elemen<p> kedua dari induk
:nth-of-type(n)p:nth-of-type(2)Semua Elemen <p> yg mjd elemen <p> kedua dri induk
:only-of-typep:only-of-typesemua elemen <p> yg mjd satu2 elemen <p> dri induk
:only-childp:only-childSemua Elemen <p> yg mjd satu2 nya anak dari elemen induk
:optionalinput:optionalSemua Elemen input tnp atribut required
:out-of-rangeinput:out-of-rangeelemen input dgn nilai luar range yg ditentukan
:read-onlyinput:read-onlySemua Elemen input dgn atribut readonly
:read-writeinput:read-writeSemua Elemen input dgn atribut non readonly
:requiredinput:requiredSemua Elemen input dengan atribut required
:root:rootElemen root di dokumen
:target#awal:targetelemen #awal yg sedang aktif
:validinput:validSemua Elemen input dgn nilai valid
:visiteda:visitedSemua link yang pernah dibuka

Nah berikut kurang lebih daftar susunan selector css nya nah sembelum kita memulai gimana membuat css ada perlunya dulu agan memahami susunan selectornya ,
terima kasih

Artikel Terkait

0 komentar

Disqus for wavker