Upload
hendro-purwanto
View
232
Download
0
Embed Size (px)
Citation preview
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 2/37
PENDAHULUANPENDAHULUAN
Sebelum mempelajari CSS hendaknyamengetahui dasar pengetahuan tentangHTML
CSS merupakan kepanjangan dari
Cascading Style Sheet Style dapat di de!nisikan "bagaimana
menampilkan elemen HTML#
$y % Su&'nd'( S)'m*+,+-,./ *
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 3/37
CSS Synta0CSS Synta0
Aturan CSS mempunyai dua bagian utama % Selector danDeclaration
Selector biasanya adalah HTML element yang ingin dibuatstyle nya
Declaration merupakan isi dari pr'perty dan nilai dari CSS
Pemberian nilai dari pr'perty digunakan tkita titik dua ( : )(akhir dari pr'perty digunakan tkita semicolon ( ; )
*+,+-,./ $y % Su&'nd'( S)'m 1
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 4/37
CSS C'mmentCSS C'mment
Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kitaketika kita mengedit source code di kemudian hari. Komentar diabaikan oleh
browser.
Sebuah komentar CSS diawali dengan "/*", dan diakhiri dengan "*/", seperti
ini :
/*This is a comment*/ p{text-align:center;
/*This is another comment*/ color:black;ont-amil!:arial;"
*+,+-,./ $y % Su&'nd'( S)'m -
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 5/37
CSS 2D dan ClassCSS 2D dan Class
CSS 2d Selector id digunakan untuk menentukan style untuk elemen tunggal yang
unik. d pemilih menggunakan atribut id elemen !#$, dan dide%inisikan
dengan "&'. (turan style bawah ini akan diterapkan pada elemen dengan id
) "para":
#para1
{
text-align:center;
color:red;
}
3AN4AN memulai nama 2D dengan n'm'r5 2ni tidak akanbekerja di M'6illa , 7ire8'0
*+,+-,./ $y % Su&'nd'( S)'m 9
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 6/37
CSS 2D dan ClassCSS 2D dan Class
CSS Class Selector Class digunakan untuk menentukan style untuk sekelompok elemen. +erbeda dengan
selector id, selector class yang paling sering digunakan pada beberapa elemen.
!al ini memungkinkan kita untuk menetapkan style tertentu untuk setiap elemen !#$ dengankelas yang sama.
Selector Class menggunakan atribut class !#$, dan dide%inisikan dengan "."
ada contoh di bawah ini, semua elemen !#$ dengan class ) "center"akan dibuat ratatengah :
#center {text-align:center;"
kita juga dapat menentukan bah&a hanya elemen HTML tertentu yangdipengaruhi 'leh kelas
Pada :'nt'h di ba&ah( elemen p semua dengan :lass ; <:enter<akan dibuat rata tengah %
p#center {text-align:center;"
3AN4AN memulai nama kelas dengan angka5 2ni hanya didukung di 2nternet E0pl'rer
*+,+-,./ $y % Su&'nd'( S)'m /
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 7/37
CSS $a:kgr'undCSS $a:kgr'und
$a:kgr'und C'l'rroperti background-color menentukan warna latar belakang suatu elemen.
-arna latar belakang halaman dide%inisikan dalam pemilih body :
bod! {background-color:$b%c&de;"
Dengan CSS( &arna paling sering ditentukan 'leh %
> nilai HE? @ seperti < 77++++< > sebuah nilai B4$ @ seperti <rgb *99(+(+< > nama &arna @ seperti <merah<
*+,+-,./ $y % Su&'nd'( S)'m
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 8/37
CSS $a:kgr'undCSS $a:kgr'und$a:kgr'und 2mageroperti background-image menentukan gambar untuk digunakan sebagai latar belakang suatu
elemen.
Secara de%ault, gambar diulang sehingga mencakup seluruh elemen.
ambar latar belakang untuk halaman bisa di set seperti ini:
bod! {background-image:url('paper#gi');"
background-repeat mengulang gambar ba:kgr'und( pr'perty % repeatrepeat-x repeat-! no-repeat
background-attachment Menentukan apakah gambar latar belakang tetap ataus:r'll dengan sisa halaman( pr'perty % scroll xed inherit#
Background-position #engatur posisi awal dari background image
*+,+-,./ $y % Su&'nd'( S)'m F
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 9/37
CSS $a:kgr'undCSS $a:kgr'und
Seperti yang dapat kita lihat dari contoh di atas, ada properti yang harusdipertimbangkan ketika berhadapan dengan background.
ntuk mempersingkat kode, juga mungkin untuk menentukan semua propertidalam satu properti tunggal.
roperti singkat untuk latar belakang hanya 'background":
bod! {background: $ url('img+tree#png') no-repeat xedright top;"
$ila menggunakan pr'perti singkat urutan nilai pr'perti adalah%
ba:kgr'und@:'l'r
ba:kgr'und@image
ba:kgr'und@repeat
ba:kgr'und@atta:hment
ba:kgr'und@p'siti'n
*+,+-,./ $y % Su&'nd'( S)'m G
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 10/37
CSS Te0tCSS Te0t
Semua property untuk CSS e0t :
*+,+-,./ $y % Su&'nd'( S)'m .+
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 11/37
CSS 7'ntCSS 7'nt
Semua roperty untuk CSS 1ont :
*+,+-,./ $y % Su&'nd'( S)'m ..
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 12/37
CSS LinkCSS Link
$ink dapat ditata dengan properti CSS 2color misalnya, %ont3%amily, background, dll4.
Khusus untuk link adalah mendapatkan style berbeda tergantung padastatemen nya.
Keempat $ink adalah :a%link @ a n'rmal( unisited link
a%isited @ a link the user has isited
a%h'er @ a link &hen the user m'uses 'er it
a%a:tie @ a link the m'ment it is :li:ked
a:link {color:$,,%%%%;" /* un.isited link */ a:.isited {color:$%%,,%%;" /* .isited link */ a:ho.er {color:$,,%%,,;" /* mouse o.er link */ a:acti.e {color:$%%%%,,;" /* selected link */
*+,+-,./ $y % Su&'nd'( S)'m .*
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 13/37
CSS ListCSS List
Si%at CSS list memungkinkan kita untuk:* #engatur penkita da%tar item yang berbeda untuk ordered list
* #engatur penkita da%tar item yang berbeda untuk unordered list
* #engatur gambar/image sebagai penkita da%tar item.
Dalam HTML( ada dua jenis da8tar% > un'rder list @ da8tar item yang ditkitai dengan bullets > 'rder list @ da8tar item yang ditkitai dengan angka atauhuru8
Dengan CSS( lis tbisa ditata lebih lanjut( dan gambar dapat
digunakan sebagai penkita item da8tar
*+,+-,./ $y % Su&'nd'( S)'m .1
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 14/37
CSS ListCSS List
Catatan : 56, dan sebelumnya, dukungan properti nilai "decimal3leading37ero",'lower3greek", 'lower3latin", "upper3latin", 'armenian", 'georgian", atau'inherit" hanya jika 89C5 tersebut ditentukan;
*+,+-,./ $y % Su&'nd'( S)'m .-
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 15/37
CSS ListCSS List
ntuk menetapkan gambar sebagai penkita item da%tar, menggunakan properti list-style-image:ul{list-st!le-image: url('spurple#gi');"
C'nt'h di atas tidak ditampilkan sama di semua br'&ser 2E dan Iperaakan menampilkan gambar@tkita sedikit lebih tinggi dibandingkan 7ire8'0(Chr'me( dan Sa8ari 3ika kita ingin gambar ditempatkan sama di semuabr'&ser( s'lusi :r'ssbr'&ser dijelaskan di ba&ah ini
ul{list-st!le-t!pe: none;
padding: %px;margin: %px;"
li{background-image: url(spurple#gi);background-repeat: no-repeat;background-position: %px 0px;
padding-let: 1&px;"
*+,+-,./ $y % Su&'nd'( S)'m .9
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 16/37
CSS ListCSS List
!al ini juga mungkin untuk menentukan semua properti da%tar dalam satu, properti tunggal.
roperti yang digunakan untuk da%tar singkatan, adalah properti list-style:
ul{
list-st!le: suare url(2spurple#gi2);"
$ila menggunakan pr'perti singkat( urutan nilai@nilai adalah%> list@style@type> list@style@p'siti'n
> list@style@image
Tidak masalah jika salah satu nilai di atas hilang( asalkansisanya berada di urutan yang ditentukan
*+,+-,./ $y % Su&'nd'( S)'m ./
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 17/37
CSS TableCSS TableCSS Border
ntuk menentukan batas tabel dalam CSS, menggunakan properti border .Contoh di bawah ini menetapkan border hitam untuk table, th, dan elemen td:
table th td{
border: 1px solid black;"
erhatikan bahwa tabel dalam contoh di atas memiliki perbatasan gkita. !al ini
karena baik table, th, dan elemen td memiliki batas terpisah. ntuk menampilkan batas tunggal untuk tabel, gunakan properti border-collapse.
roperti border3collapse mengatur apakah batas tabel ke dalam perbatasan tunggalatau terpisah:
table{
border-collapse:collapse;
"tableth td{
border: 1px solid black;"
*+,+-,./ $y % Su&'nd'( S)'m .
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 18/37
CSS TableCSS Table
$ebar dan tinggi tabel dide%inisikan dengan properti width dan height.Contoh di bawah ini set lebar tabel untuk <<=, dan tinggi elemen th untuk><p0:
table{3idth:1%%4;
"th{height:0%px;"
eks dalam tabel adalah selaras dengan si%at te0t3align dan ?ertikal3align.
roperti te0t3align mengatur alignment horisontal, seperti kiri, kanan, atautengah :
td{text-align:right;"
*+,+-,./ $y % Su&'nd'( S)'m .F
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 19/37
CSS TableCSS Table
roperti ?ertikal3align mengatur alignment ?ertikal, seperti atas, bawah, atautengah:
td{
height:0%px;.ertical-align:bottom;
"
ntuk mengontrol ruang antara perbatasan dan konten dalam sebuah tabel,
gunakan properti padding pada elemen td dan th:
td{
padding:10px;"
*+,+-,./ $y % Su&'nd'( S)'m .G
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 20/37
CSS TableCSS Table
Contoh di bawah ini menentukan warna perbatasan, dan warna teks dan latar belakang elemen th:
table td th{
border:1px solid green;"th{
background-color:green;color:3hite;
"
*+,+-,./ $y % Su&'nd'( S)'m *+
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 21/37
CSS $'0 M'delCSS $'0 M'del
Semua elemen !#$ dapat dianggap sebagai kotak. 8alam CSS, '+o0#odel"digunakan ketika menggunakan desain dan tata letak.
+o0 #odel CSS pada dasarnya adalah sebuah kotak yang membungkus elemen !#$,
dan terdiri dari: margin, border, padding, dan konten yang sebenarnya.
+o0 #odel memungkinkan kita untuk menempatkan perbatasan di sekitar dan unsur
ruang dalam kaitannya dengan unsur lainnya.
ambar di bawah ini mengilustrasikan +o0 #odel :
*+,+-,./ $y % Su&'nd'( S)'m *.
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 22/37
CSS $'0 M'delCSS $'0 M'del
enjelasan dari bagian3bagian yang berbeda:• #argin 3 sebuah daerah di sekitar perbatasan. #argin tidak memiliki warna
latar belakang, itu benar3benar transparan
• +order3 Sebuah batas yang terjadi di sekitar padding dan konten. +order
dipengaruhi oleh warna latar belakang kotak
• adding 3 sebuah daerah di sekitar konten. adding dipengaruhi oleh warnalatar belakang kotak
• Content 3 si dari kotak, di mana teks dan gambar muncul
untuk mengatur lebar dan tinggi dari suatu elemen dengan benar di semua
browser, kita perlu mengetahui cara kerja +o0 #odel.
*+,+-,./ $y % Su&'nd'( S)'m **
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 23/37
CSS $'0 M'delCSS $'0 M'del
Penting: +ila kita menentukan si%at lebar dan tinggi dari suatu elemen denganCSS, kita hanya mengatur lebar dan tinggi area konten. ntuk mengetahui
ukuran penuh dari elemen, kita juga harus menambahkan padding, border dan
margin.
otal lebar elemen dalam contoh di bawah ini adalah @<<p0:
3idth:50%px; padding:1%px;border:0px solid gra!;margin:1%px;
mari kita coba hitung :
*9+p0 &idth
J *+p0 le8t and right paddingJ .+p0 le8t and right b'rder
J *+p0 le8t and right margin
; 1++p0
*+,+-,./ $y % Su&'nd'( S)'m *1
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 24/37
CSS $'0 M'delCSS $'0 M'del
+ayangkan bahwa kita hanya memiliki A><p0 misalnya. #ari kita membuatelemen dengan total luas A><p0:
3idth:55%px; padding:1%px;border:0px solid gra!;margin:%px;
$ebar total elemen selalu harus dihitung seperti ini:
$ebar elemen otal ) lebar B padding kiri kanan B padding B border kiri
kanan B borderB margin kiri B margin kanan
inggi total elemen selalu harus dihitung seperti ini:
inggi elemen otal ) tinggi B padding B padding atas bawah B batas atas B
batas bawah B batas atas B margin bawah
*+,+-,./ $y % Su&'nd'( S)'m *-
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 25/37
CSS $'0 M'delCSS $'0 M'del
ika kita menguji contoh sebelumnya di nternet 50plorer, kita melihat bahwa totallebar tidak persis A><p0.
56 dan ?ersi sebelumnya mencakup padding dan perbatasan di lebar, ketika properti lebar diatur, kecuali 89C5 yang dideklarasikan.
ntuk memperbaiki masalah ini, tambahkan saja 89C5 untuk kode:
67D89T< html =>?@9 2-//AB9//DTD CTE? 1#%Transitional//<F22http://333#3B#org/TG/xhtml1/DTD/xhtml1-transitional#dtd2H6htmlH6headH6st!le t!peI2text/css2Hdi.#ex {
3idth:55%px; padding:1%px;border:0px solid gra!;margin:%px;"6/st!leH6/headH
*+,+-,./ $y % Su&'nd'( S)'m *9
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 26/37
CSS $'rderCSS $'rder
Border Style
roperti border3style menentukan apa border untuk ditampilkan.
ak satu pun dari si%at border akan memiliki e%ek apapun kecuali properti
border3style di set ;
border3style ?alues :
*+,+-,./ $y % Su&'nd'( S)'m */
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 27/37
CSS $'rderCSS $'rder
Border Widthroperti border3width digunakan untuk mengatur lebar perbatasan.
$ebar diatur dalam pi0el, atau dengan menggunakan salah satu dari tiganilai yang sudah ditentukan: tipis, sedang, atau tebal.
Catatan: "border3width" properti tidak bekerja jika digunakan sendiri.unakan "border3style" properti untuk mengatur perbatasan pertama.
p#one{
border-st!le:solid;border-3idth:0px;
" p#t3o{
border-st!le:solid;border-3idth:medium;
"
*+,+-,./ $y % Su&'nd'( S)'m *
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 28/37
CSS $'rderCSS $'rder
Border Colorroperti border3warna yang digunakan untuk mengatur warna border. -arna dapat
diatur oleh: * Dama 3 menetapkan nama warna, seperti 'red" * E+ 3 menetapkan nilai E+, seperti "rgb 2A>>,<,<4" * !e0 3 menetapkan nilai he0, seperti "& 11<<<<"
kita juga dapat mengatur warna batas untuk 'transparent".
Catatan: properti "border3color" tidak bekerja jika digunakan sendiri. unakan"border3style" properti untuk mengatur perbatasan pertama.
p#one{
border-st!le:solid;border-color:red;
" p#t3o{
border-st!le:solid;border-color:$JKb51;
"
*+,+-,./ $y % Su&'nd'( S)'m *F
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 30/37
CSS $'rderCSS $'rder
roperti border3style dapat memiliki dari satu sampai empat nilai.
*+,+-,./ $y % Su&'nd'( S)'m 1+
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 32/37
CSS $'rderCSS $'rder
Semua roperty dari border :
*+,+-,./ $y % Su&'nd'( S)'m 1*
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 33/37
CSS IutlineCSS Iutline
aris adalah garis yang ada sekitar elemen, di luar tepi perbatasan, untukmembuat elemen "menonjol".
Si%at3si%at garis menentukan gaya, warna, dan lebar garis besar.
*+,+-,./ $y % Su&'nd'( S)'m 11
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 34/37
CSS MarginCSS Margin
#argin adalah wilayah di sekitar sebuah elemen 2luar perbatasan4. #argintidak memiliki warna latar belakang, dan benar3benar transparan.
+agian atas, kanan, bawah, dan margin kiri dapat diubah secara independen
menggunakan properti terpisah. Sebuah properti singkat margin juga dapat
digunakan, untuk mengubah semua margin sekaligus.
Falue yang ada :
*+,+-,./ $y % Su&'nd'( S)'m 1-
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 35/37
CSS MarginCSS Margin
Semua roperty untuk margin :
*+,+-,./ $y % Su&'nd'( S)'m 19
8/18/2019 CSS - Basic (1).ppt
http://slidepdf.com/reader/full/css-basic-1ppt 36/37
CSS PaddingCSS Padding
adding membersihkan wilayah di sekitar konten 2di perbatasan4 dari elemen.adding dipengaruhi oleh warna latar belakang elemen.
+agian atas, kanan, bawah, dan padding kiri dapat diubah secara independen
menggunakan properti terpisah. Sebuah properti padding singkatan juga dapat
digunakan, untuk mengubah semua bantalan sekaligus.
Dilai atau ?alue yang mungkin :
*+,+-,./ $y % Su&'nd'( S)'m 1/