Lİnk özellikleria : 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.
css biçimlendirmecolor : 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.
Liste özellikleridisk : 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 özellikleriposition : 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 özelliklerifont-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 özellikleriword-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ç özelliklericrosshair : İ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
Zemin özellikleribackground-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 özelliklerimargin : 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.
Sayda için css kodlarının kullanımı
Aşağıdaki alanda
<style type=”text/css”> altında css kodlarını div arasında ise site içinde görünecek içerik eklenir..
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />
<title>Site Tanıtım</title>
<style type=”text/css”>
.icerik {
font-family : Verdana, Geneva, sans-serif;
font-size : 12px;
font-style : italic;
font-weight : bold;
color : #FFF;
}
</style>
</head>
<body>
<div class=”icerik”>buraya sitenizde gorunecek metın resım vs </div>
</body>
</html> Harici sayfa kullanımıCss kodlarını farklı bir sayfadan çekilmesini sağlar bu yöntemin amacı sitenizin hızlı acılmasını saglar ve sıtenın acılma suresını kısalmasını saglar bu sekılde arama motorları ıcın guzel bır yontemdır.
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />
<title>Site Tanıtım</title>
<link href=”/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<p class=”icerik”>site içi stil denemesi</p>
</body>
</html>
Css Elementleri Font Özelliklerifont-size : Font büyüklüğünü belirtir.
İsterseniz aşağıdaki gibi standart değerleri seçersiniz;
xx-large (en büyük )
x-large (biraz büyük)
large (büyük)
medium (orta)
small (küçük)
x-small (biraz küçük)
xx-small (en küçük)
isterseniz direkt olarak punto(pt) değerini verebilirsiniz.
font-family : Font tipini belirler.
Arial, Courier, Verdana gibi font isimlerini alabilir.
font-weight : Fontun kalınlı incelik durumunu belirler.
bold : Fontu kalın yapar.
normal : Fontun normal halde olmasını sağlar.
Bu özellik yazılmadığında normal özellik alınır.
font-style : Fontun yatık olup olmamasını sağlar.
italic : Yazının sağa doğru yatık olmasını sağlar.
normal : Fontu normal halde olmasını sağlar.
Bu özellik yazılmadığında normal özellik alınır.
color : Fontun rengini belirler.
Blue, red,green gibi renklerin ingilizce karşılıklarını alabilir.
Text Özellikleri
text-transform : özelliği, element içinde kullanılanıl metnin gösterilme biçimini belirler
lowercase : Yazının tümünün küçük harf olmasını sağlar.
uppercase : Yazının tümünün büyük harf olmasını sağlar.
capaitalize : Yazının istenilen şekilde kalmasını sağlar.
text-decoration :
underline : Yazının altının çizili olmasını sağlar.
overline : Yazının üstünün çizili olmasının sağlar.
line-through : Yazının üstünün çizili olmasını sağlar.
none : Yazının herhangi bir yerine çizgi çekilmemesini sağlar.
text-align :
left : Yazının sola bitişik olmasını sağlar.
center : Yazının ortada olmasının sağlar.
right : Yazının sağa bitişik olmasını sağlar.
line-height : Yazının normal satırdan çizgi yüksekliğini belirler. 3px, 5px gibi değerler alır.
text-ident : Yazının soldan ne kadar boşlukla içeriden başlayacağını belirler. 5px, 10px gibi değerler alır.
Background Özellikleri
background-color : özelliği, bir elementin arka plan renginin transparan veya herhangi bir RGB değerine atanmasını sağlar.
Arka fonun rengini belirler. Css’te renkleri blue, red gibi tanımlayabileceğimiz gibi Html kodunu vererekte tanımlayabiliriz.
background-image : Arka fonu bir resim dosyası yapmak için kullanılır. url etiketinin içine resim dosyasının yolu ve ismi tam olarak yazılmalıdır.
background-position : özelliği, arka plan resminin yerleştirileceği konumu belirler.
left : Arka fondaki resmin sadece sol tarafta olmasını sağlar.
center : Arka fondaki resmin sadece sol tarafta olmasını sağlar.
right : Arka fondaki resmin sadece sol tarafta olmasını sağlar.
background-repeat : özelliği, arka plan resminin tekrarlanmasını ve hangi yöne tekrarlanacağını belirler
Arkafondaki resmin tekrarlanması istendiğinde kullanılır.
repeat : Tüm yönlerde tekrar edilmesini sağlar.
repeat-x : X (yatay) yönünde tekrar edilmesini sağlar.
repeat-y : Y (dikey) yönünde tekrar edilmesini sağlar.
no-repeat : Resmin tekrar edilmeyerek bir kere gösterilmesini sağlar.
List Özelliklerilist-style-type : özelliği, UL, OL ve LI elementlerinde ve display özelliği list-item olarak tanımlanmış elementlerde liste iminin biçimini belirler.
none değerini aldığında liste imi gösterilmez. Diğer türlü aşağıdaki değerlerden birini alarak liste imi biçimini belirler.
disk : Liste biçiminin disk (içi dolu yuvarlak) ş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 roma rakamlarının küçük harfi olmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi roma rakamlarının büyük harfi olmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde olmasını sağlar.
none : Listenin imgesiz olmasını sağlar.
list-style-position : özelliği, UL, OL ve LI elementlerinde ve display özelliği list-item olarak tanımlanmış elementlerde liste iminin, element sınırları içinde veya dışında olmasını belirler.
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.
Position Özelliği
position : pozisyon belirlemek için kullanılır
absolute : Katmanın yerinin kesin olarak belirlenmek istendiğinde kullanılır.
relative : Katmanın yerinin göreli(diğer öğelere göre değişebilen) olarak belirlenmek istendiğinde kullanılır.
static : Katmanın yerinin sabit olarak belirlenmek istendiğinde kullanılır.
top : Katmanın üst kısımdan kaç piksel aşağıda olması gerektiğini belirler.
left : Katmanın sol kısımdan kaç piksel aşağıda olması gerektiğini belirler.
width : Katmanın genişliğinin kaç piksel olacağını belirler.
height : Katmanın boyunun kaç piksel olacağını belirler.
clip : Katmanın görünmesi istenen bölgeyi içeren kutucuk.
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 çubukları ekler.
visibility : Katmanın görünebilirlik ayarı yapar
visible : Görünür hale getirir.
hidden : Gizler.
z-index : Katmanın sayfa üzerindeki sıra sayısı.
Linkback: https://www.buyuknet.com/css-stil-sablonlari-t40712.0.html