Css Nedir ? Css Terimleri...

Css Nedir?
HTML bize metin biçimlendirme alanında çok geniş olanaklar sunar. CSS, uzun yazılışıyla Cascading Style Sheets, veya Türkçesiyle Stil şablonları ise bunu bir adım daha öteye götürür, bize sayfalarımız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki bu esnekliğidir.
Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanmayız. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki, bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz.Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz.
CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler.
Hemen hemen her konuda olduğu gibi CSS konusunda da Microsoft Internet Explorer ve Netscape farklı yorumlar ortaya koyarlar. Bu noktada her iki browser'ın da aynı/benzer yorumlayacağı kodlar yazmak en uygunudur.

LİNK ÖZELLİKLERİ
a :Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.
a:hover :Linkin imleç üzerine getirildiğindeki durumudur.
a:active :Linkin tıklandığı andaki durumudur.
a:visited :Linkin tıklandıktan sonraki durumudur.


BİÇİMLENDİRME:
color:Linkin rengini belirler.
background-color:Linkin zemin rengini belirler.
background-image:Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration:Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight:Yazının kalınlık veya inceliğini belirler.
border:Linkin etrafına kenarlık ekler.
display:Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.

LİSTE ÖZELLİKLERİ
disk:Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.

KATMAN ÖZELLİKLERİ
position:Katmanın yerinin belirlenmesini sağlar.
absolute:Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
static:Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
top:Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
left:Katmanın soldan ne kadar içeride olması gerektiğini belirler.
width:Katmanın genişliğinin ne kadar olacağını belirler.
height:Katmanın yüksekliğinin ne kadar olacağını belirler.
overflow:Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto:Otomatik olarak belirlenir.
scroll:Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
hidden:Sığmayan yerleri gizler.
visibility:Katmanın görünebilirlik ayarını yapar.
visible : Katmanın görünür olmasını sağlar.
hidden:Katmanı gizler.
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.


FONT ÖZELLİKLERİ
font-family:Yazı türünü belirler.(Arial , Verdana gibi.)
font-style:Yazının normal veya sağa eğik olmasını sağlar.
font-variant:Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight:Yazının kalınlık-inceliğini belirler.
font-size:Yazının büyüklüğünü belirler.

TEXT ÖZELLİKLERİ
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.

İMLEÇ ÖZELLİKLERİ
crosshair:İmlecin artı işareti şeklinde olmasını sağlar.
auto:İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
default:İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
hand:İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
move:İmlecin taşıma işareti şeklinde olmasını sağlar.
ne-resize:İmlecin sağa yatık normal ok olmasını sağlar.
nw-resize:İmlecin sola yatık normal ok olmasını sağlar.
se-resize:İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
sw-resize:İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
n-resize:İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
s-resize:İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
w-resize:İmlecin sola doğru ince ok şeklinde olmasını sağlar.
e-resize:İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
text:İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
wait:İmlecin meşgul animasyonuna dönüşmesini sağlar.
help:İmlecin yardım-soru işaretine dönüşmesini sağlar


ZEMİN ÖZELLİKLERİ
background-color: Zeminin rengini belirler.
#color : Renk adı.
transparent: Zeminin saydam olmasını sağlar.
background-image: Zemine resim yerleştirilmesini sağlar.
url : Zemine yerleştirilen resmin adresi.
background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.
repeat : Resmin bütün zemine yayılmasını sağlar.
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
top : Resmi yukarı yerleştirir.
center : Resmi ortalar.
bottom : Resmi aşağı yerleştirir.
left : Resmi sola yerleştirir.
right: Resmi sağa yerleştirir.
...px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.


TABLO ÖZELLİKLERİ
margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.

padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

border : Tablonun kenarlarının şekillendirilmesini sağlar.

border-top : Tablonun üst kenarının şekillendirilmesini sağlar.
border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.

border-width : Tablonun kenarlarının kalınlığını belirler.
border-top-width : Tablonun üst kenarının kalınlığını belirler.
border-right-width : Tablonun sağ kenarının kalınlığını belirler.
border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
border-left-width : Tablonun sol kenarının kalınlığını belirler.

border-style : Tablonun kenarlık türünü belirler.
border-top-style : Tablonun üst kenarlık türünü belirler.
border-right-style : Tablonun sağ kenarlık türünü belirler.
border-bottom-style : Tablonun alt kenarlık türünü belirler.
border-left-style : Tablonun sol kenarlık türünü belirler.

border-color : Tablonun kenarlarının rengini belirler.
border-top-color : Tablonun üst kenarının rengini belirler.
border-right-color : Tablonun sağ kenarının rengini belirler.
border-bottom-color : Tablonun alt kenarının rengini belirler.
border-left-color : Tablonun sol kenarının rengini belirler.

color : Tabloda geçen metnin rengini belirler.

width : Tablonon genişliğini belirler.

height : Tablonun yüksekliğini belirler.


NOT : Başlık "TABLO" olarak verildi Ancak bu nitelikler başta TD , TR , TH vs. olmak üzere hemen her etiket için kullanılabilir.CSS' yi özel kılan da zaten bu...


KAYDIRMA ÇUBUĞU ÖZELLİKLERİ
scrollbar-face-color :Kaydırma çubuğunun yüzey rengi , aynı zamanda zemini de etkiliyor.
scrollbar-base-color :Kaydırma çubuğununun sol ve üst kenarlıklarını çizgi halinde kaplıyor.
scrollbar-shadow-color :Sağ ve alt kenarlıkların gölge rengi.
scrollbar-highlight-color :Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor.
scrollbar-arrow-color :Yön oklarının rengi
______________

bunun gibi 50 yerde 50 defa alıntı içerik yayınlandı. azcık css biliyosan kendin yazarsın bunları
______________
Hey maan

olsun sonuçda oda emektir...
______________
Seyahatnamem Çok Yakında..

Bak kardeşim azımı bozdurma şu aile ortamında.Yayınlanır yayınlanmaz.Sanane.Ben aradım bulamadım.Sen bulduysan bu benim sorunum değil.Hem abartmanında anlamı yok.50 kere açılsa bile ortalarda yok Bir çok bs li tasarım yapıyor.Onlara yardımcı olur diye koydum Sanada hesap vermek zorunda değilim.Bizim moderatörlerimiz var yöneticimiz var.Onların sesi çıkmazken sana ne oluyor.He şimdi moderatörler yasa yönetici bana ban 'da atsın sitemide silsin suçum yok ama varsın olsun.Ben css biliyorum yada bilmiyorum buda seni ilgilendirmez.Kendim niye böyle birşeye gerek duyayım ki.Ben kendi çapımda css'de biliyorum html 'de php'De asp 'de... Yazacak kadar gelişsem burda işim ne e ..ak
______________

helal olsun !...

birçok bs'li tasarım mı yapıyo, nerde xD
hepsi free tasarım kullanıyo.
kendi tasarımını yapacak adam zaten bu forumdan yararlanmaz.
bu forumu geç türkçe kaynakların bile gerçekten faydalı olabilecekleri dışında hiç bi kaynağı önemsemez, çünkü türkçe adam gibi kaynak yok fazlaca.
ben bunu forumda çok kez gördüğüm için öyle dedim.
diğer yandan gerçekten biliyosan kendi anlatımını yaparsın, neden başka yerden koyyosun biliyosan.
her bulduğunuz yararlı şeyi forumda yüzlerce kez paylaşılmışsa bile hala paylaşmaya devam ediceksen de forumu kirletmekten başka bişey yapmış olmazsın.
______________
Hey maan

ya arkadaslar onunn bubnu niçin tartışmaya gerek yok mesele akaptılsın bu şekişlde bilen bilio zaten kendine saklıyo bilmeyende bilmiyo napsın ....

Bak güzel kardeşim ben yazacak kadar bilsem burda işim ne diyorum sen bana biliyorsan yaz diyorsun sorununu anla.

Ayrıca matematikcimm,hyperend,hackerfriend,mr.genc v.s hepsi photoshopta çizip css'ye çeviriyor.Sonrada siteye optime ediyor.Bunları bilmiyorsan bu benim sorunum değil.Artık millet free tasarımı aştı kendileri çiziyor.Sen ne biliyorsun.Bir dahada bir şey biliyor gibi mesajlar atıpda kendini birşey sanma.Hee öyle mesaj yazdın adam oldun.Seni böyle adam ederiz.Meraklanma....

Diğer tasarım çizen arkadaşlar kusura bakmasın.
______________

arkadaşlar 50 kere paylaşılmış olabilir ama o paylaşılanları görmeyen üyeler oldu yeni üyeler oldu bunlarıda düsünelim

ya manyak mısın, sen kimsin de beni adam ediyosun kazmatör.
bs'de kim tasarım çiziyo. adamın yaptığı prof. tasarıma free denen bi forumdayız. bu forumdaki embesillerden 99% daha fazla bildiğime eminim bu arada. en azından senin gibi birinden daha fazla bildiğime eminim. bak ben herşeyi kendim yazıyorum ama yine de bu forumdayım. kendin yazacak kadar bilen adamın bu forumda işi yok aslında doğru yani dediğin. bu forum öyle insanları haketmez.
______________
Hey maan

xD şaka gibisin birşey biliyormuş gibi yazan o adam dediğin adamın yazdığı kodu ben yazamıyorum... Senin adını duymadığın şeyleri biliyor...Anlatıyoruz da ne oluyor ben burda 3 tane css ile ilgili bundan daha uzun konu yazdım ne oldu ne sabitlediler ne açıp konuya baktılar hepsi hazır şeyleri seviyor.Şunu tekrarlıyorum bedavasitemde tasarımcılık veya kodlama öğrenmek isteyenler çok zayıf kalıyor

Katılıyorum arıca scriptype ile seni kıyaslarsak scriptype ayıp olur

Manyak,Kazmatör,embesil bu kelimeleri burda kullanma..

Ben kullanmadımda bu foruma saygımdan senin bu ve diğer hakaretleri haketmediğinde değil !

Ben diorum css kendimce birşey biliyorum ordan biri çıkıyor şaka gibisin diyor.sen kimsin diyor yok o neler yazıo diyor.Ben yazmıyor dedim mi ?

Bak bi cevaplara.. Okumadan yazma !

Ayrıca sen forumun dilinde konuşmadığın için bende bu forumda o tasarımlara free demedim.Zaten emin olabilirsin ki buradaki kullanıcılar onlara emekleriyle Profesyonlelleştiriyor.Sen nerden duyduysan onlara free dendiğini.

Bir de Forumdaki hiç bir kullanıcıya embesiyel demeye hakkın yok ! Haddin de.
______________

Buradaki "Ayrıca matematikcimm,hyperend,hackerfriend,mr.genc v.s hepsi photoshopta çizip css'ye çeviriyor." ifaden çok yanlış !!! photoshoptan yapılım tr.gg ye uyarlanan tasarım html dir ama html kod içinde bir şekillendirilmiş menü yada linklerin renginin değişmesi vs. css kodudur css html yi şekillendirir. css design pek sevilmeyen tasarımın tasarım üstü altında <style> içinde bir kod olmadığı sürede oralar tamamen html dir ve css style bölümüne yazılan kodlar css 'dir. photoshoptan yapılıpta tr.gg ye uyarlanan tasrım html dir ama bunu css design pek sevilmeyen yaptık diye css olacak diye bir şart yok. ama css style kodu bölümüne ayda diğer kod bölümlerine <style> içinde bir css kodu yazdıysak bu cssdir !!!!!!!
______________