İçeriğe geç

Etiket: Bölüm

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;

Kendiniz de deneyebilirsiniz»

 


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:

Örneğin

padding:25px 50px;

Kendiniz deneyin »

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;
Yorum Bırak

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.

Remarkİç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;

Siz de deneyebilirsiniz bu adresten »

 


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.

Yorum Bırak

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.

Yorum Bırak

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

Yorum Bırak

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;

  • email
  • 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
email 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 ([email protected] ayarları)

Input type – URL

Kesinlikle url adresinin girileceği bir giriş alanı sağlar.

Üstteki ipucu burada da geçerli.

2 Yorum