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