Ben CSS öğrenmeye çalışırken bir yandan pekişmesi için bazı notlar aldım. Sizin de ihtiyacınıza yarayabileceğinden paylaşmak istedim. Tabi ki internette çok daha iyilerini bulabilirsiniz. Sadece özet olarak kabul edin.
<!-- Yazılım Kodları -->
weight : ağırlık
oblique: eğik
indent: çentik
center: merkez
align: hizalama
background: arkaplan
widht: en
height: yükseklik
border: çerçeve
solid: katı, düz
dashed: kesikli
dotted: noktalı
input: girdi
HTML Notları
<tr> <td> = tablo oluşturma
<a a name=" " > </a> Tag oluşturur
<a href="mailto:"> </a> Mail Gönderir
<img src="pic.jpeg"
width=10
/> Resim Eklemek ve 10 boyutunda
CSS Notları ( ; ile bitirilir )
<style type="text/css" > </style> CSS yazabilmek için <head> </head> kısmına yazılır
p { } parantez içine yazılan kodlar p ile yazılan yazıları etkiler. Örneğin ;
font-family: Steelfish; Yazıların tipini değiştirir.
font-weight:bold; Kalınlaştırır.
font-style: italic; Eğik hale getirir (Normal - İtalic - Oblique)
<!-- Paragraf Komutları -->
text-indent: 20px; Metni 20 pixel içerde başlatır.
line-height: 150% ; Paragraf içindeki satıraların arası boşluk %150 ye çıktı
text-align: center ; Ortalar
//color:blue; bu sembolden sonra yazılan kodlar pas geçilir. İşleme alınmaz.
background-color: brown; Arkaplanı kahverengi yapar.
background-image : url (resim.jpg) ; Arkaplana resim ekler
background-repeat: x ; arakaplan resminin tekrarlama komutları
x=
norepeat : tekrarlamaz
repeat-x : yatay (x) yönünde tekrarlar
repeat-y : dikey (y) yönünde tekrarlar
padding : 25px; dolgular, her taraftan 25 px
padding-top : 25 px ; üst kısmdan 25 px boşluk (left , bottom)
<!-- Border Komutları -->
border-color: orange; turuncu bir renkte çerçeve ekler.
border-style : solid ; Düz renkte çerçeve oluşturur . (dashed,dotted (Eğer kullanmazsak border çalışmaz)
border-size : 5px ; 5 px büyüklüğünde oluşturur.
<!-- a (anchor) komutları -->
<a href=" " > </a> Yönlendirir.
a:link {font-weight:bold;} : A kısmındaki linki kalın gösterir.
a:hover : Üzerine maouse imleci geldiği zaman oluşacak komutlardır. Örnedğin :
a:hover {background-color:black; color: white; } üzerine mause gelince arkaplan siyah, yazı ise beyaz olucaktır.
a:active : aktif olduğu zaman yani tıkladığımız zaman meydana gelecek komuttur.
<!-- CSS'te TABLO -->
border=5px : tabloya 5px çerçeve ekler
<!-- Liste komutkları -->
list-style-image: url (nokta-png-2.png) ; Url içinde resmi liste noktalarına dönüştürür.
<!-- CSS'de Çoklu Komutlar -->
h1,p { color: green;} : Bu şekilde hem p hem de h1 yeşil olur.
Merhaba <span> benim adım emre </span>
span { color:red } Bu şekilde yazı içinde sadece bir alanı etkiler.
first-letter : İlk harf için uygulanır.
<!-- Division -->
<div> </div> Yeni bir kutucuk veya konteyner oluşturur.
position:absolute ; Altına yazılan komutları uygula
position:fixed ; Kaydırma yapsak bile yer isabit kalır
<!-- Forms -->
<form> </form> yazarak form
<input type="" > İçine girilecek komutun tipinin seçmeliyiz. (Number,text,tel,date)
value : Boşluklara yazı yazmdan önce ne yapılması gerektiğini söyler
type türleri
file : dosya yükelemek
checkbox: Birden fazla işaretleme
radio: tek bir seçenek seçmek için
date: tarih
text: yazı
number: sayı
<select> <option></option> </select> Kutucuklu Seçim yapar