Home » CSS » Properti A-Z di CSS

Properti A-Z di CSS

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Section Artikel

Properti CSS

A

align-contentMenentukan keselarasan antara garis di dalam wadah fleksibel ketika item tidak menggunakan semua ruang yang tersedia
align-itemsMenentukan penyelarasan untuk item di dalam konotainer fleksibel
align-selfMenentukan penyelarasan untuk item yang dipilih di dalam wadah fleksibel
allMereset semua properti (kecuali unicode-bidi dan direction)
animationProperti singkatan untuk semua properti animation- *
animation-delayMenentukan penundaan untuk memulai animasi
animation-directionMenentukan apakah animasi harus dimainkan maju, mundur atau dalam siklus alternatif
animation-durationMenentukan lama animasi dalam menyelesaikan satu siklus
animation-fill-modeMenentukan gaya untuk elemen saat animasi tidak diputar (sebelum dimulai, setelah berakhir, atau keduanya)
animation-iteration-countMenentukan berapa kali animasi harus dimainkan
animation-nameMenentukan nama untuk animasi @keyframes
animation-play-stateMenentukan apakah animasi sedang berjalan atau dijeda
animation-timing-functionMenentukan kurva kecepatan animasi

B

backface-visibilityMendefinisikan apakah bagian belakang sebuah elemen harus terlihat atau tidak saat menghadap pengguna
backgroundProperti singkatan untuk semua properti background- *
background-attachmentMenyetel apakah gambar latar belakang bergulir dengan sisa halaman, atau diperbaiki
background-blend-modeMenentukan blending mode dari setiap lapisan latar belakang (warna / gambar)
background-clipMendefinisikan seberapa jauh latar belakang (warna atau gambar) harus diperluas dalam sebuah elemen
background-colorMenentukan warna latar belakang suatu elemen
background-imageMenentukan satu atau lebih gambar latar belakang untuk sebuah elemen
background-originMenentukan posisi asal gambar latar belakang
background-positionMenentukan posisi gambar latar belakang
background-repeatMenyetel jika / bagaimana gambar latar akan diulang
background-sizeMenentukan ukuran gambar latar belakang
borderProperti singkatan untuk lebar border, gaya border, dan warna border
border-bottomProperti singkatan untuk border-bottom-width, border-bottom-style, dan border-bottom-color
border-bottom-colorMengatur warna border bawah
border-bottom-left-radiusMendefinisikan radius border sudut kiri bawah
border-bottom-right-radiusMendefinisikan radius border sudut kanan bawah
border-bottom-styleSet gaya border bawah
border-bottom-widthMengatur lebar border bawah
border-collapseMenyetel apakah border tabel harus diciutkan menjadi satu border atau dipisahkan
border-colorMengatur warna empat border
border-imageProperti singkatan untuk semua properti border-image- *
border-image-outsetMenentukan jumlah di mana area gambar perbatasan melampaui kotak border
border-image-repeatMenentukan apakah gambar border harus diulang, dibulatkan atau direntangkan
border-image-sliceMenentukan cara memotong gambar border
border-image-sourceMenentukan jalur ke gambar yang akan digunakan sebagai border
border-image-widthMenentukan lebar gambar border
border-leftProperti singkatan untuk semua properti border-left-
border-left-colorSet warna border kiri
border-left-styleMengatur gaya border kiri
border-left-widthSet lebar border kiri
border-radiusProperti singkatan untuk empat properti border – * – radius
border-rightProperti singkatan untuk semua properti border-right- *
border-right-colorMengatur warna border kanan
border-right-styleSet gaya border kanan
border-right-widthSet lebar border kanan
border-spacingMenetapkan jarak antara border sel yang berdekatan
border-styleMenetapkan gaya empat border
border-topProperti singkatan untuk border-top-width, border-top-style, dan border-top-color
border-top-colorSet warna border atas
border-top-left-radiusMendefinisikan radius border sudut kiri atas
border-top-right-radiusMendefinisikan radius border sudut kanan atas
border-top-styleMengatur gaya border atas
border-top-widthSet lebar border atas
border-widthSet lebar empat border
bottomMenetapkan posisi elemen dari bawah elemen induknya
box-decoration-breakMenyetel perilaku latar belakang dan border elemen di jeda halaman atau untuk elemen sebaris, di jeda baris.
box-shadowMelampirkan satu atau lebih bayangan ke sebuah elemen
box-sizingMendefinisikan bagaimana lebar dan tinggi elemen dihitung: apakah mereka harus menyertakan padding dan border, atau tidak
break-afterMenentukan apakah page-, column-, atau region-break harus terjadi setelah elemen yang ditentukan
break-beforeMenentukan apakah page-, column-, atau region-break harus terjadi sebelum elemen yang ditentukan
break-insideMenentukan apakah page-, column-, atau region-break harus terjadi di dalam elemen yang ditentukan

C

caption-sideMenentukan penempatan keterangan tabel
caret-colorMenentukan warna kursor (tanda sisipan) di input, textareas, atau elemen apa pun yang dapat diedit
@charsetMenentukan pengkodean karakter yang digunakan dalam style sheet
clearMenentukan di sisi mana elemen mengambang elemen tidak diizinkan untuk mengapung
clipKlip elemen yang benar-benar diposisikan
colorMengatur warna teks
column-countMenentukan jumlah kolom elemen harus dibagi
column-fillMenentukan bagaimana mengisi kolom, seimbang atau tidak
column-gapMenentukan jarak antar kolom
column-ruleProperti singkatan untuk semua properti kolom-aturan- *
column-rule-colorMenentukan warna aturan antar kolom
column-rule-styleMenentukan gaya aturan antar kolom
column-rule-widthMenentukan lebar aturan antar kolom
column-spanMenentukan berapa banyak kolom yang harus direntangkan oleh sebuah elemen
column-widthMenentukan lebar kolom
columnsProperti singkatan untuk columns-width dan columns-count
contentDigunakan dengan pseudo-element: before dan: after, untuk menyisipkan konten yang dihasilkan
counter-incrementMeningkatkan atau menurunkan nilai dari satu atau lebih penghitung CSS
counter-resetMembuat atau menyetel ulang satu atau lebih penghitung CSS
cursorMenentukan kursor mouse untuk ditampilkan saat menunjuk ke sebuah elemen

D

directionMenentukan arah teks / arah penulisan
displayMenentukan bagaimana elemen HTML tertentu harus ditampilkan

E

empty-cellsMenentukan apakah akan menampilkan perbatasan dan latar belakang pada sel kosong dalam sebuah tabel

F

filterMendefinisikan efek (misalnya kabur atau perubahan warna) pada elemen sebelum elemen ditampilkan
flexProperti singkatan untuk properti flex-grow, flex-shrink, dan flex-basis
flex-basisMenentukan panjang awal item fleksibel
flex-directionMenentukan arah item fleksibel
flex-flowProperti singkatan untuk flex-direction dan properti flex-wrap
flex-growMenentukan seberapa banyak item akan tumbuh relatif terhadap yang lain
flex-shrinkMenentukan bagaimana item akan menyusut relatif terhadap yang lain
flex-wrapMenentukan apakah item fleksibel harus dibungkus atau tidak
floatMenentukan apakah sebuah kotak harus mengapung atau tidak
fontProperti singkatan untuk font-style, font-variant, font-weight, font-size / line-height, dan properti font-family
@font-faceAturan yang memungkinkan situs web mengunduh dan menggunakan fon selain fon “safe web”
font-familyMenentukan font family untuk teks
font-feature-settingsMemungkinkan kontrol atas fitur tipografi lanjutan di font OpenType
@font-feature-valuesIzinkan penulis untuk menggunakan nama umum dalam font-variant-alternate untuk fitur yang diaktifkan secara berbeda di OpenType
font-kerningMengontrol penggunaan informasi kerning (bagaimana spasi huruf)
font-language-overrideMengontrol penggunaan mesin terbang khusus bahasa dalam jenis huruf
font-sizeMenentukan ukuran font teks
font-size-adjustMenjaga keterbacaan teks saat penggantian font terjadi
font-stretchMemilih font normal, padat, atau diperluas dari kumpulan font
font-styleMenentukan gaya font untuk teks
font-synthesisKontrol yang hilang tipografi (tebal atau miring) dapat disintesis oleh browser
font-variantMenentukan apakah teks harus ditampilkan dalam font huruf kecil atau tidak
font-variant-alternatesMengontrol penggunaan mesin terbang alternatif yang terkait dengan nama alternatif yang ditentukan dalam @ font-feature-values
font-variant-capsMengontrol penggunaan mesin terbang alternatif untuk huruf kapital
font-variant-east-asianMengontrol penggunaan mesin terbang alternatif untuk skrip Asia Timur (misalnya Jepang dan Cina)
font-variant-ligaturesMengontrol ligatur dan bentuk kontekstual mana yang digunakan dalam konten tekstual elemen yang diterapkan padanya
font-variant-numericMengontrol penggunaan mesin terbang alternatif untuk angka, pecahan, dan penanda ordinal
font-variant-positionMengontrol penggunaan mesin terbang alternatif dengan ukuran lebih kecil yang diposisikan sebagai superskrip atau subskrip terkait garis dasar font
font-weightMenentukan panjang font

G

gridProperti singkatan untuk properti  grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, dan the grid-auto-flow
grid-areaMenenetukan nama untuk item grid atau properti singkatan untuk properti  grid-row-startgrid-column-startgrid-row-end, dan grid-column-end 
grid-auto-columnsMenentukan ukuran kolom default
grid-auto-flowMenentukan bagaimana item yang ditempatkan secara otomatis dimasukkan ke dalam grid
grid-auto-rowsMenentukan ukuran baris default
grid-columnProperti singkatan untuk properti  grid-column-start dan the grid-column-end 
grid-column-endMenentukan di mana untuk mengakhiri item grid
grid-column-gapMenentukan ukuran jarak antar kolom
grid-column-startMenentukan di mana untuk memulai item grid
grid-gapProperti singkatan untuk properti grid-row-gap dan grid-column-gap 
grid-rowProperti singkatan untuk properti grid-row-start dan the grid-row-end 
grid-row-endMenentukan di mana untuk mengakhiri item grid
grid-row-gapMenentukan ukuran jarak antar baris
grid-row-startMenentukan di mana untuk memulai item grid
grid-templateProperti singkatan untuk properti grid-template-rowsgrid-template-columns dan grid-areas 
grid-template-areasMenentukan cara menampilkan kolom dan baris, menggunakan item grid bernama
grid-template-columnsMenentukan ukuran kolom, dan berapa banyak kolom dalam tata letak grid
grid-template-rowsMenentukan ukuran baris dalam tata letak grid

H

hanging-punctuationMenentukan apakah karakter tanda baca dapat ditempatkan di luar kotak baris
heightMenyetel tinggi suatu elemen
hyphensMenyetel cara membagi kata untuk menyempurnakan tata letak paragraf

I

image-renderingMemberi petunjuk kepada browser tentang aspek gambar apa yang paling penting untuk dipertahankan saat gambar diskalakan
@importMemungkinkan kita untuk mengimpor lembar gaya ke lembar gaya lain
isolationMendefinisikan apakah suatu elemen harus membuat konten susun baru

J

justify-contentMenentukan keselarasan antara item di dalam wadah fleksibel ketika item tidak menggunakan semua ruang yang tersedia

K

@keyframesMenentukan kode animasi

L

leftMenentukan posisi kiri dari elemen yang diposisikan
letter-spacingMenambah atau mengurangi spasi antar karakter dalam teks
line-breakMenentukan bagaimana / jika memutus garis
line-heightSetel tinggi garis
list-styleSet semua properti untuk daftar dalam satu deklarasi
list-style-imageMenentukan gambar sebagai penanda item daftar
list-style-positionMenentukan posisi penanda item daftar (poin-poin)
list-style-typeMenentukan jenis penanda item daftar

M

marginSet semua properti margin dalam satu deklarasi
margin-bottomMenetapkan margin bawah elemen
margin-leftMenetapkan margin kiri sebuah elemen
margin-rightMenetapkan margin kanan sebuah elemen
margin-topMenetapkan margin atas elemen
max-heightMenyetel tinggi maksimum sebuah elemen
max-widthMenyetel lebar maksimum sebuah elemen
@mediaMenyetel aturan gaya untuk berbagai jenis / perangkat / ukuran media
min-heightMenetapkan tinggi minimum suatu elemen
min-widthMenyetel lebar minimum sebuah elemen
mix-blend-modeMenentukan bagaimana konten elemen harus berbaur dengan latar belakang induk langsungnya

O

object-fitMenentukan bagaimana konten elemen yang diganti harus dipasang ke kotak yang ditetapkan oleh tinggi dan lebar yang digunakan
object-positionMenentukan perataan elemen yang diganti di dalam kotaknya
opacityMenyetel tingkat opasitas untuk suatu elemen
orderMenyetel urutan item fleksibel, relatif terhadap yang lainnya
orphansMenetapkan jumlah minimum baris yang harus ditinggalkan di bagian bawah halaman saat jeda halaman terjadi di dalam elemen
outlineProperti singkatan untuk properti outline-width, outline-style, dan the outline-color properties
outline-colorMengatur warna garis luar
outline-offsetMengimbangi garis luar, dan menggambarnya di luar tepi perbatasan
outline-styleMengatur gaya garis besar
outline-widthMengatur lebar garis
overflowMenentukan apa yang terjadi jika konten meluap dari kotak elemen
overflow-wrapMenentukan apakah browser dapat memecah baris dalam kata untuk mencegah overflow (ketika string terlalu panjang untuk memuat kotaknya)
overflow-xMenentukan apakah akan memotong tepi kiri / kanan konten atau tidak, jika melebihi area konten elemen
overflow-yMenentukan apakah akan memotong tepi atas / bawah konten atau tidak, jika melebihi area konten elemen

P

paddingProperti singkatan untuk semua properti padding- *
padding-bottomMenetapkan padding bawah suatu elemen
padding-leftMengatur padding kiri sebuah elemen
padding-rightMenetapkan padding yang tepat dari sebuah elemen
padding-topMenetapkan padding atas suatu elemen
page-break-afterMenyetel page-break halaman setelah sebuah elemen
page-break-beforeMenyetel page-break halaman sebelum elemen
page-break-insideMenyetel page-break halaman di dalam elemen
perspectiveMemberikan elemen posisi 3D beberapa perspektif
perspective-originMenentukan di posisi mana pengguna melihat elemen posisi 3D
pointer-eventsMendefinisikan apakah suatu elemen bereaksi terhadap peristiwa pointer
positionMenentukan jenis metode pemosisian yang digunakan untuk elemen (statis, relatif, absolut atau tetap)

Q

quotesMenetapkan jenis tanda kutip untuk kutipan yang disematkan

R

resizeMendefinisikan jika (dan bagaimana) sebuah elemen diubah ukurannya oleh pengguna
rightMenentukan posisi yang tepat dari elemen yang diposisikan

S

scroll-behaviorMenentukan apakah akan menganimasikan posisi gulir dengan mulus dalam kotak yang dapat digulir, bukan lompatan lurus

T

tab-sizeMenentukan lebar karakter tab
table-layoutMendefinisikan algoritma yang digunakan untuk meletakkan sel tabel, baris, dan kolom
text-alignSpecifies the horizontal alignment of text
text-align-lastMenjelaskan bagaimana baris terakhir dari sebuah blok atau sebuah baris tepat sebelum pemisah baris paksa diratakan saat text-align adalah “rata”
text-combine-uprightMenentukan kombinasi beberapa karakter ke dalam spasi dari satu karakter
text-decorationMenentukan dekorasi yang ditambahkan ke teks
text-decoration-colorMenentukan warna dekorasi teks
text-decoration-lineMenentukan jenis garis dalam dekorasi teks
text-decoration-styleMenentukan gaya garis dalam dekorasi teks
text-indentMenentukan indentasi baris pertama dalam blok teks
text-justifyMenentukan metode justifikasi yang digunakan saat text-align adalah “justify”
text-orientationMendefinisikan orientasi teks dalam satu baris
text-overflowMenentukan apa yang harus terjadi ketika teks meluap dari elemen yang memuatnya
text-shadowMenambahkan bayangan ke teks
text-transformMengontrol kapitalisasi teks
text-underline-positionMenentukan posisi garis bawah yang disetel menggunakan properti dekorasi teks
topMenentukan posisi atas dari elemen yang diposisikan
transformMenerapkan transformasi 2D atau 3D ke elemen
transform-originMemungkinkan Anda mengubah posisi pada elemen yang diubah
transform-styleMenentukan bagaimana elemen bersarang dirender dalam ruang 3D
transitionProperti singkatan untuk semua properti transisi- *
transition-delayMenentukan kapan efek transisi akan dimulai
transition-durationMenentukan berapa detik atau milidetik yang dibutuhkan untuk menyelesaikan efek transisi
transition-propertyMenentukan nama properti CSS untuk efek transisi
transition-timing-functionMenentukan kurva kecepatan dari efek transisi

U

unicode-bidiDigunakan bersama dengan properti direction untuk menyetel atau mengembalikan apakah teks harus diganti untuk mendukung banyak bahasa dalam dokumen yang sama
user-selectMenentukan apakah teks suatu elemen dapat dipilih

V

vertical-alignMenyetel perataan vertikal suatu elemen
visibilityMenentukan apakah sebuah elemen terlihat atau tidak

W

white-spaceMenentukan bagaimana ruang putih di dalam elemen ditangani
widowsMenetapkan jumlah minimum baris yang harus ditinggalkan di bagian atas halaman ketika jeda halaman terjadi di dalam elemen
widthSet lebar elemen
word-breakMenentukan bagaimana kata-kata harus putus saat mencapai akhir baris
word-spacingMenambah atau mengurangi jarak antar kata dalam teks
word-wrapMemungkinkan kata-kata yang panjang dan tidak bisa dipecahkan untuk dipecah dan digabungkan ke baris berikutnya
writing-modeMenentukan apakah baris teks diletakkan secara horizontal atau vertikal

Z

z-indexMenyetel urutan tumpukan elemen yang diposisikan

You may also like