09. CSS 2.ppt

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.


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}


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}


Posisi Div

Posisi defaultnya adalah statik, bertumpuk ke bawah


Penambahan left:-50px; tidak berpengaruh apa-apa


Ubah posisi menjadi position:relative. left: -50px

Ada efeknya….


Ubah posisinya menjadi position:absolute. left: -50px; Memiliki efek tetap hanya saja lebarnya maksimal


Ubah posisi div utama, main, menjadi position:relative. Sekarang absolut posisi main1 sudah ditempatkan


Ubah posisi main1 dari position:absolute menjadi float:left;Text dari main1 tidak lagi dibelakang main2 dan main 3.


Tambahkan float:left pada main2 dan set lebarnya menjadi 50px.Lihatlah posisi div after…seharusnya dibawah


Tambahkan clear:left pada div id=‘after’ untuk meletakkannya setelah div utamaDiv utama adalah main1, main2, dan main3.


Tambahkan float:left dan lebar width:50px pada main 3 untuk membuat 3 kolom Terdapat jarak kosong disebelah kanan main3.


Ubah lebar main1, main2, & main3 menjadi satuan persen untuk mengisi penuh div main


Terakhir, set tinggi div menjadi sama.


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


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


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


Documents

09. CSS 2.ppt