CSS

CSS :first-child ve :last-child Nasıl Kullanılır?

Özellikle tablolar üzerinde çalışan yada çalışmayı düşünenler için oldukça büyük bir öneme sahip olan child (çocuk) seçicilerinin ilk ikisini bu konuda anlatıyoruz. Diğer seçiciler :first-child ve :last-child‘ göre biraz daha üst seviyede yer aldığı için öncelikle bu seçicilerin ne işe yaradığını iyi bir şekilde anlaşıldığından emin olmalısınız.

Child seçicileri isminden de az çok anlaşılacağı gibi birden fazla birbirinin aynısı olan alt bileşenler içerisinde seçili işlem yapmayı sağlıyor. Yani eğer bir bileşene class yada ıd verilmemiş/verilememiş ise ve bu bileşen sıralı ise HTML yerine CSS ile seçmemiz gerekecek demektir. Örnek vermek gerekir ise şu yapıya vereceğimiz CSS komutları tüm bileşenlerde çalışacaktır.

<table>
   <tr>
      <td>satır 1, sütun 1</td>
      <td>satır 1, sütun 2</td>
      <td>satır 1, sütun 4</td>
      <td>satır 1, sütun 4</td>
   </tr>
</table>

Yukarıdaki yapının önizlemesi şu şekilde:

satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 4 satır 1, sütun 4

Örnek HTML tablo yapısına uyguladığımız CSS kodu şu şekilde:

table td {
    background-color: #000000;
    color: #ffffff;
}

CSS uygulanmış halinin önizlemesi şu şekilde oluyor:

satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 4 satır 1, sütun 4

Peki ya biz tablonun tüm sütunlarına bu işlemi uygulamak istemiyorsak? İşte tamda burada child seçicilerini kullanmamız gerekecek. Mesela tablonun ilk sütununu seçmek istersek :first-child seçicisini, son sütununu seçmek istersek de :last-child seçicisini kullanmamız gerekir. Uygulaması ise şu şekilde oluyor;

table td:first-child {
    background-color: #000000;
    color: #ffffff;
}
satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 4 satır 1, sütun 4
table td:last-child {
    background-color: #000000;
    color: #ffffff;
}
satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 4 satır 1, sütun 4

Biz her ne kadar bu konuyu tablolar üzerinden anlatıyor olsak da HTML yapısı gereği bir çok yerde bu çözüme ihtiyaç duyulmaktadır, mesela buna örnek vermek gerekir ise sitelerde bulunan yatay veya dikey menüler diyebiliriz. Bir çok menü otomatik id ile ayrışmış olsa da menüde bir değişiklik olduğunda bu id değeri değişeceği ya da silineceği için CSS kodları boşta kalacaktır, bu nedenle kalıcı çözüm için CSS ile ilk ve son çocuk seçicisini kullanarak kodlama yapmak daha mantıklı olacaktır.

Konuyu biraz da zenginleştirip tek satırdan oluşmayan bir tablo kullanarak örneklendirmek gerekir ise örnek HTML kodumuz yazının bu kısmında değişerek şu şekli alıyor;

<table>
   <tr>
      <td>satır 1, sütun 1</td>
      <td>satır 1, sütun 2</td>
      <td>satır 1, sütun 4</td>
      <td>satır 1, sütun 4</td>
   </tr>
   <tr>
      <td>satır 2, sütun 1</td>
      <td>satır 2, sütun 2</td>
      <td>satır 2, sütun 4</td>
      <td>satır 2, sütun 4</td>
   </tr>
   <tr>
      <td>satır 3, sütun 1</td>
      <td>satır 3, sütun 2</td>
      <td>satır 3, sütun 4</td>
      <td>satır 3, sütun 4</td>
   </tr>
   <tr>
      <td>satır 4, sütun 1</td>
      <td>satır 4, sütun 2</td>
      <td>satır 4, sütun 4</td>
      <td>satır 4, sütun 4</td>
   </tr>
</table>

4 satırlık yeni tablomuz şu şekilde görünüyor:

satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 4 satır 1, sütun 4
satır 2, sütun 1 satır 2, sütun 2 satır 2, sütun 4 satır 2, sütun 4
satır 3, sütun 1 satır 3, sütun 2 satır 3, sütun 4 satır 3, sütun 4
satır 4, sütun 1 satır 4, sütun 2 satır 4, sütun 4 satır 4, sütun 4

Aynı CSS kodlarını kullandığımızda sonuç şu şekilde oluyor:

table td:first-child {
    background-color: #000000;
    color: #ffffff;
}
satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 4 satır 1, sütun 4
satır 2, sütun 1 satır 2, sütun 2 satır 2, sütun 4 satır 2, sütun 4
satır 3, sütun 1 satır 3, sütun 2 satır 3, sütun 4 satır 3, sütun 4
satır 4, sütun 1 satır 4, sütun 2 satır 4, sütun 4 satır 4, sütun 4
table td:last-child {
    background-color: #000000;
    color: #ffffff;
}
satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 4 satır 1, sütun 4
satır 2, sütun 1 satır 2, sütun 2 satır 2, sütun 4 satır 2, sütun 4
satır 3, sütun 1 satır 3, sütun 2 satır 3, sütun 4 satır 3, sütun 4
satır 4, sütun 1 satır 4, sütun 2 satır 4, sütun 4 satır 4, sütun 4

Peki ya ilk ve son sütun yerine ilk ve son satırı seçmek istenir ise ne yapmak gerekir derseniz çözüm çok basit. Sütunları oluşturan tablo bileşeni td yerine satırları oluşturan tr üzerinde seçme işlemi yapmamız gerekiyor. Yani td:first-child yerine tr:first-child ve td:last-child yerine tr:last-child gelmesi gerekiyor. Örnekler ise şu şekilde;

table tr:first-child {
    background-color: #000000;
    color: #ffffff;
}
satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 4 satır 1, sütun 4
satır 2, sütun 1 satır 2, sütun 2 satır 2, sütun 4 satır 2, sütun 4
satır 3, sütun 1 satır 3, sütun 2 satır 3, sütun 4 satır 3, sütun 4
satır 4, sütun 1 satır 4, sütun 2 satır 4, sütun 4 satır 4, sütun 4
table tr:last-child {
    background-color: #000000;
    color: #ffffff;
}
satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 4 satır 1, sütun 4
satır 2, sütun 1 satır 2, sütun 2 satır 2, sütun 4 satır 2, sütun 4
satır 3, sütun 1 satır 3, sütun 2 satır 3, sütun 4 satır 3, sütun 4
satır 4, sütun 1 satır 4, sütun 2 satır 4, sütun 4 satır 4, sütun 4

Buraya kadar her şey tamam ise seviye atlamanın da zamanı geldi demektir. İlk ve sonlar için bu seçiciler her zaman yeterli olacaktır, ancak birde herhangi bir satır ve sütünü tek olarak seçme durumu var ki orada devre farklı bir CSS seçicisi giriyor. Bu durumlarda kullanılan CSS seçicisi ise :nth-child ve bu seçiciden türeyen nth-last-child(n).

Bu seçici ile ilgili ise yakın zamanda bir yazılı anlatım hazırlayıp sizlere bu seçicinin de nasıl kullanıldığını anlatacağız. Daha fazlası için bizi takip etmeyi unutmayın, :nth-child ve nth-last-child(n) ile ilgili bir içerik yayınlandığında ise bağlantısı hemen altta yer alacak! Eğer var ise yayınlamışız demektir ;)

Seçici Google Chrome Internet Explorer Mozilla Firefox safari Opera
:first-child 4.0+ 7.0+ 3.0+ 3.1+ 9.6+
:last-child 4.0+ 9.0+ 3.5+ 3.2+ 9.6+

CSS :active Seçicisi Nasıl Kullanılır?

Bu konumuzda CSS’de bulunan bir çok seçici arasında belkide en çok kullanılan seçicilerden biri olan :active seçicisinin ne işe yaradığını ve kullanım çeşitlerini anlatıyor olacağız.

Her ne kadar :hover seçicisi kadar kullanılmasa da :active seçicisinin de CSS’de oldukça önemli bir görevi var. Mouse ile bir alanın üzerine geldiğimizde alanın veya işaret ettiğimiz farklı bir alanın stilini değiştirmek için nasıl :hover seçicisini kullanıyorsak, :active seçicisi ile de bu stil değişimini tıklandığında aktif olacak hale getirebiliriz. Yani bir div, id veya benzeri bir alanı :active seçicisi ile seçtiğimizde CSS’de tanımladığımız stil komutları seçili alana tıklandığında aktif olacak ve tıklamayı bırakana kadarda aktif kalmaya devam edecektir. Sadece tıklandığı sürece aktif olan bu seçici genellikle bağlantılarda kullanılıyor. Hani şu bağlantıya tıklandığımızda yanar da söner ya, işte o genellikle CSS ile yapılır ve :active seçicisi kullanılır.

CSS :active seçicisini Örnekler ile anlatacak olursak;

Örnek olarak iki bağlantı oluşturup bu bağlantılardan birine :active seçicisi ile CSS komutu tanımlarsak, tanımlanan bağlantıya tıkladığımızda bağlantı reaksiyon göstererek tıklandığını belli eder;

<a class="hedef-1" href="#">Dünya'ya gider</a>
<a class="hedef-2" href="#">Venüs'e gider</a>
.hedef-2:active {
	background-color: #000000;
	color: #FF0000;
}

Yukarıdaki örnekte hedef-2 içeriğindeki “Venüs’e gider” bağlantısına tıklandığında bağlantının rengi kırmızı olurken arkaplan rengi ise siyah olacaktır. Ayrıca aşağıdaki HTML kullanımı ile de aynı CSS kodları “Venüs’e gider” bağlantısının arkaplanını siyah yapıp bağlantıyı kırmızı yapacaktır.

<div class="hedef-1">
	<a href="#">Dünya'ya gider</a>
</div>
<div class="hedef-1">
	<a class="hedef-2" href="#">Venüs'e gider</a>
</div>

Bağlantılar için kullanılabildiği gibi :active seçicisi aynı zamanda herhangi bir alan için kullanmakta aşağıdaki örnekte gördüğünüz gibi mümkündür:

<div class="alan-1">Burada her şey olabilir!</div>
<div class="alan-2">Burada her şeyden fazlası olabilir!</div>
.alan-1:active {
	background-color: #000000;
	color: #FFFFFF;
}

Bu şekilde kullanıldığında alan-1‘e tıklandığında arkaplan rengi siyah olurken aynı zamanda yazı rengi beyaz olacaktır.

:active seçicisini destekleyen tarayıcı sürümleri;

Google Chrome
Google Chrome
4.0+
Internet Explorer
Internet Explorer
7.0+
Mozilla Firefox
Mozilla Firefox
2.0+
safari
Safari
3.1+
Opera
Opera
9.6+

Seçilen Yazının Arkaplan Rengini Değiştirme

Dün Facebook’ta bir arkadaş diğer arkadaşa seçtiğimiz yazıların arka planı kırmızı oluyor onu nasıl yaptın diye, arkadaşta tam olarak nasıl olduğunu anlatmakta güçlük çekmişti. bende sitenin kaynak kodlarına küçük bir gezinti yaptıktan sonra css dosyasının  ::selection kodlarıyla yapıldığını belirtmiştim. bu gün detaylı olarak nasıl yapılacağını anlatacağım.

Bu gün başka bir arkadaşım sitesini gezerken kodların tam olarak nasıl olması gerektiğini anlatan bir yazı gördüm daha önce bilmeme rağmen tam olarak hatırlamadığımı fark ettim ve hem sizlere anlatmak, hem de arşivimde bulunması amacıyla bu konuyu açmaya karar verdim, böylece ihtiyacı olarak arkadaşlara da yardımcı olmuş olurum.

Öncelikle şunu belirtmek isterim her tema da olmasa da wordpress varsayılan olarak ilk görselde göreceğiniz mavi rengi kullanmaktadır, ve dikkat etmeniz gereken bir diğer konu ise kullandığınız temada bunun dışında aynı kodlar kullanılmış ise öncelikle onları kaldırın yada düzenlemeyi onlar üzerinde yapın aksi taktirde çeşitli sorunlar çıkabilir.

Önce (varsayılan);

seçilen-yazının-arkaplanını-değiştirme-önce

Sonra;

seçilen-yazının-arkaplanını-değiştirme-sonra

 

Aşağıdaki CSS kodlarını CSS dosyanızın style.css en altına eklediğiniz de sitenizdeki yazılar ile birlikte seçilen her yer istediğiniz renkte olacaktır.

::-moz-selection { background: #52504b; color: #FFF;}
::selection { background: #52504b; color: #FFF;}
a::-moz-selection { background: #52504b; color: #FFF;}
a::selection { background: #52504b; color: #FFF;}

Ben kendi temama uygun olduğu için #52504b renk kodlarını kullandım sizde istediğiniz renk kodunu kullanabilirsiniz.

WordPress Eklentisiz Sayfalandırma Yapma

Bu gün sizin için güzel bir konu daha hazırladım bu konuda WordPress için uygun olan eklentisiz pagenavi görevi yapan sayfalandırma yapmayı ve yapılmış bir örneğini nasıl sitenize eklemeniz gerektiğini anlatacağım buyurun anlatıma geçelim…

Wordpres WP-PageNavi eklentisi sitenizde kurulu olduğunda bu sayfalandırma kodlarının görünümünde olumlu değişiklikler olur ancak eklenti kurulu olmadığında hiç bir sorun çıkmaz bizzat bu sitede denedim çalışma garantisi verebilirim :) öncelikle yapmanız gereken functions.php dosyasını açmak ve aşağıdaki kodu bulmak.

<?php

Sonrasında hemen altına şu kodları ekleyip dosyayı kaydedin yada upload edin.

function sayfalama($pages = '', $range = 3)
{
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}
if(1 != $pages)
{
echo "<div class='wp-pagenavi'>";
echo "<span>".$paged."/".$pages."</span>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>İlk</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>«</a>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
}
}
if ($paged < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($paged + 1)."'>»</a>";
if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Son</a>";
echo "</div>n";
}
}

Daha sonra style.css dosyasına aşağıdaki kodları ekleyin.

.wp-pagenavi {clear:both;}
.wp-pagenavi a, .wp-pagenavi span {text-decoration:none;border:1px solid #BFBFBF;padding:3px 5px;margin:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;font-size:13px;-webkit-box-shadow:0 1px 4px #ccc;-moz-box-shadow:0 1px 4px #ccc;box-shadow: 0 1px 4px #ccc;}
.wp-pagenavi a:hover {background:#2c2c2c;color:#FFF;}
.wp-pagenavi span.current {color:#FFF;font-weight:bold;background:#2c2c2c;}

Yukarıdaki style kodlarını kendi temanıza göre değiştirebilirsiniz.

Şimdi sayfalandırma yapılan numaraların nerede çıkmasını istiyorsanız aşağıdaki kodu oraya ekleyin.

<?php sayfalama(); ?>

bu kod bir nevi pagenavi eklentisinin kısaltılmış versiyonudur. öyle uzun uzadıya kodlar yerine bunu ekleyerek yaparsanız aynı görevi görecektir.

Görsel olarak nasıl göründüğünü merak edenler için.

Eklensizi Sayfalandırma

CSS İle Yazıyı Kalın Yapma

Bu yazımda CSS ile yazının kalın yapılmasından bahsedeceğim, öncelikle yapmanız gereken kalınlaştırmak istediğiniz alanın class‘ını bulmak ve hemen aşağıdaki kodu bu class’a eklemek.

font-weight: bold;

 sizinde anlayacağınız gibi bold kısmı kalınlaştır demek bunun yerine normal derseniz yazı normal olacaktır.

Bir de dikkat etmeniz gereken kısım var, eğer font-weight: komutu daha önce kulalnılmış ise öncelikle ondan kurtulmanız gerekiyor, zira aynı kod olursa hem sağlıksız bir çalışma olur hemde sorunlar yaratabilir.

Sormak istediklerinizi yorum yazarak bana sorabilirsiniz, seve seve size yardımcı olurum :)

CSS’de text-indent kodu ile Paragraf Başı Yapmak

Bu yazımızda paragraflarda ilk satırın soldan bizim belirlediğimiz kadar uzak başlamasını, yani paragraf başı yapmamızı sağlayan text-indent kodundan bahsedeceğiz.

HTML’de paragraflar <p> kodu ile belirlenir. WordPress kullanıyorsanız yazılarınızdaki paragraflarınız daima <p> ve </p> kodları arasında yer alır. Fakat ilk satır sola yapışıktır. Eğer paragraflarınıza satır başı eklemek istiyorsanız aşağıdaki kodu kullanabilirsiniz.

p
{
text-indent:35px;
}

Yukarıdaki kodda paragraflarımızın ilk satırının soldan 35px sonra başlamasını sağlamış oldu. Ön izlemesini Türkçe bir lorem ipsum örneği ile görelim.

Biber türemiş sıfat dergi koştum orta camisi öyle ki koyun adresini kapının kulu. Filmini mi koştum sıla türemiş sıfat bilgiyasayarı. Sarmal açılmadan dolayı de adresini gitti adanaya. Layıkıyla telefonu dışarı çıktılar telefonu ve sokaklarda şafak bahar ötekinden dolayı koştum türemiş sıfat masanın yazın sevindi.

Yukarıdaki paragrafta gördüğünüz gibi ilk satırın soldan 35 piksel sonra başlamasını sağlayarak satır başı yapmış oldu.

Eğer bu kodu sitenizdeki tüm paragraflare uygulamak istiyorsanız yazının başında verdiğimiz kodu sitenizin CSS’sine ekleyin. Sadece belli bir paragrafta satır başı olmasını istiyorsanız aşağıdaki kodu kullanabilirsiniz.

<p style="text-indent:35px;">

Paragrafınız buraya gelecek.

</p>

Bu koda sadece px değil; pt, cm, em ve etc cinsinden de değerler atayabildiğiniz gibi yüzde % de kullanabilirsiniz. Javascript sözdizimindeki karşılığı ise object.style.textIndent=”35px”‘dir.