Css Temel Kodlar



css-nedir

Burada paylaştığım Css "Cassading Style Sheet" denilen kodlar zaman içinde kullandığım temel kodlardır.
Kodlardan anlamasam da tecrübeyle edindiğim kodların ne işe yaradığı, nerelerde kullanıldığını kısmen de olsa anlayabiliyorum. Benim gibi acemilerin işine yarayacağını düşünüyorum. Zira site açan ama kodlardan anlamayan için lazım olan bir şeyleri düzenlemek oldukça zordur. Ben bunun zorluğunu bir hayli yaşadım. Aradığım kodları böyle bir yerde bulma şansım olmadı, en küçük bir işlem için günlerce uğraştığım, arama motorlarında gezindiğim zamanlar çok oldu ve halen de devam ediyor.
Buradaki kodlar temel kodların sadece bir kısmı olsa da en çok kullanılan Css kodları ihtiva ediyor. Her kodun karşısında anladığım kadarıyla ne işe yaradığının açıklamasını verdim. Bu açıklamalardan yola çıkarak siz de konunun mantığını geliştirebilirsiniz. Tabi dediğim gibi bir yazılımcı için bu paylaşım belki bir anlam ifade etmeyebilir ama bir site açıp da nereyi nasıl şekillendireceğini bilmeyenler için oldukça yararlıdır, en azından benim için öyledir...


KODLAR AÇIKLAMA
<style type="text/css"> .css{width:100%} </style> Css kodlar bu style tagının içine yazılır
width:100px; Genişlik kesin
width:100%; Genişlik yüzde
height:100px; Yükseklik kesin
height:100%; Yükseklik yüzde
overflow:auto; Html içinde kaydırma (Scrollbar)olsun
overflow: hidden; Html içinde kaydırma olmasın
float:left; Html sola yaslansın
float:right; Html sağa yaslansın
position: absolute; Html kesin istediğim gibi olsun
position:fixed; Html istediğim yerde sabit dursun
position: relative; Html, absolute ve fixed kodlardan etkilenmesin
visibility: hidden; html'yi gizle
visibility: visible; Html'yi göster
display: none; Html'yi ve yerini gösterme
display: block; Html'yi ve yerini göster
cursor: pointer; Maus gelince açılsın
margin:0 auto; Html ortaya gelsin
background:#ffffff; Arka plana renk vermek için
border:2px solid #000000; Çerçeve kenarında çizgi olsun
border-radius: 6px; Çerçeve ucları bombeli olsun
padding:5px; Html içerden genişlesin
margin:5px; Çerçeve etrafından uzak olsun
z-index:100; Html diğer html'nin üzerinde olsun
background:rgba(127,196,245, 0.6); Arka plan rengi saydam olsun
top:0;left:0;right:0;bottom:0; position absolute ve position fixed kodlarında kullanılır
word-spacing: 40px; Kelimeler aralıklı olsun
letter-spacing:1px; Harfler aralıklı olsun
text-shadow: 3px 2px 1px #000; Yazılarda gölge olsun
white-space: nowrap; Alt satırı gösterme
word-wrap: break-word; Kutudan dışarı çıkma
text-overflow: ellipsis; İlk satır bitiminde sonuna üç nokta koy
line-height: 21px; Satır aralığını belirle
box-shadow:2 2 2px #000; Kutuya dışardan gölge ver
box-shadow: inset 2 2 2px #000; Kutuya içerden gölge ver
list-style-type:none; Ul tagında nokta görünmesin
a:hover{background:#ffffff;} Maus gelince linkin rengi değişsin
 .css{}Ana kodlar
@media screen and (max-width:500px) and (min-width:100px) { Sonraki kodlar }
Html responsive kodu
text-align:center; Yazılar ortaya gelsin
text-decoration:none; Linklerin altında çizgi olmasın
text-decoration: underline; Linklerin altında çizgi olsun
font-family: 'Open Sans', sans-serif Yazılar bu tipte görünsün
font-size:14px; Yazı boyut belirleme
font-weight: bold; Yazıyı kalın göster
background-repeat :repeat ; Resim zemine yayılsın
background-repeat :no-repeat ; Resim zemine yayılmasın




Yorumlar