MyBB Depo Forum

Orjinalini görmek için tıklayınız: BossTR CSS Kullanımı [Makale + Döküman]
Şu anda (Arşiv) modunu görüntülemektesiniz. Orjinal Sürümü Görüntüle internal link
CSS Gösterme & Gizleme

Bazen HTML elementlerini kullanıcıdan gizlemek gerekebilir. Bir nesnenin görünme şekli ve gizlenmesini display komutu kullanarak yaparız.


Bir Elementi Gizlemek/Göstermemek

Bunun için kullanabileceğimiz iki kalıp ifade var:

visibility: hidden; - Element gizlenir ancak elementin sahip olduğu alan boşluk şeklinde sayfada görünecektir.
display: none; - Element gizlenir ve sahip olduğu alan da sayfada gösterilmez ve yer kaplamaz.
Block (Kutu) ve Inline (Satıriçi) İfadeler

Bir HTML elementi kutu yapısında olabilir. Bu durumda sayfada bulabildiği tüm genişliği kullanan bir kare alan kaplayacaklardır. DIV, P, H1 elementleri bu tarz elementlerdir.

Bazı elementler ise satır içinde sadece başladığı ve bittiği yere kadar alan kaplar. Bunlarsa satıriçi (inline) elementlerdir.


Bir Elementin Kutu Ya Da Satır İçi Olmasını Sağlamak

Element stiline display'ı kullanarak ekleyeceğimiz şu özellikler HTML elementinin kutu mu yoksa satır parçası mı olacağını belirtmemizi ve değiştirmemizi sağlar:

display: block; - Element kutu şeklinde alan kaplayacaktır. Kullanıldığı anda yeni bir satırdan başlar.
display: inline; - Element satır içinde yer alacaktır. Kullanıldığı satırda devam edecektir.
Element özelliklerini değiştirmekle ilgili iki örnek verelim. İlk örneğimizde aslında BLOCK (kutu) tarzı olan LI elementini satır içi ifadeye dönüştürüyoruz:


Kod:
.kutu { li { display: inline; } span { display: block; } }
Yukarıdaki ikinci örnekte ise aslında satır içi özelliğe sahip SPAN elementi BLOCK (kutu) yapısına dönüştürülmüştür.

CSS Hizalama (Align)

Kutu Özellikli Elementlerin Hizalanması

Kutu özellikli nesnelerde hizayı ayarlamak için kullanılabilir.

Fakat bu dersimizde farklı yollardan nasıl hizalama yapılır bundan bahsedeceğiz.


Margin Kullanarak Ortalamak

Kutu özellikli elementler sağ ve sol dış boşluk (margin) değerleri auto yapılarak ortalanabilir. Tarayıcı bu durumda sağ ve sol boşlukları kendi ayarlayacağı için yazı ortalanacaktır. Ancak bu durumda genişlik yani width hiçbir zaman 100% olmamalıdır. Aksi takdirde kenarlık tarayıcı tarafından ayarlanamaz. Örneğe bakalım:



Kod:
.center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; }


Yukarıdaki örnek çalıştırıldığında tarayıcı otomatik olarak 15% sola 15% sağa boşluk verir ve genişliğe göre bunu oranlar.


Position Kullanarak Sağa ve Sola Yaslamak

Normal akıştan farklı olacak bir position: absolute; kodu kullanarak belirttiğimiz genişlikte bir kutunun sağa ya da sola yaslanmasını sağlayabiliriz. Örneğin 500 piksellik bir kutuyu sağa yaslamak isteseydik:



Kod:
.center { position: absolute; right; 0px; width: 500px; background-color:#b0e0e6; }


Sağdan 0 piksel boşluk bırakılacağını right: 0px; ile belirtmiş olduk.


Float Kullanarak Sağa ve Sola Yaslamak

Float HTML elementlerini sağa veya sola kaydırarak listelememizi sağlar. Kaydırma özelliğini hizalamak için kullanabiliriz:



Kod:
.right { float: right; width: 300px; background-color:#b0e0e6; }

CSS İçten Boşluk (Padding)

padding özelliği bir HTML elementinin kenarlarının içinde bir boşluk yaratmamızı sağlar.

Kenardan içerdeki bu boşlukları belirlerken üst, sol, alt ve sağ için ayrı ayrı belirlenebileceği gibi tek bir css koduyla da bunlar hızlıca belirlenebilir.

Tüm padding komutları:

padding - Hızlı kullanım
padding-top - Üstten boşluk
padding-right - Sağdan boşluk
padding-bottom - Alttan boşluk
padding-left - Soldan boşluk
Alabileceği değerler:

genişlik belirtme - px, em, pt gibi ölçülerle genişliği belirtme
yüzde kullanma (%) - İçerik genişliğine göre oranlar
Ayrı Ayrı İç Boşlukları Ayarlamak

Üst, sağ, alt ve sol boşlukları ayrı ayrı ayarlanabilir. Bunun için padding komutuna araya tire (-) koyarak ilgili yönün ingilizcesini yazıyoruz.


Kod:
.stilim { padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; }
Yukarıdaki örnekte üst ve alt boşluklar içerden 10 piksel yüksekliğinde, sağ ve sol boşluklar içerden 20 piksel genişliğinde olacaktır.


İç Boşlukları Ayarlamanın Kısa Yolu

Sadece padding kullanarak hepsi için geçerli tek bir tane değer yazabildiğimiz gibi sırasıyla üst, sağ, alt, sol şeklinde değerler girerek de yukarıdaki dört kodun tamamını tek kodda yazabiliriz:


Kod:
.stilim { /* Açıklama: padding: [üst] [sağ] [alt] [sol] */ padding: 10px 20px 10px 20px; }
Yukarı ve alt değeri ile Sağ ve sol değeri aynı olan ifadelerde şu şekilde de kullanabileceğimizi unutmayalım:


Kod:
.stilim { /* Açıklama: padding: [üst|alt] [sağ|sol] */ padding: 10px 20px; }
CSS Arkaplanlar..

CSS'de Renk İfadeleri

CSS dosyamızda yer yer renkleri belirtmemiz gerekebilir. Bunun için çeşitli yollar var. Bunlardan en çok kullanılan üç tanesi:

Onaltılık (Hex) Renkler
RGB (Kırmızı, Yeşil, Mavi) Renkler
Tarayıcı Renk İsimleri
Onaltılık (Hex) Renkler: #000000 şeklinde önce diyez sonra 6 adet 0-9 ve A-F değerleri alabilen sembollerden oluşur. Örneğin #404040 bir rengi ifade etmektedir.

Bu renk kodlarına resim işlem programlarınız yardımıyla (photoshop, paint shop pro gibi) ulaşabilirsiniz.

RGB (Kırmızı, Yeşil, Mavi) Renkler: Bir renk oluştururken kırmızı, yeşil ve mavinin tonlarını belirterek renk oluşturmamızı sağlar. Örneğin rgb( 0, 0, 0 ) siyah rengi belirtir. Mavi bir renk elde etmek istediğimizde Red - Green - Blue üçlemesinde en sonda yer alan mavinin değerini arttırmamız yeterli olur. Yani rgb( 0, 0, 255 ) mavi rengi verir. Windows'daki Paint Brush (MS Paint) programı ve diğer resim editörleri yardımıyla RGB değerlerini alarak renk oluşturabilirsiniz.

Tarayıcı Renk İsimleri: İngilizce olarak belirlenmiş bazı renk adlarını yazarak renk elde edebilirsiniz. Örneğin white beyaz, black siyah, blue mavi rengini verecektir.

Aşağıda renklerle ilgili örnek bir kullanım var:


Kod:
/* Koyu kırmızı */ p { color: #CC0000; } /* Yeşilin bir tonu */ div { color: line; } /* Mavi renk */ code { color: rgb( 0, 0, 255 ); }

background-color: Arkaplan Rengi

Bir elementin arkaplan rengini belirlememizi sağlar.


Kod:
div { background-color: #EFEFEF; }

background-image: Arkaplan Resmi

Bir element içinde arkaplan resmi kullanmamızı sağlar.


Kod:
body { background-image: url('resim.jpg'); }
Yukarıdaki gibi url('') yazılarak arasında resmin adı veya yolu yazılır. Örnekte resmin adı resim.jpg olarak gösterilmiştir.


background-repeat: Arkaplan Tekrarı / Döşeli

Kullandığımız arkaplan resminin tekrar edip etmeyeceğini belirtmemizi sağlar. Dört kullanımı vardır:

no-repeat : Tekrar edilmeyecektir
repeat : Tekrarlanacaktır / döşenecektir
repeat-x : Sadece sağa doğru tekrar edecektir
repeat-y : Sadece aşağı doğru tekrar edecektir
Aşağıdaki kullanım örneğini inceleyelim:


Kod:
body { background-image: url('resim.jpg'); background-repeat: no-repeat; }
Yukarıdaki css kodu resmin tekrarlanmayacağını tarayıcıya bildirir.


background-attachment: Arkaplan Sabitliği

Bu kod kullandığımız arkaplanın sabit kalıp kalmayacağı hakkında ayar yapmamızı sağlar. Eğer özellik değerinin sabit kalmasını (yani sayfanın yerine göre değişmemesini) istiyorsak fixed özelliği kullanırız.


Kod:
body { background-image: url('resim.jpg'); background-attachment: fixed; }


background-position: Resmin Nereye Hizalanacağı

Eğer background-repeat özelliğini no-repeat olarak belirlediysek bu kod yardımıyla onun hizalanma şeklini belirleme şansına sahip oluruz.


Kod:
body { background-image: url('resim.jpg'); background-repeat: no-repeat; background-position: right top; }

Yukarıda yer alan kod arkaplan resminin right (sağ) ve top (üst) tarafa doğru hizalanacağını bildirir.


background: Arkaplan Belirlemenin Kısa Yolu

Yukarıdaki tüm özellikleri tek bir kodda kullanmanız mümkün. Bunun için kullanacağımız kod:background.


body { background: #000000 url('resim.jpg') no-repeat right top; }

CSS Pozisyon Belirleme (Position)

CSS aynı zamanda HTML elementlerinin diğer elementlere göre konumunu belirlemenizi sağlar. Bir HTML elementini diğerinin altına ya da üstüne alabilir ve bir HTML elementi fazla büyükse ne yapılacağına karar verebilirsiniz.

Tüm elementler üst (top), alt (bottom), sağ (right) ve sol (left) özelliklerine sahiptir. Ancak bu özellikler CSS'deki position özelliği belirtilmemişse işe yaramayacaktır. Ayrıca birbirinden farklı dört pozisyon belirleme yöntemi vardır. Bunlar:

static - Hiçbir özellik belirtilmediyse
fixed - Sabit, tarayıcıya göre hareket etmeyen element
relative - Normal olması gereken pozisyona göre konum belirlemek
absolute - Koordinat belirleyerek sayfada bir yere yerleştirmek
static: Olması Gerektiği Gibi Bırakmak

Eğer position CSS kodunu hiç kullanmadıysak HTML nesneleri olduğu gibi sıralanacaktır. Bu şekilde olursa HTML elementinin alt, üst, sağ ve sol özellikleri belirlenemez.


fixed: Sabitlemek

Bir HTML elementini tarayıcı ekranına sabitlemek. Kaydıracı (scroll) kullansanız bile o element orada yer alacaktır (hareket etmez).


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

Yukarıdaki kod çalıştırılırsa "fixed" özelliğine sahip P elementinin sağdan 5 piksel üstten 30 piksel noktasında sabit bir şekilde kaldığını göreceğiz.

Bu tarz elementler bir diğerinin üzerine geçebilir ve diğerini kapatabilir.


relative: Normal Pozisyona Göre Konumlama

Bir HTML elementini sahip olduğu pozisyondan yukarı, aşağı, sağa ve sola doğru ayarlamamızı sağlar. Elementin kapladığı alan tarayıcı tarafından tutulmuştur, dolayısıyla bunda bir değişiklik olmaz. Ancak biz sağ, sol, alt ve üst tarafa doğru hareket ettirebiliriz.


Kod:
h2 { position: relative; left: -20px; }

Yukarıdaki örnekte H2 elementi kullanıldığı yerden 20 piksel sola kayacak ve oradan başlayacaktır. Bu durumda diğer elementlerin alanına girebilecektir.


absolute: Herhangi Bir Konum Belirleme

Herhangi bir elemente göre ya da element belirtilmediyse tüm HTML sayfasına göre yer alacağı konum piksel olarak ifade edilir. Örneğin H2 elementinin sayfanın başlangıç noktasının (0, 0) 100 piksel sağında ve 150 piksel altında (100, 150) olmasını istiyorsak:


Kod:
h2 { position: absolute; left: 100px; top: 150px; }

Bu tarz belirlenen pozisyonlar RELATIVE'den farklı olarak alan kaplamazlar. Yani sayfamızdan soyutlanmışlardır. Bağımsız hareket eden ve sadece tek bir başlangıç noktasını dikkate alan elementler gibi düşünülebilir.

"Absolute" özellikli elementler diğer elementlerin üzerine geçebilir ve onları kapayabilir.


z-index: Elementin Önceliğini Belirlemek

Nasıl Photoshop tarzı programlarda katmanlarla çalışılıyor ve katmanların sırası belirlenebiliyorsa, CSS'de de z-index özelliği ile bunu belirleyip bir HTML elementinin diğerinin üzerinde ya da altında görünmesini sağlayabiliriz.


Kod:
img { position: absolute; left: 0px; top: 0px; z-index: -1; }

Yukarıda -1 değeri ile belirttiğimiz resim diğer tüm elementlerin altında görünecektir. Çünkü diğer elementlerde bu değer belirtilmediyse 0 (sıfır) olarak algılanacaktır. Buna karşın bu element -1 olduğu için alt katman kabul edilecektir.

Negatif değerler en alt katmanı pozitif değerler üst katmanları ifade eder. Örneğin biri -2 biri -5 olan iki z-index özelliğine sahip elementten daha büyük olan -2 özelliğine sahip element daha üstte görünecektir.

CSS Sınırlamaları.

Genişlik ve Yükseklik

Bir nesnenin genişliğini width, yüksekliğini height kodu kullanarak belirleriz. Alacağı değer piksel, punto, Yüzde gibi bir ölçü değeri olacaktır.


Kod:
.kutu { width: 400px; height: 400px; }

Bu stili kullandığımız element 400x400'lük bir alanda yer alacaktır.


En Düşük Genişlik ve Yükseklik Değeri

Bir nesnenin minimum yani en düşük sahip olmak zorunda olduğu genişlik için min-width, yükseklik için min-height kodlarından faydalanırız.


Kod:
.kutu { min-width: 100px; min-height: 100px; }

Yukarıdaki örnekte elementin sahip olduğu yükseklik ve genişlik 100 pikselden düşük olursa otomatik olarak 100 piksele büyütülecektir.


En Yüksek Genişlik ve Yükseklik Değeri

Bir nesnenin maksimum yani en fazla sahip olabileceği genişlik için max-width, yükseklik içinmax-height kodlarından faydalanırız.


Kod:
.kutu { max-width: 500px; max-height: 200px; }

Örneği incelersek bu stile sahip bir HTML elementinin genişliği 500 pikseli, yüksekliği 200 pikseli aşamaz. Aşarsa özelliklerin uygulanmadığı başka bir alana taşacaktır. İstenirse sonraki konularda göreceğiniz overflow özelliği ile taşan kısmın gösterilmesi engellenebilir.

CSS Gruplama ve Üzerine Yazma

Gruplama

Birden fazla stilde sıklıkla kullanılan CSS komutları varsa, bunları toplu olarak yazıp özelliği bir kez yazma şansına sahibiz. Buna gruplama diyoruz. Örneğe bakalım:


Kod:
h1 { color: green; } h2 { color: green; } p { color: green; }

Yukarıda görüldüğü gibi üç element için de tek bir özellik belirtilmiş. Bu da rengin yeşil olması. Bu kodu kısaltmak için element ve stil adlarını aralara virgül gelecek şekilde sıralayabiliriz. Şöyle ki:


Kod:
h1, h2, p { color: green; }

Verdiğimiz elementlerin tamamı yeşil renkli görünecektir.


Üzerine Yazma

Bazen tüm elementleri kapsayacak kodlar yazarız. Ancak bir ya da birkaç element bundan farklı olmalıdır. İşte bu durumda tüm elementlerde geçerli olan özellikleri değiştirmemiz gerekebilir.

Şu şekil bir HTML kodumuz olsun:


Kod:
<p>Bu bir paragraf</p> <p>Bu da bir paragraf ancak farklı bir stili olacak</p> <p>Bu da bir paragraf ve 1. paragraf ile aynı olacak</p>

Tüm P elementleri için genel özellikleri belirledikten sonra, farklı olmasını istediğimiz 2. paragraf özelliklerini yeni bir stil adı oluşturarak yazıyoruz. Geriye kalan ilgili paragrafa class="stil_adı"eklemek olacaktır.


Kod:
p { font: 10pt Tahoma; color: gray; } .kirmizi p { color: red; }

Yukarıdaki kısım incelendiğinde tüm <P> elementleri 10 punto Tahoma ve gri olacaktır. Ancak class belirtip kirmizi yazdığımız P diğerlerinden farklı olarak kırmızı renkli olacaktır.


Alıntı:<p>Genel stile sahip paragraf</p> <p class="kirmizi">Kırmızı renkli olacak paragraf</p> <p>Diğer bir genel stile sahip paragraf</p>

CSS ile Kod Yazma Prensipleri

Kod Yazma Prensipleri ? Nedir ?
Öncelikle herhangi bir grafik programında hazırlanmış olan bir arayüzü, tarayıcı diline uygun hale getirmek için belirli standartlar kullanabiliriz.
Bu standartlar sayesinde daha iyi ve sağlıklı kodlar yazarız. Projeye daha sonradan gelecek geliştirici, bu taslak çalışma üstünde çalışabilir ve hızlı şekilde düzenleme yapmaya başlayabilir.
Fakat siz kod yazmayı bilmiyorsanız, bu iş feci şekilde bozulur. Kodlarınızı kimse okuyamaz ve yaptığınız iş bir daha geliştirilemez.
O yüzden her arayüz geliştirici kendine bir standart kod yazma tekniği oluşturmalıdır.

Faydası Nedir
Profesyonel anlamda bu tarz teknikler kullanılmaktadır. Hiçbir yorum satırının olmadığı css'ler oluşturmanızı tavsiye etmiyorum. Eğer şuan hobi olarak geliştirme yapıyorsanız, acilen kod yazma tekniğinizi geliştirmeniz gerekmektedir.

1-) Renk ve Tipografi
Öncelikle stilimizi yaratmadan önce arayüzde sıklıkla kullanacağımız, renkleri ve tipografimizi yorum sat[html]ırımıza almamız bize fayda sağlayacaktır.

PHP Kod:
/*------------------------------------------------------------------
# [Color codes]
 
# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */
 
/*------------------------------------------------------------------
[Typography]
 
Body copy:  1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif;
Headers:  2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif;
Input, textarea: 1.1em Helvetica, Verdana, Geneva, Arial, sans-serif;
Sidebar heading: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif;
 
Notes: decreasing heading by 0.4em with every subsequent heading level
-------------------------------------------------------------------*/ 

2-) İçindekiler Sayfası Tarzında Index Hazırlama
Kodumuzun yapısını ileride daha hızlı anlayabilmek ve daha hızlı müdahale yapabilmek için bu tarzda bir index oluşturmalıyız. Burada ileride kullanmak isteyeceğimiz anahtar kelimeler belirleyebiliriz. Böylece ileride kodlar arasında daha hızlı bir tarama yapabilir ve daha düzenli kodlama yapabiliriz.

PHP Kod:
/*------------------------------------------------------------------
[Table of contents]
 
1. Body
 2. Header / #header
  2.1. Navigation / #navbar
 3. Content / #content
  3.1. Left column / #leftcolumn
  3.2. Right column / #rightcolumn
  3.3. Sidebar / #sidebar
   3.3.1. RSS / #rss
   3.3.2. Search / #search
   3.3.3. Boxes / .box
   3.3.4. Sideblog / #sideblog
   3.3.5. Advertisements / .ads
 4. Footer / #footer
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]
 
1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer 

3-) Açıklama Satırları
Kodlarımızın içinde açıklama satırı doldururken de dikkat etmemiz gereken bazı şeyler olduğunu düşünüyorum. Örneğin açıklama satırlarını derecelendirebiliriz.

PHP Kod:
/* Basit açıklama satırı / yorum */
 
/*
 * Grup halinde açıklama
 * Birden fazla satır açıklama içeren yorum.
 */
 
/* ==========================================================================
   Üst seviye öneminde açıklama satırı diyebiliriz sanırım :)
   ========================================================================== */ 

4-) Seçici Kullanımı
Daha kolay okunabilmesi için bu tarz seçicileri alt alta yazmayı, ve kodların bir blok girintisi olarak kaydııılmasını öneriyorum.

PHP Kod:
.selector-1,
.
selector-2,
.
selector-{
    -
webkit-box-sizingborder-box;
    -
moz-box-sizingborder-box;
    
box-sizingborder-box;
    
displayblock;
    
color#000;
    
background#fff;


Tanımlama yaparken sıralamayı alfabetik listeye göre yapabiliriz. Aradığımızda daha çabuk ulaşabiliriz fakat bir dezavantajı bulunuyor. Tanımlamalar ilişkili css özellikleri ayrılınca kodun anlamı bozulabiliyor.
Örneğin pozition-display, width-height, padding-margin, color-background gibi birbirleri ile ilişkili özellikleri bir arada tutmak daha avantajlıda olabilir. Okuduğum makalelerde her iki yöntemide kullanıyorlar. Fakat ilişkili özellikleri bir arada tutulması öneriliyor genellikle.

PHP Kod:
body {
/* Css tanimlamalarini alfabetik siraya gore yaparsak... */
 
background#fdfdfd;
 
color#333;
 
font-size1em;
 
line-height1.4;
 
margin0;
 
padding0;
}
 
/* Birbirleri ile iliskili ozellikler bir arada... */
.selector {
    
positionrelative;
    
displayblock;
    
width50%;
    
height100px;
    
padding10px;
    
border0;
    
margin10px;
    
color#fff
    
background#000;



Diğer Kurallar;

- Hex değeri tanımlamalarında küçük karakter kullanılmalı. #ccc , #000 gibi.
- Seçicilerde özellileri tırnak içine almalıyız. input[type="checkbox"]
- Mümkün olduğunca 0 değeri vermekten kaçınalım. margin: 0
- Olabildiğince İngilizce değerler kullanılmalıdır. ana-kapsül, altin_ustu, ana, baba, kardes, kapsül gibi saçma kelimeler kullanmaya gerek yok.
- Kısa isim vermekten kaçınmalı ve açıklayıcı olmalıyız. Örneğin .cb yerine column_body etiketini kullanabiliriz.
- Büyük karakterlere gerek olmadığını düşünüyorum.
- Test ve sürümlendirme için Grunt adında bir araç varmış.
Sizlerde bu tarzda oluşturduğunuz teknikler var ise konu altında paylaşıp, bu şablonu hep birlikte geliştirebiliriz.


Makale şahsıma aittir paylaşıldığında BossTR'den alıntıdır yazılırsa sevinirim sıradakı makalede görüşmek üzere...
Süper Ellerine Saglık Hocam Gayet Yararlı Bir Makale
Rica ederim Gülümseme