Scribd
Unggah
10 tayangan60 halaman

Severance SI502 W09 Week10 CSS

Diunggah oleh

cahyatierni7
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
10 tayangan60 halaman

Severance SI502 W09 Week10 CSS

Diunggah oleh

cahyatierni7
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 60

Machine Translated by Google

Machine Translated by Google

CSS

Lembar Gaya Bertingkat


Charles Severance
www.dr-chuck.com

http://en.wikipedia.org/wiki/Cascading_Style_Sheets
Machine Translated by Google

Gambar besar... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Ketat//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<kepala>
<title>Universitas Michigan</title>
....

@import "/CSS/graphical.css"/**/;
p.teks kuat, .verbose, .verbose p, .verbose h2{teks-indentasi:-
876em;posisi:mutlak}
p.teks kuat a{teks-dekorasi: tidak ada}
p.teks em{font-weight:bold;font-style:normal}
div.alert{background:#eee;border:1px merah
pekat;padding:.5em;margin:0 25%}
Di era modern desain web, kami sebuah gambar{batas:tidak ada}

mewakili konten dan makna dalam .hot br, .quick br, dl.feature2 img{display:none}
div#label utama, legenda{font-weight:bold}
HTML serta pemformatan dan
tata letak dalam CSS.

Sumber: http://www.umich.edu
Machine Translated by Google

HTML telah berkembang *banyak* selama

bertahun-tahun - seiring dengan semakin


cepatnya komputer dan jaringan.

1995
2007

Sumber: www.yahoo.com
Machine Translated by Google

CSS Memungkinkan Pemisahan usaha/spesialisasi

Pengembang Perancang

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Ketat//EN" "http://


@import "/CSS/graphical.css"/**/;
www.w3.org/TR/xhtml1/DTD/xhtml1-
p.teks kuat, .verbose, .verbose p, .verbose h2{teks-indentasi:-
ketat.dtd"> 876em;posisi:mutlak}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> p.teks kuat a{teks-dekorasi: tidak ada}
<kepala> p.teks em{font-weight:bold;font-style:normal}
<title>Universitas Michigan</title> div.alert{background:#eee;border:1px solid
....
...

Setiap orang perlu mengetahui beberapa HTML dan beberapa CSS dan beberapa pemrograman - tetapi untuk benar-
benar terampil di tingkat profesional memerlukan pemahaman dan spesialisasi yang mendalam.
Machine Translated by Google

Mengubah tampilan dan nuansa halaman menggunakan style sheet CSS.

badan
{ font-family: arial, san-serif; }

a, a:link

{ warna:
#0000cc; }

...
Machine Translated by Google

Menerapkan Gaya Dasar


Machine Translated by Google

Browser memiliki "gaya default" untuk semua tag.

<h1><a href="index.htm">
AppEngineLearn</a></h1> <ul>
<li><a
href="sites.htm">Situs</a></li> <li> <a
href="topics.htm" > Topik</ a></li> </ul> <h2>Google
App
Engine: Tentang</h2> <p> Selamat datang di
situs
yang didedikasikan untuk mempelajari
Google Application Engine.
Kami harap
www.appenginelearn.com bermanfaat
bagi Anda. </p>
Machine Translated by Google

Kami akan menerapkan CSS ke tag di dokumen.

Tanpa perubahan pada HTML.


Machine Translated by Google

Banyak properti CSS untuk dimainkan

warna latar belakang, lebar batas, warna batas, margin atas,


padding, jenis font, atas, kiri, kanan, float, ukuran font,
gambar latar belakang, perataan teks, dekorasi teks, gaya font,
berat font, perataan vertikal, visibilitas, luapan, ....

Kita dapat mengatur properti ini pada tag HTML apa pun di dokumen.
Machine Translated by Google

Sumber: http://www.lesliefranke.com/files/reference/csscheatsheet.html
Machine Translated by Google

Anatomi Aturan CSS


pemilih - pada bagian dokumen mana
aturan ini berlaku

tubuh
keluarga font: arial, sans-serif;
ukuran font: 100%; }

properti - aspek CSS value - Untuk apa kita

mana yang kita ubah mengatur propertinya.


Machine Translated by Google

Beberapa tag dengan gaya yang sama

h1, h2, h3
{ warna: kuning;
warna latar belakang:
hitam; }

Membuat warna latar belakang yang mencolok adalah cara yang menyenangkan untuk men-debug/mengidentifikasi blok.
Machine Translated by Google

Tiga cara untuk menambahkan aturan gaya

• Gaya Sebaris - Menambahkan informasi gaya ke tag

• Gaya Tersemat - Menambahkan informasi gaya ke dokumen di

awal
• Lembar Gaya Eksternal - Masukkan semua gaya Anda ke dalam file eksternal

• Lebih disukai - karena dua orang dapat bekerja secara mandiri


Machine Translated by Google

<h1>
<img src="appengine.jpg" width="142" height="109" alt="Logo Di barisan
Google App Engine" style="float:right"/
> Google App Engine:
Tentang</h1> <p > Selamat datang di Gaya
situs
yang didedikasikan untuk mempelajari
Mesin Aplikasi Google.
Kami harap
www.appenginelearn.com bermanfaat
bagi Anda. </p>
Machine Translated by Google

Tertanam
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>Mempelajari Google App Engine</title> <style type="text/
css"> body { font- Gaya
family :
arial, sans serif;

} </style>
</head>
<body>
<h1><a href="index.htm">
AppEngineLearn</a></h1> <ul>
<li><a
href="sites.htm">Situs</a></li>
<li><a href="topics.htm" >Topik</a></li> </ul>
Machine Translated by Google

<html xmlns="http://www.w3.org/1999/xhtml"> <head> Gaya Eksternal


Seprai
<title>Mempelajari Google App Engine</title> <link
type="text/css" rel="stylesheet" href ="glike.css"> </head> <body>
<h1><a

href="index.htm">
AppEngineLearn</a></h1> <ul>
<li><a glike.css:
href="sites.htm">Situs</a></li> <li><a
body
href="topics.htm" >Topik</ a></li> </ul>
{ font-family: arial, sans-serif;
}
Machine Translated by Google

<kepala>
<title>Mempelajari Google App Engine</title>
<link type="teks/css" rel="stylesheet" href="glike.css">
</kepala>

csev$ ls –l
jumlah 32
-rw-r--r-- 1 staf csev 44 28 Jan 13:14 glike.css- rw-r--r-- 1 staf csev 680 17 Feb 08:25
index.htm-rw-r--r- - 1 staf csev 886 17 Feb 08:00 sites.htm-rw-r--

r-- 1 csev staf 681 17 Feb 08:01 topik.htm


pipa$

Kami meletakkan file CSS di direktori yang sama agar tautannya berfungsi.
Machine Translated by Google

font

• Font default jelek dan memang jelek


Serif - yang membuatnya lebih sulit dibaca
di layar

• Jadi hal pertama yang biasanya ingin saya


lakukan adalah mengganti font di dokumen saya

• Dan saya ingin melakukan hal ini di mana pun.


Machine Translated by Google

font

Paling Favorit Paling Tidak Favorit


body
{ font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; ukuran font: x-
besar; }

Font cadangan: serif, sans-serif, monospace, kursif, dan fantasi.


Machine Translated by Google

Faktor Font
ukuran
font-weight: tebal atau normal
font: xx-
kecil x-
gaya font: normal atau miring
kecil
kecil
dekorasi teks: tidak ada, garis bawah, garis atas,
atau garis tembus
sedang
besar x-besar xx-besar
Machine Translated by Google

Nama Warna
• W3C telah mencantumkan 16 nama
warna yang akan divalidasi dengan
validator HTML.

• Nama warnanya adalah: aqua, hitam, biru,


fuchsia, abu-abu, hijau, kapur, merah
marun, navy, zaitun, ungu, merah,
perak, teal, putih, dan kuning.

Sumber: http://www.w3schools.com/html/html_colors.asp
Machine Translated by Google

Warna berdasarkan nomor...

Tiga Angka, Merah, #e2edff


Hijau , dan Biru -
masing-masing dari 00 - FF #edf = #eeddff
(Heksidesimal)

#ffffff = putih
#000000 = hitam
#ff0000 = merah
#00ff00 = hijau
#0000ff = biru
Aman untuk web

warna
Sumber: http://www.w3schools.com/css/css_colornames.asp
Machine Translated by Google

Gaya Default untuk Tautan

Pasca-Klik:

Benar-benar Jelek!

Sumber: www.yahoo.com
Machine Translated by Google

A{
berat font: tebal; }

sebuah link {
Tautan Gaya
warna hitam; }

a: mengunjungi { tautan - sebelum berkunjung

warna: abu-abu; } dikunjungi - setelah dikunjungi

hover - ketika mouse Anda berada di atasnya


a: arahkan kursor {
tetapi Anda belum mengkliknya
dekorasi teks: tidak ada;
warna putih;
aktif - Anda telah mengkliknya dan Anda
warna latar: biru tua; } belum melihat halaman baru

a: aktif {
warna: biru laut;
Gaya default browser untuk tautan
warna latar: biru tua; }
benar-benar jelek!
Machine Translated by Google

Tag dan Atribut CSS


• Saat CSS diperkenalkan, mereka memperkenalkan dua tag baru yang cantik
banyak di sana yang berfungsi sebagai pegangan untuk penataan

• <div> - Tag blok (merusak pembenaran)

• <span> - Tag sebaris yang tidak merusak justifikasi

• Ada dua atribut yang memiliki arti khusus pada CSS

• id= - Menandai blok unik dalam dokumen untuk penataan gaya (hanya digunakan
sekali)

• class= - Menandai tag non-unik dalam dokumen untuk penataan gaya


(multi guna)
Machine Translated by Google

div sebagai Kontainer


<div> Atribut id pada tag memungkinkan kita menandai div

<p>Ini adalah paragraf di dalam div.</p> secara unik dalam dokumen. Tag id juga berguna untuk pembaca

<p>Begitu juga dengan ini.</p> layar.

</div>
<div id="tajuk"> <ul>

<li><a href="sites.htm">Situs</a></li> <li><a


href="topics.htm" >Topik</a></li>
</ul>
</div>

“div” adalah singkatan dari “division” karena memungkinkan kita membagi halaman menjadi beberapa bagian atau beberapa

bagian dan kemudian melakukan sesuatu yang berbeda dengan setiap “bagian”.
Machine Translated by Google

Menata blok dengan "id"


Semuanya dalam blok Paragraf dalam blok

#footer #footer p
{ gaya font: { gaya font:
atau
miring; font-family: Kali, miring; font-family: Kali,
serif; } serif; }

<div id="footer">
<p>Silakan kirimkan komentar apa pun ke [email protected]</p>
</div>

id= mengidentifikasi blok *tertentu* - hanya satu dalam dokumen


Machine Translated by Google

div bersarang
<div id="luar">
<div id="bersarang1">
<p>Sebuah paragraf di dalam div bertingkat pertama.</
p> </
div> <div id="nested2">
<p>Sebuah paragraf di dalam div bertingkat kedua.</p> </
div> </
div> <!-- Akhir dari div luar -->

Menambahkan div memberi kita “pegangan” untuk menerapkan gaya (CSS) ke blok teks.
Machine Translated by Google

Paragraf dan Divs


<p>Ini adalah sebuah paragraf.</
p> <div>Ini terlihat seperti sebuah paragraf, namun sebenarnya sebuah
div.</div> <p>Ini adalah paragraf yang
lain.</p> <div>Ini adalah div yang lain .</div>

Memikirkan
Machine Translated by Google

Menata gaya dengan kelas=

.menyenangkan
{ warna: #339999; keluarga font: Georgia,
Times, serif; spasi huruf:
0,05em; }

<p class="fun">Seorang pria masuk ke bar; Anda pasti


kelas dapat digunakan berkali- mengira dia akan melihatnya datang!</p> <p>Semoga
kali dalam sebuah dokumen. harimu menyenangkan.<p> <p
class=”fun”> Hal-hal menyenangkan lainnya</p>
Machine Translated by Google

Rentang (Tag tak terlihat)

<p><span class="fun">Bubble Under adalah grup penyelaman


penggemar yang berbasis di barat daya Inggris yang bertemu untuk perjalanan
menyelam di bulan-bulan musim panas ketika cuaca bagus dan daging
gulung mengalir. Kami mengatur liburan akhir pekan dalam kelompok kecil
untuk menghemat biaya akomodasi dan perjalanan serta memastikan
bahwa setiap orang mendapatkan teman menyelam yang dapat dipercaya.</p>

Terkadang Anda ingin menata sesuatu yang lebih kecil dari keseluruhan blok - lalu gunakan span. Jangan gunakan span
jika Anda menerapkan sesuatu ke seluruh blok - cukup letakkan gaya Anda pada tag blok terlampir.
Machine Translated by Google

<tubuh>
<div id="tajuk">
<h1> <a href="index.htm“class="selected"> SI502</a></h1>
<ul kelas="bilah alat">
<li><a href="books.htm">Buku</a></li> Saat membuat HTML, kami
<li><a href="topics.htm" >Topik</a></li> menggunakan id dan class untuk
</ul>
menambahkan sedikit
</div> "pegangan" di HTML agar kami
<div id="konten tubuh"> dapat "menata gaya" area dokumen
<h1>Komputasi Jaringan: Tentang</h1>
<p>
Mata kuliah ini merupakan mata kuliah survey yang mencakup luas
berbagai topik teknologi pada tingkat tinggi. Pilih id div untuk
Kursus ini ditujukan untuk siswa yang belum memiliki sebelumnya
keterampilan teknis selain penggunaan umum menunjukkan makna.
komputer. Benar-benar!
</p>
</div>
</tubuh>
Machine Translated by Google

Sumber: http://www.lesliefranke.com/files/reference/csscheatsheet.html
Machine Translated by Google

Sebuah Contoh Berjalan...


Machine Translated by Google

Ubah dari jelek menjadi mewah dengan CSS


Machine Translated by Google

Pertama: Cukup kerjakan tag dan perbaiki font/warna


Machine Translated by Google

<head>
<title>Mempelajari Google App Engine</title> <link
type="text/css" rel="stylesheet" href="glike.css"> </head>

body
{ font-family: arial, sans-serif;

}a
{ warna: biru;

} h1 a
{ dekorasi teks: tidak
ada; warna hitam;
}
Machine Translated by Google

Tata Letak Blok


Machine Translated by Google

Iklan Cepat - Firefox

• Anda cukup menggunakan Firefox untuk pengembangan situs web yang serius

• Plugin penting:

• Pengembang Web - Chris Pedrick

• FireBug - Joe Hewitt

http://addons.mozilla.org/
Machine Translated by Google

Sumber: www.dr-chuck.com
Machine Translated by Google

Dua jenis elemen

• Inline - mempengaruhi tampilan teks

• kuat, rentang
#navigasi li
• Blok - Wadah yang dapat ditata { tampilan:
sebaris; }
• Paragraf, dll

• CSS dapat mengubah tag dari inline menjadi


memblokir
Machine Translated by Google

Elemen Sebaris
• Mengalir dengan teks lain

• rentang, em, kuat, mengutip, a

• Tag sebaris dapat disarangkan asalkan cocok

• <span class=”important”><cite>Hal-hal</cite>

• Blok dapat berisi inline - namun inline tidak dapat berisi blok
Machine Translated by Google

Elemen Tingkat Blok

• Dimulai pada jalurnya sendiri - berakhir


<div id=”konten”>
pembenaran dan memulai blok baru
<p>Satu </p>
• Dapat menjadi wadah untuk lainnya <p>Dua</p>
elemen </div>

• h1 - h6, p, div, blockquote, ul, ol, formulir

• Blok dapat berisi blok lainnya


Machine Translated by Google

Sumber: www.dr-chuck.com
Machine Translated by Google

Sekarang kita akan memindahkan semuanya, menambahkan latar belakang dan batas, dll.
Machine Translated by Google

<tubuh>
<div id="header">
<h1><a href="index.htm">AppEngineLearn</a></h1> <ul> <li><a

href="sites.htm">Situs</a></li> <li> <a


href="topics.htm" >Topik</a></li> </ul> </div> <div

Tandai blok utama


id="content"> kita dengan atribut div
<h2>Google App Engine: Tentang</h2> <p> dan id.

Selamat datang di situs yang


didedikasikan untuk mempelajari Mesin Aplikasi Google.
Kami harap www.appenginelearn.com bermanfaat bagi Anda.
</p>
</div>
</tubuh>
Machine Translated by Google

body
{ font-family: arial, sans-serif; }

#header
{ warna latar: #dde; batas
atas: 3px solid #36c; }

a{ warna: biru;

} #header h1 a
{ dekorasi teks: tidak
ada; warna hitam;
}
Machine Translated by Google

<tubuh>
<div id="header">
<h1><a href="index.htm">AppEngineLearn</a></h1> <ul> <li><a

href="sites.htm">Situs</a></li> <li> <a


href="topics.htm" >Topik</a></li> </ul> </div> <div

id="content">
<h2>Google App Engine: Tentang</h2> <p>

Selamat datang di situs yang


didedikasikan untuk mempelajari Mesin Aplikasi Google.
Kami harap www.appenginelearn.com bermanfaat bagi Anda.
</p>
</div>
</tubuh> Selanjutnya kita akan memindahkan blok-blok ini.
Machine Translated by Google

#header
{ warna latar: #dde; batas atas:
3px solid #36c; tinggi: 100%;
meluap:
tersembunyi;

} #header h1
{ ukuran font: 20px;
mengapung:
kiri; perataan vertikal: tengah;

} #header li
{ ukuran font: 14px;
tampilan: sebaris; }

#header ul
{ gaya daftar: tidak
ada;
mengapung:kanan; perataan vertikal: tengah;
}
Machine Translated by Google

Sekarang mari kita lakukan “perbaikan”


Machine Translated by Google

Model Kotak CSS


• properti tinggi dan lebar mengukur elemen blok

• properti margin mendefinisikan ruang di sekitar elemen blok

• properti perbatasan mendefinisikan batas di sekitar elemen blok

• properti padding mendefinisikan ruang antara batas elemen dan konten elemen

• properti latar belakang memungkinkan Anda mengontrol warna latar belakang suatu
elemen, menetapkan gambar sebagai latar belakang, mengulang gambar latar
belakang secara vertikal atau horizontal, dan memposisikan gambar pada halaman

http://reference.sitepoint.com/css/boxmodel
Machine Translated by Google

.terperangkap 20
{ tinggi: 100
20
piksel; lebar: 200
piksel; margin:
20 piksel; batas: 5px kuning 1 1 1
solid; latar 9 4 1

0 50 0 00
belakang:merah;
bantalan: 20 piksel;
font-
keluarga:Arial;
warna oranye; ukuran font:20px; } 5

<p class=”trapped”> Saya


terjebak dalam wadah kaca emosi yang tingginya
100px dan lebar 200px. </p> Model Kotak
Machine Translated by Google

.terperangkap
{ tinggi: 50
piksel; lebar: 50

piksel; } .trapped2
{ tinggi: 50
piksel; lebar: 50 piksel; batas:
5px kuning solid;
bantalan: 10 piksel; }

<p kelas="terperangkap">
Satu</p>
<p class="trapped2"> Perbatasan, padding, dan margin bersifat tambahan.
Dua</p>
Machine Translated by Google

#header #header li
{ warna latar: #dde; batas
{ ukuran font: 14px;
atas: 3px solid #36c; tinggi:
tampilan: sebaris;
100%; meluap:
bantalan: .5em; }
tersembunyi;
bantalan: 7
#header ul
piksel; margin-
{ gaya daftar: tidak

atas: 5px; } ada; perataan teks:


#header h1 kanan;
{ ukuran mengapung:kanan; perataan
font: 20 piksel; vertikal:
mengapung: tengah;
kiri; perataan vertikal: margin: 0; bantalan: 0; }
tengah; margin: 0; bantalan: 0 0 0 .3em; }

atas, kanan, bawah, kiri


Machine Translated by Google

<div id="tajuk">
<h1><a href="index.htm">AppEngineLearn</a></h1> <ul> <li> <a

href="sites.htm" class="selected"> Situs</a></ li> <li><a


href="topics.htm" >Topik</a></li> </ul> </div>

#header li a.dipilih
{ warna:
hitam; dekorasi teks: tidak ada;
}

<div id="tajuk">
<h1><a href="index.htm">AppEngineLearn</a></h1> <ul> <li><a

href="sites.htm">Situs</a></li> <li> <a


href="topics.htm" class="selected"> Topik</a></li> </ul> </div>
Machine Translated by Google

Mengubah tampilan dan nuansa halaman menggunakan style sheet CSS.

badan
{ font-family: arial, san-serif; }

a, a:link

{ warna:
#0000cc; }

...
Machine Translated by Google

Validasi CSS

• Anda dapat memvalidasi CSS Anda untuk memastikan tidak ada kesalahan sintaksis

• Browser umumnya diam-diam mengabaikan sintaksis CSS yang buruk

• http://jigsaw.w3.org/css-validator

• Validator dapat menghemat waktu dan


kewarasan Anda

Sumber: W3C http://validator.w3.org/check


Machine Translated by Google

Taman Zen

• Situs sosial tempat CSS


desainer menunjukkan "barang" mereka

• HTML tidak pernah berubah -


hanya CSS

• Inspirasi bagi kami para desainer

Sumber: http://www.csszengarden.com/
Machine Translated by Google

Ringkasan
• Tata Letak CSS adalah seni dan ilmu tersendiri

• Dasar-dasar CSS sudah mapan dan didukung dengan baik di semua browser modern

• Model kotaknya cukup sederhana - dan memungkinkan desain yang bagus di dalamnya
standar dengan tingkat upaya yang wajar.

• Tata letak dan markup situs semakin berkembang - sebagian besar untuk semakin memungkinkan
dukungan pengalaman desktop seperti di web.

• Inovasi-inovasi ini secara alami akan menyebabkan ketidakcocokan – yang terkadang membuat
hal-hal menjadi menarik dan membuat frustrasi.

Anda mungkin juga menyukai