Daha önceki yazımızda sayfamıza nasıl ekleyeceğimizi anlatmıştık.Unutanlar ve okumayanlar için Css ile Çalışma okumalarını tavsiye ederiz.Şimdi css yapısı ve kullanımını daha uzun anlatacağız.Öncelikle bizim kalıcı olan elementlerimiz var.Yani html(xhtml) sayfamızın özel isimlendirdiği genel olarak atanmış kavramlar var.Normalde bunlar html her sayfada yaptığı standart sıralama olan <body> tagları dahil içinde bulunur.Bunlar
- body
- Başlık(head) tagları(h1,h2,h3,h4,h5,h6, ….)
- listeleme(ol,ul,li)
- linkleme(a)
- Paragraf(p)
- Metin(pre)
- Yazı (span)
- Buton(Button)
- resim(img)
- Alıntı Kutusu(blockquote)
- Kısaltma(abbr)
- Adres(address)
- İş tanımı (cite)
- Genel tanımlama(div)
Unuttuğum olabilir genel olarak en çok kullanılanlar bunlardır.Bunların kullanımları böyle olması gerekir;
span{
color: red;
}bunu css yazdığımız alana eklediğimizde sayfamızın içindeki bütün span kodlarını yazı rengi kırmızı olacaktır.Peki html sayfası içinde birbiri içindeki elementleri nasıl seçeceğimiz yada ona nasıl etkileyeceğimiz sorusu cevabı alttaki başlıktadır.
Css Elementlerinde Alt Elementleri Etkileme
Aslında alt elementleri etkilemeden kastımız iç içe elementler olduğunda nasıl ona özgü css kodlarını yazmaktır.Örnek bir gruplama gerektiren html kodlarımız olsun;
<html> <head> <title> Blog.MustafaSevim.Net.TR Örneği</title> </head> <body> <div> <p>Burası Div'in içindeki p elementidir.</p> </div> <p>Bu dışarıdaki p elementidir.</p> </body> </html>
Şimdi burada gördüğümüz gibi iki tane p elementi yazılmış biri div elementi içinde diğeri dışarıda gördüğünüz gibi şimdi içteki yazı rengini kırmızı yapalım.İki yolu var ve iki yolda doğru kullanılabilir.
/*** 1. YOL ***/
div p{
color: red;
}
/*** 2. YOL ***/
div > p{
color: red;
}html içinde css kullanırsak elimizde sayfa örneğimiz ve çıktısı;
<html>
<head>
<title> Blog.MustafaSevim.Net.TR Örneği</title>
<style>
div p{
color: red;
}
</style>
</head>
<body>
<div>
<p>Burası Div'in içindeki p elementidir.</p>
</div>
<p>Bu dışarıdaki p elementidir.</p>
</body>
</html>
Aklınıza şöyle şu iki soru gelebilir iç içe kaç tane en fazla olabilir? bir kısıtlama var mı ?
Bir kısıtlama yoktur.Siz ne kadar yazarsanız o kadar olur.Fakat temiz kodlama ve iş yükünü fazla olacağı nedeniyle 5 ten fazla olmaması önerilir.İş yükünden bahsetmişken bazen iki farklı elemente aynı özelliği vermemiz gerekir fakat ikisine ayrı css kodlarını yazmaktansa bizi gruplama yöntemi kurtarır.
CSS Elementleri Gruplama
Bir önceki başlığımızdaki örneği kullanalım.Orada sadece div elementi içindeki p elementini yazı rengini kırmızı yapmıştık.Şimdi aynı örneği kullanarak p elementini ve dışardaki span elementinin rengini mavi yapalım.
<html> <head> <title> Blog.MustafaSevim.Net.TR Örneği</title> </head> <body> <div> <p>Burası Div'in içindeki p elementidir.</p> </div> <span>Bu dışarıdaki span elementidir.</span> </body> </html>
Kodumuzu bu hale getirdik şimdi p, span elementin içindeki gruplama da kullanarak metni mavi yapacak css kodunu yazalım.
/*** Virgüle Dikkat ***/
div p, span{
color: blue;
}Gördüğünüz gibi elementler arasına virgül kullanarak gruplama yapabiliyoruz.Şimdi css ile html kodlarını birleştirip çıktısına bakalım;
<html>
<head>
<title> Blog.MustafaSevim.Net.TR Örneği</title>
<style>
div p, span{ color: blue; }
</style>
</head>
<body>
<div>
<p>Burası Div'in içindeki p elementidir.</p>
</div>
<span>Bu dışarıdaki span elementidir.</span>
</body>
</html>
Gruplamada bir sınır yoktur.Yani istediğiniz kadar element gruplayabilirsiniz. Bu konunda sonuna geldik hala öğrenmeye aç arkadaşlarımız için CSS Seçiciler inceleyebilir.Konularla ilgili sorularını yorum bölümünden sorabilirsiniz.