Categorized | Adobe, Dreamweaver, Tutorial

Memahami Panel CSS Styles

Memahami Panel CSS Styles

Pastikan fail index.html masih lagi dibuka pada tetingkap Document.

Pada panel CSS Styles, klik All (terdapat pada bahagian atas panel) untuk memahami fail CSS anda dengan lebih lanjut.

img1_tut17

Klik tanda (+) sekiranya tag<style> belum lagi dibuka.

Klik pada arahan ‘body’.

img2_tut17

Background-color mempunyai nilai #3F2F22, yang menunjukkan warna bagi latar belakang halaman web anda.

Seterusnya, klik tanda (+) sekiranya style.css belum lagi dibuka.

img3_tut17

Klik pada arahan ‘p’.

img4_tut17

Pada tetingkap Document, klik satu kali pada mana-mana perenggan yang telah anda format sebelum ini.

img5_tut17

Pada panel CSS Styles, klik Current pada bahagian atas panel dan fahami CSS fail anda. Mod Current menunjukkan maklumat tentang pilihan semasa anda.

Membuat satu arahan CSS baru

Pada panel CSS Styles, klik New CSS Rule pada bahagian kanan bawah panel.

img6_tut17

Pada tetingkap New CSS Rule, pilih Class (untuk selector type).

Masukkan .bold pada kotak nama.

Pastikan anda telah menaip (.) sebelum perkataan bold. Semua style kelas mestilah bermula dengan noktah.

img7_tut17

Pastikan juga yang style.css telahpun dipilih dari menu pop-up.

Klik OK.

Tetingkap CSS Rule Definition akan muncul sebaik sahaja anda klik OK.

Pada tetingkap tersebut, pilih

Font : Verdana, sans-serif

Size: 11, pilih Pixels

Line Height: 18, Pixels

Weight: Bold

Color: #011774

Klik OK. Klik All pada bahagian atas panel CSS Styles.

img8_tut17

Klik butang (+) sekiranya style.css belum lagi dibuka.

Anda akan melihat fail halaman web anda akan kelihatan seperti berikut.

.bold class style telahpun dimasukkan bersama ke dalam senarai yang telah didefinisikan dalam ‘external style sheet’.

Possibly Related Posts:


This post was written by:

Khadizah - who has written 35 posts on Blog MindaSys.


Contact the author

Leave a Reply

advert

Our Flickr Photos - See all photos

Katogeri

Pelawat Terkini

Kalender

June 2009
M T W T F S S
« May   Jul »
1234567
891011121314
15161718192021
22232425262728
2930  
PHVsPjxsaT48c3Ryb25nPndvb19hZHNfcm90YXRlPC9zdHJvbmc+IC0gdHJ1ZTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzE8L3N0cm9uZz4gLSBodHRwOi8vYmxvZy5taW5kYXN5cy5jb20ubXkvd3AtY29udGVudC91cGxvYWRzLzIwMDkvMjAwOS8wNi9kZWV6YmFubmVyLmpwZzwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzI8L3N0cm9uZz4gLSBodHRwOi8vYmxvZy5taW5kYXN5cy5jb20ubXkvd3AtY29udGVudC91cGxvYWRzLzIwMDkvMjAwOS8wNy90ZWFtYnVpbGRpbmd2MjEuanBnPC9saT48bGk+PHN0cm9uZz53b29fYWRfaW1hZ2VfMzwvc3Ryb25nPiAtIGh0dHA6Ly9ibG9nLm1pbmRhc3lzLmNvbS5teS93cC1jb250ZW50L3VwbG9hZHMvMjAwOS8yMDA5LzA4L2tlbGFiX2ljdF9teS0xLnBuZzwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzQ8L3N0cm9uZz4gLSBodHRwOi8vYmxvZy5taW5kYXN5cy5jb20ubXkvd3AtY29udGVudC91cGxvYWRzLzIwMDkvMjAwOS8wOC90bW5uZWdhcmFfZmFjZWJvb2suanBnPC9saT48bGk+PHN0cm9uZz53b29fYWRfbXB1X2Fkc2Vuc2U8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19hZF9tcHVfZGlzYWJsZTwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fYWRfbXB1X2ltYWdlPC9zdHJvbmc+IC0gaHR0cDovL2Jsb2cubWluZGFzeXMuY29tLm15L3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDA5LzIwMDkvMDcvYmFubmVyYm13LTEyLmpwZzwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX21wdV91cmw8L3N0cm9uZz4gLSBodHRwOi8vd3d3LmJtdy5jb20ubXkvY29tL2VuL2luZGV4Lmh0bWw8L2xpPjxsaT48c3Ryb25nPndvb19hZF9wYWdlPC9zdHJvbmc+IC0gU2VsZWN0IGEgcGFnZTo8L2xpPjxsaT48c3Ryb25nPndvb19hZF90b3BfYWRzZW5zZTwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX3RvcF9kaXNhYmxlPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19hZF90b3BfaW1hZ2U8L3N0cm9uZz4gLSBodHRwOi8vYmxvZy5taW5kYXN5cy5jb20ubXkvd3AtY29udGVudC91cGxvYWRzLzIwMDkvMjAwOS8wMy9taW5kYXN5c2Fkcy5qcGc8L2xpPjxsaT48c3Ryb25nPndvb19hZF90b3BfdXJsPC9zdHJvbmc+IC0gaHR0cDovL3d3dy5taW5kYXN5cy5jb20ubXk8L2xpPjxsaT48c3Ryb25nPndvb19hZF91cmxfMTwvc3Ryb25nPiAtIGh0dHA6Ly9kZWV6aGFybWFuLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX3VybF8yPC9zdHJvbmc+IC0gaHR0cDovL3d3dy5qdXN0ZXhwbG9yZS5jb20ubXkvdGVhbWJ1aWxkaW5nLmh0bWw8L2xpPjxsaT48c3Ryb25nPndvb19hZF91cmxfMzwvc3Ryb25nPiAtIGh0dHA6Ly93d3cuZmFjZWJvb2suY29tL2hvbWUucGhwPyMvZ3JvdXAucGhwP2dpZD0xMTIwOTI2MTI4NzQmcmVmPXRzPC9saT48bGk+PHN0cm9uZz53b29fYWRfdXJsXzQ8L3N0cm9uZz4gLSBodHRwOi8vd3d3LmZhY2Vib29rLmNvbS9ob21lLnBocD8jL2dyb3VwLnBocD9naWQ9MTA4NjYyNDY2MzgzJnJlZj10czwvbGk+PGxpPjxzdHJvbmc+d29vX2FsdF9zdHlsZXNoZWV0PC9zdHJvbmc+IC0gZGVmYXVsdC5jc3M8L2xpPjxsaT48c3Ryb25nPndvb19hcmNoaXZlczwvc3Ryb25nPiAtIFNlbGVjdCBhIHBhZ2U6PC9saT48bGk+PHN0cm9uZz53b29fYXNpZGVzX2NhdGVnb3J5PC9zdHJvbmc+IC0gU2VsZWN0IGEgY2F0ZWdvcnk6PC9saT48bGk+PHN0cm9uZz53b29fYXNpZGVzX2VudHJpZXM8L3N0cm9uZz4gLSBTZWxlY3QgYSBudW1iZXI6PC9saT48bGk+PHN0cm9uZz53b29fYXV0aG9yPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19hdXRvX2ltZzwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fYmFubmVyX2ltYWdlPC9zdHJvbmc+IC0gaHR0cDovL2Jsb2cubWluZGFzeXMuY29tLm15L3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDA5LzIwMDkvMDMvbWluZGFzeXNhZHMuanBnPC9saT48bGk+PHN0cm9uZz53b29fYmFubmVyX3VybDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cubWluZGFzeXMuY29tLm15PC9saT48bGk+PHN0cm9uZz53b29fYmdyPC9zdHJvbmc+IC0gbGlnaHRibHVlLmNzczwvbGk+PGxpPjxzdHJvbmc+d29vX2Jsb2NrX2ltYWdlPC9zdHJvbmc+IC0gaHR0cDovL2Jsb2cubWluZGFzeXMuY29tLm15L3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDA5LzIwMDkvMDcvYmFubmVyYm13LTEyLmpwZzwvbGk+PGxpPjxzdHJvbmc+d29vX2Jsb2NrX3VybDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cuYm13LmNvbS5teTwvbGk+PGxpPjxzdHJvbmc+d29vX2N1c3RvbV9jc3M8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19jdXN0b21fZmF2aWNvbjwvc3Ryb25nPiAtIGh0dHA6Ly9ibG9nLm1pbmRhc3lzLmNvbS5teS93cC1jb250ZW50L3VwbG9hZHMvMS1mYXZpY29uLmdpZjwvbGk+PGxpPjxzdHJvbmc+d29vX2ZlYXR1cmVkX2NhdGVnb3J5PC9zdHJvbmc+IC0gU2VsZWN0IGEgY2F0ZWdvcnk6PC9saT48bGk+PHN0cm9uZz53b29fZmVhdHVyZWRfZW50cmllczwvc3Ryb25nPiAtIFNlbGVjdCBhIG51bWJlcjo8L2xpPjxsaT48c3Ryb25nPndvb19mZWF0X2VudHJpZXM8L3N0cm9uZz4gLSAxMjwvbGk+PGxpPjxzdHJvbmc+d29vX2ZlZWRidXJuZXJfaWQ8L3N0cm9uZz4gLSAyODIyNjY0PC9saT48bGk+PHN0cm9uZz53b29fZmVlZGJ1cm5lcl91cmw8L3N0cm9uZz4gLSBodHRwOi8vZmVlZHMuZmVlZGJ1cm5lci5jb20vQmxvZ01pbmRhc3lzPC9saT48bGk+PHN0cm9uZz53b29fZmxpY2tyX2VudHJpZXM8L3N0cm9uZz4gLSA5PC9saT48bGk+PHN0cm9uZz53b29fZmxpY2tyX2lkPC9zdHJvbmc+IC0gMzM5OTM0MzFATjA3PC9saT48bGk+PHN0cm9uZz53b29fZmxpY2tyX3VybDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cuZmxpY2tyLmNvbS9waG90b3MvbWluZGFzeXMvPC9saT48bGk+PHN0cm9uZz53b29fZ29vZ2xlX2FuYWx5dGljczwvc3Ryb25nPiAtIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4NCnZhciBnYUpzSG9zdCA9ICgoImh0dHBzOiIgPT0gZG9jdW1lbnQubG9jYXRpb24ucHJvdG9jb2wpID8gImh0dHBzOi8vc3NsLiIgOiAiaHR0cDovL3d3dy4iKTsNCmRvY3VtZW50LndyaXRlKHVuZXNjYXBlKCIlM0NzY3JpcHQgc3JjPSciICsgZ2FKc0hvc3QgKyAiZ29vZ2xlLWFuYWx5dGljcy5jb20vZ2EuanMnIHR5cGU9J3RleHQvamF2YXNjcmlwdCclM0UlM0Mvc2NyaXB0JTNFIikpOw0KPC9zY3JpcHQ+DQo8c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI+DQp0cnkgew0KdmFyIHBhZ2VUcmFja2VyID0gX2dhdC5fZ2V0VHJhY2tlcigiVUEtMTgwNjQzNC01Iik7DQpwYWdlVHJhY2tlci5fdHJhY2tQYWdldmlldygpOw0KfSBjYXRjaChlcnIpIHt9PC9zY3JpcHQ+PC9saT48bGk+PHN0cm9uZz53b29faG9tZTwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29faG9tZV90aHVtYl9oZWlnaHQ8L3N0cm9uZz4gLSA1NzwvbGk+PGxpPjxzdHJvbmc+d29vX2hvbWVfdGh1bWJfd2lkdGg8L3N0cm9uZz4gLSAxMDA8L2xpPjxsaT48c3Ryb25nPndvb19pbWFnZV9zaW5nbGU8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2xheW91dDwvc3Ryb25nPiAtIGRlZmF1bHQucGhwPC9saT48bGk+PHN0cm9uZz53b29fbG9nbzwvc3Ryb25nPiAtIGh0dHA6Ly9ibG9nLm1pbmRhc3lzLmNvbS5teS93cC1jb250ZW50L3VwbG9hZHMvMjAwOS8yMDA5LzAzL2Jsb2doZWFkZXIuanBnPC9saT48bGk+PHN0cm9uZz53b29fbWFudWFsPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tL3N1cHBvcnQvdGhlbWUtZG9jdW1lbnRhdGlvbi9nYXpldHRlLWVkaXRpb24vPC9saT48bGk+PHN0cm9uZz53b29fb3RoZXJfZW50cmllczwvc3Ryb25nPiAtIDEyPC9saT48bGk+PHN0cm9uZz53b29fb3RoZXJfaGVhZGxpbmVzPC9zdHJvbmc+IC0gNTwvbGk+PGxpPjxzdHJvbmc+d29vX3Jlc2l6ZTwvc3Ryb25nPiAtIHRydWU8L2xpPjxsaT48c3Ryb25nPndvb19zaG9ydG5hbWU8L3N0cm9uZz4gLSB3b288L2xpPjxsaT48c3Ryb25nPndvb19zaG93X2Fkc190b3A8L3N0cm9uZz4gLSB0cnVlPC9saT48bGk+PHN0cm9uZz53b29fc2hvd19jYXJvdXNlbDwvc3Ryb25nPiAtIHRydWU8L2xpPjxsaT48c3Ryb25nPndvb19zaG93X3ZpZGVvPC9zdHJvbmc+IC0gdHJ1ZTwvbGk+PGxpPjxzdHJvbmc+d29vX3NpbmdsZV9oZWlnaHQ8L3N0cm9uZz4gLSAxODA8L2xpPjxsaT48c3Ryb25nPndvb19zaW5nbGVfd2lkdGg8L3N0cm9uZz4gLSAyNTA8L2xpPjxsaT48c3Ryb25nPndvb190YWJzPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb190aGVtZW5hbWU8L3N0cm9uZz4gLSBHYXpldHRlPC9saT48bGk+PHN0cm9uZz53b29fdXBsb2Fkczwvc3Ryb25nPiAtIGE6Mjp7aTowO3M6NjA6Imh0dHA6Ly9ibG9nLm1pbmRhc3lzLmNvbS5teS93cC1jb250ZW50L3VwbG9hZHMvMS1mYXZpY29uLmdpZiI7aToxO3M6NjA6Imh0dHA6Ly9ibG9nLm1pbmRhc3lzLmNvbS5teS93cC1jb250ZW50L3VwbG9hZHMvMS1mYXZpY29uLmljbyI7fTwvbGk+PGxpPjxzdHJvbmc+d29vX3ZpZGVvX2NhdGVnb3J5PC9zdHJvbmc+IC0gVmlkZW88L2xpPjwvdWw+