Css Günlüğüm

Html Günlüğümden sonra yenisini eklemeye başlıycağım.Css günlüğüm.Tabi Önce incelemeniz gereken ve öğrenmeniz gereken ilk kısım html günlüğümdür..

http://umitkose.wordpress.com/2014/05/27/html-gunlugum/

Hadi hemen başlıyalım.

Css Nedir? 

Css,açılımı “Cascading Style Sheet” olan ve dilimize Stil Şablonları olarak yerleşen
basit ve kullanışlı bir işaretleme dilidir.html öğelerine stil yani biçimlendirmek yani renk yazı tipi gibi özellikler eklemek için gereklidir.Tasarımda Css olmazsa olmazdır.Daha geniş kapsamlı istiyorsanız araştırmanızı öğrenirim.Hadi Css yapısı diyelim..

Css Yapısı :

yapi

 

Css yapısı seçici ve Bildirim(İfade)den oluşmaktadır.Bildirim ise Özellik ve değer olarak ikiye ayrılır.Seçim kısmı html’de ki h1 başlık belirtme olsun menu oluşturmada kullandığımız li lu olsun onların kısmı ifade,bildirim ise onlara verebiliceğimiz özellikler ve o özelliklere göre değerler yani işlevler olsun diyebiliriz.Sen mesela h1’in özelliği color(renk) değerinse tüm h1leri mavi yap gibi..

/* .. */ ——> Açıklama için kullanılır

Css yapısında birde özellik ile değeri ayırırken : ve bildirimleri ayırırken ; kullanılır.. Ve son olarak her seçim {} ile içine bildirimler işlenir..

Css’ler Nasıl Eklenir ?

1. Stilleri CSS Dosyasından Çağırmak

En çok kullanılan css ekleme özelliğidir.Css ayrı bir dosyadır.Ve ismi style.css olarak kullanılır en çok.Ana html dosyamızdan da bu css dosyası çağırılarak yapılır.

2014-06-28_00h26_52 2014-06-28_00h27_44 2014-06-28_00h28_08

Basit yapı olarak bu şekil.Ortadaki html dosyamda style.css’imin yolunu verdim.Orda tanıttığım idleri ise cssle birlikte özellik verdim.

2. HTML Sayfasında CSS Yazmak

2 yol olarak Aynı html sayfasında yazmak.Bu uzundur bence.Ve karışık olabilir.En kolay yolu 1.’dir.Ama diğer yollarda aklınızda bulunsun bence.Örneği :

2014-06-28_00h32_26

3. HTML Elementinin İçerisinde Stil Belirtmek

Bazen stil dosyası ya da STYLE elementi kullanmadan hızlı çözümler üretmek gerekebilir. Böyle durumlarda her elementin style=”” özelliği kullanıma hazırdır. CSS kodlarını element içinde açacağımız STYLE özelliğine sıralarız. Örneğin;

2014-06-28_00h34_58

 

Css’te ID,Class ve Tag Seçimi..

Css’te Id Ve Class nedir? hemen bahsedelim..

Class Seçimi:

Sınıf Seçicileri class’ına ne verdiysek o class hakkında işlem yapma yeteneğine sahip oluruz.Basit olarak class=”yazı” diye her html’e class adı belirttik. style.css’te ise .yazı dediğimiz zaman o yazı class’ında ki tüm html öğeleri style.css’te .yazı içindeki css kodlarından etkilenir.Örneğimiz :

Html’de class’ı yazi olarak belirttik.Bir paragraf oluşturduk.Bir de Başlık oluşturduk.style.css’te gri bir yazı istedik.Ve yazi olan class’ımızdaki tüm öğeler etkilendi.2014-06-28_00h41_48 2014-06-28_00h42_052014-06-28_00h41_35

 

Not:Class için css’te “.” koyduğumuzu unutmayın..

 

ID Seçimi:

Sınıflar birden fazla öğeye etki edebiliyordu.Id seçiciler ise yalnızca bir öğeye atanarak,bir kez kullanılır.Aradaki fark bu. Örneği:

2014-06-28_00h58_59 2014-06-28_00h59_08

2014-06-28_00h58_42

Not:ID için css’te “#” koyduğumuzu unutmayın..

Tag Seçimi:

Tag seçimi ise Mesela paragraf içindeki tüm herşeyi etkilesin demek.Yani html’de kullandığımız tüm kısma hitap et.Mesela Örnek olarak Kullanımı:

body{font-size:20px} Yani body kısmındaki herşey 20 px olsun demek..

Css Birimleri:

Burada ise Css ile ilgili mesela uzunluk birimi px piksel nedir? bunları inceliycez.

1-Uzunluk Birimi:

Göreceli olanlar;

 ex : Hangi yazı tipi seçilmişse o yazı tipindeki küçük x harfinin yüksekliğidir.

 px: Monitörümüz piksellerden meydana gelir. Ekran çözünürlüğüne göre
değişen, ekranda bulunan noktalardan (piksel) bir tanesinin yüksekliğidir.

em : Varsayılan yazı büyüklüğünde (font-size) ve yazı ailesinde (font-family)
yer alan “M” harfinin genişliğini baz almasıdır.

Kesin uzunluk birimleri;

in: inç’i(inch) ifade etmektedir,1 inç=2,54 cm’dir.
 cm: Santimetreyi ifade etmektedir. Gerçek hayatta kullandığımız cm değeridir.
 mm: Milimetreyi ifade etmektedir. Örnek: margin-left:10 mm (sol iç kenar
boşluğu,10 mm)
pt: Point.(punto),standart baskı birimidir. (1pt = 1/72 inç) Örn: font-size:14 pt
 pc: Pika. Bir inçin altıda birine eşit olan bir baskı ölçü birimi.1pc = 12 pt’dir.

 

2014-06-28_01h07_43

Yukardaki uzunluk birimleri arası dönüşüm yapılmaktadır.Tabi ben buraya koymuycam.Araştırabilirsiniz. Bilginize..

2-Yüzde Birimleri:

Burda ise mesela p{font-size:100%} ile p{font-size:62.5%} boyutlarının farklılığıdır.Sayfada aksi durum belirtilmedikçe belirttiğimiz yüzde değer gözükecektir..

3-Renk Birimleri:

2014-06-28_01h12_02

Renkler 3 şekilde atanabilir.Mesela İsmini yazarak.Tabi hepsinin desteklendiğini sanmıyorum.Mesela kırmızı için color:red yazarsak yazı tipi kırmızı olcaktır.RGB kod ile renk belirtme ise background-color:#000000; dersek arka plan siyah olcaktır.Buna başka renkler eklemek isterseniz burdaki renkleri keyfinize göre seçebilirsiniz..

http://www.sitekodlari.com/htmlrenkkodubulucu.php

Şuanlık Css’e basit bir anlatım yapmış bulunmaktayız hadi kod kısmını inceliyelim bir de..

STİL ŞABLONU ÖZELLİKLERİ

Bunları belli gruplara ayırdım.Hadi Başlayalım

1-Zemin Özellikleri

a-Arka Plan Rengi(“background-color”)

Zemin özellikleri,Şimdi bir zeminde ne olur diyerek başlıycam.Arkaplan koymak isteyebiliriz.Mesela çok belirtsin diye yazıya arka plan ekliyebiliriz.İşte bunun için background-color’a ihtiyacımız var.h1 başlığının arka planı gray olsun,Mesela bannerimiz olsun arka planı ayrı renk kategoriler ayrı renk vs vs.. mesela;

h1 {background-color:#gray;} 

b-Arka Plana Resim ekleme(“background-image”)

Arka Plana hazır bir renk yerine çok canlı bir resim ekliyebiliriz.Bunun için;

body { background-image:url( Resmin adı ve uzantısı); }  yazmamız yeterli olcaktır.

c-Zemin Resmi Tekrarı(“background-repeat”)

background-repeat:repeat; (Görselin hem yatay olarak hem de dikey olarak
tekrar etmesini istiyorsak bu özelliği kullanırız. Bu özellik yazılmasa bile CSS
varsayılan olarak bunu yapacaktır.)
background-repeat:no-repeat; (Eklediğimiz görselin hiçbir şekilde tekrar
etmesini istemiyorsak bu özelliği kullanırız.)
background-repeat:repeat-x; (Eklediğimiz görsel yatay olarak yani x ekseni
boyunca tekrar etsin istiyorsak bu özelliği kullanırız.)
 background-repeat:repeat-y; (Eklediğimiz görsel dikey olarak yani y ekseni
boyunca tekrar etsin istiyorsak bu özelliği kullanırız.)

d- Zemin Resmi Pozisyonu(“background-position”)

Öğelerin sayfadaki yerlerinin belirlendiği kısımdır.üstte mi sağda mı solda mı ? ayarlamak istediğimiz kısmı burada ayarlarız..

background-position:top left; (Bu bildirimi kullandığımızda görselimiz üstün
solunda yer alacak.Yani Resim sol kısımda gözükecektir)
background-position:top center; (Bu bildirimi kullandığımızda görselimiz
üstün ortasında yer alacak.Yani Resim ortada)
background-position:top right; (Bu bildirimi kullandığımızda görselimiz
üstün sağında yer alacak.Yani Resim en sağdan gösterilcektir)
background-position:center left; (Bu bildirimi kullandığımızda görselimiz
ortanın solunda yer alacak.)
 background-position:center center; (Bu bildirimi kullandığımızda görselimiz
ortanın ortasında yer alacak.)
 background-position:center right; (Bu bildirimi kullandığımızda görselimiz
ortanın sağında yer alacak.)
background-position:bottom left; (Bu bildirimi kullandığımızda görselimiz
altın solunda yer alacak.)
 background-position:bottom center; (Bu bildirimi kullandığımızda
görselimiz altın ortasında yer alacak.)
 background-position:bottom right; (Bu bildirimi kullandığımızda görselimiz
altın sağında yer alacak.)
 background-position:x% y%; (Görselimize yatay ve dikey olarak yüzde
üzerinden pozisyon vermemizi sağlar. İlk yüzde yatayın, ikinci yüzde ise
dikeyin pozisyonudur. Örnek: background-position:60% 75%; )
background-position:xpos ypos; (Görselimize yatay ve dikey olarak pixel
bakımından pozisyon vermemizi sağlar. İlk pixel’li rakam yatayın, ikinci pixel’li
rakam ise dikeyin pozisyonudur. Örnek: background-position:100px 200px; )

Not: Kodları tek tek deneyerek koymaya uğraşmadım.Denerseniz sizin için çok yararlı olcaktır.

Örnek ve Not:

body { background-image: url(‘logo.gif’);
background-repeat : no-repeat;
background-position: center center ; }

Yukarda ki örneği kısa bir şekilde aşağıda ki gibi yazabiliriz.Bilginize..

body{ background:url(‘logo.gif’) no-repeat center center;}

e-Zemin Resmi İliştirme(“background-attachment”)

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.

2-Yazı Özellikleri (Font ve Metin Özellikleri)

Öncelikle font ve metin özellikleri nedir? diyerek işe başlıycam..

Font özellikleri sayfalarımızdaki metinlerin font ailesini, kalınlık ayarlarını,boyutunu, büyük-küçük harf olmasını ve stilini değiştirmemizi sağlar. CSS fontlar üzerinde tam hakimolmamızı sağlar.

Font özellikleri metni oluşturan karakterlerini nasıl olacağını belirlerken, Metin(Text) özellikleri sayfadaki metinlerin düzenini kontrol eder. Metin özellikleri metin düzeni için çok avantajlı özellikler getirmiştir.

Font Ailesi (“font-family”)

font-family bir öğeye ait yazı tipini seçtiğimiz kısımdır.Bu özellik birden fazla font ailesi ismi içerebilir.Ve her font ailesi virgülle ayrılır..Aşağıdaki iki örnekte yazılar desteklenmezse diğer yazı türlerini deniycektir..

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
}

——————–

h1 {
font-family: Georgia, “Times New Roman”, serif;
}

Font Boyutu (“font-size”)

Font Boyutu metnin boyunu ayarladığımız kısımdır.Boyutu piksel ‘px’,yüzde olarak ‘%’ ya da ’em’ ile belirtebiliriz. Örneğimiz..

body {font-size:100%;} // varolan font boyutunun tamamını(%100) kullan.
h1 {font-size:2.5em;} // h1 için font boyutu(2.5em=2.5*16px =40px)belirler.
h2 {font-size:25px;} // h2 için font boyutu(25px) belirler.

2014-07-01_15h52_50

Tablo 2.2: Font-size özelliğinin alabileceği değerler tablosu

Font Kalınlığı (“font-weight”)

Font kalınlığınde ise incelik,kalınlık değerini belirlemeye yarar..Örneğimiz

p{ font-weight: bold; }  paragraf’taki herşey kalın olur.

Font Stili (“font-style”)

Metni eğik,italik az eğik veya normal yapmak için yani metnin stilini belirler..Örnek

p { font-style:normal; } // Metin normal görünür.
p { font-style:italic; } // Metin italik yani eğik yazı olarak görünür.
p { font-style:oblique; } // Metin az eğik görünür(Çok fazla desteklenmez.).

Mesafe için line-height: kullanılır. line-height ile satırlar arası açılır..Kısacası Açıklarsak..

font: font-style font-weight font-size/line-height font-family;
Örnek olarak aşağıdaki özellikler olsun;
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 12px;
line-height: 15px;
Kısaltma olarak kullanılan kod ise tek satır;
font: bold 12px/15px verdana, sans-serif;

Metin (Text) Özellikleri

Metne ait özellikleri işliyceğimiz kısım burası.Rengi hizalaması font büyüklüğü vs vs..

Metin Rengi (“color”)

Metin Rengi yukarda anlatıldı. color işaretinde rengi 3 şekilde belirleriz.

 h1{ color: #449BDB; }
p { color:black; }
h2{color: rgb(255, 0, 0);}

Metin Hizalama (“text-align”)

Metinlere bu özellikle sağa sola iki yana ortalama vs işlemleri yaparız.

text-align:left; (Metni sola hizalamak için kullanılır.)
text-align:center; (Metni ortaya hizalamak için kullanılır.)
text-align:right; (Metni sağa hizalamak için kullanılır.)
text-align:justify; (Metin içeriğinin sağ taraftan kalan boşluklarını tamamlar, okumayı kolaylaştırır. Gazete ve magazin dergilerinde olduğu gibi.)

Metin Dekorasyonu (“text-decoration”)
Genellikle bağlantıların (link) altındaki çizgileri kaldırmakla birlikte metinlerin üst tarafını çizmeyi, altını çizmeyi, üzerini çizmeyi ve onlara yanıp sönme (blink) efekti vermeyi sağlar.
text-decoration:none; (Genellikle a etiketine uygulanır, çizgiyi kaldırır.)
text-decoration:underline; (Metni altı çizili yapar.)
text-decoration:overline; (Metnin üst tarafını (tepesini) çizili yapar.)
text-decoration:line-through; (Metnin üzerinden (ortasından) çizgi geçirir.)
text-decoration:blink;(Metnin yanıp sönmesini (bir görünüp bir görünmemesi) sağlar.)

Metin Dönüşümü (“text-transform”)

Bir metindeki tüm harfleri büyük veya küçük harf yapabilir veya en baştaki harfi büyük harfe çevirebilir.

text-transform:uppercase; (Metindeki tüm harfleri büyük harfe çevirir.)
text-transform:lowercase; (Metindeki tüm harfleri küçük harfe çevirir.)
text-transform:capitalize; (Metindeki kelimelerin ilk harflerini büyük hale çevirir.)

3-Kutu Modeli Özellikleri

Tablosuz tasarımların gereklilik kazandığı günümüzde,bu iş için esas etiket “<div>” etiketidir.Div etiketleri sayesinde istediğimiz kutu modellemelerini gerçekleştiriyoruz. Ayrıca istediğimiz ögenin etrafını istediğimiz biçimde sarabiliyoruz ve bu kutuların kendi içlerinde ve kendi aralarındaki düzenini stil şablonları uygulayarak ayarlayabiliyoruz.

Kutu modeli şu üç ana ögeden oluşur;

margin (kenar dışı boşluğu)
 border (kenar kalınlığı)
 padding (kenar içi boşluğu)

2014-07-01_17h26_36

a-Kenar Dışı Boşluğu Özellikleri

Turuncu renk ile sınırları belli olan kutumuzun diğer ögelerle arasındaki mesafeyi belirleyen ‘margin’ ögesinin alt elemanları şunlardır;
margin-top (üst kenar dışı boşluğu)
margin-right (sağ kenar dışı boşluğu)
margin-bottom (alt kenar dışı boşluğu)
margin-left (sol kenar dışı boşluğu)
margin (kenar dışı boşlukları) (Kısaltma amaçlı kullanılır.)

Örnek: body { margin-top: 80px } // Sayfamızın üst kenar dışı boşluğu 80 px olsun..

Kısaltma işlemi (Margin..)

2014-07-04_17h44_15

margin:25px 50px 75px 100px; (üst 25px, sağ 50px, alt 75px, sol 100px olur.)
margin:25px 50px 75px; (üst 25px, sağ ve sol 50px, alt 75px olur.)
margin:25px 50px; (üst ve alt 25px, sağ ve sol 50px olur.)
margin:25px; (Tüm kenar dışı boşlukları 25px olur.)

b-Kenar Çizgisi Özellikleri

Kenar çizgisi özellikleri ile kenar çizgisinin biçemini, rengini ve kalınlığını ayarlanabilir. Tüm kenarlara veya ayrı ayrı her kenara bu ayarları uygulayabiliriz. Bu özellikler şunlardır;
 1-border-style (kenar çizgisi biçemi)

  •  border-top-style (üst kenar çizgisi biçemi)
  •  border-right-style (sağ kenar çizgisi biçemi)
  •  border-bottom-style (alt kenar çizgisi biçemi)
  •  border-left-style (sol kenar çizgisi biçemi)

2-border-width (kenar çizgisi genişliği-kalınlığı)

  •  border-top-width (üst kenar çizgisi genişliği)
  •  border-right-width (sağ kenar çizgisi genişliği)
  •  border-bottom-width (alt kenar çizgisi genişliği)
  •  border-left-width (sol kenar çizgisi genişliği)

3-border-color (kenar çizgisi rengi)

  •  border-top-color (üst kenar çizgisi rengi)
  • border-right-color (sağ kenar çizgisi rengi)
  • border-bottom-color (alt kenar çizgisi rengi)
  • border-left-color (sol kenar çizgisi rengi)

border (Kısaltma işlemleri için kullanılır.)

 1-Kenar Çizgisi Biçimi..(“border-Style”)

Kenar çizgisinin nasıl olacağını (noktalı, kesik kesik, düz, çift, vb.) belirler. Herhangi bir değer yazılmadığı zaman ‘none’ varsayılan olarak geçerlidir.

2014-07-04_17h57_33

Yukardakilere göre kenar çizgimizi biçimlendirebiliriz.Mesela Bir örnek yapsak bunla ilgili.Tek yapmamız gereken border-top-style:solid;border-right-style:double gibi seçmek olcaktır.

2-Kenar Çizgisi Genişliği(“Border-WItdh”)

“border-width” özelliği kenar çizgisinin genişliğini (kalınlığını) ayarlamak için kullanılır. Genişliği ayarlamak için piksel (px) olarak değer verebilir veya aşağıdaki değerleri kullanabiliriz.
thin (ince)
 medium (orta)
 thick (kalın)

3-KENAR ÇIZGISI RENGI(“border-color”)

Kenar çizgisi rengi ile kenar çizgilerine renk verebiliriz.Bunun için “border-color” kullanılır.Ve yukarda belirttiğimiz renk kodları ile işlem yapılır..

4-Kısaltma İşlemi (Border)

Yukardaki 3 özelliği border ile kısaltabiliriz.Kullanımı;

Örnek: Kenar çizgi genişliği 1px, düz ve rengi de #F60 olsun.
.border_1{ border 1px solid #F60 ;}

 

Post Author: umiitkose

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">