css - basic (1).ppt

8/18/2019 CSS - Basic (1).ppt

http://slidepdf.com/reader/full/css-basic-1ppt 1/37

CSSCSS

BASICBASIC

8/18/2019 CSS - Basic (1).ppt


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


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


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


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


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


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


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


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


CSS Te0tCSS Te0t

Semua property untuk CSS e0t :

*+,+-,./ $y % Su&'nd'( S)'m .+

8/18/2019 CSS - Basic (1).ppt


CSS 7'ntCSS 7'nt

Semua roperty untuk CSS 1ont :

*+,+-,./ $y % Su&'nd'( S)'m ..

8/18/2019 CSS - Basic (1).ppt


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


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


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


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


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


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


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


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


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


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



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



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



+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



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


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



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



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


8/18/2019 CSS - Basic (1).ppt



roperti border3style dapat memiliki dari satu sampai empat nilai.

*+,+-,./ $y % Su&'nd'( S)'m 1+

8/18/2019 CSS - Basic (1).ppt


8/18/2019 CSS - Basic (1).ppt



Semua roperty dari border :

*+,+-,./ $y % Su&'nd'( S)'m 1*

8/18/2019 CSS - Basic (1).ppt


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


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


CSS MarginCSS Margin

Semua roperty untuk margin :

*+,+-,./ $y % Su&'nd'( S)'m 19

8/18/2019 CSS - Basic (1).ppt


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/

8/18/2019 CSS - Basic (1).ppt


CSS PaddingCSS Padding

Semua roperty untuk padding :

css - basic (1).ppt

Documents