Bu Kategoriye İçerik Girin veya Soru Sorun

Kategori İçi Sözlük

Bu Sayfayı Paylaş:

:active Pseudo Class :first-child Pseudo Class :focus Pseudo Class :hover Pseudo Class :lang Pseudo Class :link Pseudo Class :visited Pseudo Class Class Selector (Sınıf Seçici) CSS'de Bir Bağlantının Hover Özelliğini Biçim.. CSS'de Class Selector (Sınıf Seçici) Örneği CSS'de ID Selector (ID Seçici) Örneği CSS'de İç içe Selector (Seçici) Kullanım Örne.. CSS'de İçi İçe Selector (Seçici) CSS'de Selector Öncelik Örneği CSS İle Bir Bağlantının Tüm Özelliklerinin Bi.. H3 Başlığını Kırımızı Yapan CSS Örneği Id Selector (Id Seçici) Pseudo Class Selector (Sözde Sınıf Seçici) Pseudo Class ve Pseudo Element Pseudo Element Selector (Sözde Element Seçici.. Selector (Seçici)

Selector (Seçici)

Tanım: CSS'de belirtilen biçimlerin hangi elemente veya elementlere uygulanacağını belirten yapı. CSS'de genel seçici yapısı seçici { stiller.. } şeklindedir.

Class Selector (Sınıf Seçici)

Tanım: CSS'de farklı HTML elementlerine uygulanabilen stiller tanımlamak için kullanılan selector (seçici). Kullanımı .ClassAdı {} şeklindedir.

Id Selector (Id Seçici)

Tanım: CSS'de id'si belirtilmiş tek bir HTML elementine uygulanabilen stiller tanımlamak için selector (seçici). Kullanımı #ClassAdı {} şeklindedir.

Pseudo Class Selector (Sözde Sınıf Seçici)

Tanım: CSS'de , HTML belgesi üzerinde hiyerarşik yapıda olmayan özelliklere (örneğin bir link için farenin üzerine gelmesi, daha önce ziyatet edilmiş bir linkin durumu vb..) biçim vermek amacıyla kullanılan ön tanımlı sınıf seçiçiler. :classadı {} şeklinde başında : olacak şekilde kullanılmaktadır. :first-child , :lang, :hover , :link , :visited, :active ,:focus pseudo class'lardır.

:hover Pseudo Class

Tanım: CSS'de fare ile bir bağlantının üzerine gelindiğindeki biçimi vermek için kullanılan pseudo class. a:hover{...} şeklinde kullanılır.

:link Pseudo Class

Tanım: CSS'de hiç tıklanmamış bir bağlantının biçimini vermek için kullanılan pseudo class. a:link{...} şeklinde kullanılır.

:visited Pseudo Class

Tanım: CSS'de daha önce tıklanmış bir bağlantının biçimini vermek için kullanılan pseudo class. a:visited{...} şeklinde kullanılır.

:active Pseudo Class

Tanım: CSS'de kullanıcı tarafından en son aktif yapılan elementlere biçimi vermek için kullanılan pseudo class. a:active{...} şeklinde kullanılır.

:focus Pseudo Class

Tanım: CSS'de bir elementin focus olduğu zamanki (örneğin imlecin yazı alanına gelmiş olması) biçimini vermek için kullanılan pseudo class. ElementAdı:focus{...} şeklinde kullanılır.

:lang Pseudo Class

Tanım: CSS'de bir elemente, dile göre biçim vermek için kullanılan pseudo class. a:lang(tr){...} şeklinde kullanılır.

:first-child Pseudo Class

Tanım: CSS'de bir elementin ilk çocuğuna biçim vermek için kullanılan pseudo class. p:first-child{...} şeklinde kullanılır.

Pseudo Element Selector (Sözde Element Seçici)

Tanım: CSS'de , HTML belgesi üzerinde hiyerarşik yapıda olmayan özelliklere (örneğin bir pragrafın ilk harfi veya ilk satırı , bir elementin öncesi veya sonrası vb..) biçim vermek amacıyla kullanılan ön tanımlı element seçiçiler. :elementadı {} şeklinde başında : olacak şekilde kullanılmaktadır. :first-line , :first-letter , :before , :after pseude elementleridir.

CSS'de İçi İçe Selector (Seçici)

CSS'de İç içe selector (Descendant Selector) kullanılabilmektedir. Bir selector farklı selectorler içerisinde ise farklı stiller uygulanabilmektedir. A , B ve C selectorü aşağıdaki gibi tanımlansın : 

A C { stiller1 ... }

B C [ stiller2 .... }

Yukarıdaki ifade şu anlama gelmektedir :  C ,  A içerisinde ise stiller1 ile tanımlanan biçimler uygulanır. C , B içerisinde ise stiller2 ile tanımlanan stiller uygulanır. Bu şekilde aynı selector farklı konumlarına göre farklı bir biçimde gözükmesi sağlanabilmektedir. 

 


Pseudo Class ve Pseudo Element

CSS(Cascading Style Sheet) , HTML sayfasındaki elementlere ve elementlerin attribute'lerine (property) biçim vermek için kullanılmaktadır. Bu nedenle bir sayfadaki element hiyerarşisinde bulunmayan bir elemente veya bir elementin property (attribute) şeklinde tanımlanmamış bir özelliğine biçim vermek mümkün olmamaktadır. Örnek olarak bir elementin ilk satırı veya ilk paragrafı gibi bir kavram yoktur. Bir link'in üzerine gelindiğindeki biçim vermek içinde (hover deniyor) bir element veya property bulunmamaktadır. Bu tür durumlar için CSS içinde yalancı veya sözde element'ler ve class'lar tanımlanmıştır. Bu pseudo-elementler ve pseudo-class'lar aşağıdaki gibidir : 

 

  • Pseudo-Element
    • :first-line :  Bir paragrafın ilk satırı
    • :first-letter : Bir paragrafın ilk harfi
    • :before : Bir elementin önüne
    • :after : Bir elementin sonuna
  • Pseudo-Class
    • :first-child : Bir elementin ilk çocuğu
    • :lang : Bir elementi dil özelliğine göre
    • :focus : Bir element focus (form elementlerinde aktif olmak) olduğu zaman. 
    • :link : Normal durumdaki linklere
    • :active : En son tıklanmış , aktif durumdaki linklere
    • :visited : Daha önce ziyeret edilmiş linklere
    • :hover : Fare ile bir linkin üzerine gelindiğinde

 


H3 Başlığını Kırımızı Yapan CSS Örneği

Aşağıda H3 ile olan tüm başlıkları kırmızı gösteren örnek görülmektedir : 

<html>
<head>
	<style>
		h3{
			color:red;
		}
	</style>
</head>
<body>
	<h3>Bu başlık kırmızı olur</h3>
	<h4>Bu başlık kırmızı olmaz</h4>		
</body>
</html>

head etiketi içerisinde style etiketi içinde H3 elementinin rengi kırmızı yapılıyor. Sayfa boyunca kullanılan tüm H3 elementlerinin rengi kırmızı olacaktır. 

 

 


CSS'de İç içe Selector (Seçici) Kullanım Örneği

Aşağıda P elementi içinde farklı , H1 elementi içerisinde farklı biçimde görülecek i elementi örneği görülmektedir: 

<html>
<head>
<style>
	p i{
		color:red;
	}
	h1 i{
		color:blue;
	}
</style>
</head>
<body>
	<h4>buradaki yazıda 
		<i>renk değişmeyecek</i> olacak</h4>
	<h1>buradaki yazıda 
		<i>mavi</i> olacak</h1>
	<p>buradaki yazıda 
		<i>kırmızı</i> olacak</p>
</body>
</html>

p i {}  eğer i elementi p içerisinde ise anlamına gelmektedir. Aynı şekilde h1 i {} de i elementi h1 içerisinde anlamına gelmektedir. H4 içindeki i ile belirtilen yazının rengi varsayılan renk , h1 içindeki mavi ve p içindeki ise kırmızı olacaktır. 

 


CSS'de Class Selector (Sınıf Seçici) Örneği

Aşağıda class selector (sınıf seçici) örneği görülmektedir : 

<html>
<head>
<style>
	.redHead{
		color:red;
	}
	.blueHead{
		color:blue;
	}
</style>
</head>
<body>
<h3 class="redHead">bu başlık kırmızı olur</h3>
<h1 class="blueHead">bu yazı mavi</h1>
</body>
</html>

Yukarıda redHead  ve blueHead adında iki genel kullanım için sınıf tanımlanmıştır. Bu iki class istenilen elemente uygulanabilir. 


CSS'de ID Selector (ID Seçici) Örneği

Aşağıda ID selector (seçici) örneği görülmektedir : 

<html>
<head>
<style>
	#redHead{
		color:red;
	}
	#blueHead{
		color:blue;
	}
	</style>
</head>
<body>
	<h3 id="redHead">bu başlık kırmızı olur</h3>
	<h1 id="blueHead">bu yazı mavi</h1>
</body>
</html>

Yukarıda görüldüğü gibi redHead id'si olan H3'ün ve id'si blueHead olan h1 elementinin biçimi verilmiştir. redHead ve blueHead id'si sadece tek bir elemente verilebileceğinden bu stiller tek bir kere kullanılmış olurlar. 


CSS'de Bir Bağlantının Hover Özelliğini Biçimlendirme Örneği

Aşağıda bir bağlantının fare ile üzerine gelindiğindeki biçiminin verildiği örnek görülmektedir: 

<html>
<head>
<style>
	a:hover{
		color:red;
	}
</style>
</head>
<body>
	<a href="bilmemne.html">tıkla</a>
</body>
</html>

Yukarıdaki tıkla yazısı üzerine fare ile gelindiğinde yazının rengi kırmızı olacaktır. Bu :hover pseudo class'ı ile yapılmaktadır. 

 

 


CSS İle Bir Bağlantının Tüm Özelliklerinin Biçimlendirildiği Örnek

Aşağıda bir bağlantının , CSS pseudo class (pseudo sınıf) ile tüm biçimlerinini verildiği örnek görülmektedir. 

 

<html>
<head>
<style>
	:link{
		color:gray;
	}
	a:hover,a:visited:hover,a:active:hover{
		color:red;
	}
	a:active{
		color:green;
	}
	a:visited{
		color:brown;
	}
</style>
</head>
<body>
	<a href="bilmemne.html">tıkla</a>
</body>
</html>

 

Bağlantı gray (gri) rengi yapılmıtşrı. Aktif iken yeşil , daha önce ziyaret edilmiş ise kahverengi görülecektir. Tüm bağlantı durumlarında fare ile üzerine gelindiğinde renk kırmızı olacaktır. Yukarıdaki örnekte bağlantı ile ilgili tüm pseudo class'lar kullanılmıştır. 


CSS'de Selector Öncelik Örneği

Aşağıda selector (seçici) önceliğini gösteren örnek görülmektedir : 

<html>
<head>
<style>
	.mystyle{
		color:blue;
	}
	p{
		color:red;
	}
</style>
</head>
<body>
<p class="mystyle">buradaki yazı ne renk?</p>
</body>
</html>

Yukarıdaki örnekte yazı rengi mavi olacaktır. Class selector'ler daha önceliklidir. (Id selector ise class selector'e göre daha önceliklidir)


:active Pseudo Class :first-child Pseudo Class :focus Pseudo Class :hover Pseudo Class :lang Pseudo Class :link Pseudo Class :visited Pseudo Class Class Selector (Sınıf Seçici) CSS'de Bir Bağlantının Hover Özelliğini Biçim.. CSS'de Class Selector (Sınıf Seçici) Örneği CSS'de ID Selector (ID Seçici) Örneği CSS'de İç içe Selector (Seçici) Kullanım Örne.. CSS'de İçi İçe Selector (Seçici) CSS'de Selector Öncelik Örneği CSS İle Bir Bağlantının Tüm Özelliklerinin Bi.. H3 Başlığını Kırımızı Yapan CSS Örneği Id Selector (Id Seçici) Pseudo Class Selector (Sözde Sınıf Seçici) Pseudo Class ve Pseudo Element Pseudo Element Selector (Sözde Element Seçici.. Selector (Seçici)



Bu Sayfayı Paylaş:

İletişim Bilgileri

Takip Et

Her Hakkı Saklıdır. Bu sitede yayınlanan tüm bilgi ve fikirlerin kullanımından fibiler.com sorumlu değildir. Bu sitede üretilmiş , derlenmiş içerikleri, fibiler.com'u kaynak göstermek koşuluyla kendi sitenizde kullanılabilirsiniz. Ancak telif hakkı olan içeriklerin hakları sahiplerine aittir