Bu son seçici öğreticisinde size özel bir tür seçici tanıtacağım. Bunlar, yani yalancı sınıflar ve yalancı öğeler, belirli HTML öğelerine değil, çıktı cihazı tarafından oluşturulan seçicilerdir.
Yalancı sınıflar ve yalancı öğeler, HTML öğeleri tarafından net bir şekilde tanımlanamayan bileşenler için deklarasyonları tanımlamak için kullanılır. Tipik örnekler, yeni tıklanmış veya henüz ziyaret edilmemiş bir bağlantıdır.
Bağlantıları Tasarlamak
Sitenin bağlantılarını sıklıkla tasarlamak istersiniz. Bunun için CSS, bağlantıların farklı durumlarını hedefleyen ve sonuçta görsel olarak uyarlamanıza olanak sağlayan birçok seçenek sunar.
Bir bağlantıya örneğin kırmızı bir renk atamak isterseniz, şu şekilde olacaktır:
a:link {
color: red;
}
a:visited ise ziyaret edilen bağlantıları işaretler. Bir bağlantıyı daha önce tıklanmış olanları mavi renkte göstermek için aşağıdaki sözdizimi kullanılabilir.
a:visited {
color:blue;
text-decoration:none;
}Tarayıcıda görüntü aşağıdaki gibidir:
Hemen tıklanan bağlantıları da özel olarak tasarlamak isterseniz bunu da yapabilirsiniz.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Bunun için a:active sözdizimi kullanılır.
Öte yandan a:hover sözdizimi fare işaretçisi bağlantının üzerine geldiğindeki durumu hedefler. Ayrıca a:focus ile başka bir yalancı öge daha bulunmaktadır. Bu, bağlantının odaklandığı anı tanımlar.
Diğer Yalancı Ögeler
Ana öğelerin parçalarına erişmek için yalancı ögeler bulunmaktadır. Bu konuda tipik bir örnek ::first-letter'dır. Bu yalancı öge, mevcut öğenin ilk karakterini seçer. Metin içeren tüm öğelerde kullanılabilir. Ancak dikkat: Yalancı ögeler tüm seçici dizelerinin sonunda olmalıdır. Yani açılış süslü parantezin önüne konulmalıdırlar.
h1::first-letter {
color: blue;
}
::first-line ile bir öğenin ilk satırı hedeflenebilir. Bu yalancı öge yalnızca blok düzey öğeler için geçerlidir. Bir örnek:
p::first-line {
background-blue;
}
Burada tarayıcıdaki sonuç:
bir
:after ve :before ile bir öğenin önüne ve arkasına ek içerikler eklenebilir. content ile neyin çıktı olarak verileceği belirlenir.
• normal – genellikle tanımlanan yalancı öge oluşturulmaz.
• none – yalancı öge oluşturulmaz.
•
•
•
• attr(
• close-quote – kapanma tırnağı ekler.
• no-close-quote – kapanma tırnağı eklenmez, ancak iç içe geçme derinliği bir artar.
• no-open-quote – açılış tırnağı eklenmez, ancak iç içe geçme derinliği bir artar.
• open-quote – açılış tırnağı eklenir.
Bir örnek:
ul li:before {
content: uri("bullet.gif");
}
CSS3 ile :not yalancı seçicisi de tanıtıldı. Bu aracılığıyla içerikleri kolayca hedefleyebilirsiniz. İlk bir örnek, bu yalancı seçicinin ne kadar güçlü olduğunu göstermelidir. Diyelim ki href özniteliğine sahip olmayan tüm bağlantıları seçmek istiyorsunuz. İlgili sözdizimi şu şekilde olacaktır:
a:not([href])
Normal bağlantılar bu sözdiziminden etkilenmeyecektir. Ancak bir sayfanın tanımlarına erişmek mümkün olacaktır.
<a name="top">Sayfa Başlangıcı</a>
Daha detaylı bir örnek, :not'ın gücünü açıklayacaktır. Bir belgede çeşitli metin paragrafları tanımlanmıştır.
<body> <h1>PSD-Tutorials.de</h1> <p>Bu bir paragraftır.</p> <p>Bu başka bir paragraftır.</p> <div>Bu bir metin alanıdır.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
P paragraf etiketleri ile birlikte bir div alanı ve bir bağlantı da var. Şimdi şunlar olacak:
• P ile etiketlenen tüm paragraflar siyah renk alacak.
• P paragrafları olmayan her yerde ise kırmızı renk kullanılacak.
İlgili CSS sözdizimi şu şekildedir:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Miras ilkesi
CSS tanımlamalarını anlamanın en önemli şeylerinden biri, miras almaktır. Aslında CSS'de bir elementin stilleri diğerine miras olarak aktarılır.
Bir örnek:
html {
color: red
}Bu tanımlama ile html elementine kırmızı bir metin rengi atanmış olur.
Miras ilkesinden dolayı bu renk tanımı başlangıçta html'e bağlı olan tüm elementler için geçerli olacaktır. Yani html'in altındaki tüm elementler başlangıçta kırmızı olarak gösterilecektir. Bu seçeneğin avantajı: Bu elementler için kırmızıyı açıkça belirtmenize gerek yok. Ancak p paragraflarının içeriğinin kırmızı olarak gösterilmemesi gerektiğinde ne yapmalı? O zaman html'in üstünde bulunan renk tanımını geçersiz kılmak gerekmektedir.
html {
color: red;
}
p {
color: #000;
}
Şimdi diyelim ki p ve div olmak üzere iki element var.?
<body> <p>PSD-Tutorials.de</p> <div>Dünya</div> </body>
Sonuç şu şekilde görünür:
html'in renk tanımı sadece div içeriğini etkiler. P paragrafı ise siyah renk olarak gösterilir.
CSS'de stiller belirlemek için farklı yöntemler bulunmaktadır. Bu nedenle bir element için çelişkili talimatlar olabileceği gerçeği vardır. Bu durumlar için CSS'de bir ağırlık ilkesi bulunmaktadır. Bu ilke sayesinde her bir element için hangi talimatın öncelikli olduğu açıkça belirlenir. Bu ilke hakkında her detaya girmek istemiyorum ancak daha fazla bilgiye örneğin http://wiki.selfhtml.org/wiki/CSS/Kaskade veya http://www.thestyleworks.de/basics/cascade.shtml adreslerinde ulaşabilirsiniz. Benim odaklandığım konu, CSS özelliklerini tanımlarken nelere dikkat etmeniz gerektiğini göstermektir. Bunu aşağıdaki örneklerle ifade edebilirim:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC;
}
h2 strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Bir <strong>kalın kelime</strong> içeren bir paragraf.</p>
<h2>Bir <strong>kalın kelime</strong> içeren bir başlık.</h2>
</div>
</body>
</html>Tarayıcıda, şu şekilde görünür:
Gördüğünüz gibi, strong ile etiketlenen kelimeler farklı biçimlendirilmiştir. Hangi biçimlendirmenin geçerli olduğu sonuçta tanımlamaların sırasına bağlıdır.
Bunun yanı sıra, bir CSS talimatını özellikle önemli olarak işaretleyebileceğiniz !important anahtar kelimesi de vardır.
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC !important;
}
h2 strong {
color: red;
}
</style>Sonuçlara aşağıdaki örneğe bakarak tekrar bakın:
Bu bağlamda, bu derste belirtilen kaynakları mutlaka okumanızı tavsiye ederim. (Başlangıç için bu konuya derinlemesine girmenize gerek olmadığından).
