Lembar contekan css dengan contoh

Question

CSS adalah elemen dasar dari Internet. CSS adalah singkatan dari Cascading Style Sheets. Itu dibuat pada tahun 1994 oleh Håkon Wium Lie pada masa-masa awal World Wide Web modern. Istilah "gaya" dalam akronim memberikan penjelasan satu kata tentang apa itu CSS. Bahasa pengkodean menentukan gaya dan elemen desain situs web

CSS berbeda dari HTML (Hyper Text Markup Language), yang menentukan konten. Memisahkan gaya dari konten memungkinkan pengembang situs web mengelola situs web dengan lebih baik. Elemen HTML dapat diberi gaya in-line di masa-masa awal Internet. Banyak browser masih mendukung beberapa atribut HTML untuk gaya, yang meniru CSS

Misalnya, untuk membuat item menjadi tebal di CSS, kode yang digunakan adalah font-weight: bold;. kode yang digunakan dalam HTML adalah strong. Praktik terbaik untuk pengkodean adalah menggunakan CSS untuk gaya dan tidak menggunakan gaya HTML sebaris apa pun

Salah satu keuntungan menggunakan CSS adalah bahwa gaya desain dapat dipisahkan dari kode on-page in-line. Artinya, pengembang dapat mengedit teks di satu lokasi dan perubahannya akan tercermin di seluruh situs web

Manfaat ini terwujud jika pengembang menentukan nama Kelas CSS dan ID dalam kode di halaman. Bersamaan dengan itu, pengembang menulis kode CSS ke elemen gaya dalam file CSS eksternal. Yang akan ditempatkan di head_ dokumen Anda


 <link rel="stylesheet" href="css/style.css">

Dengan kode CSS, semua jenis parameter desain elemen dapat ditentukan. Warna, ukuran, perataan spasi, dan karakteristik lain dari blok teks, gambar, dan banyak elemen lainnya dapat dikontrol. CSS modern terus berkembang untuk memberi pengembang lebih banyak kontrol dan kreativitas dengan desain. Kumpulan pedoman terbaru yang sedang dikembangkan adalah CSS3

Pemilih CSS

Pemilih CSS adalah dasar penggunaan CSS. Anda menggunakan pemilih untuk menargetkan elemen tertentu yang ingin Anda gaya. Di bawah ini adalah cara kerja sintaks

Pemilih

Keterangan

Contoh

Universal

Elemen apa pun

*

Elemen

Setiap elemen dari jenis itu

h1 h2 h3 h4

PENGENAL

Pilih elemen dengan ID yang ditentukan

#Indo

Kelas

Memilih semua elemen dengan kelas

kelas

Keturunan

Memilih semua li dalam daftar unordered ul

ul li

Bersebelahan

Memilih semua elemen p yang ditempatkan tepat setelah elemen ul

ul + hal

Anak-anak langsung

Memilih semua elemen a yang induknya adalah elemen p

p > a

Penggabung saudara

Memilih setiap elemen a yang didahului oleh elemen p

p ~ a

Atribut

Memilih semua elemen dengan atribut target

sebuah target]

Semu

a. melayang
a. dikunjungi
a. tautan
a. fokus

Latar belakang

Properti

Nilai

Latar Belakang

warna latar belakang
gambar latar belakang
background-repeat
background-attachment
background-position

latar belakang (singkatan)

Sintaksis

Latar Belakang. bg-color bg-image [posisi/ukuran-bg] [bg-repeat] [bg-origin] [bg-clip] [bg-attachment] [awal. mewarisi];

Lembar Cheat CSS berisi cuplikan gaya yang paling umum. Gradien CSS, latar belakang, tombol, font-family, border, radius, box dan text shadow generator, color picker dan banyak lagi. Semua ini dan alat perancang web berguna lainnya dapat ditemukan di satu halaman

Uji lembar gaya yang dihasilkan dengan mengklik panah biru yang mengarah ke bawah. Ini akan mengisi editor HTML-CSS interaktif di bagian bawah halaman dengan kode CSS Anda dan markup HTML demo, memberi Anda pratinjau langsung untuk menguji dan menyesuaikan kode lebih lanjut

Menggunakan CSS sehari-hari?

Saya awalnya membuatnya untuk diri saya sendiri, tetapi akhirnya ingin membagikannya di WebsiteSetup

Jadi di sini Anda memilikinya – total 29 halaman, disusun dalam paragraf yang berbeda. latar belakang, batas, font, teks, Kolom, Warna, posisi Grid, dan banyak lagi (termasuk UI)

Penyingkapan. Peretasan. io didukung oleh audiensnya. Saat Anda membeli melalui tautan di situs kami, kami dapat memperoleh komisi afiliasi

CSS adalah singkatan dari Cascading Style Sheets. Dokumen yang ditulis dalam HTML diformat dan disajikan menggunakan CSS. Ada banyak fitur dalam HTML dan CSS adalah tambahan yang paling populer. Daripada mengubah halaman web itu sendiri, dengan CSS, hanya gaya yang perlu diubah, yang berarti lebih sedikit peluang untuk keseluruhan kode. Selain itu, HTML berisi banyak kode berulang untuk setiap halaman web, yang dapat dimasukkan ke dalam file umum dengan CSS dan digunakan di seluruh halaman web

CSS berisi – pemilih dan blok deklarasi. Blok deklarasi terdiri dari pasangan properti-nilai. Contoh,

#title

_

Di sini, judul adalah pemilih dan blok deklarasi adalah semuanya di dalam kurung kurawal. Disimpan sebagai -. file css

Lembar Cheat CSS

1. Fon

PropertyValuesExamplefont-stylenormal/italic/inherit/obliquefont-style. normalfont-variannormal/inherit/small-capsfont-varian. small-caps font-weight normal/bold/bolder/lighter/100-900/mewarisi font-weight. ukuran huruf tebal?px/?%/small/medium/ukuran huruf besar. ukuran font besar. 5 font-family verdana/calibri. dll…font-family. beranda

2. Teks

PropertyValuesExampletext-alignleft/right/center/justifytext-align. justifikasi; spasi huruf normal/panjang/?% spasi huruf. 3%;Teks-garis besarTidak ada/panjang/warnaTeks-garis besar. bungkus kata merah normal / bungkus kata panjang. normal;directionltr/rtl/inheritDirection. ltr;text-wrapnormal/unrestricted/nonetext-wrap. normaltext-indent?%/?pxtext-indent. 2%word-spacingnormal/?%/?pxword-spacing. normaltext-transformnone/uppercase/lowercase/capitalizetext-transform. huruf kecil-penekanan-teks/titik/buka/diisi/lingkaran/teks-segitiga-penekanan. diisi text-justify auto/distribute/inter-word text-justify. mendistribusikan

3. Antarmuka pengguna

PropertyValuesExampleappearance – terapkan gaya khusus platformnormal. mewarisi. [ikon. jendela. Desktop. ruang kerja. dokumen. keterangan alat. dialog. tombol. tekan tombol. hyperlink. tombol radio. kotak centang. menu-item. tab. Tidak bisa. bilah menu. menu tarik-turun. menu pop-up. daftar-menu. grup radio. grup kotak centang. pohon garis besar. jangkauan. bidang. kotak kombo. tanda tangan. kata sandi] penampilan. kata sandi;cursorauto. crosshair. bawaan. penunjuk. pindah. e-mengubah ukuran. neresize. nw-resize. n-mengubah ukuran. se-resize. sw-resize. com.swresize. ubah ukuran. w-mengubah ukuran. teks. tunggu. Tolong. bantuan {kursor. Tolong; . Mirip dengan indeks tab di html. Nilai dapat berupa otomatis atau angka positif yang mewakili urutan navigasi. Nilai pertama adalah 1. mobil. mewarisi indeks-nav-angka. 1;nav-upauto. mewarisi [saat ini. akar. auto (browser memutuskan ke mana harus menavigasi)/ id (ID khusus untuk dinavigasi)/ target_name (bingkai target untuk dinavigasi)/mewarisi (nilai dihitung berdasarkan induk elemen; root atau saat ini) nav-up. auto;nav-downauto. mewarisi [saat ini. akar. navigasi bawah. #b2;nav-kiri otomatis. mewarisi [saat ini. akar. nav-kiri. #b1;nav-rightauto. mewarisi [saat ini. akar. nav-kanan. #b2;reizenone. keduanya. horisontal. vertikal. inheritresize. horizontal; ikon otomatis. mewarisi urlikon. url(“suka. png”);

Bangun Situs Web Dunia Nyata yang Responsif dengan HTML dan CSS

4. Latar belakang

PropertyValuesExamplebackground-sizeauto/cover/?px/?%background-size. coverbackground-imageurl/nonebackground-image. nonebackground-repeatno-repeat/repeat-x/repeat-y/repeatbackground-repeat. repeatbackground-attachmentfixed/scrollbackground-attachment. memperbaiki warna latar belakang/warna latar belakang transparan. posisi latar belakang putih dapat berupa posisi apa pun dari kombinasi berbeda seperti kiri atas, kanan atas, tengah atas. Sama dengan bagian bawah. dapat disebutkan dalam hal posisi x-% dan y-%background-position. top-left;background-origin titik awal dari background background-origin. 0;background-clip - memungkinkan Anda mengontrol seberapa banyak gambar latar harus melampaui konten elemen atau padding content-box/padding-box/border-box/noclip/?%/?px background-clip. tanpa klip

5. Perbatasan

PropertyValuesExampleborder-widththin/thick/medium/?pxborder-width. lebar batas sedang. 20pxborder-stylenone/dash/dotted/inset/double/solidborder-style. dottedborder-colorname dari colorborder-color. blackborder-kiri. border-left-color border-left-width border-left-color. lebar batas kiri hitam. 10pxborder-kanan. border-right-color border-right-width border-right-color. lebar kanan batas hitam. 15pxborder-top. border-top-width border-top-color border-top-width. 10px border-top-color. blueborder-bottom. batas-bawah-warna batas-bawah-lebar batas-bawah-warna. lebar batas bawah hitam. 15pxborder-decoration-breakmempertahankan desain yang konsisten di antara fragmen potongan elemen yang rusak/cloneborder-decoration-break. slice;radius-batas radius-batas-kanan-atas radius-batas-kanan-bawah radius-batas-kiri-bawah radius-batas-kiri-atas batas-radius-kiri-atas?pxborder-radius-kiri atas. 20pxborder-image?%/stretch/repeat/round/noneborder-image. ulangi border-image. 12px

6. Model Kotak

PropertyValuesExamplefloatleft. Baik. nonefloat. rightheightauto length %height. 10pxmax-heightnone length %max-height. 10pxmax-widthnone length %max-width. 120%min-heightnone length %min-height. 50%min-widthauto % lengthmin-width. 30px

6. 1. Batas

PropertyValuesExamplemargin-bottomauto/length %margin-bottom. 20pxmargin-leftauto/height %margin-left. automargin-rightauto/height %margin-right. 30%margin-topauto/panjang% margin-top. 40mm

6. 2. Lapisan

PropertyValuesExamplepadding-bottomlength %padding-bottom. 20pxpadding-toplength %padding-top. 20pxpadding-rightlength %padding-right. 20pxpadding-leftlength %padding-left. 20pxdisplaynone/inline/block/inline-block/list-item/run-in/compact/table/inline-table/table-row-group/table-headergroup/table-footer-group/table-row/table-column- . inlinemarquee-directionforward/reversemarquee-direction. forwardmarquee-loopinfinite/integermarquee-loop. 10 marquee-player-count infinite/integer marquee-play-count. 50marquee-speedslow/normal/fastmarquee-speed. slowmarquee-stylescroll/slide/alternatemarquee-style. scrolloverflowterlihat/tersembunyi/gulir/otomatis/tidak ada tampilan/tidak ada konten/meluap-x/meluap-yoverflow. visibleoverflow-styleauto/marquee-line/marquee-blockoverflow-style. autooverflow-xvisible/hidden/scroll/auto/no-display/no-contentoverflow-x. scrollrotationanglerotation. 20posisi titik degrotasi (off-set nilai berpasangan) titik rotasi. 50% 50%visibilitas terlihat/tersembunyi/runtuh visibilitas. hiddenclearleft/right/both/noneclear. kiri

7. Tata Letak Templat

PropertyValuesExamplebox-alignstart/end/center/basebox-align. startbox-directionnormal/reversebox-direction. normalbox-flexnormalbox-flex. normalbox-flex-groupintegerbox-flex-group. 2box-linessingle/multiplebox-lines. singlebox-orientasihorizontal/vertikal/inline-axis/block-axisbox-oriental. inlinebox-packstart/end/center/justifybox-pack. justifybox-sizingcontent-box/padding-box/border-box/margin-boxbox-sizing. margin-boxtab-sidetop/bottom/left/righttab-side. kiri

8. Meja

PropertiNilai yang mungkinborder-collapsecollapse/separateempty-cellsshow/hideborder-spacing?%/?pxtable-layoutauto/fixedcaption-sidetop/bottom/left/right

9. Kolom

PropertyValuesExamplecolumn-countauto/numbercolumn-count. 10column-fillauto/balance/balance-all-column-fill. balancecolumn-gapnormal/?pxcolumn-gap. 5pxcolumn-rule-widththin/medium/thick/?pxcolumn-rule-width. lebar aturan kolom sedang. 2pxcolumn-rule-styleborder-style – dotted/solid/hidden/double/ dashed/groove/hidden/inset/outset/inheritcolumn-rule-style. titik-titik aturan-kolom-warnawarna-aturan-kolom. blackcolumn-widthauto/?pxcolumn-width. 10pxcolumn-span1/allcolumn-span. semua

10. Warna

Nilai Properti Contoh warna mewarisi/warna warna. greenopacitymewarisi/angka tingkat opacity. 4

11. Pemosisian Kisi

PropertyValuesExamplegrid-columnsnone/inherit/?px/?%/x%-y%kolom-kisi. 10pxgrid-rowsnone/mewarisi/?px/?%/x%-y%grid-rows. 40%

12. Daftar dan Penanda

Tipe-gaya-daftar-NilaiProperti

tidak ada/tanda bintang/kotak/tanda centang/lingkaran/berlian/cakram/tanda hubung/persegi/desimal/desimal-terdepan-nol/roman bawah/roman atas/alfa bawah/alfa atas/yunani bawah/latin bawah/

Contoh

{ tipe-gaya-daftar. romawi atas}

daftar-gaya-posisi

?%/?px

Contoh

daftar-gaya-posisi. 20px

daftar-gaya-gambar

tidak ada/url

Contoh

daftar-gaya-gambar. url('hackrhome. gif’);

penanda-offset

otomatis/?px

Contoh

penanda-offset. mobil

13. Animasi

PropertyValuesExampleanimation-namenone/IDanimation-name. myfirstanimanimation-durationtimeanimation-duration. 5s animasi-waktu-fungsi kemudahan/linear/kemudahan-masuk/kemudahan keluar/kemudahan-keluar/kubik-Bezier(angka, angka, angka, angka)fungsi-waktu-animasi. linear;animasi-delaytimeanimasi-delay. 5manimasi-iterasi-hitung-hitungan/angkaanimasi-iterasi-hitungan. 5arah-animasi normal/alternatif-arah-animasi. alternatifanimasi-mainkan-statusberjalan/jedaanimasi-putar-status. runninganimation-fill-modeNone/backwards/ forwards/both/initial/inheritanimation-fill-mode. keduanya

14. Garis besar

Nilai Properti Contoh outline-color Nama warna outline-color. greenoutline-stylenone/dotted/dashed/solid/double/groove/ridge/inset/outsetoutline-style. solidoutline-widththin/medium/thick/?pxoutline-width. lebar garis sedang. 20pxoutline-offsetinherit/?pxoutline-offset. 15px

15. Hyperlink

PropertyValuesExampletarget-namecurrent/root/parent/new/modal/"string"target-name. parenttarget-newtab/window/nonetarget-new. windowtarget-positionfront/back/above/behindtarget-position. frontPropertyValuesExamplefitfill/hidden/meet/slicefit. fillfit-positiontop/center/bottom atau left/center/right ?%/?pxfit-position. top 35% anak yatim piatu anak yatim piatu. 4image-orientationauto/angle (deg/rad/turn/grad)image-orientation. 0gradpageauto/idpage. autopage-break-afterauto/always/avoid/left/rightpage-break-after. selalu page-break-before auto/always/avoid/left/right page-break-before. leftpage-break-insideauto/avoidpage-break-inside. hindarisizeauto/landscape/portrait/?pxSize. landscapewindowsintegerWindows. 4

17. Penentuan posisi

PropertyValuesExamplebottom/right/top/leftauto/%/lengthbottom. 20% atas. kiri otomatis. 40px benar. 25pxz-indexauto/numberz-index. 2clipshape/autoclip. autoposisi tetap/statis/relatif/posisi absolut. statis

18. Transisi

PropertyValuesExampletransitions-delaytime (ms/s)transitions-delay. 20mtransisi-durasi waktu (ms/s)transisi-durasi. 2stransitions-propertynone/alltransitions-property. nonetransition-timing-functionease/linear/ease-in/ease-out/ease-in-out/cubicBezier(angka, angka, angka, angka)fungsi-waktu-transisi. kemudahan-in-out;

19. Transformasi 3D / 2D

PropertyValuesExamplebackface-visibilityvisible/hiddenbackface-visibility. hiddenperspective length. tidak ada. awal. mewarisi perspektif. 100pxperspective-origin[ [?%/?px/left/center/right ] [?%/?px/top/center/bottom ]] ?px ]/[ [ [ left/center/right ] or [ top/center/ . 10px 30px perspektif-asal. 10% 30% perspektif-asal. kiri tengah;transformnone/matrix/matrix3d/translate3d/tranlateX/translateY/translateZ/scale/
skala3d/skalaX/skalaY/skalaZ/putar/putar3d/putarX/putarY/putarZ/
skewX/skewY/skew/transform perspektif. miring (40deg); . scalex(10); . rotate(50deg);transform-origin[ [ [ ?%/?px/kiri/tengah/kanan] [ ?%/?px/atas/tengah/bawah]? . 20% 50%; . tengah; . 20px 50px;transform-styleflat/preserve-3dtransform-style. melestarikan-3d

21. Pidato

PropertyValuesExamplecue-before – memutar file suara sebelum elementurl [ silent. x-lembut. lembut. medium. keras. x-keras. tidak ada. mewarisi]. voice;cue-after - memutar file suara setelah elementurl [ silent. x-lembut. lembut. medium. keras. x-keras. tidak ada. mewarisi]. suara; jeda Waktu jeda. 25mspause-sebelumnya. tidak ada. x-lemah. lemah. medium. kuat. x-strongpause-sebelumnya. 25 mspause-setelah. tidak ada. x-lemah. lemah. medium. kuat. x-strongpause-after. 25 msfonem – beri pengucapan fonetik ke elemen#suara komputer-stres normal. kuat. sedang. tidak ada. mengurangi stres suara. moderat;nada suara&& mutlak. [[x-rendah. rendah. medium. tinggi. x-tinggi]. [. ]]nada suara. tinggi; . 350hz; . 45% durasi suara otomatis. durasi suara. mobil; . 60-an; suara-volume diam. [[x-lembut. lembut. medium. keras. x-keras]. ]volume suara. 25db; . diam; . lembut;suara-keluarga[[. ],]* [. ]. melestarikan= [??]suara-keluarga. tingkat suara "anak", "perempuan" [normal. x-lambat. lambat. medium. cepat. x-cepat]. kecepatan suara. lambat; . 30%; tidak berbicara. normal. mengeja. digit. literal-punctuation. tanpa tanda baca. mewarisi-angka-angka. none;caption-side – posisi untuk table captiontop. bawah. kiri. Baik. sisi inheritcaption. kiri; istirahat-sebelum. tidak ada. x-lemah. lemah. medium. kuat. x-terkuat-beristirahat-sebelumnya. medium; . 20ms; istirahat-setelah. tidak ada. x-lemah. lemah. medium. kuat. x-kuat-istirahat-setelah. medium; . 20 md;

22. Kelas semu

Arti Properti. aktif elemen aktif. fokusElemen dalam fokus. linkan link yang belum dikunjungi. diaktifkan sebuah elemen saat diaktifkan. elemen disabledan saat dinonaktifkan. hoverelement saat Anda mengarahkan mouse. elemen yang diperiksa. memilih elemen yang saat ini dipilih atau disorot oleh pengguna. bahasa memungkinkan penulis untuk menentukan bahasa yang akan digunakan dalam elemen tertentu. nth-child(n)sebuah elemen yang merupakan saudara ke-n. nth-last-child(n)sebuah elemen yang merupakan saudara ke-n dihitung dari saudara terakhir. saudara pertama anak pertama. saudara kandung anak terakhir. elemen anak satu-satunya anak. nth-of-type(n) sebuah elemen yang merupakan saudara ke-n dari tipenya. nth-last-of-type(and)nth saudara dari tipenya dihitung dari saudara terakhir. saudara pertama dari tipe pertama dari tipenya. last-of-typean yang merupakan saudara terakhir dari jenisnya. satu-satunya anak dari jenisnya. Elemen kosong tanpa anak. elemen rootRoot dokumen. targetTarget ditentukan oleh URL. elemen not(x) tidak diwakili oleh argumen 'x'

23. Elemen semu

PropertyArti Contoh. first-letterMenambahkan gaya khusus ke huruf pertama teksp. huruf pertama { font-size. 150%; . #FFF00; . baris pertama Sebagai gaya khusus untuk baris pertama texto. huruf pertama { font-size. 150%; . hitam; . beforeMenyisipkan beberapa konten sebelum elemenp. sebelum { konten. "Selamat datang di hack. "; }. afterInserts beberapa konten setelah elemenp. setelah { konten. "Terima kasih telah menonton";

Pengukuran Mutlak

SymbolRepresentation%percentagemsmillisecondssecondininchesmmmillimetrecmcentimetreptpoint (1/72 inch)pcpica (12 points)UnitRepresentationdegdegreegradgradientradradianturnturnsmsmillisecondssecondHzhertzkhzkilohertz

25. Pengukuran relatif

UnitRepresentationpxpiksel perangkatgdgrid ditentukan oleh layout-gridemukuran font elemen saat iniukuran font elemen akarexx-tinggi fontvhtinggi viewporttinggi atau lebar vmviewport (nilai lebih rendah)lebar vwviewport

26. Jenis pemilih

TypeMeaningExampleclassbeberapa elemen dari berbagai jenis. classidsingle element#iduniversalberlaku untuk semua elemen*grupmenerapkan gaya ke banyak elemenp h1 h2typeelemen dari tipe yang ditentukanptree turunanelemen yang berada di bawah yang lain (tingkat apa pun)# nama elemen h3anakelemen satu di bawah elemen induk# nama elemen > h3saudara berdekatan umumberdekatan berbagi induk yang sama dan di tempat yang sama

27. Konten yang Dihasilkan

PropertyValueExamplebookmark-labelContent/attr/label stringbookmark-label. “Ini adalah bookmark”tingkat-bookmarkTidak ada/tingkat-bookmark bilangan bulat. 2;bookmark-targetSelf/url/attrbookmark-target. url (http. //hackr. io);counter-resetNone/numbercounter-reset. 5cropAuto/shapeCrop. autodisplaynone/inline/block/inline-blockDisplay. blokir; konten normal. tidak ada. menghambat urlContent. normalfloat-offsetpanjang float-offset. 20px 20px tanda hubung-setelahotomatis/bilangan bulat-setelah. 15 tanda hubung tidak ada/otomatis/tanda hubung manual. garis-baris-garis-tanpa-batas/integer-garis-baris. no-limithyphenate-resourcenone/urlhyphenate-resource. url (http. //hackr. io) tanda hubung-sebelum otomatis/bilangan bulat-sebelumnya. 10karakter-tanda hubung otomatis/string-karakter-karakteristik. “\1234”kontra-kenaikan satu/jumlah kontra-kenaikan. 10 markcrop. tanda silang/nomark. cropmove-tonormal/here/idmove-to. normalresolusigambarotomatis/normal/dpiresolusigambar. autopage-policystart/first/lastpage-policy. lastquotesnone/stringquotes. “’” “’”string-set[id string] [id string]string-set. header content();text-replacenone [string string]text-replace. "foo" "bar"

28. Kotak Garis

PropertyValueExamplealignment-adjustauto. garis dasar. sebelum tepi. teks-sebelum-tepi. tengah. pusat. after-edge. textafter-edge. yg bersifat tulisan gambar. alfabetis. gantung. panjang matematika. % penyelarasan-menyesuaikan. middlealignment-baselinebaseline. ise-script. sebelum tepi. teks-sebelum-tepi. afteredge. teks-setelah-tepi. pusat. tengah. yg bersifat tulisan gambar. alfabetis. gantung. keselarasan-dasar matematika. hangingdrop-initial-after-aligncentral. tengah. after-edge. teks-setelah-tepi. yg bersifat tulisan gambar. alfabetis. matematis. %drop-initial-after-align. 30% drop-initial-before-aligncaps-height. drop-initial-before-align. centraldrop-initial-before-adjustbefore-edge. teks-sebelum-tepi. pusat. tengah. gantung. matematis. panjangnya. %jatuhkan-awal-sebelum-menyesuaikan. 10px drop-awal-sebelum-menyesuaikan. 10% drop-awal-sebelum-menyesuaikan. middledrop-initial-valueinitial integerdrop-initial-value. 20drop-initial-sizeauto integer % linedrop-initial-size. 25%pergeseran awal sub. super. panjang %pergeseran garis dasar. superdominan-baseline/gantung/middle-dominan-baseline. tengah x=25 y = 50garis-penumpukan-pergeseranpertimbangkan-pergeseran. abaikan-shiftsline-stacking-shift. abaikan-pergeseran-garis-penumpukan-strategi-ketinggian-baris. blok-garis-tinggi. tinggi maksimal. strategi-susun-grid-heightline. max-heightinline-box-alignInitial. terakhir. integer inline-box-align. 2 menyelaraskan-kotak-sebaris. initialline-heightNormal/number/ length/ %line-height. 30% text-heightauto. ukuran huruf. ukuran teks. max-sizetext-height. autovertical-alignBaseline. sub. super. atas. teks-atas. tengah. bawah. panjang teks-bawah. % perataan vertikal. tengah

Unduh PDF Lembar Curang CSS

Kesimpulan

Dengan itu berakhirlah lembar contekan CSS. Cara ini dapat meningkatkan keterampilan Anda saat membuat situs web atau mempersiapkan wawancara CSS. Anda mungkin juga ingin membaca jenis CSS dan perbedaan antara CSS, CSS2, CSS3 untuk memahami CSS dengan lebih baik. Anda dapat menghidupkan halaman web Anda dengan keterampilan CSS, jadi lanjutkan dan cerahkan.

Orang-orang juga membaca

Sudah memiliki akun?

Tidak menerima tautan atur ulang kata sandi?

×

Kami mengenali Anda menggunakan pemblokir iklan.
Kami benar-benar mengerti

Tetap saja, iklan mendukung Hackr dan komunitas kami. Itu sebabnya kami memberi Anda opsi untuk menyumbang kepada kami, dan kami akan menonaktifkan iklan untuk Anda

Apa itu lembar contekan CSS?

Apa itu Lembar Curang CSS?

Apa dasar-dasar CSS?

CSS (Cascading Style Sheets) adalah kode yang mengatur gaya konten web. Dasar-dasar CSS menjelaskan apa yang Anda butuhkan untuk memulai. .

padding , ruang di sekitar konten. .

border , garis solid yang berada tepat di luar padding

Bagaimana cara mengintegrasikan CSS dalam HTML?

CSS dapat ditambahkan ke dokumen HTML dengan 3 cara. .

Sebaris - dengan menggunakan atribut gaya di dalam elemen HTML

Internal - by using a