Useful shortcuts for vi editor

Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Monday 11 April 2011

HTML kodları üzerinde CSS sınıfları oluşturma


Daha önce .css uzantılı dosyamızı HTML olarak oluşturduğumuz web sayfamıza yüklemiştik. Bu yazıda ise direk HTML kodları üzerinde CSS sınıfı oluşturup, sayfa içinde kullanacağız. 

<!--html’de css dosyası kullanımı-->
<html>
 <head>
<style type="text/css"> <!-- css sınıfı oluşturma -->
.links{
color:#2F4F4F;
font-family:"Times New Roman",Georgia,Serif;
font-style:italic
}
</style>
</head>
 <body>
  <p>Sayın ziyaretçi, <a class="links" href="baglanti.html" text>Lütfen linke tıklayınız. </a></p> <!--link oluşturma-->
 </body>
</html>

Yukarıdaki görüldüğü üzere, .links css tipinde bir tema tanımladık. Daha sonra bu css tipini link verirken kullandık.

Sonuçta, ister internal (içten) ister external (dıştan-dosyadan) olarak tasarladığınız CSS sınıflarını kullanabilirsiniz. Hepinize mutlu günler dilerim. J
Posted by Alper at 11:25
Labels:

Tuesday 5 April 2011

CSS’de Anchor Pseudo-sınıfları ile linklerin altını çizme

CSS’de Pseudo sınıflarının Anchor <a> etiketine ait olanlarını daha önceki yazımızda incelemiştik. 

Şimdi bu sınıfları kullanılarak standart olarak linklerin altını çizen html kodlarının görünümünü nasıl değiştireceğimize bakacağız. Yani linklerimizin altı artık istediğimiz zaman çizili olacak. J

Daha önceki yazımızda kullandığımız ornek.css dosyasına bir güncelleme yapacağız.

/*links isimli css sınıfı – linklerin gösteriminde kullanılacak */
.links{
color:#2F4F4F;
text-decoration:none; /*linkler her zaman altı çizili oluyor bunu önlemek için yapıldı */
}

/* a etiketli psuedo kodları */
a:hover {text-decoration:underline} /* ziyaret edilmeyen link – üzerine geldiğinde altını çiz*/
a:active {color:#0000FF}  /* seçili link */

Yorum satırlarından anlaşılacağı gibi linklerin her zaman altının çizilmesini önledik şöyle; psuedo kodları ile yaptığımız yalnızca linklerin üzerine gelindiğinde yazının altını çiz komutu verdik.

Şimdi bu yazdığımız css dosyasını web sitemizde nasıl kullanacağımıza bakalım.
<!--html’de css dosyası kullanımı-->
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="ornek.css" /> <!--css dosyasını sayfaya yükleme-->
</head>
 <body>
  <p>Sayın ziyaretçi, <a class="links" href="baglanti.html" >Lütfen linke tıklayınız. </a></p> <!--link oluşturma-->
 </body>
</html>

Bu yazımızda CSS ile linklerin kontrolünü elimize aldık. Siz de CSS (Cascading Style Sheets) sınıfları ile dinamik web sitesi temaları geliştirebilirsiniz. Hepinize mutlu günler dilerim. J
Posted by Alper at 16:35
Labels:

Friday 25 March 2011

CSS’de Anchor Pseudo-sınıfları

CSS sınıfları oluştururken kullanılan Pseudo sınıflarının Anchor <a> etiketine ait olanlarının bazılarını inceleyeceğiz.
Öncelikle bir notepad veya başka metin programı ile aşağıdaki kodları yazıp, yazdığımız dosyayı .css uzantılı olarak farklı kaydedelim.

/* a etiketli psuedo kodları */
a:link {color:#FF0000}    /* ziyaret edilmeyen link */
a:visited {color:#00FF00} /* ziyaret edilmiş link */
a:hover {color:#FF00FF}   /* fare imleci üzerinde olan link */
a:active {color:#0000FF}  /* seçili link */

Şimdi bu yazdığımız css dosyasını web sitemizde nasıl kullanacağımıza bakalım. (dosyanın isminin ornek.css olarak kaydedildiğini ve link sayfasının baglanti.html olduğunu varsaydık.)
<!--html’de css dosyası kullanımı-->
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="ornek.css" /> <!--css dosyasını sayfaya yükleme-->
</head>
 <body>
  <p>Sayın ziyaretçi, <a href="baglanti.html">Lütfen linke tıklayınız. </a></p> <!--link oluşturma-->
 </body>
</html>

Bu yazımızda CSS ile geliştirilen web sitelerinde sıkça kullanılan Anchor pseudo kodlarını inceledik. Sorularınız ve yorumlarınızı bekliyorum. Hepinize mutlu günler dilerim. J
Posted by Alper at 14:00
Labels:
Subscribe to: Posts (Atom)