• Bu site çerezler kullanır. Bu siteyi kullanmaya devam ederek çerez kullanımımızı kabul etmiş olursunuz. Daha fazla bilgi edin.

Basit CSS Kodları - Ders 1

Konuyu Okuyan Kişiler (0)

Katılım
6 Ağu 2012
Mesajlar
1,672
Beğeniler
0
Konum
Webmaster.TC
#1
Merhaba arkadaşlar. Bu yazımda daha önceden CSS’ye sıfırdan başlayacak olan arkadaşlara yardımı olacak bir konuya değinmek istedim. CSS’de bildiğimiz, bilmediğimiz bir sürü komut var. Bazen sitede CSS nedeniyle herhangi bir kayma oluyor. Bilmediğimiz ama daha önceden kaymayı düzelten bir kodu hatırlayıp ekliyoruz. Kayma düzeliyor. Fakat aklımıza şu soru takılıyor: “Bu komut ne işe yarıyordu da kaymayı düzeltti?”. Bu yazı serisinde CSS komutlarını iyice açıklayacağım.
Bu yazımızda basit bir sayfa hazırlamaya başlarken kullandığımız komutlardan bahsedelim.​
body {
background: #fff url((resimler/arkaplan.png) repeat;
font: italic bold 14px Verdana;
color: #333;
}
body etiketi ingilizce anlamında olduğu gibi sayfanın “vücut” bölümüdür. Yani görünürde ne varsa bu bölüme eklenir. Bu nedenle sayfanın tümü bu etikete verdiğimiz değerler belirlenir. Arkaplan, yazı boyutu, yazı tipi gibi…​
Şimdi de komutları inceleyelim:​
background: #fff url(resimler/arkaplan.png) repeat;
background komutu arkaplanı çağırır.​
Bunun karşısındaki #fff (beyaz) değeri arkaplanın renk kodudur.​
url(resim-adresi) bölümü ise resmin URL adresi anlamına gelir. Oraya hangi resim adresini girerseniz arkaplanınız o resim olarak görünür.​
repeat ise tekrar etmek anlamına gelmektedir. Yani resminizin 100×100 piksel boyutlarında olduğunu hayal edin. Bir adet papatya olan bir resim. Eğer siz resmin adresini girdikten sonra repeat komutunu eklerseniz resim edebildiği kadar tekrar eder. Sayfanız sonlanana kadar.
Bir resmi tekrar ettirmenin diğer türleri de şöyledir: repeat-x komutunu girerseniz resim sadece yatay olarak tekrar eder. repeat-y komutunu girerseniz sadece dikey olarak tekrar eder. no-repeat derseniz hiç tekrar etmeyecektir.​
font: italic bold 14px Verdana;
font komutu yazı tipi ile ilgili her şeyi kapsar. eğikliği, kalınlığı, boyutu ve hangi yazı tipi olduğu gibi…​
italik eğikliktir.​
bold kalınlıktır.​
14px yazı tipinin boyutunu belirtir.​
Verdana ise seçilen yazı tipinin adıdır.​
color: #333;
color komutunun karşısındaki renk kodu yazının rengini belirler.​
.sayfa {
width:600px;
height:300px;
border: 1px solid #666;
background:#ccc;
text-transform: lowercase;
}
width genişliği, height de yüksekliği.​
border çerçeve anlamına gelir. 1px değeri ne kadar kalın olacağını, solid değeri çizginin şeklini (kesik, noktalı v.b), #666 ise rengini belirler.​
Diğer çerçeve stillerine şuradan bakabilirsiniz.​
text-transform yazıyı dönüştürme komutudur. Tümünü küçük harfe dönüştürmek için lowercase, büyük harfe dönüştürmek için uppercase kullanılır.


Emeği geçenlere teşekkürler
 
Katılım
6 Ağu 2012
Mesajlar
1,672
Beğeniler
0
Konum
Webmaster.TC
#3
Her şey güzelde neden ortaladın yazıların hepsini :)
Kod eklentisi işe yaramıyor. Satırlar bozulmasın diye bu şekilde ekledim. Direk php tagını kullanınca tek bir satır olarak gösteriyor. Ortalayınca pek birşey değişmedi aslında kodlar belli aynı işlem sorunsuz halledilebilir diye düşündüm. Ama sorun ise kodları sola yatırabiliri tabiki?
 

proghammer

webmaster.tc
Katılım
6 Ağu 2012
Mesajlar
517
Beğeniler
0
Konum
WebMaster
#4
kodları text area dediğimiz alanda paylaşırsanız daha iyi olur forum formatında bazı kodlar değişebiliyor o yüzden dikkatli olalım bundan sonra..

Paylaşım için teşekkürler..
 

nukeci

webmaster.tc
Katılım
8 Ağu 2012
Mesajlar
172
Beğeniler
0
#5
kodları text area dediğimiz alanda paylaşırsanız daha iyi olur forum formatında bazı kodlar değişebiliyor o yüzden dikkatli olalım bundan sonra..

Paylaşım için teşekkürler..
Ellerinize sağlık sizler sayesinde WMTC de olmaktan gurur duyuyorum (da) arkadaş paylaşıyor, sende hoca edasıyla çıkışmışsın :) Bundan sonra dikkatli olalım hımmm ! Birbirimizi üzmeyelim bu forum hep böyle aile olarak kalsın ne kadar büyürse büyüsün yine de bir aile olsun. Konuyu paylaşana da, katkıda bulananada teşekkür ederim. Yönetim adına :)
 

proghammer

webmaster.tc
Katılım
6 Ağu 2012
Mesajlar
517
Beğeniler
0
Konum
WebMaster
#6
Ellerinize sağlık sizler sayesinde WMTC de olmaktan gurur duyuyorum (da) arkadaş paylaşıyor, sende hoca edasıyla çıkışmışsın :) Bundan sonra dikkatli olalım hımmm ! Birbirimizi üzmeyelim bu forum hep böyle aile olarak kalsın ne kadar büyürse büyüsün yine de bir aile olsun. Konuyu paylaşana da, katkıda bulananada teşekkür ederim. Yönetim adına :)
15 yıllık sanal hayatımda hep hocalardan ders gördüm.. Yaşım 27 halada görüyorum.. Ama ders alması gerekene de ders vermek lazım sayın nukeci :)

Cetveli uzatırım ekrandan beni dinlemeyene :D

Bizler de burada olmaktan gayet mutluyuz. Adil ve huzurlu bir ortam oluşturduğunuz içinde biz teşekkür ederiz..