09. css 2.ppt
TRANSCRIPT
PEMROGRAMAN WEB 1
CSS 2
Rina Dewi Indah Sari, S.Kom
STMIK Asia Malang - 2013
Membuat Layout
Untuk membuat layout dengan CSS, kita manfaatkan elemen div
Elemen div dibagi menjadi beberapa bagian yang disebut dengan Box Model.
Tren Box Model ini telah menggantikan penggunaan dari elemen table dan frame pada tag HTML.
Penulisan tag HTML dan CSS jauh lebih mudah dan sederhana dengan konsep ini.
STMIK Asia Malang - 2013
Konsep Box Model
STMIK Asia Malang - 2011STMIK Asia Malang -
2013
Elemen Box Model
margin-[top|right|bottom|left]: <length> | <percentage> | autodiv {margin-top: 10px}div {margin-right: 20%}div {margin-bottom: -5px}div {margin-left: 20pt}
margin: [ <length> | <percentage> | auto ]{1,4}div {margin: 3em}div {margin: 1em 2em}div {margin: 5em 2em 3em}div {margin: 8em 4em 15em 10em}
padding-[top|right|bottom|left]: <length> | <percentage> | autodiv {padding-top: 10px}div {padding-right: 20%}div {padding-bottom: -5px}div {padding-left: 20pt}
padding: [ <length> | <percentage> | auto ]{1,4}div {padding: 8em 4em 15em 10em}
border-[top|right|bottom|left]-width: thin | medium | thick | <length>div {border-top-width: thin}div {border-right-width: 6px}div {border-bottom-width: 2em}div {border-left-width: 10}
border-width: <width>{1,4}div {border-width: thin medium 10 20}
STMIK Asia Malang - 2013
Elemen Box Model border-[top|right|bottom|left]-color: <color>
div {border-top-color: green} div {border-right-color: #ff66cc}div {border-bottom-color: rgb(0,128,0)} div {border-left-color: #ee3}
border-color: <color>{1,4} | transparentdiv {border-color: green #ff66cc rgb(128,128,128) #ee3}
border-[top|right|bottom|left]-style: hidden | double | solid | dashed | dotted | ridge | outset | groove | inset | none
div {border-top-style: double} div {border-right-style: solid}div {border-bottom-style: outset div {border-left-style: dashed}
border-style: <style>{1,4}div {border-style: solid dashed solid dotted}
border-[top|right|bottom|left]: <width> || <style> || <color>div {border-top: solid red}div {border-right: thick double}div {border-bottom: red dashed blue}div {border-left: outset 10}
border: <width> || <style> || <color>div {border: red solid 1}
width: <length> | <percentage> | autoimg {width: 40%}
height: <length> | <percentage> | autoimg {height: 100px}
STMIK Asia Malang - 2013
Posisi Div
Posisi defaultnya adalah statik, bertumpuk ke bawah
STMIK Asia Malang - 2013
Penambahan left:-50px; tidak berpengaruh apa-apa
STMIK Asia Malang - 2013
Ubah posisi menjadi position:relative. left: -50px
Ada efeknya….
STMIK Asia Malang - 2013
Ubah posisinya menjadi position:absolute. left: -50px; Memiliki efek tetap hanya saja lebarnya maksimal
STMIK Asia Malang - 2013
Ubah posisi div utama, main, menjadi position:relative. Sekarang absolut posisi main1 sudah ditempatkan
STMIK Asia Malang - 2013
Ubah posisi main1 dari position:absolute menjadi float:left;Text dari main1 tidak lagi dibelakang main2 dan main 3.
STMIK Asia Malang - 2013
Tambahkan float:left pada main2 dan set lebarnya menjadi 50px.Lihatlah posisi div after…seharusnya dibawah
STMIK Asia Malang - 2013
Tambahkan clear:left pada div id=‘after’ untuk meletakkannya setelah div utamaDiv utama adalah main1, main2, dan main3.
STMIK Asia Malang - 2013
Tambahkan float:left dan lebar width:50px pada main 3 untuk membuat 3 kolom Terdapat jarak kosong disebelah kanan main3.
STMIK Asia Malang - 2013
Ubah lebar main1, main2, & main3 menjadi satuan persen untuk mengisi penuh div main
STMIK Asia Malang - 2013
Terakhir, set tinggi div menjadi sama.
STMIK Asia Malang - 2013
Aturan Spesifikasi CSS
selector example specificity
1 !important p { color:red !important; } Beats everything!
2 inline style <p style=“color:blue;”> 1,0,0,0
3 id p#my_id { color:purple; } 0,1,0,0
4 class p.my_class { color: yellow; } 0,0,1,0
5 element p { color: orange; } 0,0,0,1
6 universal selector * { color: black; } 0,0,0,0
STMIK Asia Malang - 2013
Contoh SpesifikasiCSS Number and Type
p { color:red; } One element
div p { color:orange; } Two elements
.grape { color:purple; } One class
*.bright { color:yellow; } One class
div.bright p.grape { color:green; }
Two classes, two elements
#my_grape_id { color:blue; } One id selector
div #sidebar .shiny {color:silver}
One id selector, one class, one element
CSS Selector
h1 { color:red; }
body h1 { color:green; } winner
h2.grape { color:purple; } winner
h2 { color:silver; }
body div p ul ol li.answer { color:red; }
li#answer { color:navy; } winner
STMIK Asia Malang - 2013
Spesifikasi yang sama Jika kita memiliki pernyataan yang sama
dinyatakan 2 kali (atau lebih), maka pernyataan terakhir yang akan dieksekusi.
Contoh:p { color: red; background-color: yellow; }p { color: green; } > <p>green text</p green text
h1 { font-size: 1.5em; color: red; }h1 { color: blue; font-size: 1.5em; }
<h1>blue text</h1> blue textSTMIK Asia Malang -
2013
Latihan
Contoh penggunaan Box Model, dapat dilihat pada latihan berikut:
latihan css2.html
STMIK Asia Malang - 2013