Konular

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

Outlines, padding, positioning, table, text, pseudo-classes, pseudo-elements gibi css nesnelerinin açıklamaları ve örnekleri.

Outlines

Border özelliğine benzer, element etrafında nasıl çizgi çizileceğini gösteren örnek;

Kod: 

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

Önizleme: 

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

 

Padding

Kullandığımız herhangi bir nesnenin istediğimiz bir bölgeye yerleştirilmesi için kullanılır.Örnek;

 Kod:

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

Önizleme: 

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

 

Positioning

Kullandığımız herhangi bir nesnenin konumunda(pozisyonunda) değişiklik yapmak için kullanılır.Örnek;

Kod: 

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

Önizleme: 

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

 

Table

Tabloya ait hizalama,sığdırma,kaydırma gibi özelliklerle beraber kullanabiliriz.Örnek;

 Kod:

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

Önizleme1: 

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

Önizleme2: 

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

 

Text

Yazılarda karakterler arası boşlukları ayarlamada,kelimeler arası boşlukları ayarlamada kullanılır.Örnek;

 Kod:

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

Önizleme: 

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

 

Pseudo-classes

Genellikle linklere stil vermek için kullanılır, class'larla birlikte kullanılır.Örnek;

 Kod:

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

Önizleme1:

Kodları yazdıktan sonra önizleme yaptığımıza linkler aşağıdaki gibi gözükecektir. 

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

Önizleme2:

Fare imleci ile linklerin üzerine geldiğimizde ise linkler aşağıdaki gibi gözükecektir. 

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

 

Pseudo-elements

Genellikle yazı efekti olarak kullanılır, paragrafın ilk harfini büyük yapar.Örneğin;

 Kod:

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

Önizleme: 

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

Yararlanılan Kaynak: http://www.w3schools.com

Hazırlayan:Mehmet EMEK

Yorumunuzu Ekleyin

Css Referansı
CSS ve Katmanlar
CSS ve Filitreler
Yükleniyor...