• 26-03-2020, 17:50:16
    #1
    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
  • 26-03-2020, 17:51:44
    #2
    Düşünmen bile güzel olmuş Teşekkür ediyorum güzel notlar Hiç daha önce denemediğim için sormak istiyorum. Mesela ben bu kodları elimle yazdıktan sonra önizlemesini gösterebilecek bir online site veya program mevcut mudur ?
  • 26-03-2020, 18:00:18
    #3
    KuzeyKalesi adlı üyeden alıntı: mesajı görüntüle
    Düşünmen bile güzel olmuş Teşekkür ediyorum güzel notlar Hiç daha önce denemediğim için sormak istiyorum. Mesela ben bu kodları elimle yazdıktan sonra önizlemesini gösterebilecek bir online site veya program mevcut mudur ?
    Tabii ki codepen ile html+css+js için çok iyi bir önizleme sitesi. Codepen.io
  • 26-03-2020, 18:13:49
    #4
    emredemirtas adlı üyeden alıntı: mesajı görüntüle
    Tabii ki codepen ile html+css+js için çok iyi bir önizleme sitesi. Codepen.io
    Tekrardan çok teşekkürler
  • 26-03-2020, 18:22:42
    #5
    Hocam peki konu sahibinin izniyle bende başladım web’e css in tüm style ve attribute’lere nereden ulaşabilirim. Tüm resmi görüp detaylara inmek için istiyorum
  • 27-03-2020, 00:32:04
    #6
    mrburun adlı üyeden alıntı: mesajı görüntüle
    Hocam peki konu sahibinin izniyle bende başladım web’e css in tüm style ve attribute’lere nereden ulaşabilirim. Tüm resmi görüp detaylara inmek için istiyorum
    Deneyimim yok ama detaylı bir CSS kitabı alabilirsin