CSS Kodlari ve Özellikleri "Yeni Başlayanlara Özel"

MasterBora

Moderator
Katılım
24 Nis 2010
Mesajlar
171
Tepkime puanı
0
Puanları
0
Yaş
40
Konum
Istanbul
Web sitesi
www.pikselplus.com
Merhaba Arkadaşlar

Forum'da Elimden Geldiğince Birşeyler Paylaşmaya Çalışıyorum. Konuları Özenle Seçiyorumki Faydalı Olsunlar. Kuru Kalabalık Yaratmaktansa Az Ama Öz Konu Başlıklarla Yarlı Olmak Benim için En Güzeli.

OpenCart Temamızı Editleyebilmemiz için Öncelikle CSS Dosyasına Müdahele Etmemiz Gerekiyor. Size Tek Tek Şunu Şöyle Yaparsanız Bu Olur Bunu Böyle Yaparsanız Böyle Olur Diye Anlatmayacağım. Çünkü Böyle Alatırsam Sadece Ezber Olur. Ben CSS Terimlerinin Ne Anlama Geldiğini Yazacağım Yani Olayın Kaynağını..

Başlayalım :

1 - CSS'te Link Özellikleri :

a : Linkin, Sayfa Açıldığında Tıklanmadan veya Imleç Üzerine Getirilmeden Önceki Durumudur.
a:hover : Linkin Imleç Üzerine Getirildiğindeki Durumudur.
a:active : Linkin Tıklandığı Andaki Durumudur.
a:visited : Linkin Tıklandıktan Sonraki Durumudur.

Biçimlendirme :

color : Linkin Rengini Belirler.
background-color : Linkin Zemin Rengini Belirler.
background-image : Linkin Zeminine Resim Ekler(Bu animated-gif de olabilir.)
text-decoration : Linkin Altının, Üstünün vs. Çizgili Olup Olmayacağını Belirler.
font-weight : Yazının Kalınlık veya Inceliğini Belirler.
border : Linkin Etrafına Kenarlık Ekler.
display : Linki Içeren Hücre , Satır vb. Istenilen Alanın Seçilmesini Sağlar


NOT : Kullanılabilecek Bir Kaç Örneği Yukarıda Belirttim. Ancak "font" , "text" , table" vs. için Kullanılabilen Pek Çok Parametre "a" için de Kullanılabilir. Gerisi Biraz da Sizin Yaratıcılığınıza kalıyor.

2 - CSS'te Katman Özellikleri :

position : Katmanın yerinin belirlenmesini sağlar.
absolute : Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative : Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
static : Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
top : Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
left : Katmanın soldan ne kadar içeride olması gerektiğini belirler.
width : Katmanın genişliğinin ne kadar olacağını belirler.
height : Katmanın yüksekliğinin ne kadar olacağını belirler.
overflow : Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto : Otomatik olarak belirlenir.
scroll : Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
hidden : Sığmayan yerleri gizler.
visibility : Katmanın görünebilirlik ayarını yapar.
visible : Katmanın görünür olmasını sağlar.
hidden : Katmanı gizler.
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirti

3- CSS'te Font Özellikleri :

Font-Family: Yazı türünü belirler.(Arial , Verdana gibi.).
Font-Style: Yazının normal veya sağa eğik olmasını sağlar.
Font-Variant: Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
Font-Weight: Yazının kalınlık-inceliğini belirler.
Font-Size: Yazının büyüklüğünü belirler.

4- CSS'te Text Özellikleri :

word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar

5 - CSS'te Backraound (arkaplan) Özellikleri :

background-color: Zeminin rengini belirler.
#color : Renk adı.
transparent: Zeminin saydam olmasını sağlar.
background-image: Zemine resim yerleştirilmesini sağlar.
url : Zemine yerleştirilen resmin adresi.
background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.
repeat : Resmin bütün zemine yayılmasını sağlar.
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
top : Resmi yukarı yerleştirir.
center : Resmi ortalar.
bottom : Resmi aşağı yerleştirir.
left : Resmi sola yerleştirir.
right: Resmi sağa yerleştirir.
...px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.

6 - CSS'te Tablo Özellikleri

margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.
padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
border : Tablonun kenarlarının şekillendirilmesini sağlar.
border-top : Tablonun üst kenarının şekillendirilmesini sağlar.
border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.
border-width : Tablonun kenarlarının kalınlığını belirler.
border-top-width : Tablonun üst kenarının kalınlığını belirler.
border-right-width : Tablonun sağ kenarının kalınlığını belirler.
border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
border-left-width : Tablonun sol kenarının kalınlığını belirler.
border-style : Tablonun kenarlık türünü belirler.
border-top-style : Tablonun üst kenarlık türünü belirler.
border-right-style : Tablonun sağ kenarlık türünü belirler.
border-bottom-style : Tablonun alt kenarlık türünü belirler.
border-left-style : Tablonun sol kenarlık türünü belirler.
border-color : Tablonun kenarlarının rengini belirler.
border-top-color : Tablonun üst kenarının rengini belirler.
border-right-color : Tablonun sağ kenarının rengini belirler.
border-bottom-color : Tablonun alt kenarının rengini belirler.
border-left-color : Tablonun sol kenarının rengini belirler.
color : Tabloda geçen metnin rengini belirler.
width : Tablonon genişliğini belirler.
height : Tablonun yüksekliğini belirler.


NOT : Başlık "TABLO" olarak verildi Ancak bu nitelikler başta TD , TR , TH vs. olmak üzere hemen her etiket için kullanılabilir. CSS' yi özel kılan da zaten bu...

Yukarıda görüldüğü gibi kenarlıklar istenirse tek bir paramatre ile veya daha ayrıntılı bir şekillendirme yapmak istiyorsak birden çok parametre ile şekillendirilebilir.Örneğin bütün kenarlar için aynı ayarların (Renk , kalınlık , kenarlık türü) kullanılmasını istiyorsak : " border : 1px solid black " şeklinde bir defada biçimlendirme yapabiliriz. Ayrıntılı biçimlendirme içinse üst , sağ, alt ve solun renk , kalınlık ve kenarlık türü için ayrı ayrı parametreler kullanılabilir.



Katkılarından Dolayı Bahar Hanım'a Teşekkürlerimi Sunarım...
 

admin

Administrator
Yönetici
Katılım
13 Ağu 2009
Mesajlar
3,196
Tepkime puanı
1
Puanları
38
Yaş
37
Konum
Bursa
Web sitesi
www.opencart-tr.com
Kendi temasını yapmak isteyenler bunları öğrenseler varsayılan temadan ya da ücretsiz dağıtılan temalardan kurtulurlar kendi temalarını yaparlar :)
 

vivagk

OpenCart-TR
Katılım
7 Ağu 2010
Mesajlar
4
Tepkime puanı
0
Puanları
0
Güzel bir çalışma, uygulamaya çalışacağım.
 

zum2002

OpenCart-TR
Katılım
25 May 2010
Mesajlar
7
Tepkime puanı
0
Puanları
0
Selam arkadaşlar.
Anasayfadaki ara butonunun yanında tüm kategorilerdeki "select" butonunun rengini (mavi) nasıl değiştirebilirim temamın rengine uymuyor fazla sırıttı.

"Temanızdaki css dosyasından select ve option sınıflarına renk değeri atayarak değiştirebilirsiniz."
demişsin Admin arkadaşım deneme yanılma yöntemiyle ne yaptıysam olmadı ne kadar select varsa oynadım etrafında nafile :) eklemem gereken kodu ve yerini yazabilirsen ...
 

admin

Administrator
Yönetici
Katılım
13 Ağu 2009
Mesajlar
3,196
Tepkime puanı
1
Puanları
38
Yaş
37
Konum
Bursa
Web sitesi
www.opencart-tr.com
2poodgi.jpg


CSS dosyana bunu ekleyeceksin
select { color:#099; background:#006; }
 

expert

OpenCart-TR
Katılım
3 Mar 2011
Mesajlar
33
Tepkime puanı
0
Puanları
0
Yaş
34
Konum
Ankara
ustat yeni ürünlerdeki yazıyı nasıl sınırlandırabiliriz.
 

soulofthesea

OpenCart-TR
Katılım
18 Nis 2011
Mesajlar
47
Tepkime puanı
0
Puanları
0
Merhaba opencart 1.5.0.5 default temasında logomun boyutunu editledim. çok güzel oldu :) ancak aşağıda sizin için seçtikleerimiz modülünün resimleri logo için verdiğim değerlerden etkilendi ve çok kötü görünüyor. logomun bu halini değiştirmek istemiyorum. sadece logomun değerini diğer modüllerden ayrı kılmak için ne gibi bir kod ya da ayar girmem gerekiyor. ceveplarınız için şimdiden teşekkür ederim iyi çalışmalar.

sitemin adresini de vereyim " e.minabaharat (.) com "

normal html de nasıl yapacağımı koder bir arkadaştan öğrendim. ama onun gösterdiği kod index.html ye giriliyordu. opencartta tpl diye bir sayfa var kod dilini bilmiyorum. arkadaşı da sık boğaz etmek istemiyorum. en azından bir ipucu verseniz ben gerisini halledeceğim. yardımcı olursanız çok sevinirim.
 

ucuzcdkey

OpenCart-TR
Katılım
2 Kas 2011
Mesajlar
3
Tepkime puanı
0
Puanları
0
Bilmeyenler için yararlı bilgiler hocam eline sağlık
 

pandor

OpenCart-TR
Katılım
1 Kas 2011
Mesajlar
6
Tepkime puanı
0
Puanları
0
eline sağlık hocam gerçekten çok iyi paylaşım
 
Üst