Css'de Hata Yakalama Yöntemleri

CSS ile sayfa planlama ve gelişmiş sayfa tasarımlarında başınıza bir çok hata gelebilir. Bu gayet normal bir haldir. Mesele bu hataları çözmektir. Hata çözmede izlenecek yöntemlerden bir tanesi elementlere kenar çizgisi(border) atamaktır.

li a { border: 1px solid red; }

Diğer bir yöntemde elemente ardalan rengi(background-color) uygulamaktır.

CSS kodu;

#icerikalani { background-color:#999; }

Böylece elementin etki alanı görülecek ve hatayı tespit kolaylaşacaktır.

Css Sorunları ve Çözüm Önerileri



Bir yazı tipi(font) tanımlaması yapılırken eğer yazı tipi adı arasında boşluk varsa(örn: Times New Roman) uygulamada sorun olur. Sorunun çözümü boşluk olan yazı tipi ismini çift tırnak("") içine almaktır.

body{ font-family: times, "times new roman", serif; }

CSS'in Yapısı
CSS'in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value).

Not XML de Seçiciler HTML elementleri dışında yeni oluşturulan elementlerde olabilir.

Tüm HTML elementleri potansiyel Seçicilerdir. Seçiciler ismini de buradan alır, HTML seçilen element anlamındadır. Bildirim bloğu süslü parantezle açılır ve kapanır. Bildirimler arasında " ; " noktalı virgül kullanılır. özellik ve değerler birbirinden " : " iki nokta üstüste ile ayrılır. 

h1 { font: medium Arial; }

şeklinde arada boşluk verilerekde bildirm yapılabilir. Burada ilki font'un boyutunu ikincisi ise font ismini gösterir. İleride bu konuya daha ayrıntılı gireceğiz. Ayrıca sadece font etiketine özel " / " kullanımı vardır örnek aşağıda:

h1 { font: medium/120% Arial; }

Burada " / " Seçicinin font boyutunu ve satır yüksekliğini gösterir.(font_boyutu/satir_yuksekliği)



Gruplama

Yukarıda hep bir Seçici'yi sadece bir HTML elementine atamayı gördük, Birden fazla HTML elementine de atama yapabilirz, buna gruplama denir. Gruplama Seçicilerde yapıldığı gibi Bildirmlerde de yapılabilir.

p, h3 { font-family: Arial; }

Not CSS2 ile birlikte Evrensel Seçici(universal selector) Seçiciler arasına katılmıştır, " * " ile gösterilir. * {color: red;} tüm elementleri kırmızı yapar. Bir anlamda gruplama yapar...

Burada düküman içindeki paragraflarda(p) ve başlıklarda(h3) fontların Arial olacağını tek bildirim ile belirttik. Gruplama yapılan Seçicileri ayırmak için " , " virgül kullanılır. Sınırsız sayıda Seçici gruplanabilir. Gruplama tasarımcılara büyük kolaylıklar sağlar. Bildirim'lerimizi de gruplayabiliriz, bununla ilgili yukarıda örnekler mevcut. Bir veya daha fazla Seçiciye bir den fazla bildirim ekleye biliriz.

p, h3{ font-family: Arial; font-size:2; font-weight: bold; }

Seçiciler ikiye ayrılır. Sınıf Seçicisi ve Id Seçicisi. CSS ile işlenmemiş bir dökümanda başlangıçta bir plan yaparak hangi içeriğin Sınıf Seçicisi hangi Seçicicinin Id Seçicisi olacağını planlamalıyız.

Merhaba Arkadaşlar...

CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler.

Hemen hemen her konuda olduğu gibi CSS konusunda da Microsoft Internet Explorer ve Netscape farklı yorumlar ortaya koyarlar. Bu noktada her iki browser’ın da aynı/benzer yorumlayacağı kodlar yazmak en uygunudur...

LİNK ÖZELLİKLERİ:

a :Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.

a:hover :Linkin imleç üzerine getirildiğindeki durumudur.

a:active :Linkin tıklandığı andaki durumudur.

a:visited :Linkin tıklandıktan sonraki durumudur.

BİÇİMLENDİRME:

color:Linkin rengini belirler.

background-color:Linkin zemin rengini belirler.

background-image:Linkin zeminine resim ekler(Bu animated-gif de olabilir.)

text-decoration:Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.

font-weight:Yazının kalınlık veya inceliğini belirler.

border:Linkin etrafına kenarlık ekler.

display:Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.

LİSTE ÖZELLİKLERİ:

disk:Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.

circle : Liste biçiminin çember şeklinde olmasını sağlar.

square : Liste biçiminin kare olmasını sağlar.

decimal : Liste biçiminin rakamlardan oluşmasını sağlar.

lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.

upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.

lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.

upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.

none : Listenin simgesiz olmasını sağlar.

inside : Listenin ikinci satırının en soldan başlamasını sağlar.

Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.

list-style-image : Liste biçiminin resim olmasını sağlar.

KATMAN ÖZELLİKLERİ:

position:Katmanın yerinin belirlenmesini sağlar.

absolute:Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.

relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.

static:Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.

top:Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.

left:Katmanın soldan ne kadar içeride olması gerektiğini belirler.

width:Katmanın genişliğinin ne kadar olacağını belirler.

height:Katmanın yüksekliğinin ne kadar olacağını belirler.

overflow:Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.

auto:Otomatik olarak belirlenir.

scroll:Kaydırma çubuğu ekleyerek görünmesini sağlar.

visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.

hidden:Sığmayan yerleri gizler.

visibility:Katmanın görünebilirlik ayarını yapar.

visible : Katmanın görünür olmasını sağlar.

hidden:Katmanı gizler.

z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.

FONT ÖZELLİKLERİ:

font-family:Yazı türünü belirler.(Arial , Verdana gibi.)

font-style:Yazının normal veya sağa eğik olmasını sağlar.

font-variant:Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.

font-weight:Yazının kalınlık-inceliğini belirler.

font-size:Yazının büyüklüğünü belirler.

TEXT ÖZELLİKLERİ:

word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.

letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.

text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.

underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.

overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.

line-through : Kelimenin ortasından çizili olmasını sağlar.

blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)

vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.

text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.

capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.

uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.

lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.

none : Kelimelerin orjinal metindeki gibi olmasını sağlar.

text-align: Metnin dikey olarak nasıl hizalanacağını belirler.

left : Metni sola yaslar.

right : Metni sağa yaslar.

center : Metni ortalar.

justify : Metni iki yana yaslar.

text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.

line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)

first-line : Metnin ilk satırının biçimlendirilmesini sağlar.

first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.

İMLEÇ ÖZELLİKLERİ:

crosshair:İmlecin artı işareti şeklinde olmasını sağlar.

auto:İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.

default:İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.

hand:İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.

move:İmlecin taşıma işareti şeklinde olmasını sağlar.

ne-resize:İmlecin sağa yatık normal ok olmasını sağlar.

nw-resize:İmlecin sola yatık normal ok olmasını sağlar.

se-resize:İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.

sw-resize:İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.

n-resize:İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.

s-resize:İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.

w-resize:İmlecin sola doğru ince ok şeklinde olmasını sağlar.

e-resize:İmlecin sağa doğru ince ok şeklinde olmasını sağlar.

text:İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.

wait:İmlecin meşgul animasyonuna dönüşmesini sağlar.

help:İmlecin yardım-soru işaretine dönüşmesini sağlar

ZEMİN ÖZELLİKLERİ:

background-color: Zeminin rengini belirler.

#color : Renk adı.

transparent: Zeminin saydam olmasını sağlar.

background-image: Zemine resim yerleştirilmesini sağlar.

url : Zemine yerleştirilen resmin adresi.

background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.

repeat : Resmin bütün zemine yayılmasını sağlar.

repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.

repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.

no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.

background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.

scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.

fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar

background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.

top : Resmi yukarı yerleştirir.

center : Resmi ortalar.

bottom : Resmi aşağı yerleştirir.

left : Resmi sola yerleştirir.

right: Resmi sağa yerleştirir.

…px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.

TABLO ÖZELLİKLERİ

margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.

margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.

margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.

margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.

margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.

padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.

padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

border : Tablonun kenarlarının şekillendirilmesini sağlar.

border-top : Tablonun üst kenarının şekillendirilmesini sağlar.

border-left : Tablonun sol kenarının şekillendirilmesini sağlar.

border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.

border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.

border-width : Tablonun kenarlarının kalınlığını belirler.

border-top-width : Tablonun üst kenarının kalınlığını belirler.

border-right-width : Tablonun sağ kenarının kalınlığını belirler.

border-bottom-width : Tablonun alt kenarının kalınlığını belirler.

border-left-width : Tablonun sol kenarının kalınlığını belirler.

border-style : Tablonun kenarlık türünü belirler.

border-top-style : Tablonun üst kenarlık türünü belirler.

border-right-style : Tablonun sağ kenarlık türünü belirler.

border-bottom-style : Tablonun alt kenarlık türünü belirler.

border-left-style : Tablonun sol kenarlık türünü belirler.

border-color : Tablonun kenarlarının rengini belirler.

border-top-color : Tablonun üst kenarının rengini belirler.

border-right-color : Tablonun sağ kenarının rengini belirler.

border-bottom-color : Tablonun alt kenarının rengini belirler.

border-left-color : Tablonun sol kenarının rengini belirler.

color : Tabloda geçen metnin rengini belirler.

width : Tablonon genişliğini belirler.

height : Tablonun yüksekliğini belirler.

NOT : Başlık “TABLO” olarak verildi Ancak bu nitelikler başta TD , TR , TH vs. olmak üzere hemen her etiket için kullanılabilir.CSS’ yi özel kılan da zaten bu…

KAYDIRMA ÇUBUĞU ÖZELLİKLERİ:

scrollbar-face-color :Kaydırma çubuğunun yüzey rengi , aynı zamanda zemini de etkiliyor.

scrollbar-base-color :Kaydırma çubuğununun sol ve üst kenarlıklarını çizgi halinde kaplıyor.

scrollbar-shadow-color :Sağ ve alt kenarlıkların gölge rengi.

scrollbar-highlight-color :Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor.

scrollbar-arrow-color :Yön oklarının rengi

Kaydırma çubuğu, sadece Internet Explorer’da geçerlidir.

-Derlenmiştir. istersen özellik isimlerini eğik yapabilirsin, mesela:

scrollbar-shadow-color :Sağ ve alt kenarlıkların gölge rengi.

scrollbar-highlight-color :Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor.

scrollbar-arrow-color :Yön oklarının rengi

Merhaba Arkadaşlar....

Bu kod sayesinde sitenizin sağ üst köşesine reklam veya resim ekleyebileceksiniz.Dikkatimi cekti internette bende kodunu araştırıp sizlerle paylaşmak istedim.

Kod içinde belirtilen RESİM ÜSTÜNE TIKLANINCA GİDİLECEK ADRES yazan kısma yönlendirme yapacağınız site linkini yazacaksınız.

<script LANGUAGE="Javascript"> <!-- Code0 = "%3Cscript%20language%3D%22Javascript%22%3E%0D%0A%3C%21--%0D%0Avar%20PagePeelBasicData_Paper%20%3D%20new%20Array%28%29%3B%0D%0Avar%20PagePeelBasicData_Ad%20%3D%20new%20Array%28%29%3B%0D%0A%0D%0APagePeelBasicData_Paper%5B%27width%27%5D%20%3D%20540%3B%0D%0APagePeelBasicData_Paper%5B%27height%27%5D%20%3D540%3B%0D%0A%0D%0APagePeelBasicData_Paper%5B%27swingspeed%27%5D%20%3D%205%3B%0D%0A%0D%0APagePeelBasicData_Paper%5B%27minimized_percent%27%5D%20%3D%2020%3B%0D%0APagePeelBasicData_Paper%5B%27minimized_amplitude%27%5D%20%3D%201%3B%0D%0A%0D%0APagePeelBasicData_Ad%5B%27width%27%5D%20%3D450%3B%0D%0APagePeelBasicData_Ad%5B%27height%27%5D%20%3D%20450%3B%0D%0A%0D%0APagePeelBasicData_Ad%5B%27img%27%5D%20%20%20%20%20%3D%20%22RESİM URL%22%3B%0D%0APagePeelBasicData_Ad%5B%27dest%27%5D%20%20%20%20%20%3D%20%22 RESİM ÜSTÜNE TIKLANINCA GİDİLECEK ADRES %22%3B%0D%0APagePeelBasicData_Ad%5B%27target%27%5D%20%20%20%20%20%3D%20%27_blank%27%3B%0D%0A%0D%0Adocument.write%28%27%3Cscript%20src%3D%22http%3A//static.de.euserv.adaos-ads.net/richmedia/pagepeel/pagepeel.js%22%20language%3D%22Javascript%22%3E%3C/script%3E%27%29%3B%0D%0A--%3E%0D%0A%3C/script%3E%0D%0A"; document.write(unescape(Code0)); //--> </script>

Merhaba Arkadaşlar...

Bugün nette aylak aylak gezerken bir sitenin başlığının kaydığını gördüm. İlgimi çekti. Merak ettim,araştırdım, buldum ve sizlerle paylaşıyorum .  Bu kod sayesinde site başlığınız değişerek  sitenize ayrı bir görsellik katacaktır...

Wordpress Kullananlar İçin;

Tema editöründen  header.php ‘ye tıklayın. <head> tagını bulun. <head> tagından sonra aşağıdaki kodu ekleyin…

<script LANGUAGE=’JavaScript’> var default1 = “Enver Balık “; var text1 = “Enver Balık1 “; var text2 = “Enver Balık2 “; var text3 = “Enver Balık3 “; var text4 = “Enver Balık4 “; var changeRate = 2000; // 1000 = 1 second var messageNumber = 0; function changeStatus() { if (messageNumber == 0) { window.status=default1; document.title=default1; } else if (messageNumber == 1) { window.status=text1; document.title=text1; } else if (messageNumber == 2) { window.status=text2; document.title=text2; } else if (messageNumber == 3) { window.status=text3; document.title=text3; } else if (messageNumber == 4) { window.status=text4; document.title=text4; messageNumber = 0; } messageNumber++; setTimeout(“changeStatus();”,changeRate); } changeStatus(); </SCRIPT>

Merhaba Arkadaşlar...

 Arkaplan Özellikleri (Background Properties)

Css Arkaplan özelliklerini kısa ve öz bir şekilde videolu anlatıma sunulmuştur.

Merhaba Arkadaşlar...

Hazırladığınız bir html dökümanı içerisindeki yazılarınızı font, renk ve boyut olarak istediğiniz gibi nasıl düzenleyeceğinizi anlatan bir videodur.

Merhaba Arkadaşlar...

Şimdi sizlere "Web Site" kullananlar için önemli olan birkaç css kod tanıtacağım.Bu kodlar ilk "Salih Toy" kardeşimiz tarafından yayınlanmıştır bende en önemli ola bilecekleri buraya ekledim.

Gölgeli Yazı Kodu

<style type="text/css"> h1 { color: silver; font-family: Verdana, serif; letter-spacing: 1px } h1 span { display: block; position: relative; top: -39px; left: -0.4mm; color: black; } </style> <h1> Yazılacak Yazı Buraya<span>Yazılacak Yazı Buraya</span></h1>

Temalarınızda “–>” İşaretini Silin

Bu kodu css'ye ekleyinizi. (Css/Style)

<!

Yazı Tipini Değiştirme

body,td,th { font-family: Calibri, Arial; font-size: 13px; color: #000; margin: 0px; }

Bedava-Sitem  Üst, Alt, Sağ Reklamı Ortalama

h1#title { display: none; } h2#title span { display: none; } div.header { display: none; } li.nav_element { list-style-type: none; } li.nav_element { display: none; } #ad-a87f,#ad-c81e,#ad-a87f,#ad-cfcd,#ad-c9f0,#ad-c4ca,#ad-8f14,#ad-e4da,#ad-d3d9,#ad-1679,#ad-45c4,#ad-eccb { margin:auto; } #webme_footer_textlink_dont_hide { margin-left: 350px; } #webme_sky_ad { top: 200px; }

Arkaplan Değiştirme

body { background-image: url(buraya link); background-repeat: repeat; background-attachment: scroll; background-color: white; background-position: top-left; }

Merhaba Arkadaşlar...

Bu kod sayesinde yazının üzerine geldiğinde arkaplanında bir renk belirir.

a.enver_d:link{font-size:19px; color:#FF3333; text-decoration:none} a.enver_d:visited{font-size:19px; 3px;color:#FF3333; text-decoration:none} a.enver_d:hover{font-size:19px;color:#FF3333; background-color:#FFFF00;}

<a class="enver_d" rel="dofollow" href="http://enverblk.blogspot.com">Üzerine gelince arkaplan rengi değişen link kodu </a>

Merhaba Arkadaşlar...

Bu kod sayesinde "Linkin" üzerine gelince altı cizir.Yukarıda görüldüğü gibidir.

a.enver_b:link{font-size:19px; color:#FF3333; text-decoration:none} a.enver_b:visited{font-size:19px; 3px;color:#FF3333; text-decoration:none} a.enver_b:hover{font-size:19px;color:FF3333;text-decoration:underline}

<a class="enver_b" rel="dofollow" href="http://www.enverblk.blogspot.com">Üzerine gelince altı çizilen link kodu</a>

Merhaba Arkadaşlar...

Şimdi sizlere "Bedava-Sitem Forum Kodu"nu tanıtacağım.Forum tasarımının üzerinde oynama yapılarak belirli "Css/Html" kodları ile forum tasarımını güzelleştirilmiş halidir bu.

Bu kodu  eklemek için ilk olarak  "Ekstra" sayfasına giriyoruz sonra "Forum" ekstrasını seçip giriyoruz ve orda üst alanda boş bir yazı menüsü vardır oraya aşağıdaki kodu ekliyoruz ve kaydetiyoruz tasarım aktif oluyor.

<style> .forumueberschrift{ display: block; padding: 15px 10px 15px 15px; border: 1px solid #c0c0c0; border-radius: 10px 10px 0 0; font-family: Verdana; color: #333; font-size: 12px; font-weight: bold; background: #efefe7 url(http://www.forumuz.net/images/styles/VisionCollision/misc/navbit-home.png) no-repeat left; } .forumtabelle { background-color: #efefe7; border: 1px solid #c0c0c0; padding: 20px; border-radius: 0 0 10px 10px; margin-top: -20px; border-top: none; } a[style="font-size:15px;font-weight:bold;"]{ padding: 15px 10px 15px 15px; border: 1px solid #c0c0c0; border-radius: 10px; font-family: Verdana; color: #C03; font-size: 12px; font-weight: bold; background: #efefe7; margin: 15px 0 20px 0; text-decoration: none; display: block; } TD[width="100%"]{ padding: 5px 5px 5px 5px; border: 1px solid #c0c0c0; border-radius: 10px; font-family: Verdana; color: #C03; font-size: 12px; font-weight: bold; background: #efefe7; margin: 15px 0 20px 0; text-decoration: none; display: block; width: 99%; } TD[width="100%"] a{ text-decoration: none; } TABLE[cellspacing="0"]{ border: none; border: 1px solid #c0c0c0; border-radius: 10px; padding: 5px; color: #333; font-size: 11px; } TABLE[cellspacing="0"] a{ color: #C03; text-decoration:none; font-family: Verdana, Geneva, sans-serif; font-size: 12px; } TABLE[cellspacing="0"] a:hover{ text-decoration:none; } TD{ color: #333; text-decoration:none; font-family: Verdana, Geneva, sans-serif; font-size: 12px; } TR[onMouseOver="this.bgColor = '#dedfc6'"]{ background: #efefe7; } TD[width="300"]{ border-bottom: 1px solid #d1d1e1; } TD[width="75"]{ border-bottom: 1px solid #d1d1e1; } TD[width="120"]{ border-bottom: 1px solid #d1d1e1; } #emr{ text-decoration: none; } #emr ul { font-family: Verdana, Geneva, sans-serif; font-size: 12px; } #emr ul li { display: inline; padding-right: 100px; margin: 0px; } #emr ul li a { font-size: 12px; color: #C00; text-decoration: none; font-weight: bold; padding: 5px; } #emr ul li a:hover { color: #FFF; text-decoration: none; background-color: #C00; border-radius: 5px; } </style> <div id="emr"> <ul> <li><a href="http://siteadı.tr.gg/Forum/index.htm" _fcksavedurl="http://siteadı.tr.gg/Forum/index.htm">Anasayfa</a></li> <li><a href="http://siteadı.tr.gg/Forum/anmelden.htm" _fcksavedurl="http://siteadı.tr.gg/Forum/anmelden.htm">Kayıt Ol</a></li> <li><a href="http://siteadı.tr.gg/Forum-Kurallari.htm" _fcksavedurl="http://siteadı.tr.gg/Forum-Kurallari.htm">Forum Kuralları</a></li> <li><a href="http://siteadı.tr.gg/Forum/ausloggen.htm" _fcksavedurl="http://siteadı.tr.gg/Forum/ausloggen.htm">Çıkış</a></li> </ul> </div>

Kodun Önizlemesi

Merhaba Arkadaşlar...

Şimdi sizlere cok güzel bir "Html/Css" kod tanıtacağım.Kodun özelliği soluk olan resimlerinizi daha net bir şekilde gösterir.İşinize yarayabilir bir kod.

Önizleme

<a href="http://enverblk.blogspot.com/" target="_self"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu3SgVYSpgNMkqpGFIKNf4UvJLIsQNvkfvemHfbhEblRlw8FBJ9DFITYX1kG8Nit33G4NfRIbAsrSTS-CH8za1poM85jflyYfiEaUIadfEP4NoAICC9nPPrgqedXZRCH58NoDgNk4gwkM/s1600/ln1yz.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="" alt="" /></a>

Merhaba Arkadaşlar...

Bedava-sitem'in kısa bir süre önce sunduğu hazır temayı daha güzel hale getirebilmek için bazı arkadaşlarımız özel kodlamalar hazırlamış bizlerde bunları sizlerle paylaşmak istedik.

Kodları tek tek sunmak yerine bir dosya içerisinde düzenledim ve direk indirmeniz için siteye yükledim.Dosya içerisinde gereken kodlamalar mevcuttur.Resimli anlatımları'da mecvuttur.

Dosyayı aşağıdan indirebilirsiniz.Dosya benim tarafımdan hazırlanmıştır.

İndir

Merhaba Arkadaşlar...

Şimdi sizlere "Css" kelimesinin ne anlama geldiğini anlatacağım. 

Css (Cascading Style Sheets)

Css internet sayfalarının görünümünü değiştiren bir tanım dosyasıdır. CSS kendine has kuralları olan bir tanım dilidir denilebilir. CSS Sayfa içersindeki her bir elemana ait farklı özellik atamayı sağlar

Css Özellikleri:

Html sayfasındaki nesnelerin görüntüsünü belirler Html 4.0 sürümü ile stil dosyaları geliştirilmiştir CSS ayrı bir dosyada *.css uzantısı ile saklanabilir. Bu işlem sayfanın daha hızlı açılmasını sağlar Elemanlar üzerinde style="" parametresi ile özel kısa tanımlar yapılabilir.