Jan 10

Konumsal özelliklerin ayarlanması

CSS Yorum Yok »

Konumsal özellikler bir elemanın sayfa içerisindeki bulunacağı konum hakkında tanımlamaları yaparlar. Birçok özellik bu bölümde kullanılabilir.

pozition

Yeni konum belirtilen elemanın konum özelliğini belirtir. Alabileceği değerler :

  1. static elemanın sayfa içerisinde bulunacağı doğal sıralamasına göre yerleştirmek için kullanılır.
  2. absolute elemanın sayfa içerisinde verilen konuma yerleştirir. Bu konum diğer sayfa elemanlarından bağımsız bir durum arzeder.
  3. relative elemanı önce gelen elemana göre konumlandırır. Verilen konum değerleri önceki elemana göre atanır.

Okumaya Devam Et »

Jan 10

Kutu özelliklerini kullanma

CSS Yorum Yok »

Bir blok elemanın kenarlara göre uzaklıkları/marj ( margin ) , çerçeve değerleri, içkenarlara olan uzaklıkları ( padding ) gibi değerlerin ayarlandığı özellikleri bu bölümde göreceğiz.

marj özellikleri

Tüm elemanlara uygulanabilen margin özelliği bir elemanın yan kenarlara olan uzaklığını belirlemekte kullanılır, uzunluk ve yüzdelik değerler alabilir. margin-top elemanın üst kenarının bir önceki elemandan ne kadar uzaktan başlayacağını belirler. Verilen değer kadar üsteki elemandan aşağıda ( eksi değerlerde yukarıdan ) elemanı başlatır.

    Okumaya Devam Et »

Jan 10

Metin özelliklerini denetleme 2

CSS Yorum Yok »

text-indent bir blok elemanının ilk satırında bir metin girintisi sağlar. Değer olarak uzunlu veya yüzdelik alabilir. Varsayılan değer sıfırdır ( 0 ) ve bir girinti yoktur.


P { text-indent: %5;}
DIV { text-indent: 1cm;}

Bu paragrafta ilk satır girintisi 3 santim olarak ayarlandı. Bu değer sadece ilk satırı etkileyecektir. Diğer satırlar normal değerden gösterilmeye başlayacaklardır. text-indent değeri negatif verilirse satır normal satırdan daha verilen değer kadar önce başlayacaktır.

Okumaya Devam Et »

Jan 10

Metin özelliklerini denetleme

CSS Yorum Yok »

Metin özellikleri paragraf gibi block elementler içerisindeki metinleri düzenlemekte kullanılırlar. Metinin hizalanması, kelimeler arasındaki boşluk gibi değerler üzerinde denetim sağlarlar.

word-spacing

Kelimeler arasındaki boşluğu ayarlamakta kullanılır. normal değeri ile hiçbir etki yapmaz, fakat bir değer girildiğinde bu değerde kelimeler arasında boşluk bırakır. Verilebilecek değer pixel (px), punto (pt), em veya santimetre (cm) olabilir. IE4.x, IE5.x ve Netscape 4.x bu özelliği desteklemiyor. Opera 3.5 ve yukarısı, IE6.x ve NS6.x desteklemektedir.



 Okumaya Devam Et »
Jan 10

Yazı fontu ayarlamaları

CSS Yorum Yok »

CSS ile fontların bir çok özelliği ayarlanabilir, font tipi, font büyüklüğü gibi. Bunun için birkaç font özelliğini kullanacağız.

font-family

Font tipini belirtmekte kullanılır Arial gibi bir font tipi veya Serif gibi bir font ailesi ismi verilebilir. Ayrıca birkaç font tipi sırasıyla verilebilir. Böylece eğer istenilen font bulunamazsa diğer font kullanılacaktır. Yine bir font ailesi ismi verilerek gerekirse buradan bir font seçilmesi sağlanabilir. Eğer font ismi arasında boşluk varsa tırnak içerisinde yazılmalıdır.


DIV { font-family:"Times new roman",times;}
BODY {font-family:Arial,Helvetica,Sans-serif;}

font-size

Font büyüklüğünü belirtmek için kullanılır. Birkaç şekilde font büyüklüğü belirtilebilir. Bunlar :

  1. Göreceli olarak fontun büyüklüğünü artıran lager, ve font büyüklüğünü bir azaltan smaller.
  2. Yine font tablosundaki xx-smal, x-small,small,medium,large,x-large,xx-large değerleri iled font büyüklüğü ayarlanabilir. Burada küçükten büyüğe doğru sıralama yapılmıştır.
  3. Değer olarak font büyüklüğü verilebilir.
  4. Yüzdelik olarak font büyüklüğü değiştirilebilir.

P {font-size: x-small;}
BODY {font-size:larger;}
.aciklama { font-size:10;}
#baslik { font-size: 200%;}



font-weight


Font ağırlığını/koyuluğunu belirler. Alabileceği değerler 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder ve lighter dir. Burada rakamsal değerler sırasıyla koyuluk en azdan en fazlaya şeklindedir. bold değeri <B> tagına eşdeğer bir sonuç verir. bolder değeri koyuluğu bir değer artırır, lighter değeri koyuluğu bir azaltır.


H1 {font-weight:800;}
.aciklama { font-weight:bolder;}
#menu { font-weight : bold;}






font-style


Fontun sitilini belirtir. Alabileceği değer normal, italic ve oblique dir. Normal değerinde font olduğu gibi görünür. italic ve oblique değerleri ise fontu yatık gösterirler.



P { font-style:italic; }
.aciklam { font-style:normal;}






font-variant


Font ailesinin bir varyasnonunu seçer. İki değer alabilir; normal ve small-caps. İkinci değer font büyüklüğünü azaltır ve büyük harf kipinde yazdırır.




font


Font özelliklerinin kısa tanımlanmasını sağlar. Sırasıyla font-style, font-variant, font-weight, font-size/line-height, font-family değerlerini alır. Kullanılmayan özellik için varsayılan değer kullanılır. Font-size ve lin-height değerleri aralarında ( / ) bölü işareti ile birlikte kullanılır. Line-height özelliği ile iki satır arasındaki mesafe belirtilir.



P { font : normal small-caps 500 12/1 serif;}
P { font : italic 400 Arial;}
DIV { font : 12 fantasty;}
Jan 10

Arkaplan / zemin resmi ayarlaması için ek özellikler

CSS Yorum Yok »

Kullanılan zemin resminin sayfa kaydırıldığında sayfa elemanı ile birlikte kaydırılması veya sabit kalmasını denetler. İki değer alabilir scroll arkaplanın sayfa ile birlikte kaydırılmasını sağlar. Bu değer vardayılan değerdir, fixed arkaplan resminin sayfa kaydırılsa bile yerinde kalmasını sağlar. Bu özellik kullanıldığında sayfa içeriği arkaplan resmi üzerinden kayarak hareket eder.



<DIV STYLE=”background-image:url(zemin.jpg);

	background-attachment:scroll;”>

	Bu alanda kullanılan zemin resmi kayabilir.


 Okumaya Devam Et »
Jan 10

Bir taga arkaplan/zemin resmin yerleştirilmesi

CSS Yorum Yok »

Bir elamana zemin resmi yerleştirmek için birçok özellik geliştirilmiştir. Bunlar arkaplan resminin nasıl kullanılacağını belirlemeye yarar. Şimdi bu özellikleri inceleyelim :

background-image

Bir elemana zemin resmi yerleştirmekte kullanılır. Bu özellikle birlikte resmin tam veya göreceli adreside verilmek zorundadır. Kullanımı :


	background-image:url(resmin_adresi);

şeklindedir. Şimdi bir DIV tagına zemin resmi yerleştirelim.


<DIV STYLE="background-image:url(zeminresmi.jpg);">
	Bu yazı bir zemin resmi üzerine yerleştirilmiştir.
	Kullanılan zemin resmi eğer bu alandan küçükse zemin
	doldurulana kadar tekrarlanacaktır.
	<P>Eğer arkaplan resmi bu alandan büyük ise
	resmin bu alana sığan kısmı gösterilecektir.
</DIV>

Şimdide yukarıdaki örneğin sonucunu görelim.

Okumaya Devam Et »

Jan 10

Renk özelliklerini ayarlamak

CSS Yorum Yok »

CSS kullanılarak istenilen elemanların önplan renkleri kolaylıkla değitirilebilir. Bunun için kullanılan özellik color özelliğidir. Bu özelliğe tanımlı olan 16 renk adı ( aqua, black, blue, funchsia, gray, green, lime, moroon, navy, olive, purple, red, silver, teal, white ve yellow ) veya onaltılık rgb değeri kullılabilir.Örnek kullanımları ve sonuçları aşağıdadır.


B tagına <B STYLE="color:red">kırmızı</B> rengin uygulanması.

Sonucu ise :

B tagına kırmızı rengin uygulanması.


DIV tagına
	<DIV STYLE="color:#0000FF">mavi</DIV>
rengin uygulanması.

Sonucu ise :

DIV tagına

mavi

rengin uygulanması.

Jan 10

Harici sitil dosyalarının kullanılması

CSS Yorum Yok »

Hazırlanmış sitil dosyalarının herhangi bir sayfa içerisine yerleştirilmesi için mutlaka bu sayfa içerisine yazılması gerekmez. Bunun yerine bu sitil dosyasına bir link vermemiz yeterlidir. Böylece bu sitil sayfası browser tarafından yüklenerek içerisindeki sitiller kullanılabilir.Böyle bir kullanım bize site içerisindeki tüm sitillerin bir dosya içerisinden denetlenmesini ve istendiğinde tek bir dosyanın değiştirilerek bu dosyanın kullanıldığı tüm sayfaların sitillerinin değiştirilmesi sağlanabilir. Bunun için <LINK> tagını kullanıyoruz. Bu tagın kullanımı :


<LINK REL="stylesheet" href="sitilin_bulunduğu_dosya"
	TYPE="text/css">

şeklindedir. Burada HREF özelliği ile sitil dosyasının tam veya göreceli adresi verilmektedir. Sitil dosyaları css uzantılı olarak kayıt edilen düz yazı dosyalarıdır.

Şimdi bir örnek ile harici sitil dosyalarının kullanımını görelim.



.onemli


 Okumaya Devam Et »
Jan 10

Tagların sitillerinin değiştirilmesi

CSS Yorum Yok »

Eğer sayfanızda kullanılan tagların sitillerini değitirmek istiyorsanız istediğiniz tag için bir sitil oluşturabilirsiniz. Mesela <B> tagının font büyüklüğünü bir basamak artırmak isterseniz :


<STYLE>
<!--
B {
	font-size:lower;
  }
// -->
</STYLE>

Şeklinde bir ifade kullanmanız yeterlidir. Bu sitil tanımı sonucunda sayfa içerisindeki tüm <B> tagları normal font büyüklüğünün bir üstündeki font büyüklüğü ile gösterilecektir.


<STYLE>
<!--
H1 {
	background-color:black;
	color:white;
  }
// -->
</STYLE>
Önceki Sonraki
Wordpress Themes Copyright © 2007 Php & Resources. All rights reserved. website stats wbturk.com Genel Ziyaretci istatiskleri www.http://pr-4.com
eXTReMe Tracker