Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
( Cascading style sheets)
C S S ( Cascading style sheets) Nama Kelompok : 1. Wiwied Wahyu Ramadhani (L ) 2. Yasmiyati (L )
2
Sejarah dan Konsep CSS CSS adalah singkatan dari Cascading Style Sheet yang merupakan kumpulan perintah yang dibentuk dari berbagai sumber yang disusun menurut urutan tertentu sehingga mampu mengatasi konflik style. CSS yaitu salah satu bahasa pemrograman web yang mengatur komponen dalam suatu web agar web lebih terstruktur dan lebih seragam. Sejarah CSS Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk pada setiap style. Pada tanggal 17 Agustus 1996, World Wide Web Consortium (W3C) menjadikan CSS sebagai bahasa pemrograman standart dalam pembuatan dokumen web. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS. Selanjutnya di tahun 1998, W3c menyempurnakan CSS awal dengan menciptakan standar CSS2 (CSS level 2) yang menjadi standar hingga saat ini. Bahkan pada tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS2 ini sampai sekarang masih terus dikembangkan.
3
Konsep CSS CSS bisa dituliskan dengan tiga (3) cara yaitu :
langsung disisipkan didalam tag <head></head>. Untuk menyisipkan di dalam tag head harus diawali dengan tag <style type=?text/css?></style> menggunakan file external, artinya script css ditulis dalam file tersendiri dengan akhiran .css. dan sisipkan file ini di dalam tag <head> dengan cara seperti ini <head><link rel=”stylesheet” href=”css/style.css” type=”text/css” /></head> langsung pada tag yang bersangkutan, misalkan <div style=?bla-bla?></div> CSS dituliskan dalam bentuk block-block script yang disebut dengan style. Style tersebut bisa dipakai sekali atau berkali-kali tergantung pada tanda didepan style tersebut. Berikut ini aturan penulisan CSS : 1. menggunakan tanda # sebagai awalan style, contohnya #style_ku{ background-color:blue; } 2. menggunakan tanda dot (.) sebagai awalan style, contohnya .style_ku{ background-color:blue; }
4
3. tanpa tanda, tetapi langsung mengarah pada tag HTML, misalkan div{ background-color:blue; } artinya semua tag div akan dikenai style tersebut 4. turunan, baik # maupun dot (.) bisa menurunkan style. Style anak juga akan memiliki style dari induk. Contohnya #induk .anak{ background-color:red; } cara menggunakannya <div id=?induk?> <div class=?anak?>bimoweb.com/ belajar web</div> </div> artinya class anak adalah turunan dari id induk. Jika id induk dihilangkan, maka class anak tidak akan bekerja. Penggunaan tanda # atau dot(.) tergatung pada kasus yang dihadapi, dan sangat bervariasi. .
5
B. Keunikan dan Karakteristik dari CSS yaitu :
Keunikan komentar css tidak seperti HTML yang penulisan komentarnya hanya diluar tag, komentar css ini lebih enak digunakan, kita bisa menulis komentar diantara property, value, maupun selector. Ada dua sifat CSS yaitu internal dan eksternal. CSS itu merupakan suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup atau komponen web yang membuat tampilan web menjadi menarik. CSS memberikan presentasi dan tampilan pada orang, yang melihat dari web yang dibuat. Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.
6
C. Syntak-syntak CSS Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki : 1 selector 1 property 1 value Format penulisan kalimat CSS: Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat. Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur Value adalah nilai dari pengaturannya. Contoh Syntax:
7
Contoh di atas menunjukkan
Penjelasan dari gambar di atas adalah mengatur color dari h1 ke warna merah (red). Pengelompokan Selectors Agar dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan ingin mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi: Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
8
Penggunaan Banyak Properties Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ). Contoh: Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%. Cara Penulisan Yang Baik Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent, seperti :
9
CSS Comment Pada CSS comment dapat menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda. Contoh :
10
D. Perkembangan CSS – CSS3 Perkembangan CSS sampai saat ini sudah mengalami 3 generasi yaitu mulai dari CSS1, CSS2 dan CSS3. Pada perkembangannya CSS sudah masuk level 3 untuk sekarang, dimana dimulai dari CSS level 1 atau yang sering di sebut CSS, kemudian level 2 yang merupakan penyempurnaan dari CSS level 1. CSS 1 Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. CSS 1 mendukung pengaturan tampilan dalam hal : 1. Font (Jenis ketebalan). 2. Warna, teks, background dan elemen lainnya. 3. Text attributes, misalnya spasi antar baris, kata dan huruf. 4. Posisi teks, gambar, table dan elemen lainnya. 5. Margin, border dan padiing.
11
CSS 2 Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard hingga saat ini. Pada level CSS2 ini, dimasukkan semua atribut dari CSS1 dan diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific CSS. CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer. CSS 3 CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Dengan CSS3 desaigner dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 yaitu : Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.
12
Arigatou gozaimasu minna-san
Presentasi serupa
