Css @ Kuralları

Bu bölümde aşağıdaki önemli @ kurallarını anlatacağız. @import: Geçerli stil sayfası içerisine başka bir stil sayfası eklemek. @charset: Stil sayfasının kullandığı karakter setini göstermek. @font-face: Sayfa içerisinde yazı tipi ve özelliklerini tanımlamak. !important: Tanımlanan stil kurallarının önemini belirtmek için kullanılır. Bir ögeye ait tanımlanmış birden fazla kural olduğu durumlarda geçerli olacak kuralı...
Devamını Oku..

Css Sözde Elementler

Sözde elementler(Pseudo-Elements), bazı seçicilere özel efektler vermek için kullanılır. Bu efektleri uygulamak için harici olarak Javascript yada herhangi bir script kullanmanıza gerek yoktur. Genel kullanımı şekli aşağıdaki gibidir. seçici : sözde-element {özellik:değer} Css ile bu elementleri aşağıdaki şekilde kullanabilirsiniz. seçici.sınıf : sözde-element {özellik:değer} Aşağıda en sık kullanılan sözde...
Devamını Oku..

Css Sözde Sınıflar

Css sözde sınıfları(Pseudo Classes), seçicilere özel efektler eklemek için kullanılır. Bu efektleri kullanmak için ayrıca bir Javascript yada benzeri bir script kullanmanıza gerek yoktur. Sözde sınıf kullanımı aşağıdaki gibi olmaktadır. seçici : sözde-sınıf {özellik:değer} Css sınıflarını da aynı şekilde sözde sınıflar ile birlikte kullanabilirsiniz. seçici.sınıf : sözde-sınıf {özellik:değer}...
Devamını Oku..

Css Katmanlar

Css ile sayfa içerisinde ögelerin katmanlarını(layers) ayarlayabilirisniz. Web sayfalarında z-index özelliğini kullanarak karmaşık görüntüler elde edebilirsiniz. Web sayfalarınızda ögenin altta yada üstte görüntülenmesini sağlayan bir örnek yazalım. Örnek: <div style=”background-color:red; width:300px; height:100px; position:relative; top:10px; left:80px; z-index:2″> </div> <div style=”background-color:yellow; width:300px; height:100px; position:relative; top:-60px; left:35px; z-index:1;”> </div> <div style=”background-color:green;...
Devamını Oku..

Css Konumlandırma

Css, Html elemanlarını konumlandırmak için bizlere bazı özellikler sunmaktadır. Bu şekilde Html elemanlarını istediğiniz yerlerde konumlandırabilirsiniz. Bir elemanı sayfa içerisinde kendi özelliğinde(relative) yada varsa üst ögesinde tanımlı biçimde(absolute) gösterebilirsiniz. Şimdi, bu özellikleri örnekler ile açıklayalım. Relative Konumlandırma:  Relative, özelliği  ile bir ögenin konumunu normal olarak ayarlayabilirsiniz. Örneğin; “left:20” değeri...
Devamını Oku..

Css Görünürlük

Bu bölümde sizlere “Visibility(Görünürlük)” özelliğini anlatacağız. Bu özellik ile sayfalarda herhangi bir ögeyi gizleyebilir yada gösterebilirsiniz. Bu özelliği Javascript ile birlikte kullanarak karmaşık menüler yada karmaşık sayfa elemanları oluşturabilirsiniz. Bu özellik ile hata mesajlarını yada sayfanızda sunduğunuz soruların cevaplarını gizleyebilirsiniz. Buradaki örnekler çoğaltılabilir. NOT: He ne olursa olsun kaynak...
Devamını Oku..

Css Scrollbars

Scrollbars(Kaydırma Çubuğu), sayfalarda paylaşılan içeriğin kendisine ayrılmış olan alana sığmadığı durumlarda kullandığımız yardımcı bir ögedir. Css “overflow” özelliği ile, web tarayıcısına kendine ayrılmış alana sığmayan içerikler ile özellikleri aktarır. Bu özellik aşağıdaki değerleri alabilir.   Değer Açıklama visible İçeriğin, etrafındaki sınırların üzerinde görüntülenmesini sağlar.(Overflow) hidden İçeriğin, etrafındaki sınırların...
Devamını Oku..

Css Dimension

“Dimension” türkçe anlamıyla “boyut“, şimdiye kadar gördüğümüz margin, padding, border  gibi özelliklerinin boyutlarını ayarlamımızı sağlamaktadır. Bu bölümde oluşturduğunuz kutuların boyutlarını ne şekilde ayarlayabileceğinizi göstereceğiz. Css ile aşağıdaki Dimension özelliklerini kullanabilirsiniz. height: Bir kutunun yüksekliğini ayarlamak için kullanılır. width: Bir kutunun genişliğini ayarlamak için kullanılır. line-height: Yazı yüksekliğini ayarlamak için kullanılır....
Devamını Oku..

Css Outlines

“Outlines” türkçe anlamıyla “Anahatlar“, border(çerçeve) ile benzer olmasının yanında bazı farklılıklar bulunmaktadır. Bu farklar; Anahatlar çerçeveler gibi konumlanmazlar. Anahatlar dikdörtgen biçiminde olmak zorunda değildir. Anahatlar hertarafta aynıdır. Herhangi bir öge tek bir anahata sahip olabilir.. Not: Anahatlar IE 6 ve Netscape 7 tarayıcılar tarafından desteklenmemektedir. Css ile aşağıdaki...
Devamını Oku..

Css Cursor(İmleç)

Cursor türkçe adı ile imleç, Css ile sayfalarda kullanıcıya gösterilecek imleç türünü belirlememizi sağlar. Genellikle bir web sayfası üzerinde, kullanıcı mouse ile bir ögenin üzerine geldiği zaman imleç görünümü değişmektedir. Buton üzerine gelindiği zaman normal bir imleç görünümü yerine el görünümü olmaktadır. Bu kullanıcılara ögeyi daha iyi ifade...
Devamını Oku..