К содержанию

Panduan CSS

Panduan CSS yang praktis, ditulis dengan bahasa sederhana, disertai contoh. Berisi hal-hal yang paling diperlukan, serta flexbox, grid, animasi, gradient, transformasi, dan semua fitur modern!

Yang Paling Diperlukan

Properti font-size

Properti font-style

Properti font-weight

Properti line-height

Properti font-family

Properti font

Properti text-indent

Properti text-align

Pemotongan Kata

Properti white-space

Properti word-break

Properti overflow-wrap

Properti overflow

Properti overflow-x

Properti overflow-y

Properti tab-size

Properti text-overflow

Properti hyphens

Properti line-clamp

Warna

Properti color

Pembulatan

Properti border-radius

Properti border-top-left-radius

Properti border-top-right-radius

Properti border-bottom-left-radius

Properti border-bottom-right-radius

Garis Luar

Properti outline

Properti outline-width

Properti outline-style

Properti outline-color

Properti outline-offset

Bayangan

Properti text-shadow

Properti box-shadow

Transparansi

Properti opacity

Properti visibility

Gradien

Fungsi linear-gradient

Fungsi radial-gradient

Fungsi repeating-linear-gradient

Fungsi repeating-radial-gradient

Pemotongan

Properti clip

Properti clip-path

Properti mask

Properti mask-position

Properti mask-image

Properti mask-mode

Properti mask-size

Properti mask-repeat

Properti mask-origin

Properti mask-clip

Properti mask-composite

Gambar Batas

Properti border-image

Properti border-image-source

Properti border-image-slice

Properti border-image-repeat

Properti border-image-outset

Properti border-image-width

Interaksi dengan Mouse

Pseudo-elemen selection

Properti user-select - Melarang Seleksi Teks

Properti pointer-events

Properti cursor

Gaya

Perintah !important

Perintah media

Perintah supports

Perintah import

Pseudo-class default

Pseudoclass fullscreen

Pseudo-class in-range

Pseudo-kelas indeterminate

Pseudoclass invalid

Pseudo-class optional

Pseudo-class out-of-range

Pseudoclass placeholder-shown

Pseudo-class read-only

Pseudokelas read-write

Pseudo-class required

Pseudoclass valid

Properti caret-color

Pseudo-class focus-within

Properti scroll-behavior

Daftar

Properti list-style-type

Properti list-style-position

Properti list-style-image

Properti list-style

Tabel

Properti border-collapse

Properti border-spacing

Properti empty-cells

Properti table-layout

Tautan

Pseudo-class link

Pseudo-class visited

Pseudokelas hover

Pseudo-class active

Formulir

Pseudo-class focus

Pseudo-elemen placeholder

Pseudo-class checked

Pseudoclass disabled

Pseudokelas enabled

Dimensi

Properti width

Properti height

Properti min-width

Properti max-width

Properti min-height

Properti max-height

Padding

Properti margin

Properti margin-top

Properti margin-bottom

Properti margin-left

Properti margin-right

Properti padding

Properti padding-top

Properti padding-bottom

Properti padding-left

Properti padding-right

Properti padding-block-end

Properti padding-block-start

Properti padding-inline-end

Properti padding-inline-start

Lainnya

Properti box-sizing

Properti display

Properti resize

Properti aspect-ratio

Properti object-fit

Perhitungan

Fungsi calc

Fungsi clamp

Fungsi min

Fungsi max

Unit Ukuran

Unit px

Unit em

Unit rem

Satuan %

Unit fr

Unit vw

Unit vh untuk Ukuran di CSS

Unit vmax

Unit vmin

Flex

Properti flex-direction

Properti justify-content

Properti align-items

Properti flex-wrap

Properti flex-flow

Properti align-self

Properti order

Properti flex-basis

Properti flex-grow

Properti flex-shrink

Properti flex

Posisi

Properti position

Properti z-index

Pseudo-elemen backdrop

Properti bottom

Properti top

Properti left

Properti right

Properti caption-side

Pelampungan

Properti Float

Properti clear

Properti shape-outside

Properti shape-margin

Kolom

Properti column-count

Properti column-rule

Properti column-width

Properti column-span

Properti columns

Negasi

Pseudokelas not

Berdasarkan Posisi

Pseudo-class first-child

Pseudo-kelas last-child

Pseudo-class nth-child

Pseudo-kelas nth-last-child

Pseudo-class only-child

Berdasarkan Tipe dan Posisi

Pseudoclass first-of-type

Pseudoclass last-of-type

Pseudoclass nth-of-type

Pseudo-kelas nth-last-of-type

Pseudo-class only-of-type

Lainnya

Pseudo-class empty

Pseudo-kelas lang

Pseudokelas target

Bagian Teks

Pseudo-elemen first-letter

Pseudo-elemen first-line

Transisi Halus

Properti transition-duration

Properti transition-delay

Properti transition-property

Properti transition-timing-function

Properti transition

Animasi

Aturan @keyframes

Properti animation-name

Properti animation-duration

Properti animation-delay

Properti animation-timing-function

Properti animation-iteration-count

Properti animation-direction

Properti animation-fill-mode

Properti animation-play-state

Properti animation

Transformasi

Properti transform

Properti transform-origin

Rotasi

Fungsi rotate

Fungsi rotateX

Fungsi rotateY

Fungsi rotateZ

Fungsi rotate3d

Skala

Fungsi scale

Fungsi scaleX

Fungsi scaleY

Skew

Fungsi skew

Fungsi skewX

Fungsi skewY

Translasi

Fungsi translate

Fungsi translateX

Fungsi translateY

Penyisipan teks

Pseudo-elemen after

Pseudo-elemen before

Properti content

Fungsi attr

Penghitung

Properti counter-increment

Properti counter-reset

Selector

Selektor Kontekstual di CSS

Selektor Anak di CSS

Selektor Tetangga di CSS

Selektor Saudara dalam CSS

Selektor Universal di CSS

Selector

Selektor berdasarkan Nama Atribut

Pemilih Berdasarkan Nilai Atribut

Selektor berdasarkan Awal Nilai Atribut

Selektor Akhir Nilai Atribut

Pemilih Atribut Berdasarkan Teks

Pemilih Berdasarkan Salah Satu Nilai Atribut

Pemilih Atribut berdasarkan Tanda Hubung dalam Nilai