<!-- 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 Basit Küçük CSS Notları
5
●136
- 26-03-2020, 17:50:16Ben 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.
- 26-03-2020, 17:51:44Düşü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:18Tabii ki codepen ile html+css+js için çok iyi bir önizleme sitesi. Codepen.ioKuzeyKalesi adlı üyeden alıntı: mesajı görüntüle
- 26-03-2020, 18:13:49Tekrardan çok teşekkürleremredemirtas adlı üyeden alıntı: mesajı görüntüle
- 27-03-2020, 00:32:04Deneyimim yok ama detaylı bir CSS kitabı alabilirsinmrburun adlı üyeden alıntı: mesajı görüntüle
Teşekkür ediyorum güzel notlar