Css Dersleri Bölüm 18 Element yayılımı(Floating)
Ne Fark Eder ki! Dergisinin hazırlamış olduğu Css Derslerinin 18. bölümü, element yayılımı, Floating konusu...
Bölüm Tag
- All
- Dijital pazarlama
- Dijital, İyi Şeyler Podcast
- E-Ticaret
- Eğitim
- Growth hacking
- İnceleme
- Kişisel
- Rehber
- Reklam
- Sosyoloji
- Teknoloji
- Wordpress
CSS Dersleri Bölüm 13 Padding
Not: Bu içerik ve içerikler dizisi, Css’in doğru kaynaklardan öğrenilmesi ve Türkçe kaynak sıkınıtısının giderilmesi adına w3schools’tan çevirilmiştir. Online yani çevrimiçi editör de w3schools’a aittir. Herhangi bir sorunuz için aşağıya yazabilirsiniz!
Padding
Element ve elementin içeriği arasındaki boşlukları ifade eder padding.
Padding
Bir elementin içeriğinin etrafının temizlenmesini sağlar. Elementin arkaplan renginden etkilenir.
Farklı özellikler kullanarak, alt, üst, sağ sol farklı olarak ayarlanabilir. Tüm özelliklerin yazımı yerine kısayazım özelliği ile de belirlenebilir tüm çevre.
Mümkün olan değerler
| Değer | Tanım |
|---|---|
| length | Sabit bir iç boşluk (in pixels, pt, em, etc.) |
| % | Elementin yüzdesel boşlukları |
Padding – Tekil kenarlar
CSS’te, farklı kenarlara farklı iç boşluklar verilebilir:
Örneğin
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
Padding – Kısayazım özelliği
Kodu kısaltmak için,tek bir özellikte tüm değerler verilebilir. Bu kısayazım özelliğidir.
“padding” İç bşoluklar için kısayazım özelliği taşıyan özelliktir:
Padding özelliği birden dörde kadar değer alabilir.
- padding:25px 50px 75px 100px;
- üst boşluk 25px
- sağ boşluk 50px
- alt boşluk 75px
- sol boşluk 100px
- padding:25px 50px 75px;
- üst boşluk 25px
- sağ ve sol boşluk 50px
- alt boşluk 75px
- padding:25px 50px;
- üst ve alt boşluk 25px
- sağ ve sol boşluk 50px
- padding:25px;
- tüm boşluklar 25px
CSS Dersleri Bölüm 12 – Margin
Uzunca bir boşluktan sonra tekrar yazabildim. Ve şimdi konumuzu anlatayım.
Element çevresindeki boşluklar margin’i tanımlar. Css’te margin olarak kullanabiliriz tabi.
Bir elementin dış çevre boşluğunu ifade eder marjin. (kenarların dışında kalan yerler). Bu bölgenin hiçbir rengi yoktur ve tamamen saydamdır.
The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.
Kullanılabilen değerler
| Değer | Tanım |
|---|---|
| auto | Tarayıcı dış boşlukları ayarlar. Tarayıcıya bağlı bir sonuç oluşur burada. |
| length | Sabit bir boşluk yani marjin oluşur bu durumda (pixel(px) ile, punto(pt) ile veya em ile belirlenir.) |
| % | Elementin yüzdelik değerini içeren bir boşluk belirtir. |
İçeriye alabilmek için eksi yönde değerler de kullanabilmeniz mümkün.
Margin – Tekil kenarlar
CSS’te, farklı kenarlara farklı boşluk ölçüleri verilmesi mümkündür:
Örnek
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Margin – Kısayazım özelliği
Kodun kısa yazımı, tüm margin özelliklerinin tek bir margin tanımında yazılabilmesiyle olur. Bu kısayazım özelliğidir.
CSS Dersleri Bölüm 8 –Tabloları Stillendirme
Temamın tablo stilleri uygun olmadığı için göstermek istediğim tablo biçimini şuradan görebilirsiniz buraya tıklayarak.
Ek açıklama da; bu derslerin çoğu bir çeviridir w3schools.com’dan ve kendi tecrübelerimi de içerir. Örneklerin çoğunu kendiniz uygulayabildiğiniz gibi daha önce açıkladığım şekilde, w3schools.com’a ait örneklerde verdiğim online editör’den de yararlanabilirsiniz. Yararlı olması dileğiyle…
Table Borders(tablo kenarları)
border özelliği kullanılarak tablo kenarları css ile biçimlendirilir.
Aşağıdaki örnek siyah bir kenar oluşturur table, th ve td elementleri için:
Örnek
table, th, td
{
border: 1px solid black;
}
Kendiniz deneyin! »Örnekteki tablonun kenarlarının çift olduğuna dikkat edin. Bu table ve th/td elementlerinin ayrı olarak kenar özelliğine sahip olduğunun göstergesidir.
Tablo kenarında tek bir çizgi göstermek için border-collapse özelliğini kullanın.
HTML 5 Dersleri – Bölüm 12 – Referans – HTML5(ve öncesi de dahil) Olay Özellikleri(event attributes)
Genel Olay Özellikleri
HTML 4; tarayıcıda, olaylara tetikleme izni vermiştir, tıpkı bir elemente tıklayınca çalışan Javascript gibi.
Javascript ve nesneye yönelik HTML de anlatacaklarım listesinde.
Aşağıdaki genel olay özellikler HTML5 içerisinde olayların etkileşimde bulunmasını sağlamakta.
Yeni : HTML5’teki yeni olay özellikleri.
Window(pencere) Olay Özellikleri
Window nesnesi için olay tetikleyicileri.
<body> tag’ına uygulanırlar:
| Özellik | Değer | Tanım |
|---|---|---|
| onafterprint Yeni | script | Belge basıldıktan sonra çalışır |
| onbeforeprint Yeni | script | Belge basılmadan önce çalışır |
| onbeforeonload Yeni | script | Belge yüklenmeden önce çalışır |
| onblur | script | Pencere odaklanmasını kaybedince çalışır |
| onerror Yeni | script | Bir hata gerçekleştiğinde çalışır |
| onfocus | script | Pencereye odaklandığında çalışır |
| onhaschange Yeni | script | Belge değiştirildiğinde çalışır |
| onload | script | Belge yüklendiğinde |
| onmessage Yeni | script | Mesaj tetiklendiğinde |
| onoffline Yeni | script | Belge çevrimdışı olduğunda |
| ononline Yeni | script | Belge çevrimiçi olduğunda |
| onpagehide Yeni | script | Pencere gizli olduğunda |
| onpageshow Yeni | script | Pencere görünür olduğunda |
| onpopstate Yeni | script | Pencerenin tarihi değiştiğinde ya da durumu |
| onredo Yeni | script | Belge bir tekrar yapma işlemine sahne olduğunda |
| onresize Yeni | script | Pencere yeniden boyutlandırıldığında |
| onstorage Yeni | script | Bir belge yüklendiğinde |
| onundo Yeni | script | Belge bir geri alma işlemine sahne olduğunda |
| onunload Yeni | script | Kullanıcı belgeden ayrılınca |
Form Olayları
Bir HTML formu içerisinde olay tetiklenir.
Tüm HTML5 elementlerine uygulanır,fakat çoğu form elementlerine uygulanır:
| Özellik | Değer | Tanım |
|---|---|---|
| onblur | script | bir element odaklanmasını yitirdiğinde |
| onchange | script | bir elment değiştiğinde |
| oncontextmenu Yeni | script | bir kaynak menu tetiklendiğinde |
| onfocus | script | Bir elemente odaklanıldığında |
| onformchange Yeni | script | Bir form değiştiğinde |
| onforminput Yeni | script | Bir form kullanıcı veri girişi aldığında |
| oninput Yeni | script | Bir element veri girişi aldığında |
| oninvalid Yeni | script | Bir element doğru olmadığında (invalid) |
| onreset | script | Bir form resetlendiğinde HTML5 desteklemiyor |
| onselect | script | Bir elment seçildiğinde |
| onsubmit | script | Bir form onaylandığında |
HTML 5 Dersleri – Bölüm 11 – Referans HTML Özellikleri(attributes) ve HTML5’teki Yeni Özellikler
Tüm HTML5 etiketlerince desteklenen özellikler aşağıda listelenmiştir birkaç istisna haricinde.HTML5 Genel Özellikleri Yeni : HTML5'teki yeni özellikler.Özellik Değer Tanımaccesskey character Bir elemente erişmek için klavye kısayolu tanımlar.class classname Bir element için class adı oluşturur (stil dosyası için).contenteditable Yeni true false Kullanıcının içeriği düzenleyip düzenlememe izni verilip verilmemesi - true, izinli - false, değil-.contextmenu Yeni menu_id Bir element...
HTML 5 Dersleri – Bölüm 7 – Input type özellikleri
HTML5 birkaç yeni input type özelliğine sahip formlar için. Bunlar daha iyi giriş kontrolü ve doğrulaması sağlamakta.
Yeni input type özellikleri;
- url
- number
- range
- tarih toplayıcıları(date, month, week, time, datetime, datetime-local)
- search
- color
Tarayıcı desteği
| Input type | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Hayır | 4.0 | 9.0 | 10.0 | Hayır | |
| url | Hayır | 4.0 | 9.0 | 10.0 | Hayır |
| number | Hayır | Hayır | 9.0 | 7.0 | Hayır |
| range | Hayır | Hayır | 9.0 | 4.0 | 4.0 |
| Date pickers | Hayır | Hayır | 9.0 | 10.0 | Hayır |
| search | Hayır | 4.0 | 11.0 | 10.0 | Hayır |
| color | Hayır | Hayır | 11.0 | 12 | Hayır |
Not; Opera yeni giriş elemanları için en iyi desteği sunmakta. Bununla birlikte, tüm bilinen tarayıcılarda kullanmaya başlayabilirsiniz. Eğer desteklemiyorlarsa, normal text alanları olarak davranacaklardır.
Input Type – email
Kesinlikle e-posta adresinin girileceği bir giriş alanı sağlar.
Eposta alanının değeri otomatik olarak doğrulanır form onaylandığında.
Örnek ve deneme adresi; Anasayfa: <input type="url" name="user_email" />İpucu; iPhone üzerindeki Safari email giriş elemanı özelliğini tnaımakta ve eşleşecek şekilde klavye girişlerini değiştirmekte ekranda (adds@and.com ayarları)
Input type – URL
Kesinlikle url adresinin girileceği bir giriş alanı sağlar.
Üstteki ipucu burada da geçerli.
HTML 5 Dersleri – Bölüm 5 – Canvas
Canvas elementi bir web sayfası üzerinde çizim yapmak için kullanılır. Javascript ile beraber HTML5 içinde kullanılırak elde edilir çizimler web sayfasında.
Bir canvas bir dikdörtgen alandır ve herbir pikseli kontrol edebilirsiniz.
Canvas elementi, birkaç metoda sahiptir, çizim yolları, kutular, daireler, karakterler ve imaj eklemeleri gibi.
Canvas elementi oluşturmak
HTML5 sayfasına canvas elementini ekleyin. Id’yi, width’i ve height’ini da verin.
<canvas id=”cizimalanim” width=”200″ height=”100″></canvas> gibi…
Javascript ile çizmek
Canvas elementinin kendi kendine bir çizim gücü yok. Herşey javascriptin kendi içinde gerçekleşmekte;
| <script type=”text/javascript”> var c=document.getElementById(“cizimalanim”); var cxt=c.getContext(“2d”); cxt.fillStyle=”#FF0000″; cxt.fillRect(0,0,150,75); </script> |
bu örnekte olduğu gibi. Javascript canvas elementini bulmak için id’yi kullanmakta;
var c=document.getElementById("cizimalanim");Sonra bağlamında nesneyi çizmekte;
var cxt=c.getContext("2d");getContext(“2d”) nesnesi bir HTML5 ile yapılmış nesne ve birçok yolu var çizgiler, kutular, daireler, karakterler ve imajlar veya daha fazlası için.
Sonraki iki adım ise bir kırmızı dikdörtgen çizmek;
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
Fillstyle yöntemi kırmızı yapar onu ve fillrect yöntemi ise şekilin pozisyonu ve boyutunu belirler.
- 1
- 2