CSS DERSLERİ

21 Tem

1. CSS NEDİR?
CSS (Cascading Style Sheets) HTML sayfasına stil eklemek için kullanılır.CSS çok kullanışlıdır ve kullanımıda çok kolaydır. Fakat şu anda browser savaşları yüzünden hakettiği yere gelemediğinide söylemek istiyorum. Henüz CSS ‘nin bütün özellikleri iki browser tarafından da (explorer ve netscape popüler oldukları için sadece bu iki browserı ele alıyorum) tam olarak desteklenmemekte veya farklı etkiler yapmaktadır. Bunun için burada size CSS’nin kullanımı anlatırken her iki browser tarafından da desteklenen özelliklerini anlatacam.



Sakın CSS’nin çok kolay olduğuna aldanmayın. Kolay olmasına rağmen müthiş esnektir.Bu özelliği sayesinde cok güzel sayfa dizaynları yapılabilmektedir.HTML ile dizayn edemediğiniz veya çok uzun süren sayfa tasarımlarını CSS kullanarak çok kısa bir sürede ve çok daha kolay bir şekilde dizayn edebilirsiniz. Çünkü CSS kullanarak istenirse bir metin,bir html sayfası veya tüm sitenin HTML sayfaları aynı anda değiştirilebilir. Aslında CSS bizim ilk okulda kullandığımız ince seffaf kağıtlara benzetebilir. Adından da anlaşılacağı gibi bu stil kağıtları bilgisayarın hafızasına üst üstte yığılır ve en üsteki işletilir. Bu kağıtlarda bir metnin veya başlığın nasıl olacağı (renginin veya fontunun ne olacağı) veya sayfada nereye yerleştirileceği belirlenebilir. CSS kullanarak daha bir çok özelliği değiştirebilirsiniz.
2. YAZIM KURALLARI
CSS’nin de diğer dillerde olduğu gibi kendine ait bazı yazım kuralları vardır. HTML’de bütün stiller <style></style> etiketleri arasında tanımlanır. Stil tanımlarken seçicileri kullanırız. Seçicilerinde çeşitleri vardır ilerede göreceğiz. Bir seçici tanımlarken, Önce seçicinin adı yazılır (tabiki türüne uygun olarak ilerde göreceğiz) sonra değiştirilmek istenen özellikler ile değerleri köşeli parantez içine alınarak yazılır. Seçicilerin isimler bir rakamla başlıyamazlar. Fakat ilk harften sonra istenirse rakam kullanılabilir. Birde isim seçerken lütfen Türkçe karekter kullanmayın.

.kucukfont { font-size : small } | | |__ deger | | | |__değiştirilmek istenen özellik | |___ seçicinin isimi

Şimdilik bazı terimlerin anlamlarını bilmiyor olabilirsiniz kafanızı fazla takmayın ilerde hepsini anlatacam. Bir köşeli parantezin içinde birden çok özellik tanımlanabilir. Fakat bu özellikleri aralarına noktalı virgül”;” konularak birbirlerinden ayırmanız gerekir.

h1 { font-family : arial ; font-size : small }

Bir stil etiketi içinde istediğiniz kadar seçici tanımlayabilir ve bunları HTML sayfasında kullanabilirisiniz. şimdilik bu kadar kural yeter gelelim bunları nerede tanımlıyacağınıza ve nasıl kullanacağınıza.

3. HTML’YE BAĞLAMA ŞEKİLLERİ
Burada stilleri HTML’ye nasıl ekleyeceğinizi ve eklendiği yere göre HTML üzerinde nasıl etkiler yaptığını anlatacam. Stiller HTML’ye üç değişik şekilde eklenebilirler.

3.1. Local Bağlama
Local bağlamayı kullanarak yanlızca HTML’nin içinde kullanılan etiketleri (örneğin H1,A,P…) ve sadece olduğu yerde özelliklerini değiştirebiliriz. Fakat bunu fazla kullanacağınızı zannetmiyorum. Çünkü bu tanımlama sadece tanımlandığı yerde ve bir kere kullanılabilir.

<html>
<head><title> deneme- – – [ CSS ] – – – </title>
</head >
<body >
<h3 > CSS Kullanımına Örnek </h3>
<h3 style= “font-family : arial; color : blue”> CSS Kullanımına Örnek </h3>
</body>

</html>
CSS Kullanımına Örnek

CSS Kullanımına Örnek

Burada stil yardımıyla H2 etiketinin bazı özelliklerini değiştirmiş olduk.Bunlar font renginin mavi olması ve fontun arial olmasıydı.Yukarıda da görüldüğü gibi iki yazınında aynı etiketi taşımasına rağmen farklı şekillerdedir. Sakın unutmayın bu değişiklik sadece birkez geçerli olacaktır. Bir daha H2 ekitini kullandığınız zaman etkili olmayacaktır.

3.2. Global Bağlama

Tanımlama HTML’nin <head> </head>başlığı içinde yapılır. Daha öncede belirttiğim gibi böylece bir etiketin sadece bir kez özelliklerini tanımlayarak tüm HTML de tekrar tanıtmadan istediğimiz yerde kullanabilirsiniz.

<html>
<head>
<title> deneme- – – [ CSS ] – – – </title>
<style type=”text/css”>
h3 { font-family : arial; color : blue }
</style>
</head >
<body >
<h3 >WEB Okuluna Hoşgeldiniz < /h3>
</body>
</html>

H3 etiketini bu şekilde değiştirdiğimiz zaman HTML sayfasının neresinde kullanırsanız kullanıın artık o etiketin rengi mavi fontuda arial’dır.

3.3. Link Bağlama
Evet geldik son bağlama şeklimize buda faydaları azımsanmıyacak kadar önemli bir özellik. Bu bağlama şeklini kullanarak. Bir CSS dosyası dışarıdan HTML sayfasına veya sayfalarına bağlanabiliyor. Mesela bütün sitedeki sayfalarda H1 etiketinin renginin kırmızı olmasını istiyorsunuz. Bütün sayfalarda mavi olmasını tek tek belirtene kadar bu bağlama şeklini kullanabilirsiniz. Daha sonra maviyi beğenmediniz kırmızı olmasınımı istiyorsunuz tek yapmanız gereken CSS dosyasına gidip blue yerine red yazmak. Önce tanımlamak istediğimiz butun seçicileri yazıyoruz ve css soyadı ile kaydediyoruz.

<style>
. baslik1{ font-size : 40px; font-family : Arial; color : #284422 }
H4. baslik {font-family:Arial;font-weight:bold;color : #284422 }
P { font-style : arial; font-size : 11pt; color : #284422; }
A { font-size : 15pt ; color : #284422 }
A:hover { font-size :15pt; color : red }
</style>

Bunları istediğiniz bir düz yazı yazma programı ile hatta notpad ile de yazabilirsiniz. Yazdıktan sonra deneme.css ismiyle kaydedin. Bundan sonra bu dosyayı HTML sayfasına yüklenmesi gerekiyor.

<html>
<head>
<title> deneme- – – [ CSS ] – – – </title>
<link rel=”stylesheet” href=”deneme.css”>
</head >
<body >
<h4 class=”baslık” >WEB Okuluna Hoşgeldiniz < /h4>
<h5 class=”baslık1″ >WEB Okuluna Hoşgeldiniz < /h5>
<p>CSS ilk başta zor gibi görünsede aslında çok kolaydır</p>
</body>
</html>

Bunuda yaptıkdan sonra artık bu HTML sayfasını çağırdınız zaman sanki CSS dosyası HTML sayfasının içinde tanımlanmış gibi davranacaktır.

4. KULLANIM ŞEKİLLERİ

4.1 HTML Etiketleri İle Kullanım

Stilleri HTML’nin içinde kullanılan tüm etiketlerle birlikte kullanabilirsiniz. Hatta <BODY> için bile stil kullanarak özellikler tanımlıyabilirsiniz. Yanlız stilleri böyle kullanarak bir etiketi yanlızca bir still tanımlayabilir ve kullanabilirsiniz.

<html>
<head>
<title> deneme- Css</title>
<style type=”text/css”>
h3 { font-family : arial; color : blue }
</style>
</head >
<body >
<h3 >WEB Okuluna Hoşgeldiniz </h3>
</body>
</html>

Eğer isterseniz aynı anda birden çok etikete aynı stilli atıyabilirsiniz. Etiketleri birbirinden ayırmak için aralarına virgül ” , ” konulur.

<html>
<head>
<title> deneme- Css </title>
<style type=”text/css”>
h3 , h4 , p , a { font-family : arial; color : blue }
</style>
</head >
<body >
<h4 >WEB Okuluna Hoşgeldiniz </h4>
<h3 >CSS kullanımına örnek< /h3>
</body>
</html>

4.2 Seçiciler İle Kullanımı

Seçiciler yardımı ile bir etikete birden fazla still tanımlayabilir ve kullabilirsiniz. İstediğiniz kadar çok secici tanımlayabilirsiniz. İstenirse bir still birden fazla etikete aynı anda aktarılabilir

4.2.1 Sınıf Seçiciler

Mesala <P> etiketi için bir still tanımladınız fakat HTML sayfanızda kullandığınız her <p> etiketinin aynı olmasını istemiyorsanız o zaman sınıf seçiçiler tam sizin aradığınız birşey. Aslında sınıf seçiciler ikiye ayrılıyor hangisini işinize yarıyorsa onu kullanabilirsiniz. Birinci tipi sadece HTML etiketine bağımlı tanımlamaktır.

<html>
<head>
<title> deneme- Css </title>
<style type=”text/css”>
h1 . mavi { font-family : arial; color : blue }
h1 . siyah { font-family : arial; color : black }
</style>
</head >
<body >
<h1 class=”mavi” >CSS Kullanımına Örnek </h1>
<h1 class=”siyah” >CSS Kullanımına Örnek </h1>
</body>
</html>

Bu birinci tipiydi.Burada önce kullanmak istediğiniz etiketi belirtiyorsunuz. Sonra stillin adını yazıyorsunuz tabi arasına nokta koymayı unutmayın. daha sonra HTML sayfası içinde etiketi hangi stille kullanmak istiyorsan <h1 class=”stilin_adi”> o stilin adını yazıyorsun. Bu tanımlamada bu özellikleri <H1> etiketi dışında kullanamazsınız. Fakat şimdi göstereceğim ikinci tip sınıf seçicide durum birazdaha farklı;

<html>
<head>
<title> deneme- Css </title>
<style type=”text/css”>
. mavi { font-family : arial; color : blue }
. siyah { font-family : arial; color : black }
</style>
</head >
<body >
<a class=”siyah” >anasayfa</h3>
<h1 class=”mavi” >CSS Kullanımına Örnek </h1>
<h3 class=”siyah” >CSS Kullanımına Örnek </h3>
</body>
</html>

Görüldüğü gibi burada stilli tanımlarken etiketin ismini koymuyoruz. Fakat noktayı koyuyoruz sonra bu stilli istediğimiz biryerde istediğimiz bir etiketle birlikte kullanabiliyoruz.

4.2.2 ID Seçiciler

Bu seçicilerde stil isminin önüne # işareti konulur ve HTML sayfasının içinde herhangi bir etiketle birlikte (buna DIV,SPAN ‘da dahil) adı ile çağrılarak kullanılabilirler. Bunları çağırırken class değil id kullanılır.

<html>
<head>
<title> deneme- Css </title>
<style type=”text/css”>
#mavi { font-size : 20pt; font-family : arial; color : blue }
#siyah { font-size : 11pt; font-family : arial; color : black }
</style>
</head >
<body >
<span id=”mavi” >CSS Kullanımına Örnek </span>
<span id=”siyah” >CSS Kullanımına Örnek </span>
</body>
</html>

4.3 <A> Etiketi İle Kullanımı

Bu kullanım sadece A etiketi ile kullanılabilir. A etiketine ekstra özellikler kazandırırlar. Bu özellikler toplam dört tanedir.
link : Bu <a> etiketi içindeki link’in nasıl görüleceğini belirler
active :Bu ise link’in üzerine tıklandığı an alacağı şekli belirler
visited :Likin tıklandıktan sonra yani ziyaret edildikten sonraki halini belirler
hover :Son olarak bu özellik imleç(fare ile) linkin üzerine gelindiği an linkin alacağı hali belirler.Bu özellik Netsacapr tarafından tanınmamaktadır.

<html>
<head>
<title> deneme- Css </title>
<style type=”text/css”>
a { font-size : 20pt; font-family : arial; color : blue }
a : link { font-size : 11pt; font-family : arial; color : black }
a : active { font-size : 11pt; font-family : arial; color : red }
a : hover { font-size : 11pt; font-family : arial; color : blue }
a : visited { font-size : 11pt; font-family : arial; color : red }
</style>
</head >
<body >
<a href=”#”>Anasayfa < /a>
<a href=”#”>CSS Kullanımına Örnek < /a>
</body>
</html>


İstenirse seçicilerle birliktede kullanılabilirler

<html>
<head>
<title> deneme- Css </title>
<style type=”text/css”>
a . menu { font-size : 20pt; font-family : arial; color : blue }
a . menu : link { font-size : 11pt; font-family : arial; color : black }
a . menu : active { font-size : 11pt; font-family : arial; color : red }
a . menu : hover { font-size : 11pt; font-family : arial; color : blue }
a . menu : visited { font-size : 11pt; font-family : arial; color : red }
</style>
</head >
<body >
<a class=”menu” href=”#”>Anasayfa < /a>
<a class=”menu” href=”#”>CSS Kullanımına Örnek < /a>
</body>
</html>

5. DENETLENEBİLİR ÖZELLİKLER

Burada size CSS kullanarak denetliyebileceğiniz yani değiştirebileceğiniz özellikleri ve alabileceği değerleri anlatacam. Önce size kolaylık olaması için özellikleri tablo içinde veriyorum.

FONT ÖZELLİKLERİ

TEXT ÖZELLİKLERİ

BACKGROUND ÖZELLİKLERİ

LIST ÖZELLİKLERİ

FONT-SIZE

WORD-SPACING

BACKGROUND-COLOR

LIST-STYLE-TYPE

FONT-FAMILY

LETTER-SPACING

BACKGROUND-IMAGE

LIST-STYLE-POSITION

FONT-WEIGHT

LINE-HEIGHT

BACKGROUND-REPEAT

LIST-STYLE-IMAGE

FONT-STYLE

TEXT-DECORATION

BACKGROUND-ATTACHMENT

FONT-VARIANT

TEXT-ALING

BACKGROUND-POSITION

COLOR

TEX-INDENT

BACKGROUND

FONT

BOX ÖZELLİKLERİ

MARGIN ÖZELLİKLERİ

BORDER ÖZELLİKLERİ

PADDING ÖZELLİKLERİ

MARGIN-BOTTOM

BORDER-BOTTOM

PADDING-BOTTOM

MARGIN-TOP

BORDER-TOP

PADDING-TOP

MARGIN-RIGHT

BORDER-RIGHT

PADDING-RIGHT

MARGIN-LEFT

BORDER-LEFT

PADDING-LEFT

BORDER-WIDTH

BORDER-STYLE

BORDER-COLOR

5.1. FONT Özellikleri

FONT-SİZE : fontun nekadar büyüklükte olacağını belirler
değerleri : xx-large | x-large | large | medium | small | x-small | xx-small | pt cinsinden değer
ilk değer : medium

FONT-FAMILY : fontun hangi tipite olacağını belirler
değerleri : fontun ismi
ilk değer : kullanıcının seçtiği font
oblique : yazının yatık olmasını sağlar

.yazi { font-size : 10pt ; font-family : arial ; font-weight : bold ; font-style : italic ; font-variant : normal ; color : black }

5.2. TEXT Özellikleri

WORD-SPACING : Kelimelerin arasına konulmak istenen boşluğu ayarlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal

LETTER-SPACING : Harfler arasındaki boşluk miktarını ayarlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal

capitalize : Yazıyı olduğu gibi bırakır.
uppercase : yazıyı büyük arfe çevirir.
lowercase : yazıyı küçük harfe çevirir.

TEXT-ALING : Metni istenilen biryere bloklamada kullanılıyor
değerleri : left | right | center
ilkdeğeri : left
left : metni sola bloklar
right : metni sağa bloklar
center: metni ortalar

LINE-HEIGHT : Metnin satırları arasına istenilen miktarda boşluk bırakmayı sağlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal
.metin { word-spacing : 10pt ; letter-spacing : 9pt ; line-height : 8pt ; text-decoration : none ; text-transform : capitalize ; text-aling : left ; text-indent : 5pt }

5.2. BACKGROUND Özellikleri

BACKGROUND-COLOR : Arka zeminin alacağı zemini belirler
değerleri : ingilizce renklerin isimleri | renk kodları | RGB renk kodu
ilkdeğeri : kullanıcının seçtiği

BACKGROUND-IMAGE : Arka zemine resim yerleştirmeyi sağlar.
değerleri : none | url (“dosyanın_ismi”)
ilkdeğeri : none

scroll : Arka zeminin scroll ile birlikte hareket etmesini sağlar
fixed : Arka zeminin sabit kalmasını sağlar.

BACKGROUND : Bu özellik aynı font taki gibidir.
BODY { background-color : rgb(252,253,255) ; background-image : url (“zemin.jpg”) ; background-repeat : no-repeat ; background-attechment : fixed ; background-position : center ; }

5.4. LIST Özellikleri

LIST-STYLE-TYPE : Listede kullanulacak basamakların nasıl kullanılacağını belirler
değerleri : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |
upper-alpha | none
ilkdeğeri : disc

disc : Her basamak içi dolu dairelerle başlar
circle : Her basamak içi boş dairelerle başlar
square : her basamak kare ile başlar
decimal : Her basamak 1,2,3,4.. gibi sayılar alır
lower-roman : Her basamak i,ii,iii gibi küçük roma rakamları alır
upper-roman : Her basamak I,II,III gibi büyük roma rakamları alır
lower-alpha : Her basamak a,b,c gibi küçük harf alır
upper-alpha : Her basamak A,B,C gibi büyük harf alır

.list { list-style-type : lower-alpha ; list-style-position : inside ; list-style-image : none ; }

5.5. BOX Özellikleri

Mesela web sayfası yazısını sol tarafını çizgiden (border) uzaklaştırmak istiyelim. Yani yazı çizgiden birazdaha içerde başlasın.Ozaman padding-left özelliğini kullanmalıyız.
MARGIN-RIGHT : Margin’in sağdan nekadar boşluk bırakacağını belirler.
değerleri : px cinsinden değer
BORDER-STYLE : Border çizgisini değiştirmek için kullanılır.
değerleri : none | dotted | dashed | solid | double | groove | ridge | inset | outset
ilkdeğeri : solid
BORDER-WIDTH : Border çizgisinin kalınlığını belirler.
değerleri : thin | medium | thick | length
ilkdeğeri : medium
BORDER-BOTTOM : Border’ın alt kısmı ile margin arasında kalan kısmı ayarlar
.     değerleri : px cinsinden değer
BORDER-TOP : Border’ın üst kısmı ile margin arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
BORDER-LEFT : Border’ın sol kısmı ile margin arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer

BORDER-RIGHT : Border’ın sağ kısmı ile margin arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer

PADDING-BOTTOM : Padding’in alt kısmı ile border arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
PADDING -TOP : Padding’in alt kısmı ile border arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
PADDING -LEFT : Padding’in alt kısmı ile border arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
PADDING -RIGHT : Padding’in alt kısmı ile border arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer

6. DIV İLE KULLANIMI

HTML deki bütün unsurları (metin,table,resim,çerçeve…) bu katmanın(DIV) üstüne koyup sayfada istediğiniz bir yere taşıyabilirsiniz. Neler yapabileceğinizi veya istediğiniz bir ögeyi sayfanın istediğiniz yerine sadece kordinatlari değiştirerek koyabildiğinizi bir düşünsenize…

POSITION : Katmanın HTML sayfası üzerindeki konumunun nasıl olacağını belirler.
ABSOLUTE : Katmanın kendisine verilen üst ve sol kotdinatlara göre kesin olarak yerleştirir ve yeri diğer unsurlardan etkilenmez.
RELATIVE : katmanın kendisine verilecek ölçüler kendinden önceki unsurun konumunun bittiği yerden başlar
STATIC : Katmanın kendisine verilen ölçüler HTML sayfasında nereye geliyorsa oraya yerleştirilir.
TOP : katmanın üst kısımdan nekadar aşağı olacağı belirler
LEFT : katmanın sol kısımdan nekadar sağda olacağı belirler
HEIGHT : katmanın boyunun uzunluğu belirler
WIDTH : Katmanın eninin uzunluğunu belirler
Z-INDEX : Katmanın HTML sayfası üzerinde hangi katta duracağını belirler.
OVERFLOW : Katmanın belirtilen boyutlara sığmaması durumunda ne yapacağını belirler

<div style= ” position : absolute ; top : 250px ; left : 200px ; height : 50px ; width : 300px ; z-index : 1 ; background-color:#ff9800″>
<center>deneme</center>
</div>

Burada index numarsının önemini biraz anlatmak istiyorum. Katmanlar sayfaya index numarasına göre yerleştirilirler. Aslında yan yana yerleştirilirken önemli değil ama üst üste yerleştiriliyorlarsa önemliler.Mesela iki tane katman olduğunu varsayalım. Birincisinin numarası bir diğerinin iki ise ikinci birincinin üzerinde görülecektir.

<div style= ” position : absolute ; top : 250px ; left : 200px ; height : 50px ; width : 300px ; z-index : 1 ; background-color:red”>
<center>deneme</center>
</div>
<div style= ” position : absolute ; top : 250px ; left : 200px ; height : 50px ; width : 300px ; z-index : 2 ; background-color:blue”>
<center>SAU WEB GROUP</center>
</div>

MARGIN-BOTTOM : Margin’in aşagıdan nekadar boşluk bırakacağını belirler.
değerleri : px cinsinden değer
outside : İkinci satır ve diğerlerinin birinci satırın hizasında olması sağlanır
inside : İkinci satır ve diğerlerinin birinci satırdan içerde başlamasını sağlar

LIST-STYLE-POSITION :
Listenin ikinci satırınından itbaren başlıyacağı yeri belirler

değerleri : outside | inside
ilkdeğeri : outside
repeat : Heryönde tekrar edilmesini sağlar
x-repeat : Sadece x ekseni üzerinde tekrarlar (soldan-sağa)
y-repeat : Sadece y ekseni üzerinde tekrarlar (yukardan-aşağı)
no-repeat : Tekrarlamaz
BACKGROUND-REPEAT : Arka zemindeki resmi istenilen miktarda tekrarlar
değerleri : repeat | x-repeat | y-repeat | no-repeat
ilkdeğeri : repeat
underline : yazının altıçizgili olmasını sağlar
overline : yazının üstünün çizgili olmasını sağlar
line-trough : yazının ortasının çizgili olmasını sağlar
blik : yazının yanıp sönmesini sağlar
TEXT-DECORATION : Metni süslemede kullanılır
değerleri : none | underline | overline | line-through | blink
ilkdeğeri : none
FONT-STYLE : fontun stilini belirler
değerleri : normal | italic | oblique
ilk değer : normal
FONT-WEIGHT : fontun kalınlığını belirler
değerleri : normal | bold | ligher | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
ilk değer : normal

MARGIN-TOP : Margin’in yukarıdan nekadar boşluk bırakacağını belirler.
değerleri : px cinsinden değer

LIST-STYLE-IMAGE : Listenin basamaklarına istenilen bir resim konulmasını sağlar
değerleri : none | url (“dosyanın_ismi”)
ilkdeğeri : none
BACKGROUND-ATTECHMENT : Arka zeminin nasıl davranacağını belirler
değerleri : scroll | fixed
ilkdeğeri : scroll
TEXT-TRANSFORM : Metnin büyük veya küçük harfe çevirmek için kullanılır
değerleri : capitalize | uppercase | lowercase | none
ilkdeğeri : none
FONT-VARIANT : Fontun küçük harf boyunda ama büyük harf olmasını sağlar
değerleri : normal | small-cops
ilk değer : normal
FONT : Bu özellik ile yukarıdaki tüm özellikler değiştirilebilir. Mesela boyutunu değiştirmek istiyorsunuz ozaman font:12px yazmanız yeterli veya hem fontunu hemde boyunu değiştirmek istiyorsunuz. Ozamanda font.12px,arial veya font: arial,12px diyebilirsiniz. Bunu daha çok bu özellikleri javascript kullanarak değiştirmek istediğimizde kullanacağız. Çünkü javascript font-size ifadesini kabul etmiyor.
COLOR : Fontun ne renk olacağını belirler
değerleri : ingilizce renklerin isimleri | renk kodları | RGB renk kodu
ilkdeğeri : kullanıcının seçtiği
MARGIN-LEFT : Margin’in soldan nekadar boşluk bırakacağını belirler.
değerleri : px cinsinden değer
BACKGROUND-POSITION : Arka zeminin yerini belirler
değerleri : left | center | right | top | bottom
ilkdeğeri : 0,0
TEXT-INDENT : Yazının istenilen miktarda içierden başlamasını sağlar
değerleri : pt cinsinden değer
ilkdeğeri : 0

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s