cascading style sheet (css)elektro.um.ac.id/wp-content/uploads/2016/04/ninf611-06... ·...
TRANSCRIPT
©2016 DidikDwiPrasetya
CSS
vCSS à Cascading Style SheetvStyle à mendefinisikan aturan untuk
menampilkan elemen HTML.vDefinisi:
� Cascading Style Sheets (CSS) – is a rulebased language that applies styling to your HTML elements.
2
©2016 DidikDwiPrasetya
Mengapa CSS?
vHTML tidak pernah dirancang untuk menjadibahasa presentasi.� <p color=“red” align=“right”><font>
vPenghapusan atribut presentasi dapatmeningkatkan reusability dan maintainability.
vCSS menjadikan dokumen yang bersih danrapi.
3
©2016 DidikDwiPrasetya
Cascade
vKekuatan CSS terletak padakonsep “cascade”.
vPrioritas cascadeberdampakinheritance.
4
©2016 DidikDwiPrasetya
Sejarah Singkat
v CSS 1 (1996)� Tidak benar-benar digunakan� HTML 3.2 (1997)� Mimpi buruk pengembang web
v CSS 2 (1998)� Fitur: positioning, media types, shadow� CSS 2.1 à Edisi revisi
v CSS 3 (1999)� Pembagian dokumen ke dalam “module”
5
©2016 DidikDwiPrasetya
Sintaks CSS
The CSS syntax is made up of 5 parts: vselectorvproperty/valuevdeclaration vdeclaration block vcurly braces
6
©2016 DidikDwiPrasetya
Sintaks CSS (2)
vSelector biasanya merupakan elemen HTML.vDeclaration terdiri dari pasangan property dan
value (nilai)� Property: style yang akan diubah� Value: nilai properti
7
©2016 DidikDwiPrasetya
Selektor id dan class
vCSS memfasilitasi pendefinisian own selector (id dan class)
vid: mendefinisikan style pada elemen unik� Definisi: #header {color: red}� Cara akses: <div id=“header”>
vclass: mendefinisikan style pada elemenserupa� Definisi: .center {text-align: center}� Cara akses: <div class=“center”>
8
©2016 DidikDwiPrasetya
Komentar CSS
vKomentar digunakan untuk menjelaskan kode.vKomentar diabaikan oleh browser
� Tidak dieksekusi.vPenulisan komentar diawali dengan /* dan
ditutup dengan *//* Baris ini merupakan komentar */p{text-align:center;/* Komentar lain */color: red;
}
9
©2016 DidikDwiPrasetya
Implementasi CSS
vMetode penerapan CSS di halaman web� Inline� Internal� External
10
©2016 DidikDwiPrasetya
Inline Style
vMenerapkan style langsung di HTML melalui atribut style
vSesuai jika hanya dipakai sekali padaelemen
vKode kurang readable dan bersihvContoh:
<p style="color:red; font-size: 12px;">Paragraf merah dengan ukuran 12px</p>
11
©2016 DidikDwiPrasetya
Internal Style
vMenggunakan tag <style> di elemen headvSesuai jika hanya dipakai di satu halaman
saja.vContoh:
<style>p { text-align: center;color: red;
}</style>
12
©2016 DidikDwiPrasetya
External Style
vMemisahkan dokumen HTML dan style sheet
vMenggunakan <link> di headvSesuai jika digunakan berulang di
beberapa halaman (direkomendasikan)vContoh:
<link rel="stylesheet" href="style.css">
Ket: file style.css berisi aturan-aturan CSS
13
©2016 DidikDwiPrasetya
Urutan Prioritas Aturan
v Jika beberapa property ditentukan pada selector yang sama di tempat yang berbeda, nilai yang digunakan adalah nilai pada style sheet yang paling spesifik.
vUrutan prioritas tampilan terurut dari paling rendah ke tinggi
1. Nilai default browser2. External Style Sheet (file css)3. Internal Style Sheet (di bagian head)4. Inline Style (di elemen html)
14
©2016 DidikDwiPrasetya
CSS Layout
v3 konsep layout CSS:� CSS box model� Floating� Positioning
v3 konsep secara bersama-samamengendalikan elemen di halaman web.
15
©2016 DidikDwiPrasetya
CSS Box Model
16
Content
PaddingBorderMargin
©2016 DidikDwiPrasetya
Margin, Padding, Border
17
©2016 DidikDwiPrasetya
Floating
vMenempatkan posisi elemenvNilai float: left, right, nonevUntuk me-restore ke normal flow:
� clear: left;� clear: right;� clear: both;
18
©2016 DidikDwiPrasetya
CSS Positioning
vKonsep dasar ketiga setelah box model danfloat.
vTipe positioning:� position: relative;� position: absolute;� position: fixed; (subkategori absolute)
19
©2016 DidikDwiPrasetya
CSS Positioning (1)
vRelative:� Normal flow
20
©2016 DidikDwiPrasetya
CSS Positioning (2)
vRelative:#box2 {
position: relative;left: 20px;top: 20px;
}
21
©2016 DidikDwiPrasetya
CSS Positioning (3)
vAbsolute: relasi ke ancestor#box2 {
position: absolute;left: 20px;top: 20px;
}
22
©2016 DidikDwiPrasetya
Fitur-Fitur CSS3
vSelector baru (attr^, $, *)vRounded corner (border-radius)vBorder imagevBox shadow (box-shadow)vText shadow
23
©2016 DidikDwiPrasetya
Studi Kasus
vAnalisis desain header CSS berikut:
24