Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

APLIKASI BERBASIS WEB STTI I-Tech Susana Dwi Yulianti, SKom.

Presentasi serupa


Presentasi berjudul: "APLIKASI BERBASIS WEB STTI I-Tech Susana Dwi Yulianti, SKom."— Transcript presentasi:

1 APLIKASI BERBASIS WEB STTI I-Tech Susana Dwi Yulianti, SKom

2  CSS singkatan dari Cascading Style Sheets  Styles mendefinisikan bagaimana menampilkan elemen HTML  Style sheet mendeskripsikan bagaimana tampilan document HTML di layar  Styles biasanya disimpan dalam file eksternal css.

3  Aturan CSS memiliki dua bagian utama yaitu selector, dan satu atau lebih declaration.  Contoh : h1 {color:red;font-size:12px;} atau p {color:red;text-align:center;} h1 = Selector color:red = Declaration font-size:12px= Declaration color = Property Red= Value font-size = Property 12px= Value

4  Selector biasanya elemen HTML yang ingin diberi style.  Setiap deklarasi terdiri dari properti (property) dan nilai (value).  Properti ini merupakan style atribut yang ingin di ubah. Setiap properti memiliki nilai (value).  CSS deklarasi selalu diakhiri dengan tanda titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal

5  Komentar digunakan untuk menjelaskan kode yang dibuat, dan dapat membantu ketika akan mengedit source code di kemudian hari.  Komentar diabaikan oleh browser dan tidak akan ditampilkan.  Sebuah komentar CSS diawali dengan "/*", dan diakhiri dengan "*/",

6  Contoh: /*Ini isi komentar*/ p { text-align:center; /*Ini komentar yang lain*/ color:black; font-family:arial; }

7  CSS memungkinkan untuk menentukan penyeleksi sendiri yang disebut "id" dan "class".  Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik.  Id selector menggunakan atribut id elemen HTML, dan didefinisikan dengan "#".

8  Contoh: #teks1 { text-align:center; color:red; } Teks dengan penggunaan Id Teks ini tidak dipengaruhi oleh style.

9  Class Selector digunakan untuk menentukan style untuk sekelompok elemen.  Berbeda dengan selector id, Class Selector yang paling sering digunakan pada beberapa elemen.  Class Selector menggunakan atribut class HTML, dan didefinisikan dengan ". "

10  Contoh:.center { text-align:center; } Center-aligned heading Center-aligned paragraph.

11  Anda juga dapat menentukan bahwa hanya HTML tertentu elemen harus dipengaruhi oleh kelas. p.center {text-align:center;} Text ini tidak berpengaruh dengan style Paragraph ini akan center-aligned.

12  Class digunakan untuk membuat style-style yang berbeda untuk jenis tag yang sama (disebut private class)  Class juga dapat digunakan untuk membuat style yang sama untuk semua jenis tag yang berbeda (disebut public class)  Contoh penulisan private class :  Penerapannya adalah dengan menggunakan atribut class, seperti berikut: H1.batman {color: red;} H1.biru {color: blue;} Batman Jogja

13  Contoh penulisan public class :  Penerapannya adalah dengan menggunakan attribut class pada tag HTML yang menggunakan CSS tersebut, seperti berikut:.warnatengah { color: red: text-align: center; } Pemrograman Ternyata pemrograman asyik

14  Dengan menggunakan selector bebas kita mempunyai kebebasan dalam menggunakan nama untuk selector tersebut.  Contoh: Selector gbawah{text-decoration: underline;} Efect Garis Bawah dengan Selector Bebas

15 1. Inline Style Sheet  CSS didefinisikan langsung pada tag HTML yang bersangkutan  penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut  Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain  Contoh: Ini adalah sebuah paragraph.

16 2. Embedded Style Sheet  CSS didefinisikan terlebih dahulu dalam tag... dimana tag tersebut didefinisikan diantara tag dan tag  Contoh: Contoh Bentuk Embedded/title> body {background:yellow; color:green; margin-left:0.5in} h1 {font-size:18pt; color:red} p {font-size:12pt; font-family:arial; text-indent:0.5in} Welcome hallo semua

17 3. Linked Style Sheet  CSS dibuat pada berkas terpisah dari berkas HTML  File CSS disimpan dengan ekstension.css  Pada berkas HTML yang akan menggunakan berkas CSS, harus dibuat tag dan yang dituliskan di antara tag...  Contoh penyisipan pada dokumen HTML :

18  Dalam pendefinisian selector terdapat suatu cara yang disebut grouping selector atau pengelompokan selector  Manfaat dari penggunaan grouping selector ini adalah penggunaan selector dari tag HTML yang akan dikenai property yang sama cukup hanya dibuat sekali saja  Penggunaan grouping ini cukup dengan memberikan tanda koma (,) antara selector  Contoh : P,h1,body { Text-decoration:underline; }

19

20 Format Text h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} Header 1,Di tengah Header 2, Di kiri Header 3,Di kanan

21

22 pengaturan font p.italic {font-size :200 % ; font-style: italic; } p.normal{ font-family : verdana ; font-style: normal; } p.oblique {font-style: oblique;} menggunakan style italic menggunakan style normal menggunakan style oblieque

23 pengaturan padding table td.kiri{ padding-top: 2cm;padding-right: 2cm; padding- bottom:2cm;padding-left: 2cm ;background-color : #f0f8ff; } padding dengan jarak 2cm dari kiri,atas,kanan,dan bawah tanpa jarak

24  Property Background CSS : BackgroundMengatur semua properti latar dalam satu deklarasi background- attachment Menentukan apakah gambar latar belakang tetap atau gulungan dengan sisa halaman background-colorMengatur warna latar belakang suatu elemen background-imageMengatur gambar latar belakang untuk elemen background-positionMengatur posisi awal dari gambar latar belakang background-repeatMengatur bagaimana gambar latar belakang akan diulangi

25 body{ background: #00ff00 url(image/smile.png) no-repeat fixed center;} Ini adalah Text

26 Body{background-color:yellow;} H1{background-color:#00ff00;} P{background-color:rgb(255,0,255);} Ini adalah heading 1 ini adalah paragraph.

27 body {background-image:url(image/smile.png);} Selamat belajar CSS

28 body {background-image:url(image/smile.png); background-repeat:repeat-y;} repeat-y background akan mengulang secara vertical.

29 body { background-image:url(image/smile.png); background-repeat:no-repeat; background-attachment:fixed; } background-image akan fixed pada tempatnya.

30 body { background-image:url(image/smile.png); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } Note: Untuk bekerja pada Firefox dan Opera, properti background-attachment harus diset ke "fixed".


Download ppt "APLIKASI BERBASIS WEB STTI I-Tech Susana Dwi Yulianti, SKom."

Presentasi serupa


Iklan oleh Google