css kodları ve özellikleri

1 - CSS'te Link Özellikleri :

---

a : Linkin, Sayfa Açıldığında Tıklanmadan veya Imleç Ü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.



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


NOT : Kullanılabilecek Bir Kaç Örneği Yukarıda Belirttim. Ancak "font" , "text" , table" vs. için Kullanılabilen Pek Çok Parametre "a" için de Kullanılabilir. Gerisi Biraz da Sizin Yaratıcılığınıza kalıyor.

2 - CSS'te 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ı belirti

3- CSS'te 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.

4- CSS'te 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

5 - CSS'te Backraound (arkaplan) Ö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.

6 - CSS'te 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.

---

Alıntıdır

Css Text Özellikleri ve Kullanılımı

Bu yazımızda css 'TEXT' yani 'METİN BİÇİMLENDİRME' özelliklerinden bahsedeceğiz. Daha kolay anlatmak gerekirse 'paragraf düzeni' de diyebiliriz.

Paragraf içerisindeki uyumu, metin rengini, karakterler arasındaki boşluğu, satır başlarında bırakacağımız girintiyi nasıl ayarlayacağımızı bu yazıda anlatmaya çalışacağız.

1-) METİN RENGİ
Renk özelliği metnin rengini ayarlamak için kullanılır. İçeriğimizdeki yazıya 3 türlü renk verebiliriz.
•name - bir renk ismi yazarak, Örn/ kırmızı rengi için "red" yazmamız gerekir.
Css kodu bu şekilde: {color:red;}
•RGB - RGB değeri vererek, Örn/ "rgb(255,0,0)"
Css kodu bu şekilde: {color:rgb(255,0,0);}
•Hex - Renk kodu kullanarak, Örn/ beyaz renk kodu "#ffffff"
Css kodu bu şekilde: {color:#00ff00;}
Örnek kullanım için bu linke tıklayınız: http://www.w3schools.com/css/tryit.asp?filename=trycss_color

2-) METİN HİZALAMA
'text-align' ile metnimizi hizalarız. Örnek kodlar;
text-align : center; bu kod metni ortalamaya yarar.
text-align : left; bu kod metni sola yaslar.
text-align : right; bu kod metni sağa yaslar.
text-align:justify; bu kod metni iki yana yaslar.
Örnek kullanım için bu linke tıklayınız: http://www.w3schools.com/css/tryit.asp?filename=trycss_text-align_all

3-) METİN DEKORASYONU
'text-decoration' ile ebeveyne ait olan kodların etkisinden kurtarmak için böyle bir kod kullanılır. Daha çok kelimenin altının üstünün çizili olup olmayacağını belirlemek için kullanılır.
Örnek Kodlar;
text-decoration: overline; Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar
text-decoration: line -through; Kelimenin ortasından çizili olmasını sağlar.
text-decoration : underline; Kelimenin altının (Satır altından) çizili olmasını sağlar.
text-decoration: blink; Kelimenin yanıp sönmesini sağlar.(Netscape için i.explorer gibi tarayıcılarda çalışmaz).

Örnek kullanım için bu linke göz atabilirsiniz: http://www.w3schools.com/css/tryit.asp?filename=trycss_text-decoration

4-) HARF ÖZELLİKLERİ
'text-transform' kullanmış olduğumuz metin içerisindeki harflerin dönüşümünü yapar. Küçük harfleri büyük harfe çevirebilir, büyük harfleri küçük yapabilir. Kullanmış olduğumuz metnin ilk harfinin büyük olmasını sağlayabilir.
Örnek Kodlar;
text-transform:uppercase; metnin tamamını büyük harfe dönüştürür.
text-transform:lowercase; metnin tamamını küçük harfe dönüştürür.
text-transform:capitalize; metnin ilk harfinin büyük olmasını sağlar.
Örnek kullanım linki: http://www.w3schools.com/css/tryit.asp?filename=trycss_text-transform

5-) PARAGRAF BAŞI METİN GİRİNTİSİ AYARLAMA
'text-indent' metnin ilk satırından girinti vermek için kullanılır.
Örnek kod;
text-indent : 50px ; Paragraf başlarında 50px boşluk bırakmaya yarar.

Örnek kullanım linki: http://www.w3schools.com/css/tryit.asp?filename=trycss_text-indent

Css Background (Arkaplan) Özellikleri

Bir elemanın arkaplan özellikleri için kullanılır. Arkaplan kodları kısaca şunlardır;
•background-color
•background-image
•background-repeat
•background-attachment
•background-position

1-) ARKA PLAN RENGİ
•background-color: #ffffff; Bu kod arkaplan rengini ayarlar.
Şu örneğe göz atabilirsiniz: http://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_body
Arka plan rengini aynen text color özelliklerini ayarladığımız gibi 3 şekilde tanıtabiliriz.
•Ad - Bir renk ismi belirterek, "red"
•RGB - RGB değeri ile, "rgb(255,0,0)"
•Hex - Renk kodu ile, "#ff0000"
Örnek: http://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_elements

2-) ARKAPLAN RESMİ
'background-image' özelliği ile bir elemanın arkaplan görüntüsünü resim ile tanımlayabiliriz.
Burada önemli olan resmin tekrarlanmasıdır. Ayarlama düzgün yapılamazsa görüntü de bozukluklar oluşabilir.
Örneğin bir sayfanın arkaplan resmini şu şekilde ayarlarız;
body { background- image: url (' arkaplan.gif '); }
Örnek: http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image
Burada dikkat etmemiz gereken metin renginin arkaplan resmi üzerinde okunabilir olmasını sağlamaktır.
Yanlış kullanımlı bir örnek: http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_bad

3-) ARKAPLAN RESMİNİN TEKRARLANMASI
Tanımladığımız bir arkaplan görüntüsünde resim hem yatay hem de dikey olarak tekrarlanmaktadır. Bu da birden fazla rengi bulunan resimlerin tanımlandığında; sayfa görüntüsünün bozulmasına yol açmaktadır.
Örneğin: http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_gradient1
Bu yüzden arkaplan görüntüsünü yatay veya dikey olarak tekrarlamasını sağlamak üzere bu kodlardan faydalanacağız.
Resmi yatay olarak tekrarlamak için (repeat-x);
•background-repeat:repeat-x;
Resmi dikey olarak tekrarlamak için (repeat-y);
•background-repeat:repeat-y;
Resmin sadece bir kez tekrarlaması için;
•background-repeat:no-repeat;
Resmin konumunu (pozisyonunu) belirtmek için;
•background-position:right top; Burada resim sağ üstte görünecektir
Örnek: http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_position
aynı zamanda tek bir kodla tüm özellikleri de belirtebiliriz;
•background:#ffffff url('img_tree.png') no-repeat right top;
Kodu kısacak açıklarsak: Arkaplan rengi beyaz, arkaplan resmi img_tree.png, Resim sadece bir kez tekrarlanıyor, Pozisyonu sağ üst.

alıntıdır

css kulanımı için

---

css iki şekile kulanılır
head taglarına kulana bilmek için

   <style type="text/css" rel="stylesheet">
     Stiller yazılacağı alan
   </style>
 örnek

   <style type="text/css" rel="stylesheet">
      .ornek {
         font: 10pt Tahoma, Verdana, Arial;
         color: #0000C0;
      }
   </style>

   <div class="ornek">
      Bu belirlediğimiz stille bir yazı...
   </div>
  
  
bir css dosyasını çağırmak için
  <link href="www;cssdosyasi.css" type="text/css" rel="stylesheet" />