Css Stil Şablonları

Lİnk özellikleri

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.

css biçimlendirme

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.

Liste özellikleri

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 özellikleri

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 özellikleri

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 özellikleri

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ç özellikleri

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

Zemin özellikleri

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 özellikleri

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.

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 Özellikleri

font-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 Özellikleri

list-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