Blogger
Tips and Tricks
garis
garis
Komponen dalam sebuah web
[ CSS ]
Cara penulisan kode CSS dan mempersingkat karakter serta letak posisi.
dalam property CSS memiliki banyak elemen.
misalnya CSS margin memiliki 4 property untuk setiap sisi elemen.
margin-top - margin-right - margin-bottom - margin-left.
Metode penulisan CSS dalam beberapa property.
Letak CSS di dalam <head> . . . </head>
Cara penulisan CSS :
Komponen CSS dalam sebuah web :
* Margin
margin-top: 3px;
margin-right: 4px;
margin-bottom: 5px;
margin-left: 6px;
[singkat] margin: 3px 4px 5px 6px;
* Padding
padding-top: 3px;
padding-right: 4;
padding-bottom: 5px;
padding-left: 6px;
[singkat] padding: 3px 4px 5px 6px;
* Font
font-style: italic;
font-weight: bold;
font-size: 16px;
line-height: 20px;
font-family: Arial;
[singkat] font: italic bold 16px/20px Arial;
* Background
background-color: #fff000;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: top center;
[singkat] background: #fff000 url('image.jpg') no-repeat top center;
* Border
border-width: 3px;
border-style: solid;
border-color: #eeeeee;
[singkat] border: 3px solid #eeeeee;
---
border-radius: 12px;
border-left: 10px;
border-right: 10px;
* List
list-style-type: disc;
list-style-position: inside;
list-style-image: url('image.gif');
[singkat] list-style: disc inside url('image.gif');
* Letak posisi
position: fixed; position: relative; position: absolute; position: static;
text-align: left; text-align: center; text-align: right;
float: left; float: center; float: right;
* Ukuran
width: 900px; min-width: 100px; width: auto; width: 100%;
height: 900px; min-height: 100px; height: auto; height: 100%;
* Efek bayangan
text-shadow: 2px 2px 6px #968039;
* Kegelapan - tebal tipis
opacity: 0.9;
font-weight: bold;
<b></b>
* Warna umum
color: white; color: #ffffff;
color: black; color: #000000;
color: red; color: #ff0000;
color: blue; color: #0000ff;
color: yellow; color: #fff000;
color: transparent;
[ CSS ]
Cara penulisan kode CSS dan mempersingkat karakter serta letak posisi.
dalam property CSS memiliki banyak elemen.
misalnya CSS margin memiliki 4 property untuk setiap sisi elemen.margin-top - margin-right - margin-bottom - margin-left.
Metode penulisan CSS dalam beberapa property.
Letak CSS di dalam <head> . . . </head>
Cara penulisan CSS :
/* contoh pertama
----------------------------------------------- */
.test { color; #000000; margin: 3px 4px 5px 6px; }
untuk panggil pakai class
<div class="test">test pertama</div>
----------------------------------------------- */
.test { color; #000000; margin: 3px 4px 5px 6px; }
untuk panggil pakai class
<div class="test">test pertama</div>
<!--contoh kedua-->
#test { color; #000000; margin: 3px 4px 5px 6px; }
untuk panggil pakai id
<div id="test">test kedua</div>
#test { color; #000000; margin: 3px 4px 5px 6px; }
untuk panggil pakai id
<div id="test">test kedua</div>
Komponen CSS dalam sebuah web :
* Margin
margin-top: 3px;
margin-right: 4px;
margin-bottom: 5px;
margin-left: 6px;
[singkat] margin: 3px 4px 5px 6px;
* Padding
padding-top: 3px;
padding-right: 4;
padding-bottom: 5px;
padding-left: 6px;
[singkat] padding: 3px 4px 5px 6px;
* Font
font-style: italic;
font-weight: bold;
font-size: 16px;
line-height: 20px;
font-family: Arial;
[singkat] font: italic bold 16px/20px Arial;
* Background
background-color: #fff000;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: top center;
[singkat] background: #fff000 url('image.jpg') no-repeat top center;
* Border
border-width: 3px;
border-style: solid;
border-color: #eeeeee;
[singkat] border: 3px solid #eeeeee;
---
border-radius: 12px;
border-left: 10px;
border-right: 10px;
* List
list-style-type: disc;
list-style-position: inside;
list-style-image: url('image.gif');
[singkat] list-style: disc inside url('image.gif');
* Letak posisi
position: fixed; position: relative; position: absolute; position: static;
text-align: left; text-align: center; text-align: right;
float: left; float: center; float: right;
* Ukuran
width: 900px; min-width: 100px; width: auto; width: 100%;
height: 900px; min-height: 100px; height: auto; height: 100%;
* Efek bayangan
text-shadow: 2px 2px 6px #968039;
* Kegelapan - tebal tipis
opacity: 0.9;
font-weight: bold;
<b></b>
* Warna umum
color: white; color: #ffffff;
color: black; color: #000000;
color: red; color: #ff0000;
color: blue; color: #0000ff;
color: yellow; color: #fff000;
color: transparent;
Loading....