Responsive Reklam Alanı

Merhaba arkadaşlar,

Bu makalemde css kodları ve anlamları nelerdir anlatacağım. Zaten bildiğiniz gibi temel olmadan yani HTML, CSS bilmeden hiç bir şey olmuyor. Şimdi makalemize tam geçmeden kısaca bir CSS’in tanımını yapalım ki unutulan bir şey varsa eksik giderilsin. HTML bize metin biçimlendirme alanında çok geniş olanaklar sunar.

css kodları ve anlamları nelerdir? 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.

css kodları ve anlamları nelerdir konumuza geçebiliriz…


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.

Arama Terimleri: css kodları
Paylaşmak Güzeldir
Yazar
Yazar
Wamp Server Nedir? Ne İşe Yarar? Kimler Kullanır? IP Güvenliği (IPSec)
27 Yorum
  1. Yazar
    yusuf

    çok teşekkürler kaleminize ve yüreğinize sağlık çok yararlı bir yazı olmuş…

  2. Yazar
    Murat

    Elinize sağlık hocam ALLAH razı olsun

  3. Yazar
    Anıl Gök

    Hocam bilgiler için teşekkürler

  4. Yazar
    Muharrem

    Hocam Allah razı olsun kısa ve toplu bir şekilde sunmanız çok güzel olmuş.

  5. Yazar
    Tahircan

    Teşekkür ederim hocam eline yüreyine sağlık

  6. Yazar
    Misafir

    Yorum kısmını nasıl eklediniz?

  7. Yazar
    Adem

    Çok teşekkürler, Allah razı olsun sizden.

  8. Yazar
    Ali

    Bu kodların nasıl kullanacağınızı da anlatırsanız sevinirim.

  9. Yazar
    Hakan

    Çok teşekkür ederim kardeşim elinize sağlık.

  10. Yazar
    Huzeyfe

    Adamın dibisin çok sağol ellerine sağlık.

  11. Yazar

    Sadece bu kadar mı ?

  12. Yazar

    Hocam çok dıbrışka bir anlatım olmuş. Çok teşekkür ediyorum, mançeleydi gibi anlatımların devamını bekliyoruz.

  13. Yazar
    Ayşegül

    Çok teşekkürler bilgilendiriniz için emeğinize sağlık

  14. Yazar
    Aksin Yusifov

    Teşekkür ederiz…

  15. Yazar

    Bilgi paylaştıkça büyür, emeğine saygı …

  16. Yazar

    Bilgiler çok işime yarayacak. Sürekli bu kodları kullanıyoruz ama bu şekilde açıklamalı olarak verilmemişti. Allah razı olsun. Emeğinize sağlık… 🙂

  17. Yazar
    Ilgar

    Çok teşekkür paylaşım için. Bunu pdf formatda benim emailime atabilir misiniz?
    emailim: e.ilqar@list.ru
    Önceden teşekkürler

  18. Yazar
    Umut

    Elinize sağlık çok yardımcı olucak bilgiler bunlar

  19. Yazar

    Elinize saglık hocam bu faydalı bilgileri bizlerle paylaştıgınız için teşekkür ederim başarılar.

  20. Yazar

    Çok teşekkür ederim

  21. Yazar

    Emeğine sağlık hocam çok açıklayıcı olmuş.

  22. Yazar
    Tayfun

    Allah razı olsun hocam toplu bir şekilde bulmak çok zor. Allah razı olsun…

  23. Yazar
    Aysuman

    Teşekkürler

  24. Yazar
    EREN

    EYW kardeşim çok yardımcı oldu..

  25. Yazar

    cok guzel olmus burdan melih selam soyluyorum lutfen oku

  26. Yazar
    İnsanınniri

    css =
    body
    {
    background-color: yellow;
    }
    #baslik
    {
    margin-top: 300px;
    width: 640px;
    margin-left: 550px;
    color: red;
    font-size: 34px;
    }
    img
    {
    width: 400px;
    height: 300px;
    }
    p
    {
    color: blue;
    border: 2px dotted black;
    padding-left: 25px;
    }
    td
    {
    border:2px dotted black;
    text-align: center;
    color: blue;
    }
    ol
    {
    color: blue;
    }

    Anasayfa =

    Anasayfa

    Yemekler

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Anasayfa
    Grafikler
    Menü

    Menü =

    MENÜ

    MENÜ

    Pazartesi

    wqrqwr
    rwqrqwr
    rqwrqwr
    rqrqwrwq
    rqwrqw

    Salı

    wqrqwr
    rwqrqwr
    rqwrqwr
    rqrqwrwq
    rqwrqw

    Çarşamba

    wqrqwr
    rwqrqwr
    rqwrqwr
    rqrqwrwq
    rqwrqw

    Perşembe

    wqrqwr
    rwqrqwr
    rqwrqwr
    rqrqwrwq
    rqwrqw

    Cuma

    wqrqwr
    rwqrqwr
    rqwrqwr
    rqrqwrwq
    rqwrqw

    Anasayfa
    Grafikler
    Menü

    grfik =

    Tablo

    Grafikler

    Pazartesi
    Salı
    Çarşamba
    Perşembe
    Cuma

    İskender
    Pilav
    Pizza
    Hamburger
    Köfte

    Anasayfa
    Grafikler
    Menü

Bir yorum yazın
Siz de düşüncenizi belirtebilirsiniz.

Emre Supçin * Ecceplus WordPress Themes