Mengenal Property CSS Counter-Increamnet Pada CSS
Di panduan kali ini kamu akan belajar dan Mengenal Property CSS Counter-Increamnet Di CSS sebelum kita mencoba membuatnya kita mesti tahu dahulu sebetulnya bagi apa properti ini, mungkin dari kalian masih asing dengan properti css ini.
Properti counter-increament adalah sebuah properti di css yang bermanfaat bagi merancang number sections dan sub-sections, apakah kalian tau yang di maskud saya dengan number section dan sub-section ?
pernahkah kalian merancang sebuah papper di microoft word ? pasti tak asing dengan pengurutan sub bab seperti gambar berikut :
tahu kan ? hhehe yupss seperti demikianlah yang kita akan bikin tetapi tak menggunakan microsoft word melainkan dengan css, coba salin html dan css berikut ini:
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>HTML tutorials</h1>
<h2>HTML Panduan</h2>
<h2>XHTML Panduan</h2>
<h2>CSS Panduan</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
</html>
CSS
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1:before {
counter-increment: section;
content: Section counter(section) . ;
}
h2:before {
counter-increment: subsection;
content: counter(section) . counter(subsection) ;
}dari kode di atas karenanya akan di tampilkan tampilan selaku berikut :
baiklah itu saja dari saya mengenai Mengenal Property CSS Counter-Increamnet Di CSS silahkan di coba dan di implementasikan sesuai dengan kasus atau projectnya dan semoga bermanfaat,
Sumber https://kursuswebsite.org
