dalam tulisan kali ini kita akan mengenal dan membuat gaya lis dengan properti list-style dalam css, kita akan mencoba untuk tahu apa itu list-style dan apa fungsinya dan bagaimana dalam penerapan kode css, tapi sebelum kita memulai izinkan saya untuk mengucapkan
Salam sobat semua
Bismillah walhamdulillahi robbil 'alamiin. segala puji bagi Allah pencipta semesta alam ini atas segala nikmat yang telah diberikan kepada diri ini sehingga diri ini
hari ini bisa menulis dan berbagi dalam tulisan ini. sholawat serta salam akan tetap terpanjatkan untuk baginda sayyidina Muhammad ibni Abdillah S.A.W. sang kekasih
yang tercinta dari Tuhan semesta alam.
bismillah untuk kali ini kita akan mencoba apa yang namanya properti list-style yang artinya menurut saya yaitu kode css yang merubah bentuk dan posisi gaya pada lis atau
daftar di sebuah HTML. biar lebih jelas mari kita langsung saja terapkan pada kode html berikut ini. silahkan ketik atau copy paste pada text editor kalian. kalau saya
lebih suka pakai notepad++.
<html><head><title>My Web</title><link href="style/style.css" rel="stylesheet" type="text/css"></head><body><div id="main"><p>Ini adala isi dari main content yang akan saya buatsebagai website pertama saya</p><p>dan ini adalah pembelajaran saya untuk melangkah dan membuatwebsite prtama saya<br><a href="http://notemazdopunk.blogspot.com/" target="_blank" class="link">Link Catatan Mazdopunk</a><p>Macam-macam nama kota di jawa timur:<ul><li>Probolinggo</li><li>Surabaya</li><li>Jember</li><li>Pasuruan</li><li>Malang</li></ul></p></p></div></body></html>
dan kode cssnya seperti berikut
body{
margin:0px;
}
#main{
border:1px solid blue;
min-width:150px;
width:99.1%;
background:#edfa1d ;
margin:0px;
padding:11px 0px 0px 11px;
font-size:14px;
font-family:arial;
}
.link{
text-decoration:none;
}
kemudian kita load di browser kesayangan kita, maka akan tampak hasilnya seperti berikut
dari hasil diatas kita sudah bisa membuat list seperti yang telah kita ketahui pada tulisan
https://notemazdopunk.blogspot.com/2021/05/belajar-html-bersama-part-9-mengenal.html. sekarang kita coba untuk merubah beberapa gaya dari lis yang kita buat.
maka silahkan ketik atau copy paste kode css berikut
body{margin:0px;}#main{border:1px solid blue;min-width:150px;width:99.1%;background:#edfa1d ;margin:0px;padding:11px 0px 0px 11px;font-size:14px;font-family:arial;}.link{text-decoration:none;}.lis{list-style-type:circle;}
dan kode html berikut ini
<html>
<head>
<title>My Web</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<p>Ini adala isi dari main content yang akan saya buat
sebagai website pertama saya
</p>
<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat
website prtama saya
<br>
<a href="http://notemazdopunk.blogspot.com/" target="_blank" class="link">Link Catatan Mazdopunk</a>
<p>Macam-macam nama kota di jawa timur:
<ul class="lis">
<li>Probolinggo</li>
<li>Surabaya</li>
<li>Jember</li>
<li>Pasuruan</li>
<li>Malang</li>
</ul>
</p>
</p>
</div>
</body>
</html>
maka dari kode diatas akan dihasilkan output seperti berikut
dari hasil diatas kita lihat gaya dari hasil diatas berubah bentuknya, untuk nilai list-style-type ini yang saya tahu adalah
list-style-type:circle;
list-style-type:square;
list-style-type:lower-roman;
list-style-type:upper-roman;
list-style-type:upper-alpha;
list-style-type:lower-alpha;
list-style-type:none;
untuk yang nilainya none berfungsi menghilangkan segala tipe gaya pada lis tersebut, jika diterapkan pada kode css maka kodenya seperti berikut
body{
margin:0px;
}
#main{
border:1px solid blue;
min-width:150px;
width:99.1%;
background:#edfa1d ;
margin:0px;
padding:11px 0px 0px 11px;
font-size:14px;
font-family:arial;
}
.link{
text-decoration:none;
}
.lis{
list-style-type:none;
}
dan akan didapatkan hasil seperti berikut
selain itu list-style ini juga mempunyai properti list-style-position, tapi saya jarang sekali menggunakannya tapi tidak apa-apa kita coba saja sebagai tambahan
pengetahuan. untuk nilai dari list-style-position ini adalah inside untuk posisi agak menjorok kekanan atau kedalam, dan nilainya yang lain juga adalah outside
yaitu untuk merubah posisi biar agak menjorok keluar atau kekiri. kita langsung saja mencobanya dalam kode css berikut ini
body{margin:0px;}#main{border:1px solid blue;min-width:150px;width:99.1%;background:#edfa1d ;margin:0px;padding:11px 0px 0px 11px;font-size:14px;font-family:arial;}.link{text-decoration:none;}.lis{list-style-type:lower-roman;list-style-position:inside;}
maka dari kode diatas akan menghasilkan output seperti berikut
dan untuk list-style ini bisa juga ditulis kodenya seperti berikut
list-style:list-style-type list-style-position;
biar lebih paham kita langsung coba terapkan dalam kode css seperti berikut
body{
margin:0px;
}
#main{
border:1px solid blue;
min-width:150px;
width:99.1%;
background:#edfa1d ;
margin:0px;
padding:11px 0px 0px 11px;
font-size:14px;
font-family:arial;
}
.link{
text-decoration:none;
}
.lis{
list-style:lower-roman inside;
}
dan dari kode diatas maka akan diperoleh hasil outuput yang sama dengan output yang dihasilkan kode diatas sebelumnya.
untuk tulisan kali ini tentang list-style cukup sekian dulu, mudah-mudahan bisa bermanfaat buat kita semua. dan kita lanjut di next tulisan.
Salam sobat semua
#css #html #free #share #web #website #websites #list #style #cicle #square #berbagi #gratis
Komentar
Posting Komentar