ewt arkadaşlar herkezın basına dert olan style.css elimizden geldigi kadar anlatamaya çalısacagım.


ilk once style.css dokumanını açıyoruz


1 . Bölüm


[code]

/* Normal, standard links. */
a:link
{
color: #xxxxxx;
text-decoration: none;
}
a:visited
{
color: #xxxxxx;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
color: #xxxxxx;
}


[/code]


bole bir kod ne işe yarar hemen solim forumumzda genel olarak link lerın ayarları diye biliriz.


link= forumda yazılan lınklerin rengi ( kotagorinin bolumun isminin rengi vb.)

visited= mause link'in ustundeyken rengi

hover=link tıklandık tan sonrakı rengi

bunlara renkgini degiştirmek için

color: #xxxxxx ( degiştiriyoruz )

text-decoration: nedir ? oda yazıların altını, üstünü, üzerini çizmek veya çizmemek için kullanılan özellik.

- underline > Altı çizili yazı
- overline > Üstü çizili yazı
- line-through > Üzeri çizili yazı
- none > herhangı degişiklik yapılmayan link (çizgili olmayan link)
-blink > Linklerin üzerlerine gelince yanıp sönüyor



2 . Bölüm

[code]
/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
color: #000000;
text-decoration: none;
}
a.nav:hover
{
color: #cc3333;
text-decoration: underline;
}



[/code]

bu kod ise forumuzda link tree nın rengını degiştirir.Hemen ornekle gosterım

[code]
.nav, .nav:link, .nav:visited
{
color: #000000;
text-decoration: none;
}

[/code]
bu kodda link trenın normal de halı ve ziyaret edilince [ fare inleci ustune geldıgı zamankı ] hali


normalda color: #000000[ siyah renk kodu ] iken sıyah olan link tree color:#ff0000 [kırmızı renk kodu] kırmızı olur gosterımı alltakı resımde

[URL=http://imageshack.us]
[URL=http://g.imageshack.us/g.php?h=528&i=linktreefu4.png]



3. bölum


[code]
/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
color: #000000;
font-size: small;
font-family: verdana, sans-serif;
}

/* The main body of the entire forum. */
body
{
background-color: #E5E5E8;
margin: 0px;
padding: 12px 30px 4px 30px;
}




[/code]

bu kodlar ise forumumuzun genel ayarlarınız arka plan yazı rengı,boyutu,tipi ,genişligi ,
[code]

body, td, th , tr
{
color: #000000;
font-size: small;
font-family: verdana, sans-serif;
}
[/code]

[code] color: #000000;[/code]

genel yazı rengı

[code] font-size: small; [/code]


font boyutu bunun ayarlarını 8pt 10pt ve herhangı bır sayıya ayarlaya bılırsınız



[code] font-family: verdana, sans-serif; [/code]

genel yazı tipi



[code]

body
{
background-color: #E5E5E8;
margin: 0px;
padding: 12px 30px 4px 30px;
}
[/code]



[code] background-color: #E5E5E8; [/code]


arkaplan rengı resımde ekleye bılırsınız

resı eklemek için kod :


[code] background: url(images/arkaplan.gif) #E5E5E8 no-repeat; [/code]




#E5E5E8 yine arka plan rengı

repeat ;

-no-repeat tekrar etmez

-repeat-x yatay takrar eder

-repeat-y dikey tekrar eder


[code] margin: 0px; [/code]

[code] padding: 12px 30px 4px 30px;[/code]

bu kodlar kenar larda boşlukar yanı daraltma için kullanılır


Burada mantık sağdan başlayarak saat yönünde yazılır. Aşağıda kısaltma yöntemleri verilmiştir.
[code]
margin: 20px 15px 10px 5px; birinci - üst, ikinci - sağ, üçüncü - alt, dördüncü - sol.

margin: 20px 15px 10px; birinci - üst, ikinci - sol ve sağ, üçüncü - alt.

margin: 20px 15px; birinci - üst ve alt, ikinci - sol ve sağ.

margin: 10px; birinci - üst, sağ, alt ve sol gibi

[/code]



4 . Bölüm

[code]
/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
color: #000000;
font-family: verdana, sans-serif;
}
input, button
{
font-size: 90%;
}

textarea
{
font-size: 100%;
color: #000000;
font-family: verdana, sans-serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
font-size: 90%;
font-weight: normal;
color: #000000;
font-family: verdana, sans-serif;
}



[/code]


forumumuzda kullandıgımz input, textarea, button ların yazı tiplerini , renklerını, arka planlarını ,degiştirmemize yarar

inputlar,butonlar ;

[URL=http://imageshack.us]

vb .
textarea lar :

[URL=http://imageshack.us]
[URL=http://g.imageshack.us/g.php?h=509&i=textareafi4.png]




Alıntıdır

Beğeniler: 0
Favoriler: 0
İzlenmeler: 1244
favori
like
share
wapefade-wp Tarih: 14.03.2011 12:21
satırların ve sutunların kını nasıl degıstırcez?
bozok Tarih: 15.11.2008 13:57
gerçekten çok güzel paylaşım olmuş sagol
mfp Tarih: 20.08.2008 15:20
Teşekkürler