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.

BİÇİMLENDİRME:
color:Linkin rengini belirler.
(örneğin: color:pink)
background-color:Linkin zemin rengini belirler.
(örneğin: background-color: #6633CC)
background-image:Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
(örneğin: background-image: url(resim.jpg) )
text-decoration:Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
(örneğin: text-decoration: underline)
border:Linkin etrafına kenarlık ekler.
 (örneğin: border:double)
display:Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.
 (örneğin: display: block)

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

 (örneğin: font-size:23 pt)

ZEMİN ÖZELLİKLERİ:
background-color: Zeminin rengini belirler.
(örneğin: background-color: #6633CC)
#color : Renk adı. 
(örneğin: color:#001166)
background-image: Zemine resim yerleştirilmesini sağlar.
(örneğin: background-image: url(resim.jpg) )

background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.
(örneğin: background-repeat:repeat)
repeat : Resmin bütün zemine yayılmasını sağlar.
(örneğin: background-repeat:repeat)
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
(örneğin: background-repeat:repeat-x)
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
(örneğin: background-repeat:repeat-y)
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
(örneğin: background-repeat:no-repeat)

TABLO ÖZELLİKLERİ:

border : Tablonun kenarlarının şekillendirilmesini sağlar.
(örneğin: border:solid)

border-width : Tablonun kenarlarının kalınlığını belirler.
 (örneğin: border-width:medium)

border-style : Tablonun kenarlık türünü belirler.
(örneğin: border-style:dotted)

border-color : Tablonun kenarlarının rengini belirler.
(örneğin: border-color:#000000)

color : Tabloda geçen metnin rengini belirler.
(örneğin: color:#856325)
width : Tablonon genişliğini belirler.
(örneğin: border-width:1000)
height : Tablonun yüksekliğini belirler.
(örneğin: border-height:inherit)

İMLEÇ ÖZELLİKLERİ:
crosshair:İmlecin artı işareti şeklinde olmasını sağlar.
(örneğin: cursor:crosshair)
auto:İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
(örneğin: cursor:auto)
default:İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.

(örneğin: cursor:default)
hand:İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
(örneğin: cursor:hand)
move:İmlecin taşıma işareti şeklinde olmasını sağlar.
(örneğin: cursor:move)

text:İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
(örneğin: cursor:text)
wait:İmlecin meşgul animasyonuna dönüşmesini sağlar.
(örneğin: cursor:wait)
help:İmlecin yardım-soru işaretine dönüşmesini sağlar
(örneğin: cursor:help)

ne-resize:İmlecin sağa yatık normal ok olmasını sağlar.
(örneğin: cursor:ne-resize)
nw-resize:İmlecin sola yatık normal ok olmasını sağlar.
(örneğin: cursor:nw-resize)
se-resize:İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
(örneğin: cursor:se-resize)
sw-resize:İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
(örneğin: cursor:sw-resize)
n-resize:İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
(örneğin: cursor:n-resize)
s-resize:İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
(örneğin: cursor:n-resize)
w-resize:İmlecin sola doğru ince ok şeklinde olmasını sağlar.
(örneğin: cursor:w-resize)
e-resize:İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
(örneğin: cursor:e-resize)

TEXT ÖZELLİKLERİ:
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
(örneğin: word-spacing: inherit)
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
(örneğin: letter-spacing: normal)
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
(örneğin: text-decoration: underline overline blink)
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
(örneğin: text-decoration: underline)
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
(örneğin: text-decoration: overline)
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.) (örneğin: line-height:normal)

text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
(örneğin: text-transform: lowercase)
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
(örneğin: text-transform: capitalize)
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
(örneğin: text-transform: uppercase)
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
(örneğin: text-transform: lowercase)
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
(örneğin: text-transform: none)
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
 (örneğin: text-align: right)
left : Metni sola yaslar.
 (örneğin: text-align:left)
right : Metni sağa yaslar.
 (örneğin: text-align:right)
center : Metni ortalar.
(örneğin: text-align:center)
justify : Metni iki yana yaslar.
(örneğin: text-align: justify)

LİSTE ÖZELLİKLERİ:
disk:Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
(örneğin: list-style-type:disc)
circle : Liste biçiminin çember şeklinde olmasını sağlar.
(örneğin: list-style-type:circle)
square : Liste biçiminin kare olmasını sağlar.
(örneğin: list-style-type:square)
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
(örneğin: list-style-type:decimal)

none : Listenin simgesiz olmasını sağlar.
(örneğin: list-style-type:none)

list-style-image : Liste biçiminin resim olmasını sağlar.
(örneğin: list-style-image: url((URL)) ) 

KATMAN ÖZELLİKLERİ:
position:Katmanın yerinin belirlenmesini sağlar.
(örneğin: position: absolute relative)
absolute:Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
(örneğin: position: absolute)
relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
(örneğin: position: relative)
static:Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
(örneğin: position: static)

width:Katmanın genişliğinin ne kadar olacağını belirler.
(örneğin: width: auto)
height:Katmanın yüksekliğinin ne kadar olacağını belirler.
(örneğin: height: auto)

scroll:Kaydırma çubuğu ekleyerek görünmesini sağlar.
(örneğin: overflow: scroll)

İyi çalışmalar.

HemenAl Destek Sistemi
Destek Ekibi