Webmaster
Tasarım Dersleri
Kullanıcı girişi
Kimler çevrimiçi
Son yorumlar
- tamadır teşekkür ederim :)
1 hafta 6 days önce - CVP:arkadaşım sen iyi niyetimi
1 hafta 6 days önce - arkadaşım sen iyi niyetimi
2 weeks 8 hours önce - CVP:şu cevabınn
2 weeks 1 gün önce - şu cevabınn
2 weeks 1 gün önce - CVP:Makaleniz hakkında
2 weeks 2 days önce - Makaleniz hakkında
2 weeks 2 days önce - oldukça güzel görünüyor. Bİz
3 weeks 20 hours önce - sanal kontör
3 weeks 4 days önce - Cozum bulundu mu?
5 weeks 4 days önce
Etiket bulutu
CSS Pseudo-Sınıfları
Pseudo sınıf ve
elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik
olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler
(x)html hiyerarşisi ile erişemediğimiz element ve sınıflara
erişmemizi sağlar. Pseudo sınıfı bir elementi
farklı sınıflara böler(örn: link elementini active, visited vd.
sınıflarına böler) Pseudo elementi ise bir elementi
alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir
paragrafın ilk satırı gibi.)
Pseudo sınıfına örnek:
-
a:visited {color: red;}
Pseudo elementine örnek:
-
p:first-line { font-weight: bold; }
Pseudo sınıf ve elemtleri
HTML class özelliği olarak belirtilmemiştir. Normal sınıflar pseudo
sınıf ve elementleri ile kullanılabilir.
-
a.disariyalinkller:link, a.disariyalinkller:visited {color: maroon;}
Aynı şekilde id
seçicileri ile birlikte de kullanılabilirler
-
a#altkisim:link{font-weight: bold;}
Pseudo sınıflarını da
ikiye ayıra biliriz. Link Pseduo Sınıfıları ve
Dinamik Pseudo Sınıfları
Link Pseudo sınıfı
Yanlızca linklere
uygulanan iki Link Pseduo sınıfı vardır. :link ve
:visited
:link -
Ziyaret edilmemiş sayfanın linkine stil tanımlaması yapmak için
kullanılır. Ancak bir çok web tarayıcısı yapılan stil tanımlarını
ziyaret edilmiş sayfa linklerine de uygular.
:visited -
Henüz ziyaret edilmiş sayfa linklerine stil tanımlaması yapmak için
kullanılır.
-
a:link {color: blue;}
-
a:visited {color: red;}
Bunun yerine genelde
aşağıdaki gibi bir kod da kullanılır
-
a
{color: blue;} -
a:visited {color: red;}
Bu kodlama ile
kullanıcaya ziyaret ettiği sayfa linkleri farklı renkte gösterilerek
içeriksel bir bilgi görsel olarak verilebilir.
Browser Uyumu:
Internet Explorer 5.0,
5.5, 6.0, 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: kısmen ;
Opera 5.0 ‘ 6.0: destekliyor
Dinamik Pseudo Sınıfları
Dinamik Pseudo
Sınıfları sayfa görünümüne çok büyük katkılar yapabilir. Bu
sınıflar genelde linklere uygulanır ancak bir çok kullanım alanları
vardır. tanedir :focus, :active ve
:hover
Not
Pseudo sınıflarında
sıralama önemlidir. Genel kullanımda “link-visited-hover-active,”
sıralaması yapılmalıdır. Tüm sınıflar içinse
“link-visited-
focus-hover-active.” sıralaması yapılmalıdır.
:focus -
Odaklanan elemente stil tanımlası yapmak için kullanılır Örn: input
alanına içerik girerken
:active
- Aktif olan elemente stil atamak için kullanılır.
:hover -
Bir elementin üzerine Farenin imleci geldiğinde yapılacak tanımlama
için Örn: bir linkin üzerine fare ile geldiğimizde renk
değiştirmesini sağlamak için
Linkler için genel
kullanım
-
a:link {color: navy;}
-
a:visited {color: gray;}
-
a:hover {color: red;}
-
a:active {color: yellow;}
:focus
için bir örnek verecek olursak
-
input:focus {background: silver; font-weight: bold;}
Browser Uyumu:
Internet Explorer 5.0,
5.5, 6.0, 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor
İlk Çocuk Elementi seçmek
Diğer bir pseudo
sınıfımız :first-child‘dır.
first:child:
Belirtilen elementin ilk Çocuk Elementine stil atamak için
kullanılır.
-
p:first-child {font-weight: bold;}
-
li:first-child {color:#f00;}
-
…
-
<div> -
<p>Bu paragraf ilk
çocuk elementtir ve sonuç olarak kalın olacaktır</p> -
<ul> <li>Bu
liste ilk çocuk elementtir ve font rengi kırmızı olacak</li> <li>Bu
<strong>çocuk element </strong>değil</li> <li>Bu da değil</li> </ul>
-
<p>Bu pragraf
<em>bir</em> çocuk element değil.</p> -
</div>
Browser Uyumu:
Internet Explorer 5.0,
5.5, 6.0 desteklemiyor 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: desteklemiyor
:lang Pseudo Sınıfı
Lang pseudo sınıfı
içerikteki bir elemente farklı bir dil de yazmamızı sağlar.
-
<html><head> <title>lang
test</title> -
<style type="text/css"> -
p:lang(fr) {color: red;}
-
</style> -
</head><body> -
<p lang="fr"> -
Bonjour le monde!
-
</p> -
</body></html>
Browser Uyumu:
Internet Explorer 5.0,
5.5, 6.0, 7.0 desteklemiyor
Mozilla 1.0: destekliyor ;
Opera 7.5 ‘ 8.5 - 9.0: destekliyor
Pseudo Sınıflarını
birleştirmek
CSS2.1 ile birlikte aynı
seçiciye ait pseudo elemntlerini birleştirme özelliği de gelmiştir.
Örneğin ziyaret edilmiş linklerin hover özelliği ile ziyaret
edilmemiş linklerin hover özelliğini farklı atamak istesek
-
a:link:hover {color: red;}
-
a:visited:hover {color: pink;}
Sıralama önemli değildir.
Browser Uyumu:
Internet Explorer 5.0,
5.5, 6.0, 7.0 desteklemiyor
Mozilla 1.0: destekliyor ;
Opera 9.0: desteklemiyor
Pseudo Element Seçicileri
Bu elementler hayali
elementlerdir. (X)HTML hiyerarşisi içinde bu elemntlere yoktur.
CSS2.1 de Dört adet Pseudo Element Seçicisi vardır: first-letter,
first-line, before ve
after
first-letter (ilk harf)
Bir blok-level elementin
ilk harfine stil tanımlması yapmak için kullanılır. Örnek verecek
olursak h1 elementinin baş harfinin büyük olması için :
-
h1:first-letter {font-size: 200%;}
-
…
-
<h1>Bu
büyük bir başlık</h1>
Browser Uyumu:
Internet Explorer 5.0,
5.5, 6.0 desteklemiyor 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor
first-line (ilk satır)
Bir metnin ilk elementine
stil atamak için kullanılır. Örneğin paragraflarınızın ilk
satırlarını renklendirmek isitiyorsunuz.
-
p:first-line {color: red;}
Browser Uyumu:
Internet Explorer 5.0,
5.5, 6.0,7.0 destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor
before ve after
elementleri
Bir elementin öncesine ve
sonrasına bir içerik veya özellik eklemek için kullanılır.
Notlarımızın başına
otomatik oalrak Not yazmak için
-
P.not:before { content: “Not.” }
kodu yeterlidir. Aynı
şekilde paragraflarımzın sonuna otomatik bitti yazıp nokta koymak
istersek
-
body:after {content: ” Bitti.”;}
yeterlidir.
Browser Uyumu:
Internet Explorer 5.0,
5.5, 6.0,7.0 desteklemiyor
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 7.5 ‘ 8.5: destekliyor
Anket
Son Konular
2012-03-22 19:47 - Geliştirdiğin kodları satmak ister misin
2012-02-12 23:21 - SMF forumu vbulletin foruma aktarmak
2011-12-14 21:50 - Motorlu araçlar otomobil vergisi sorgulama
2011-12-14 21:47 - Sorgulamalar
2011-12-11 14:33 - Ben az önce ne arayacaktım
2011-09-10 22:51 - DSLR Fotograf Makinası sınıflandırması
2011-09-09 17:33 - ‘Crop Factor’ Nedir, hakkında bilgi
2011-09-09 17:30 - Fotograf Rehberi
2011-08-20 21:30 - Samsung LEDTV'lerde .SRF ve XFS süprizi
2011-08-19 00:45 - 2011 yılının web tasarım trendleri
2011-04-09 20:18 - Alan adları gerçek isim sahiplerine verilecek!
2011-01-13 01:43 - SEO İçin Dikkat Edilmesi Gereken Hususlar
2011-01-13 01:42 - Meta tag SEO Optimization
2011-01-13 01:41 - Google Adsense Hakkında Detaylı Bilgi
2011-01-13 01:40 - Soru Ve Cevaplar ile Google Adsense
2011-01-13 01:39 - Arama motoru Google ve Pagerank
2011-01-13 01:38 - Seo Sözlüğü
2011-01-13 01:37 - Google Arama Özellikleri
2011-01-13 01:36 - Adsense Reklam Yerleşimi
2011-01-13 01:35 - Robots.txt Dosyası Kullanım Robotları Yölendirme Kontrol
2011-01-13 01:34 - Sitenizin Google ve Web deki Yeri
2011-01-13 01:33 - Arama Motoru Bilgi ve İpuçları
2011-01-13 01:31 - Arama Motorları Teknikleri
2011-01-13 01:29 - Google Pagerank Detaylı Anlatım
2011-01-13 01:27 - Sitenize Ziyaretçiler En Çok Hangi Kelimeler İle Gelmiş
2011-01-13 01:25 - Pagerank Nedir?
2011-01-13 01:19 - Fireworks Shadow and Glow
2011-01-13 01:18 - Fireworks Sharpen
2011-01-13 01:16 - Fireworks Other
2011-01-13 01:13 - Fireworks Blur
2011-01-13 01:09 - Fireworks Bevel and Emboss
2011-01-13 01:05 - Fireworks Adjust Color
2011-01-13 01:03 - Fireworks Save as Style
2011-01-13 00:58 - Fireworks Text Menüsü
2011-01-13 00:54 - Fireworks Select Menüsü
2011-01-13 00:54 - Fireworks Modify Menüsü
2011-01-13 00:51 - Fireworks View Menüsü
2011-01-13 00:18 - Fireworks Edit Menüsü
2011-01-13 00:16 - Fireworks File Menüsü
2011-01-13 00:05 - İnternet - Web Tarayıcılar (Browser)
2011-01-13 00:04 - İnternet - Web Server Yazılımları
2011-01-13 00:03 - İnternet ve Web İlişkisi
2011-01-13 00:02 - İnternette Kullanılan Protokoller
2011-01-13 00:01 - İnternet - World Wide Web (WWW) Nedir?
2011-01-13 00:00 - İnternet - URL nedir?
2011-01-12 23:43 - İnternet Backorder Nedir?
2011-01-12 23:34 - İnternet - Virüs Nedir?
2011-01-12 23:32 - İnternet Paypal nedir? Nasıl Kullanılır?
2011-01-12 23:31 - İnternet - DNS Nedir?
Günün Konuları
CSS . html . css nedir . Linux . nasıl kurulur . internet . SCADA . MySQL nedir . domain piyasası . PHPRunner . PHPRunner kullanımı . PHPRunner hakkında bilgi . PHPRunner nedir . Top PHP Studio . Top PHP Studio indir . Top PHP Studio nedir . USB ADSL modem . kablosuz ağ . Ubuntu linux . Google Earth . Zone Alarm . CSS kodlama . HMI . HMI nedir . HMI nasıl kullanılır . Scada nedir . Scada nasıl kullanılır . Video . Cacti . Cacti nedir . Cacti kurulumu . Rsyslog . Rsyslog nedir . Rsyslog kurulumu . Nagios . Nagios nedir . Nagios kurulumu . Apache . Apache nedir . Apache kurulumu . MySQL kurulumu . Squid . Squid nedir . Squid kurulumu . Dansguardian . Dansguardian nedir . Dansguardian kurulumu . Postfix . Postfix nedir . Postfix kurulumu . Dovecot . Dovecot nedir . Dovecot kurulumu . Dbmail . Dbmail nedir . Dbmail kurulumu . OpenLDAP . OpenLDAP nedir . OpenLDAP kurulumu . ProFTP . ProFTP nedir . ProFTP kurulumu . Samba . Samba nedir . Samba kurulumu . BIND . BIND nedir . BIND kurulumu . dhcp3 server . DHCP . DHCP nedir . DHCP kurulumu . WIPO Kimdir . WIPO Nedir . WIPO . Aveamüzik Radyo . Sabit disk . Harddisk . Advanced Format nedir . kodlama .
Genel Dersler
Programlama
Sponsor Reklamlar
Populer Icerik
Bugün:
Son görüntülenme:
- Windows vista ve windows 7 de 0xc000000f \Boot\Bcd hatası
- CSS Özellik Seçicileri
- SEO Dersleri
- Drupal ile PHPBB'ye nikah sekeri
- C# String Dönüşümleri
- Visual Basic Veri Tabanında Arama Yapma
- Seo bugüne nasıl geldi?
- PHP için Güvenlik Tavsiyeleri
- Adsense ban sorgulama
- Autocad SLICE Komutu İle Modelinizi Dili














Yeni yorum gönder