yo maaf sudah lama tidak posting, pada kesempatan ini mimin akan posting tentang penggunaan CSS pada NodeMCU atau ESP8266.
Yang pertama apa CSS itu?
CSS atau Cascading Style Sheet adalah bahasa desain web yang mengontrol tampilan halaman sebuah web.
nah jadi CSS ini yang bertangung jawab untuk mengatur tampilan sebuah situs gan. kalo tampilan situsnya tidak karuan atau tidak teratur tapi adminnya sudah memberikan CSS, kemungkinan CSS gagal terproses.
jadi jika diibaratkan html itu kerangkanya (sketsanya) nah CSS ini itu pewarna atau teknik2 untuk memberikan untuk memberi kesan ciamik (kesan menarik) gan.
untuk penggunaannya CSS ini dibagi menjadi tiga :
- inline
- internal/embeded ( berbeda line )
- External ( tapi tersambung dengan link )
langsung saja contohnya :
- Inline (langsung dicombo sama NodeMCU)
"<a href=\"LEDOn\"><button style=\"display: inline-block;padding:6px 12px;border-radius:4px; width: 100%;\">ON</button></a><br/>"
dan perwujudan seperti ini gan
yang tombol (atas ) menggunakan CSS yang ada dikolom hijau, sedangkan tombol off minim CSS (inline), hanya center,display:block dan 100%
- Embeded
lalu yang membedakan inline selain tag style yaitu penggunaan class atau id, sebagai penghubungnya gan.
contoh :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
</style>
</head>
<body>
<button type="button" class="btn">Small Button</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
</style>
</head>
<body>
<button type="button" class="btn">Small Button</button>
</body>
</html>
bisa dilihat diatas ada didalam tag style ada .btn?
nah itu penghubungnya, kalo menggunakan class nanti didalam tag style ada . (titik) sebelum nama class, kalo pake id nanti didalam tag style menggunakan #.
dan hasilnya, >>
kurang-lebihnya seperti itu gan
- external
<link href="file:///C|/Users/raden/AppData/Roaming/Adobe/Dreamweaver CC 2018/en_US/Configuration/Temp/Assets/eam93F2.tmp/css/bootstrap.css" rel="stylesheet" type="text/css">
itu kalo pake boostrap, sebenarnya entah pake boostrap atau bukan boostrap itu sama saja cara kerjanya.
bersambung dulu ya gan, dadah.
No comments:
Post a Comment