Neler yeni

Yeni mesajlar Yeni konular En çok mesaj En çok tepki En çok görüntülenen

css hakkında yardım bekliyorum....

makbulecelik34

🏅Acemi Tasarımcı🏅
Katılım
12 Şub 2008
Mesajlar
51
Tepkime puanı
1
Yaş
37
slm arkadaşlar css dersi görmeye başladım ama bir sorunum var kodlamalarda kullanılan terimlerin anlamlarını bilmediğim için aklımda tutamıyorum ve böylece olmuo işte yaa örg derste anlatıyor
<span class="ortala">buraya yazı</span>
bunu yaptım ama yazıyı ortalar sayfaya göre diye düşündüm ama olmadı işte ben span ne demek onu ögrenmek istiyorum araştırdım bulamadım css terim anlamları ile ilgili elinde kaynagı olan arkadaişlarım paylaşım yaparsa sevinirim şimdiden teşekkürler....
 

makbulecelik34

🏅Acemi Tasarımcı🏅
Katılım
12 Şub 2008
Mesajlar
51
Tepkime puanı
1
Yaş
37
arkadaşlar size sordum kendim buldum madem buldum paylaşayım dimi...

LİNK ÖZELLİKLERİ

a :Linkin, sayfa açıldığında tıklanmadan veya ümleç ü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.


BİÇİMLENDİRME:

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.

LİSTE ÖZELLİKLERİ

disk:Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.

KATMAN ÖZELLİKLERİ

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ı belirtir.


FONT ÖZELLİKLERİ

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.

TEXT ÖZELLİKLERİ

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.

İMLEÇ ÖZELLİKLERİ

crosshair:İmlecin artı işareti şeklinde olmasını sağlar.
auto:İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
default:İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
hand:İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
move:İmlecin taşıma işareti şeklinde olmasını sağlar.
ne-resize:İmlecin sağa yatık normal ok olmasını sağlar.
nw-resize:İmlecin sola yatık normal ok olmasını sağlar.
se-resize:İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
sw-resize:İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
n-resize:İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
s-resize:İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
w-resize:İmlecin sola doğru ince ok şeklinde olmasını sağlar.
e-resize:İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
text:İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
wait:İmlecin meşgul animasyonuna dönüşmesini sağlar.
help:İmlecin yardım-soru işaretine dönüşmesini sağlar


ZEMİN ÖZELLİKLERİ

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.


TABLO ÖZELLİKLERİ

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...


KAYDIRMA ÇUBUĞU ÖZELLİKLERİ

scrollbar-face-color :Kaydırma çubuğunun yüzey rengi , aynı zamanda zemini de etkiliyor.
scrollbar-base-color :Kaydırma çubuğununun sol ve üst kenarlıklarını çizgi halinde kaplıyor.
scrollbar-shadow-color :Sağ ve alt kenarlıkların gölge rengi.
scrollbar-highlight-color :Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor.
scrollbar-arrow-color :Yön oklarının rengi
 

damla1

Kreatif Stratejist
👑Efsanevi Grafiker👑
Katılım
2 Ağu 2008
Mesajlar
5,055
Tepkime puanı
110
faydalı bilgiler paylaştığın için teşekkürler...
 

XpAteS

🌱Yeni Üye🌱
Katılım
18 Ocak 2009
Mesajlar
13
Tepkime puanı
0
CSS Nedir?



CSS = Cascading Style Sheet



CSS bir html dokümanının stilin oluşturmaya yarar. Tüm dokümanın stilini ayarlayabileceğimiz gibi bir linkin, bir resmin veya bir yazınında stilleri örnek olarak rengi, yazı türü css aracılığıyla ayarlanabilir.



CSS kodlar html kodlarının içine yazılabilirler, fakat bunun haricinde dışta bir css dosyası oluşturabilir ve bu css dosyasını html sayfanıza entegre edilebilir.



Örnek Kodlar



body { margin:0px;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

background-color: #ffffff;

background-repeat: repeat-x;

background-image: url(images/index_01.jpg );

font-size: 11px;

font-family: tahoma;

}



Yukarıdaki örnekte tüm sayfanın ( body ) nin kenar boşluklarını 0 verip, arka plan rengini beyaz( #ffffff ), arka planı sadece sağa doğru tekrar etmesini, arka plan resmini ( images/index_01.jpg ), dokümanın yazı tipini tahoma ve boyutunu 11 px olarak belirledik.




a:link {color: #FF0000} /* ziyaret edilmemiş link */
a:visited {color: #00FF00} /* ziyaret edilmiş link */
a:hover {color: #FF00FF} /* mouse üzerine gelince link */
a:active {color: #0000FF} /* seçilen link */

Yukarıdaki örnekte sayfaki tüm verilen linklerin ( yazı olarak verilen linklerin )
özelliklerini değiştirdik.



td

{

font-family:tahoma,Verdana, Arial, Helvetica, sans-serif;

font-size:13px;

color:#333333;

text-decoration:none;

}



Yukarıdaki örnekte sayfadaki tüm td lerin yani kolonların özelliklerini değiştirdik.





.dokumanlink

{

font-family:tahoma,Verdana, Arial, Helvetica, sans-serif;

font-size:13px;

color:red;

text-decoration:none;

}





.dokumanlink:hover

{

font-family:tahoma,Verdana, Arial, Helvetica, sans-serif;

font-size:13px;

color:black;

text-decoration:none;

}



Yukarıdaki örnekte kendimiz dokumanlink adında bir stil oluşturduk. Bu stilin hem mouse üzerine gelince ( hover ) özelliğini hemde diğer özelliklerini atadık.
 

XpAteS

🌱Yeni Üye🌱
Katılım
18 Ocak 2009
Mesajlar
13
Tepkime puanı
0
Sen Yazıyı ortalamakmı İstıyorsun ?
 

dizaynplus

⭐Deneyimli Tasarımcı⭐
Katılım
13 Tem 2008
Mesajlar
244
Tepkime puanı
6
yazıyı en basit olarak ortalamak isterseniz.. <p align="center">yazı buraya </p> şimdi burada alt satıra geçersiniz. Span yerine <p> kullanmanızı tavsiye ederim. eğer css sistemi ile ortalamak isterseniz bir katman kullanmanız şart örneğin body de ortalama için hazır kod

<style>
<!--
body { text-align: center }
-->
</style>

olmalı.. iyi çalışmalar. Eğer css kitabı isterseniz elimde birtane kendi çalışmalarımın olduğu bir kitap var.
 

sevimsli

🌟Usta Tasarımcı🌟
Katılım
5 Ara 2008
Mesajlar
273
Tepkime puanı
8
HTML <span> Tag aynı zamanda css içinde kullanılır .

<p>Grafikerler <span class="blue">net</span>.</p>
1-Span ların arasına konulan text görüntüsünü değiştirebilirsiniz..
2-Tag olarak kullanılan kelimelerin yer imlerini şekil olarak değiştirilemez şekilde belirginleştirirsiniz.
3-Span arasına görüntüsel olarak css veya javascript manipule entegre edebilirsiniz .Çizgi yada diğer vektörel olguları desteklemez . Desteklemesi için css de yada javascriptte tanımlanması gereklidir..

Peki her türlü şey varken niye spanı kullanıyoruz çünkü bazı css ve javascriptler diğer tarayıcılarda farklılık gösterirken span la manipule edilen css ve javascripler her tarayıcıda aynı şekilde algılanır yani Span her türlü browserı destekler .

Spanını asıl anlamaı bilgisayar teriminden binary kod sisteminde s-pan görüntü biçim şekil değişikliği fizik teriminde ise 0-100psi arasındaki hız durumunda cismin vektörel şeklinin değişikliği , elektroniktedede fiziksel kalibrasyon değişiklikleri anlamına gelmektedir.

Yani her halukarda biçim şekil değişikliği manipule anlamına gelmektedir.
 
Son düzenleme:

sametweb

🌱Yeni Üye🌱
Katılım
21 Ocak 2009
Mesajlar
9
Tepkime puanı
0
Ekbilgi: <p></p> kodu alt satıra geçirir, <span></span> ise yazı aynı satırda devam eder, sadece verdiğiniz değerlere göre yazı stili değişir.
 
Üst