Top

CSS Dersleri

Konumlandırma

Css konumlandırma özellikleri bir elementi konumlandırmanıza yarar. Ayrıca elementlerin biribirine göre konumunu ve içeriklere göre konumunu belirli kriterlere göre konumlandırılmasını sağlar. Elementler  top, bottom, left ve right özellikleri kullanılarak konumlanabilir. Bununla beraber,  position özelliği belirlenmeden bu özellikler işlemez. Ama farklı bir konumlandırma özelliği de sunmaktadırlar. 4 çeşit konumlandırma yöntemi mevcuttur;


Sabit konumlandırma

HTML elementleri varsayılan olarak statiktir yani sabittir konumu. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.


Sabit Konumlama

SAbit konumlamaya sahip bir element tarayıcının göreceli konumuna göre sabitler kendini. Pencereyi kaydırdığınız halde konumu değişmeyecektir:

Örnek

p.pos_fixed { position:fixed; top:30px; right:5px; }

Kendiniz de deneyin »

Not: IE7’de ve IE8’de sadece !DOCTYPE belirlendiği takdirde sabit konumlandırma işe yaramaktadır. Sabit konumlanan elementler normal akışın dışında yer alırlar. Döküman ve diğer elementler sabit konumlanan element yokmuş gibi davranırlar. Sabit konumlanan elementler diğerlerinin üzerine çıkarlar.

Display özelliği, bir elementin nasıl gözükeceğini ve Visibility özelliği de bir elementin görünür ya da gizli olmasını sağlar.

Bir elementi gizlemek – display:none veya visibility:hidden

Bir elementi gizlemek display’e none veya visibility’ye hidden değeri vermekle gerçekleşir. Yalnız bunlar farklı sonuçlarla karşılaşmamıza neden olur:

visibility:hidden elementi gizler,fakat hala önceden belirlenmiş olan alanı kaplamaya devam eder. Element yok olur ama hacim kaplar hala yani şablonda yeri hazırdır.

Örneğin

h1.hidden {visibility:hidden;}

Siz de deneyin »

display:none elementi gizler, işgal ettiği yer de gizlenir. Element yok olur ve element hiç var olmamış gibi yer almaz şablonda:

Örneğin

h1.hidden {display:none;}

Siz de deneyin »

 


CSS Display Elementinin – Block ve Inline Değerleri

Block elementlerinin tam genişlik ve yüksekliği kaplaması sağlar ve  önce ve sonrasına satır atar.

Block element örnekleri:

  • <h1>
  • <p>
  • <div>

Inline yani satır içi elementler de sadece genişliği kaplar  ve satır atmaya zorlamaz.

Css Boyutlandırması size elementin yüksekliğini ve genişliğini kontrol etmenize olanak tanır. Sizin denemeniz için örnekler Elementin Yüksekliği Bu örnek yüksekliğin ayarlanışını göstermektedir. Yüzdelik kullanarak bir imajın yüksekliğini ayarlama Bu örnek yüksekliğin yüzdelikle ayarlanışını göstermektedir. Pixel kullanarak bir elementin genişliğini ayarlama Bu örnek element için piksel kullanımı ile genişlik ayarlamasını göstermekte. Bir elementin maksimum...

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! Grup Seçiciler Stil dosyasında aynı stile sahip elementler mevcut olabilir. h1 { color:green; } h2 { color:green; } p { color:green; } Kodu kısaltmak için,seçicileri gruplayabilirsiniz. Herbir seçiciyi virgül ile...

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;

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.

Bir dış çizgi elementlerin, kenar çizgisinin hemen dışında yer alan bir çizgidir ve   göze çarpan bir görünüm oluşmasını sağlar.

Outline’in ozellikleri style, color ve  outline’in yani dış çizginin width’i yani genişliğinin belirlenmesi .


Örnekler

Bir elementin çevresine çizgi çekme (outline)
Bir elementin dışına nasıl çizgi çekileceğini gösterir .

Bir outline’a yani dış çizgiye biçim verme
Outline style’ının gösterimi.

Bir outline’a renk verme
Bir dışçizgiye nasıl renk verildiğini gösterir.

Bir outline’ın yani dış çizginin genişliğini belirleme
Dış çizginin genişliğinin belirlenmesini gösterir.


CSS Outline

Elementlerin çevresinde olan bir dış çizgidir. (Kenar ya da çerçeve çizgisinin de dışında) Elementin oturmuş görünmesini sağlar.

Yalnız,Border özelliğinden farklılık içerir.

CSS Border Özelliği

CSS border özelliği bir elementin dış hatlarının rengini ve stilini belirlemeye olanak sağlar.

Border Style

border-style özelliği nasıl bir kenarlığın gösterileceğini tanımlamamızı sağlar.

Not;  border-style özelliğini belirtmediğiniz sürece hiçbir border tanımlaması işe yaramaz!

border-style değerleri:

none: Çerçevesiz hal

dotted: Noktalı bir çerçeve

dashed: Tirelenmiş kenarlık

solid: Sade, tek renk ve tek çizgi halinde olan kenarlık

double: Çift kenarlık. border-width değerindeki genişlik değeri ile aynı değere sahip iki çerçeve de.

groove: 3 boyutlu oluklu kenarlık. Efektler border-color değerine bağlıdır.

ridge:3D kabarık çizgi. border-color değerine bağlı.

inset: 3d ilave kenar. border-color değerine bağlı.

outset: 3d ilave kenar. border-color değerine bağlı.

Kendiniz deneyin: Kenarın değerini ayarlama


Kenar genişliği

border-width kenarların genişliğini ayarlamak için kullanılır.

Genişlik piksel olarak veya thin, medium ve thick olarak 3 tanımlı kenar genişliğini kullanabilirsiniz.

Not: The “border-width”tek başına kullanıldığında çalışmaz. “border-style” özelliği ile kenarlar ayarlanmalı ilk önce.

Örnek

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

Kendiniz deneyin »

 


Kenar rengi

border-color kenarlara renk vermek için kullanılır. Renkler de:

  • name -belirli bir renk adı ile,mesela “red”
  • RGB – belirli bir rgb değeri ile, mesela “rgb(255,0,0)”
  • Hex – belirli bir hex değeri ile,mesela “#ff0000”

Kenar renklerini transparan/”transparent” da yapabilirsiniz.

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…


Tüm HTML elemanları kutu olarak düşünülebilir. CSS’te, “box model”(kutu modeli) terimi  tasarım ve düzen hakkında konuşulduğunda kullanılır.

CSS box model HTML elementlerini saran bir kutu aslında ve margin’e(dış boşluk), border’a(kenar/çerçeve), padding’e(iç boşluk, içeriğin uzaklığı)ve asıl içeriğe(content) dayanır.

Box model elementlerin etrafına sınır çekmemize izin verir ve ilgili elementlere yakın konumlarına boşluklar koymamızı sağlar.

Alttaki resim kutu modelini anlatmaktadır:

Farklı bölümlerin açıklaması:

  • Margin – border’ın yani çerçevenin etrafını temizler ya da boşluk bırakır-boşaltır- da denilebilir. Margin arkaplan rengine sahip değildir, tamamen transparandır. Bizler okulda kompozisyon yazarken A4 kağıdın her tarafında 5 cm boşluk bırakırız ve içerik o boşluklarda yer almaz. İşte o boşluk margin’dir.
  • Border – Bir border padding(içeriği uzaklaştıran boşluk) ve content.(içerik) i de içine alan bir sınırdır. Border kutunun arkaplan renginden etkilenir.
  • Padding – Content’in yani içeriğin çevresindeki alanı boşaltır ya da temizler. Padding kutunun arkaplan renginden etkilenir.
  • Content – Kutunun içeriğidir yazılar ve resimler burada görünür.

Tüm tarayıcılarda doğru bir şekilde gözükmesini sağlayabilmeniz için box model’in nasıl işlediğini bilmeniz gerekmektedir.


Bir elementin Width ve Height değerleri(Genişlik ve yükseklik)

Önemli:Css ile bir elementin genişlik ve yükseklik değerlerini belirttiğinizde sadece içeriğin yer alacağı alanın genişlik ve yüksekliğini belirtmiş oluyorsunuz. Bir elementin tam kapladığı alanı bilebilmek için padding, border ve margin değerlerini de eklemelisiniz.

Aşağıdaki örmekte bir elementin toplam genişliği 300px’dir:

width:250px;
 padding:10px;
 border:5px solid gray;
 margin:10px;

Şimdi ölçelim:
250px (width yani genişlik)
+ 20px (sol ve sağ padding yani iç boşluk)
+ 10px (sol ve sağ çerçeve yani border)
+ 20px (sol ve sağ margin yani dış boşluk)
= 300px toplamda