Şimdi Ara

CSS ÖĞRENİYORUM

Daha Fazla
Bu Konudaki Kullanıcılar: Daha Az
1 Misafir - 1 Masaüstü
5 sn
42
Cevap
2
Favori
3.910
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
0 oy
Öne Çıkar
Sayfa: 123
Sayfaya Git
Git
sonraki
Giriş
Mesaj
  • Bismillahirrahmanirrahim

    CSS'ye başlıyorum. hadi hayırlısı

    CSS ile tek seferde birden çok web sayfasının stil ve düzenini değiştirebilriz.

    <!DOCTYPE html> 

    <html>

    <head>

    <style type="text/css">

    body

    {

    background-color:red;

    }

    h1

    {

    color:blue;

    text-align:center;

    }

    p

    {

    font-family:"Times New Roman";

    font-size:30px;

    }

    </style>

    </head>

    <body>

    <h1>CSS örnekleri</h1>

    <p>bu bir paragraftır<p>

    </body>

    </html>


    Bu örnekte sayfaların arka plan rengini h1 başlığının rengini ve paragraf için yazı tipi ve boyutunu nasıl ayarladığımızı görüyoruz .

    sayfa içindeki tüm h1 başlıkların rengini ve tüm paragrafların yazı tipi ve boyutunu tek seferde head etiketi içinde ayarlamış olsuk.

    alıntı



    < Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 11 Haziran 2012; 0:30:38 >







  • buraya yazdığım her kodu 1 den başlayarak kendi bilgisayarıma kaydedeceğim ilerde tekrar etmek istediğimde sırayla açıp hangi kodun neyi değiştirdiğini görmek iyi bir tekrar olacaktır. web programlamaya yeni başlayanlara tavsiye ederim.
  • CSS Giriş

    CSS ye başlamadan önce HTML ve XHTML konusunda teml bilgilerimizin olması gerekir.

    CSS Cascading Style Sheets açılımıdır.

    Stiller HTML öğelerinin nasıl görüntüleneceğini belirler.

    Harici stil sayfaları ile bir çok işi bir arada yapabilirsiniz.

    Harici stil sayfaları CSS dosyaları içinde saklanır.

    Farklı sayfalarınızı farklı stillerde göstermek için birden çok CSS kodu oluşturup hangi sayfayı hangi stille göstermek istiyorsanız sayfaya o stilin kodunu yerleştrebilirsiniz. Örneğin sitenizde 10 ayrı kategori var siz 10 farklı stil kodu yazıp herbirini farlı bir kategori için kullanabilirsiniz sanırım.( türkçeye tam çeviremediğim için böyle yazdım doğru değilse bile zamanla doğrusunu öğreniriz.)

    Stiller büyük bir problemi çözmüş

    HTML 3.2 de etiketler için font ve renk gibi özellikler eklendiğinde web programcıları için zor bir dönem başlamış .çünkü büyük sitelerin programcıları her sayfaya font ve renk gibi özellikleri eklemek zorunda kalmışlar. buda hem zaman hemde maddi yönden sıkıntı yaratmış .

    World Wide Web Consortium (W3C) bu sorunu çözmek için HTML 4.0 da tüm biçimlendirme özelliklerini ayrı CSS dosyasında kaydedip bu sıkıntıyı ortadan kaldırmış.

    Şu anda tüm tarayıcılar CSS ‘yi destekliyormuş.

    Stiller harici .css dosyaları şeklinde kaydedilir.

    Harici stil sayfaları ile sadece tek bir dosya düzenleyerek, bir Web sitesindeki tüm sayfaların görünümünü ve düzenini değiştirmek mümkündür.

    alıntı



    < Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 11 Haziran 2012; 0:31:23 >




  • Örnek 1

    <!DOCTYPE html><html><head><style type=”text/css”> 
    body {background-color:yellow;}

    h1 {font-size:36pt;}

    h2 {color:blue;}

    p {margin-left:50px;}

    </style>

    </head>

    <body>

    <h1>bu başlık 36 pt boyutundadır</h1>

    <h2>bu yazı mavidir</h2>

    <p>bu paragraf sol taraftan 50 piksel boşluk bırakarak başlamıştır</p>

    </body>

    </html>




    Örnek 2

    <!DOCTYPE html><html><head> 


    <style type=”text/css”>



    body {background-color:tan;}



    h1 {color:maroon;font-size:20pt;}



    hr {color:blue;}



    p {font-size:11pt;margin-left:15px;}



    a:link {color:green;}



    a:visited {color:yellow;}



    a:hover {color:black;}



    a:active {color:blue;}



    </style>



    </head>



    <body>



    <h1> başlık 1</h1>



    <hr/>



    <p>Bu yazının yukarıda kodlandığı gibi göründüğünü farkediyorsunuzdur.</p>



    <p><a href=”http://www.webciftligi.com” target=”_blank”>Bu bir linktir</a></p>
    </body>



    </html>


    CSS kodu iki bölümden oluşur.



    h1 kısmı sayfanızın hangi kısmının özelliklerini belirleyeceğini belirtir.

    Property özellik, value se değer demektir.

    color rengi font_size ise font büyüklüğü belirler.

    Her özellik değer çifti noktalı virgül ile biter ve bu çiftleri kıvrımlı parantez ile başlatır ve bitiririz.{ işareti için alt tuşuna basılı tutup 0123 ü tuşlayın } için ise yine alt tuşuna basılı tutup 0125 tuşlayın.

    CSS Hatırlatma kodu

    Css kodları açıklama amaçlı yazılar koyabilirsiniz.Sonradan kaynak kodunuzu düzenlerken size yardımı dokunabilir.

    “/*” ile başlayıp ”*/” ile biter.

    Örnek

    /*Bu sonradan hatırlamayı kolaylaştırmak için yazılan bir nottur*/p {text-align:center;
    /*Buda başka bir nottur*/
    color:black;
    font-family:arial;
    }

    Bu hatırlatma kodu sayfanızda görünmez sadece kaynak kodunu görüntülediğinizde görürsünüz.

    Alıntıdır




  • CSS Id(kimlik) and Class(sınıf)

    Id ve sınıf seçiciler

    Bir HTML öğesi için bir stil ayarlamanın yanı sıra, CSS, “id” ve “sınıf” olarak adlandırılan kendi seçicilerinizi belirlemenizi sağlar.

    Id seçici

    Id seçici tek ve özgün bir eleman için bir stil belirlemede kullanılır.
    Id seçici HTML öğesinin id özniteliğini kullanır ve bir “#” işareti ile tanımlanır.
    Aşağıdak örneği nceleyebilirsiniz.

    <!DOCTYPE html><html><head><style type=”text/css”>#para1 
    {

    text-align:center;

    color:red;

    }

    </style>

    </head>

    <body>

    <p id=”para1″>Merhaba dünya!</p>

    <p>Bu paragraf stil özelliklerinden faydalanmaz.</p>

    </body>

    </html>


    Id seçici adını herhangi bir numara ile başlatırsanız mozilla ve firefox ta çalışmazmış.

    Sınıf seçici

    Sınıf seçiciler bir grup için stil belirlemede kullanılır.Id seçicilerin aksine sınıf seçiciler birkaç öğe için birden kullanılır.
    Birden çok html öğesi için belli bir stili ayarlamak için kullanılır.

    <!DOCTYPE html><html><head><style type=”text/css”>.center 
    {

    text-align:center;

    }

    </style>

    </head>

    <body>

    <h1 class=”center”>Ortanlanmış başlık</h1>

    <p class=”center”>Ortalanmış paragraf.</p>

    </body>

    </html>


    Ayrıca, sadece belirli HTML öğelerinin bir sınıf tarafından etkileneceğini belirtebilirsiniz.
    Aşağıdaki örnekte, tüm p öğeleri class = “center” ile ortalanmıştır olacaktır:

    <!DOCTYPE html><html><head> 
    <style type=”text/css”>

    p.center

    {

    text-align:center;

    }

    </style>

    </head>

    <body>

    <h1 class=”center”>Bu başlık center özelliğinden etkilenmeyecektir</h1>

    <p class=”center”>Bu paragraf ortalanacaktır.</p>

    </body>

    </html>


    Sınıf isimlerini rakamla başlatmayın bu sadece internet explorerda destklenmektedir.
    Alıntıdır.



    < Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 12 Haziran 2012; 21:39:58 >




  • CSS ekleme

    Tarayıcı bir stil sayfası okuduğunda belgeyi buna göre biçimlendirir.

    Belgelerinize CSS eklemenin 3 yolu vardır.
    Harici stil sayfası
    Dahili stil sayfası
    Satır içi stil

    Harici Stil Sayfası
    Harici stil sayfaları birden çok belgenin stilini değiştirmek için en uygun yöntemdir.
    Harici bir stil sayfası ile, bir dosyayı değiştirerek bir web sitesinin tamamının görünümünü değiştirebilirsiniz.
    Bunu yapmak için her sayfada < link> etiketini kullanarak stil sayfasına bağlantı vermeniz gerekir.

    <link> etiketi <head> bölümüne yazılır:

    <head> 
    <link rel=”stylesheet” type=”text/css” href=”benimstilim.css”/>
    </head>


    Harici bir stil sayfası, herhangi bir metin editörü ile yazılabilir.
    Dosya herhangi bir HTML etiketi içermemelidir.
    Stil sayfanız örnekstilim.css uzantısı ile kaydedilmelidir.
    Bir stil sayfası dosyasının bir örneği aşağıda gösterilmiştir:
     
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url(“images/örnek.gif”);}


    Özellik değeri ve birimi arasına (margin-left:20 px)bir boşluk koymayın.Doğru yol: margin-left:20px

    Dahili Stil Sayfası
    Sadece bir sayfanın stil özelliklerini belirlemek istiyorsanız dahili stil sayfalarını kullanmanız gerekir.
    Bunun için html sayfanızın head bölümünde style etiketi aşağıdaki örnekteki gibi kullanabilirsiniz:

    <head> 
    <style type=”text/css”>
    hr {color:sienna;}

    p {margin-left:20px;}

    body {background-image:url(“images/örnek.gif”);}

    </style>

    </head>


    Satır içi stil
    Satır içi stil kullanmak stil sayfalarını sağladığı bir çok avantajı kaybetmenize yol açabilirmiş.Bu nedenle mümkün olduğunca az kullanılmalıymış.
    İlgili etiket içinde satır içi stil kullanmak için style özniteliğini kullanmanız gerekir.
    Style özniteliği herhangi bir CSS özelliği içerebilir.
    Aşağıdaki örnek bir paragrafın rengini ve sol kenar boşluğunun değerini nasıl ayarlayacağınızı gösterir:

    <p style=”color:sienna;margin-left:20px”>Bu bir paragraftır.</p>


    Çoklu Stil Sayfaları
    Bazı özellikleri farklı stil sayfalarında aynı seçici için ayarlanmış ise, hangi stil sayfası daha spesifik ise o baz alınarak sayfa gösterilir.
    Örneğin, harici bir stil sayfası h3 seçici için şu özelliklere sahipse:


    h3 
    {
    color:red;

    text*alin:left;

    font-size:8pt;

    }


    Ve bir dahili stil h3 seçici için şu özelliklere sahipse:


    h3 
    {
    text-align:right;

    font-size:20pt;

    }


    Sayfa görüntülenirken dahili stil özellikleri daha spesifik olduğundan sayfa aşağıdaki özelliklere göre görüntülenecektir.

    color:red;text-align:right; 
    font-size:20pt;


    Dikkat ettiyseniz dahili stil sayfasında renk belirtilmediği için harici stil sayfasındaki renk değeri değişmedi ama text-align ve font-size değerleri dahili stil sayfasındaki şeklini aldı.

    Alıntıdır.



    < Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 12 Haziran 2012; 21:53:24 >




  • CSS arka plan

    CSS arka plan özellikleri bir öğenin arkaplan efektlerini tanımlamak için kullanılır.

    Arkaplan efektleri için kullanılan CSS özellikleri:

    background-color
    background-image
    background-repeat
    background-attachment
    background-position
    Arkaplan Rengi

    Background-color özelliği bir öğenin arka plan rengini belirtir.

    <!DOCTYPE html> 
    <html>
    <head>

    <style type=”text/css”>

    body

    {

    background-color:red;

    }

    </style>

    </head>

    <body>

    <h1>CSS sayfam</h1>

    <p>CSS arkaplan rengi belirleme</p>

    </body>

    </html>


    CSS de renk değerlerini aşağıdaki gibi kullanabilirsiniz.
    HEX değeri – “#ff0000″ gibi
    RGB değeri – “rgb(255,0,0)” gibi
    Bir renk adı – “kırmızı” gibi

    Bir kaç örnek;
    h1 {background-color:#6495ed;}
    p {background-color:#e0ffff;}
    div {background-color:#b0c4de}

    Arkaplan Resmi

    Arkaplan için herhangi bir resim kullanabilirsiniz.Bu imaj kullandığınız öğenin içinde gösterilir ve gerekiyorsa görüntü tekrarlayarak tüm alanı kaplar.

    <!DOCTYPE html> 
    <html>
    <head>

    <style type=”text/css”>

    body

    {

    background-image:url(‘örnekimaj.gif’);

    }

    </style>

    </head>

    <body>

    <h1>selam millet</h1>

    </body>

    </html>


    Arka plan için imaj kullanırken siteniz görüntülendiğinde içeriğinizin okunup okunmadığına dikkat edin.

    Arka plan resmini yatay veya dikey tekrarlama
    Varsayılan olarak, arka plan hem yatay hem dikey olarak tekrarlar ama hoş olmayan bir görüntüye sebep olabilir.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    body
    {
    background-image:url(‘gradient.jpg’);
    }
    </style>
    </head><body>
    <h1>selam millet</h1>
    </body></html>


    Tablodaki kodların nasıl bir görüntü oluşturduğunu görmek için burayatıklayın.

    Görüntü sadece yatay (repeat-x) olarak tekrarlanırsa, arka plan daha iyi görünecektir:

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    body
    {
    background-image:url(‘gradient2.png’);
    background-repeat:repeat-x;
    }
    </style>
    </head><body>
    <h1>selam millet!</h1>
    </body></html>


    Tablodaki kodların nasıl bir görüntü oluşturduğunu görmek için buraya tıklayın.

    Arka plan resminin konumu ve tekrarlanmaması

    Arka plan resmi kullanırken yazılarınızı engellememesi ve tekrarlamaması için aşağıdaki örneğleri inceleyin.

    <!DOCTYPE html> 
    <html>
    <head>
    <style text=”type/css”>

    body

    {

    background-image:url(‘tree.jpg’);

    background-repeat:no-repeat;

    }

    </style>

    </head>

    <body>

    <p>Arkaplan resmi örneği</p>

    <p>Arka plan resmi ile yazılanlar bir arada olduğu için kesişen yerleri okumak güçleşiyor.</p>

    </body>

    </html>


    Tablodaki kodların nasıl bir görüntü oluşturduğunu görmek için buraya tıklayın.

    <!DOCTYPE html> 
    <html>
    <head>
    <style text=”type/css”>

    body

    {

    background-image:url(‘tree.jpg’);

    background-repeat:no-repeat;
    background-position:right top;
    margin-right:200px;

    }

    </style>

    </head>

    <body>

    <p>Arka plan resmi örneği</p>

    <p>Arka plan resmini sağ üst köşeye yerleştirtik ve yazı ile resim arasına 200
    pixellik bir boşluk bıraktığımız için sayfamızın görüntüsü bozulmadı.</p>

    </body>

    </html>


    Tablodaki kodların nasıl bir görüntü oluşturduğunu görmek için buraya tıklayın.

    Arka plan kestirme yolu

    Yukarıdaki örneklerden de görebileceğiniz gibi, arka planlar ile ilgili dikkate alınması gereken pek çok özellik vardır.
    Tek bir kod içerisinde birden fazla özellik belirtebilirsiniz.

    <!DOCTYPE html> 
    <html>
    <head>

    <style text=”type/css”>

    body

    {

    background:yellow url(‘tree.jpg’) no-repeat right top;
    margin-right:200px;

    }

    </style>

    </head>

    <body>

    <p>Arka plan resmi örneği</p>
    <p>Arka plan özelliklerini tek bir kod içinde belirlemiş olduk.</p>
    </body>

    </html>


    Tablodaki kodların nasıl bir görüntü oluşturduğunu görmek için buraya tıklayın.

    Kestirme özelliğini kullanırken özellik değerleri sırası
    şöyledir:
    background-color
    background-image
    background-repeat
    background-attachment
    background-position




  • Yapay Zeka’dan İlgili Konular
    #JAVA GUI PROGRAMLAMA DERSLERİ#
    13 yıl önce açıldı
    Sql Öğrenmek
    6 yıl önce açıldı
    Daha Fazla Göster
  • CSS Metin

    Metin rengi

    CSS ile metin rengini ayarlayabiliriz.

    Aşağıdaki özellik değer çiftlerini kullanabiliriz.

    HEX değeri – “#ff0000″ gibi

    RGB değeri – “rgb(255,0,0)” gibi

    Bir renk adı – “red” gibi


    <!DOCTYPE html><html><head><style type=”text/css”>body {color:red;}h1 {color:#00ff00;}p.örn {color:rgb(0,0,255);} 
    </style>

    </head>

    <body>

    <h1>Bu bir başlıktır</h1>

    <p>Bu normal bir paragraftır.Yazının kırmızı olduğuna dikkat edin.Varsayılan metin rengini body seçicisi belirler.</p>

    <p class=”örn”>Bu örn sınıfı ile belirtiğimiz şekilde görüntülenecek. Bu paragraf mavidir.</p>

    </body>

    </html>


    Metin Hizalama
    Text-align özelliği bir metnin yatay hizalamasını ayarlamak için kullanılır.
    Metni ortalayabilir sağa veya sola yanaştırabilirsiniz.Birde justify diye bir özellik var ne olduğunu anlayamadım.


    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    h1 {text-align:center;}
    p.date {text-align:right;}
    p.main {text-align:justify;}
    </style>
    </head><body>
    <h1>CSS text-align Example</h1>
    <p class=”date”>May, 2009</p>
    <p class=”main”>In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since. ‘Whenever you feel like criticizing anyone,’ he told me,
    ‘just remember that all the people in this world haven’t had the advantages that you’ve had.’</p>
    <p><b>Note:</b> Resize the browser window to see how the value “justify” works.</p>
    </body>
    </html>



    Text-decoration özelliği

    Yazıların altını üstünü çizmek için bu özelliği kullanabilirsiniz.Aşağıdaki iki örneği inceleyebilirsiniz.

    <!DOCTYPE html><html> 


    <head>



    <style type=”text/css”>



    a {text-decoration:none;}



    </style>



    </head>



    <body>



    <p>Bağlanın: <a href=”http://www.webciftligi.com”/>Web Çiftliği</a></p>



    </body>



    </html>




    <!DOCTYPE html><html><head><style type=”text/css”> 
    h1 {text-decoration:overline;}

    h2 {text-decoration:line-through;}

    h3 {text-decoration:underline;}

    h4 {text-decoration:blink;}

    </style>

    </head>

    <body>

    <h1>başlık 1</h1>

    <h2>başlık 2</h2>

    <h3>başlık 3</h3>

    <h4>başlık 4</h4>

    <p><b>Not:</b>blink değerini İE Crome ve Safari desteklemiyormuş.Ne işe yaradığınıda anlamış değilim</p>

    </body>

    </html>


    Metnin altını çizme çoğu zama kullanıcının kafasını karıştıracağından pek tavsye edilmezmiş.

    Metin dönüşümü

    Metin dönüşümü özelliği ile metnin küçük harflerle mi yoksa büyük harflerle mi gösterileceğini belirlersiniz.
    Bütün harfleri küçük harfle yada büyük harfle gösterebileceğiniz gibi her kelimeni ilk harfini büyük diğerlerini küçük ayarlayabilirsiniz.

    <!DOCTYPE html><html> 


    <head>



    <style type=”text/css”>



    p.uppercase {text-transform:uppercase;}



    p.lowercase {text-transform:lowercase;}



    p.capitalize {text-transform:capitalize;}



    </style>



    <body>



    <p class=”uppercase”>bu paragraf büyük harflerle yazılacak.</p>



    <p class=”lowercase”>bu paragraf küçük harflerle yazılacak</p>



    <p class=”capitalize”>Bu paragrafın ilk harfleri büyük sonrakiler küçük
    yazılacak</p>



    </body>



    </head>



    </html>


    Metin Girinti

    Bu özellik ile paragrafın ilk satırının nereden başlayacağını belirlersiniz.

    <!DOCTYPE html>  
    <html>



    <head>



    <style type=”text/css”>



    p {text-indent:50px;}
    </style>



    </head>



    <body>



    <p>In my younger and more vulnerable years my father gave me some advice that I’ve
    been turning over in my mind ever since. ‘Whenever you feel like criticizing
    anyone,’ he told me, ‘just remember that all the people in this world haven’t had
    the advantages that you’ve had.’</p>



    </body>



    </html>




  • CSS Font

    CSS font özellikleri font ailesini , koyuluğunu , boyutunu ve stilini belirler.

    Bilgisayar ekranlarında sans-serif fontlarını okumak serif fontlarını okumaktan daha kolaymış.

    Yazı Tipi Aileleri

    CSS de , font ailesi isimlerinin iki çeşidi vardır:

    generic family(Genel aile) – Serif Monospace gibi benzer görünüme sahip bir grup font ailesidir.
    font family(font ailesi)- Times New Roman veya Arial gibi spesifik font ailesidir.

    Genel aile Yazı Tipi Ailesi Açıklama
    Serif Times New Roman Georgia Şerif fontlarının bazı karakterleri ucunda küçük çizgiler vardır
    Sans-serif Arial Verdana “Sans” olmadan anlamına gelir – Bu yazı karakterlerinin ucunda çizgileri yoktur
    Monospace Courier NewLucida Console Tüm tek hacimli karakterler aynı genişliğe sahiptir

    Yazı Tipi Ailesi

    Bir metnin yazı tipi ailesi font-family özelliği ile ayarlanır.
    Font-family özelliğinde birkaç aile belirtmek gerekiyormuş.Tarayıcının ilk yazılan font ailesi desteği yoksa, bir sonraki font ailesi çalışırmış.

    İstediğiniz yazı tipi ile başlayın, ve genel bir aile ile sonlandırın.
    Not: Bir font ailesinin adı bir kelimeden fazla ise, font-family gibi, tırnak içinde alınmalıdır: “Times New Roman”.


    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    p.serif{font-family:”Times New Roman”,Times,Serif;}
    p.sansserif{font-family:Arial,Helvetica,sans-serif;}
    </style>

    </head>

    <body>

    <h1>CSS yazı tipi ailesi</h1>

    <p class=”serif”>Bu paragraf Times New roman fontlarıyla gösterilecek</p>

    <p class=”sansserif”>Bu paragraf Arial fontlarıyla gösterilecek</p>

    </body>

    </html>


    Yazı Stili
    Font-style özelliği çoğunlukla italik yazı belirtmek için kullanılır.
    Bu özellik üç değere sahiptir:
    Normal – metin normal gösterilir
    italik – metin italik olarak görüntülenir
    oblik – metin “eğilmiş” olarak görüntülenir(oblik italiğe çok benzer, ancak daha az desteklenir)


    <!DOCTYPE html><html> 
    <head>



    <style type=”text/css”>



    p.normal {font-style:normal;}



    p.italic {font-style:italic;}



    p.oblique {font-style:oblique;}



    </style>



    </head>



    <body>



    <p class=”normal”>Bu paragraf normal yazıyla yazılacak</p>



    <p class=”italic”>Bu paragraf italik yazıyla yazılacak</p>



    <p class=”oblique”>Bu paragraf oblik yazıyla yazılacak</p>



    </body>



    </html>


    Yazı Tipi Boyutu

    Font-size özelliği metnin boyutunu ayarlar.
    Metnin boyutunu düzenlemek web tasarımında çok önemlidir.Ancak , font size özelliğini paragrafları başlık gibi başlıklarıda metin gibi göstermek için kullanmamalısınız.
    Daima uygun HTML etiketlerini kullanın, başlıklar için

    <h1>…</h1>
    <h6>…</h6>

    <p>…</p>
    gibi …

    Font-size değerinin mutlak veya göreceli büyüklüğü olabilir.

    Mutlak büyüklüğü:
    Metnin belirli bir boyutu vardır.Kullanıcı hiçbir tarayıcıda metin boyutunu değiştiremez.

    Göreceli boyutu:
    Çevresindeki elemanlara göre boyutunu ayarlar.Kullanıcının tarayıcısında yazı boyutunu değiştirmesine izin verir.

    Not:Yazı boyutunu belirtmezseniz paragraflar için normal varsayılan değer 16px dir.

    Piksel ile Yazı Tipi Boyutu ayarlama

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    h1 {font-size:40px;}
    h2 {font-size:30px;}
    p {font-size:20px;}
    </style>
    </head>
    <body>
    <h1>Bu birinci başlık</h1>
    <h2>Bu ikinci başlık</h2>
    <p>font-size değerinin px olarak belirtilmesi Internet Explorer 9, Firefox, Chrome,
    Opera ve Safaride metni yeniden boyutlandırmak için olanak sağlar.</p>
    <p>Bu örnek internet explorer 9 dan önceki sürümlerde çalışmaz.</p>
    </body></html>


    Em ile Yazı Tipi Boyutu ayarlama( em = baskı aralığı gibi bişey herhalde)
    Internet Explorer’ın eski sürümleri ile yeniden boyutlandırma sorununu önlemek için, pek çok geliştirici piksel yerine em kullanırmış.
    Em birimi W3C tarafından da tavsiye edilmektedir.
    1 em geçerli yazı tipi boyutuna eşittir. Tarayıcılarında varsayılan metin boyutu 16px olduğundan 1 em=1 pixel dir.
    pixels/16 = em formülü kullanılarak font-size değerini em cinsinden verebilirsiniz.

    <!DOCTYPE html> 
    <html>
    <head>
    <style>
    h1 {font-size:2.5em;} /* 40px/16=2.5em */
    h2 {font-size:1.875em;} /* 30px/16=1.875em */
    p {font-size:0.87em;} /* 14px/16=0.875em */
    </style>
    <head>
    <body>
    <h1>bu birinci başlık</h1>
    <h2>bu ikinci başlık</h2>
    <p>bu bir paragraftır</p>
    <p>font-size değeri olarak em bütün tarayıcılarda metni boyutlandırmanızı
    sağlar.Ancak İE eski sürümlerinde bazı sorunlar yaşanabilmekteymiş.Metni
    boyutlandırdığınızda olması gerektiğinden daha küçük veya daha büyük
    olabiliyormuş.</p>
    </body>
    </html>




  • CSS Linkler

    Linkleri farklı şekillerde gösterebiliriz.

    Linklere şekil verme

    Linkler herhangi bir CSS özelliği (renk,yazı tipi,arka plan gibi) ile şekle sokulabilir.

    Dört bağlantı şekli kullanabiliriz:

    a:link ziyaret edilmemiş link

    a:visited ziyaret edilmiş link

    a:hover fare link üzerindeyken

    a:active linke tıklandığı anda

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    a:link {color:#ff0000;} /*ziyaret edilmemiş link*/
    a:visited {color:#00ff00;} /*ziyaret edilmiş link*/
    a:hover {color:#ff00ff;} /*fare üzreinde olan link*/
    a:active {color:#0000ff;} /*tıklanan link*/
    </style>
    </head><body>
    <p><b><a href=”http://www.webciftligi.com/”
    target=”_blank”>www.webciftligi.com</a></b></p>
    <p>
    a:hover özelliğinin etkili olabilmesi için a:link ve a:visited özelliklerinden
    sonra yazılmalıdır.
    </p>
    <p>
    Aynı şekilde a:active özelliğinin etkili olabilmesi için a:hover özelliğinden sonra
    yazılmalıdır.
    </p>
    </body>
    </html>


    Genel bağlantı stilleri

    Text Decoration özelliği çoğunlukla linklerin altını çizmek için kullanılır.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    a:link {text-decoration:none;} /*ziyaret edilmemiş link*/
    a:visited {text-decoration:none;} /*ziyaret edilmiş link*/
    a:hover {text-decoration:underline;} /*fare üzreinde olan link*/
    a:active {text-decoration:underline;} /*tıklanan link*/
    </style>
    </head><body>
    <p><b><a href=”http://www.webciftligi.com/”
    target=”_blank”>www.webciftligi.com</a></b></p>
    <p>
    a:hover özelliğinin etkili olabilmesi için a:link ve a:visited özelliklerinden
    sonra yazılmalıdır.
    </p>
    <p>
    Aynı şekilde a:active özelliğinin etkili olabilmesi için a:hover özelliğinden sonra
    yazılmalıdır.
    </p>
    </body>
    </html>


    Arka plan rengi

    background-color özelliği ile linkin arka plan rengini belirleyebilirsiniz.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    a:link {background-color:red;} /*ziyaret edilmemiş link*/
    a:visited {background-color:blue;} /*ziyaret edilmiş link*/
    a:hover {background-color:yellow;} /*fare üzreinde olan link*/
    a:active {background-color:green;} /*tıklanan link*/
    </style>
    </head><body>
    <p><b><a href=”http://www.webciftligi.com/”
    target=”_blank”>www.webciftligi.com</a></b></p>
    <p>
    a:hover özelliğinin etkili olabilmesi için a:link ve a:visited özelliklerinden
    sonra yazılmalıdır.
    </p>
    <p>
    Aynı şekilde a:active özelliğinin etkili olabilmesi için a:hover özelliğinden sonra
    yazılmalıdır.
    </p>
    </body>
    </html>


    Aşağıdaki örnekte linkler için farklı özellikleri nasıl ayarlayacağınızı görebilirsiniz.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    a.bir:link {color:red;}
    a.bir:visited {color:blue;}
    a.bir:hover {color:yellow;}

    a.iki:link {color:red;}
    a.iki:visited {color:blue;}
    a.iki:hover {font-size:40px;}

    a.üç:link {color:red;}
    a.üç:visited {color:blue;}
    a.üç:hover {background:yellow;}



    a.dört:link {color:red;}
    a.dört:visited {color:blue;}
    a.dört:hover {font-family:monospace;}



    a.beş:link {color:red;text-decoration:none;}
    a.beş:visited {color:blue;text:decoration:none}
    a.beş:hover {text-decoration:underline;}
    </style>

    </head>

    <body>

    <p>Fareyi linklerin üzerinde gezdirerek farkları görebilirsiniz.</p>

    <p><b><a class=”bir” href=”http://www.webciftligi.com/” target=”_blank”>Bu link
    renk değiştiriyor.</a></b></p>

    <p><b><a class=”iki” href=”http://www.webciftligi.com/” target=”_blank”>Bu linkin
    yazı boyutu değişiyor.</a></b></p>

    <p><b><a class=”üç” href=”http://www.webciftligi.com/” target=”_blank”>Bu linkin
    arka plan rengi değişiyor.</a></b></p>

    <p><b><a class=”dört” href=”http://www.webciftligi.com/” target=”_blank”>Bu linkin
    yazı tipi değişiyor.</a></b></p>

    <p><b><a class=”beş” href=”http://www.webciftligi.com/” target=”_blank”>Bu linkin
    altı çiziliyor.</a></b></p>

    </body>

    </html>


    Bazı CSS özelliklerini birleştirerek gelişmiş linkler oluşturabilirmişiz.Örneğin link kutuları oluşturabilirmişiz.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    a:link,a:visited
    {
    display:block;
    font-weight:bold;
    color:red;
    background-color:yellow;
    width:200px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    }
    a:hover,a:active
    {
    background-color:blue;
    }

    </style>

    </head>

    <body>
    <a href=”http://www.webciftligi.com/” target=”_blank”> Web Çiftliği’ne
    hoşgeldiniz.</a>

    </body>

    </html>


    Alıntıdır:)



    < Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 18 Haziran 2012; 1:28:25 >




  • CSS Listeler

    CSS liste özellikleri size aşağıdaki imkanları sağlar:

    Sıralı listeler için farklı liste öğesi işaretleri ayarlama

    Sırasız listeler için farklı liste öğesi işaretleri ayarlama

    Liste öğesi işareti olarak resim ayarlama
    CSS ile listeler daha iyi şekillendirilebilir ve resimler liste ögelerini işaretlemek için kullanılabilir.

    Farklı liste ögesi işaretleyicileri

    Liste ögesi işaretleyicileri list-style-type özelliği ile belirleyebilirsiniz.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    ul.a {list-style-type:circle;}
    ul.b {list-style-type:square;}
    ol.c {list-style-type:upper-roman;}
    ol.d {list-style-type:lower-alpha;}
    </style>
    </head>
    <body>
    <p>Sırasız liste örneği</p>
    <ul class=”a”>
    <li>domates</li>
    <li>biber</li>
    <li>patlıcan</li>
    </ul>
    <ul class=”b”>
    <li>domates</li>
    <li>biber</li>
    <li>patlıcan</li>
    </ul><p>Sıralı liste örneği</p>
    <ol class=”c”>
    <li>domates</li>
    <li>biber</li>
    <li>patlıcan</li>
    </ol>
    <ol class=”d”>
    <li>domates</li>
    <li>biber</li>
    <li>patlıcan</li>
    </ol>
    </body>
    </html>


    Değerlerin bazıları sıralı bazıları sırasız listeler için oluşturulmuş.

    Liste ögesi işaretleyicisi olarak resim kullanma
    Liste ögesi işareti olarak resim kullanmak için list-style-image özelliği kullanılır.

    <!DOCTYPE html><html> 
    <head>

    <style type=”text/css”>

    ul

    {

    list-style-image:url(‘isaret.png’);

    }

    </style>

    </head>

    <body>

    <ul>

    <li>domates</li>

    <li>biber</li>

    <li>patlıcan</li>

    </body>

    </html>


    Yukarıdaki örnek tüm tarayıcılarda aynı görülmezmiş.İE ve Opera ,crome,firefox ve safariye göre daha büyük görüntülermiş.

    Tüm tarayıcılarda aynı görünmesini istiyorsanız aşağıdaki Crossbrowser örneğin inceleyin.

    <!DOCTYPE html><html> 
    <head>

    <style type=”text/css”>

    ul

    {

    list-style-type:none;
    padding:0px;
    margin:0px;

    }
    ul li
    {
    background-image:url(isaret.png);
    background-repeat:no-repeat;
    background-position:0px 5px;
    padding-left:14px;
    }

    </style>

    </head>

    <body>

    <ul>

    <li>domates</li>

    <li>biber</li>

    <li>patlıcan</li>

    </body>

    </html>


    Liste kestirme özelliği

    Tek bir özellik belirterek bütün liste özelliklerini ayarlayabilirsiniz.Buna kestirme özellik denir.Bu özellik için list-style kullanılır.

    <!DOCTYPE html><html> 
    <head>

    <style type=”text/css”>

    ul

    {

    list-style:square url(“isaret.png”);

    }

    </style>

    </head>

    <body>

    <ul>

    <li>domates</li>

    <li>biber</li>

    <li>patlıcan</li>

    </body>

    </html>


    Kestirme özelliğini kullanırken, değerlerin sırası şu şekilde olmalıdır:

    list-style-type
    list-style-position
    list-style-image




  • CSS Tablolar

    Tablo kenerlıkları

    CSS ile tablo kenarlıklarını düzenlemek için border özelliğini kullanın

    Aşağıdaki örnekte table,th ve td ögeleri için siyah kenarlığın nasıl oluşturulacağını görebilirsiniz.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    table,th,td
    {
    border:1px solid black;
    }
    </style>
    </head>
    <body>
    <table>
    <tr><th>isim</th><th>soyisim</th></tr>
    <tr><td>dr</td><td>hrn</td></tr>
    </table>

    </body>

    </html>


    Yukarıdaki örnekte iki kenarlık varmış gibi görünüyor bunun sebebi table th ve td ögeleri için ayrı ayrı kenarlık olmasıdır.
    Tablonun tek kenarlı olması için border-collapse özelliğini kullanmamız gerekiyormuş.

    Collapse kenarlık(sıkıştırılmış kenarlık diyebiliriz)

    Border-collapse özelliği ile tablo kenarlıkları tekmiş gibi görünürmüş.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    table
    {
    border-collapse:collapse;
    }
    table,th,td
    {
    border:1px solid black;
    }
    </style>
    </head>
    <body>
    <table>
    <tr>
    <th>isim</th>
    <th>soyisim</th>
    </tr>
    <tr>

    <td>dr</td>

    <td>hrn</td>

    </tr>

    </table>

    </body>

    </html>


    Tablo genişlik ve yüksekliği

    Bir tablonun genişlik ve yüksekliğini width ve height özellikleri ile belirlersiniz.
    Aşağıdaki örnek tablonun genişliği %100 th öğesinin genişliği ise 50 px olarak verilmiştir.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    table,td,th
    {
    border:1px solid black;
    }
    table
    {
    width:100%;
    }
    th
    {
    height:50px;
    }
    </style>
    </head>
    <body>
    <table>

    <tr>

    <th>isim</th>

    <th>soyisim</th>

    </tr>
    <tr>

    <td>dr</td>

    <td>hrn</td>

    </tr>

    </table>

    </body>

    </html>


    Tablo metin hizalama

    Tablo içeriklerini text-align ve vertikal-align özellikleri ile hizalayabilirsiniz.

    Text-align özelliği ile metinleri sağ,sol ya da orta gibi yatay olarak hizalayabilirsiniz.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    table,td,th
    {
    border:1px solid black;
    }
    td
    {
    text-align:right;
    }
    </style>

    </head>

    <body>

    <table>

    <tr>

    <th>isimisimisim</th>

    <th>soyisimsoyisimsoyisim</th>

    </tr>
    <tr>

    <td>dr</td>

    <td>hrn</td>

    </tr>

    </table>

    </body>

    </html>


    Vertical-align özelliği ile de alt,üst ve orta gibi dikey hizalama sağlayabilirsiniz.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>

    table,td,th
    {
    border:1px solid black;
    }
    td
    {
    height:50px;
    vertical-align:bottom;
    }
    </style>

    </head>

    <body>

    <table>

    <tr>

    <th>isimisimisim</th>

    <th>soyisimsoyisimsoyisim</th>

    </tr>
    <tr>

    <td>dr</td>

    <td>hrn</td>

    </tr>

    </table>

    </body>

    </html>


    Table Padding

    Tablodaki kenarlık ile içeriğin arasındaki boşluğu belirlemek için th ve td ögelerinde padding özelliğini kullanın.

    <!DOCTYPE html> 
    <html>
    <head>

    <style type=”text/css”>

    table,td,th
    {
    border:1px solid black;
    }
    td
    {
    padding:15px;
    }
    </style>

    </head>

    <body>

    <table>

    <tr>

    <th>isimisimisim</th>

    <th>soyisimsoyisimsoyisim</th>

    </tr>
    <tr>

    <td>dr</td>

    <td>hrn</td>

    </tr>

    </table>

    </body>

    </html>


    Tablo rengi
    Aşağıdaki örnekte tablo kenarlık ve içeriklerinin rengini nasıl ayarlayacağınızı görebilirsiniz.

    <!DOCTYPE html> 
    <html>

    <head>

    <style type=”text/css”>

    table,td,th
    {
    border:1px solid black;
    }
    th
    {
    background-color:green;
    color:white;
    }
    td
    {
    background-color:white;
    color:green;
    }
    </style>

    </head>

    <body>

    <table>

    <tr>

    <th>isimisimisim</th>

    <th>soyisimsoyisimsoyisim</th>

    </tr>
    <tr>

    <td>dr</td>

    <td>hrn</td>

    </tr>

    </table>

    </body>

    </html>


    Süslü bir tablo örneği

    <!DOCTYPE html> 
    <html>

    <head>

    <style type=”text/css”>

    #örnek
    {
    font-family:”Trebuchet MS”,Arial,Helvetica,sans-serif;
    width:100%;
    border-collapse:collapse;
    }
    #örnek td, #örnek th
    {
    font-size:1em;
    border:1px solid #98bf21;
    }
    #örnek th
    {
    font-size:1.1em;
    text-align:left;
    padding-top:5px;
    background-color:#a7c942;
    color:#ffffff;
    }
    #örnek tr.alt td
    {
    color:#000000;
    background-color:#eaf2d3;
    }
    </style>

    </head>

    <body>

    <table id=”örnek”>
    <tr>
    <th>Birinci sütun başlığı(th)</th>
    <th>İkinci sütun başlığı(th)</th>
    <th>Üçüncü sütun başlığı(th)</th>
    <th>Dördüncü sütun başlığı(th)</th>
    </tr><tr class=”alt”>
    <td>satır 1 sütun 1</td>
    <td>satır 1 sütun 2</td>
    <td>satır 1 sütun 3</td>
    <td>satır 1 sütun 4</td>
    </tr><tr>
    <td>satır 2 sütun 1</td>
    <td>satır 2 sütun 2</td>
    <td>satır 2 sütun 3</td>
    <td>satır 2 sütun 4</td>
    </tr><tr class=”alt”>
    <td>satır 3 sütun 1</td>
    <td>satır 3 sütun 2</td>
    <td>satır 3 sütun 3</td>
    <td>satır 3 sütun 4</td>
    </tr><tr>
    <td>satır 4 sütun 1</td>
    <td>satır 4 sütun 2</td>
    <td>satır 3 sütun 3</td>
    <td>satır 4 sütun 4</td>
    </tr></table>
    </body>

    </html>


    Alıntıdır.




  • CSS Kutu Modeli

    Bütün html öğelerni kutu olarak kabul edebiliriz.CSS de tasarım ve düzen hakkında konuşurken kutu modeli kunuşulmuştur.

    CSS kutu modeli aslında kenar çizgileri dolgularıiçeriği ile HTML öğelerini saran bir kutudur.

    Kutu model bize öğeler ve boşluk öğeleri etrafında diğer öğelere göre bir sınır yerleştirmemize olanak sağlar.

    Aşagıdaki örnek bize kutu modelini göstermektedir.



    margin (kenar boşluğu) kenarlığın etrafında bir miktar alanı temizler.Arkaplan rengi yoktur tamamen şeffaftır.

    border (kenarlık) dolgu ve içeriğin etrafını sarar ve kutunun arkaplan renginden etkilenir.

    padding (dolgu) içeriğin etrafında bir miktar alanı temizler ve arkaplan renginden etkilernir.

    content (içerik) metin ve resim gibi içeriklerin görüneceği alan

    Tüm tarayıcılarda bir öğenin doğru görüntülenmesi için,kutu modelinin nasıl çalıştığını bilmeniz gerekir.

    Bir öğenin genişliği ve yüksekliği

    CSS ile bir öğenin yükseklik ve genişliğini ayarladığınızda sadece içerik alanının genişliğini ve yükseliğini ayarlayın.Bir öğenin tam boyutunu hesaplamak için ayrıca kenar çizgileri ve kenar boşluklarını da eklemelisiniz.

    Örnek olarak 300px genişliğinde bir kutu elde etmek için aşağıdaki ölçüleri kullanabilirsiniz..

    width:250px;
    padding:10px;
    border:5px solid gray;
    margin:10px;

    paddin margin ve border ölçülerini sağ ve sol olarak hesapladığınızda toplamda 300px genişliği elde edersiniz.

    Aşağıdaki kodlarla 250px genişliğinde bir kutu elde edersiniz.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    div.ex
    {
    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:0px;
    }
    </style>
    </head>
    <body><div class=”ex”>Bu tablo 250px genişliğindedir.</div>
    </body>
    </html>


    Bu örnek İE 8 ve önceki sürümlerinde doğru görüntülenmez ama sonraki örneklerde bu sorunu nasıl çözeceğimizi göreceğiz.

    Bir öğenin toplam genişliği aşağıdaki gibi hesaplanır.
    Toplam genişlik= width + sol padding + sağ padding + sol border + sağ border + sol margin + sağ margin

    Bir öğenin toplam yüksekliği ise aşağıdaki gibi hesaplanır.
    Toplam yükseklik= height + üst padding + alt padding + üst border + alt border + üst margin + alt margin

    Tarayıcıların Uyumluluk Sorunu

    Yukarıdaki örnek İE8 ve önceki sürümlerinde düzgün görüntülenmez.Bu sorunu gidermek için HTML sayfanıza DOCTYPE eklemeniz gerekir.

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” 
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html>
    <head>
    <style type=”text/css”>
    div.ex
    {
    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:0px;
    }
    </style>
    </head>
    <body><div class=”ex”>Bu tablo 250px genişliğindedir.</div>
    </body>
    </html>




  • CSS Kenarlık

    CSS Kenarlık Özellikleri

    CSS kenarlık özelliği bir öğenin Kenarlığın stilini ve rengini belirtmenize izin verir.

    Kenarlık Stili

    Border-style özelliği kenarlığın ne şekilde gösterileceğini belirtir.
    Border-style özelliği ayarlanmadığı sürece kenarlık özelliklerinin hiçbiri etkili olmayacaktır.

    border-style değerleri:

    none: hiçbir kenarlık olmadığını belirtir
    dotted: noktalı kenarlık
    dashed: kesik çizgili kenarlık
    solid: ek çizgili kenarlık
    double: çift kenarlık her iki kenarlığın genişliği border-width değerinde verildiği gibidir.
    groove: 3D oluklu kenarlık etki border-color değerine göre değişir.
    ridge: 3D kabarık kenarlık etki border-color değerine göre değişir.
    inset: 3D insert(?) kenarlık etki border-color değerine göre değişir.
    outset: 3D outset(?) kenarlık etki border-color değerine göre değişir.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    p.none {border-style:none;}
    p.dotted {border-style:dotted;}
    p.dashed {border-style:dashed;}
    p.solid {border-style:solid;}
    p.double {border-style:double;}
    p.groove {border-style:groove;}
    p.ridge {border-style:ridge;}
    p.inset {border-style:inset;}
    p.outset {border-style:outset;}
    p.hidden {border-style:hidden;}
    </style>
    </head>
    <body><p class=”none”>kenarlık yok</p>
    <p class=”dotted”>noktalı kenarlık</p>
    <p class=”dashed”>kesik çizgili kenarlık</p>
    <p class=”solid”>tek çizgili kenarlık</p>
    <p class=”double”>çift kenarlık</p>
    <p class=”groove”>3D oluklu kenarlık</p>
    <p class=”ridge”>3D kabarık kenarlık</p>
    <p class=”inset”>inset kenarlık</p>
    <p class=”outset”>outset kenarlık</p>
    <p class=”hidden”>hidden kenarlık</p>
    </body></html>


    Kenarlık Genişliği

    border-width özelliği kenarlığın genişliğini ayarlamak için kullanılır.
    Genişlik üç ön tanımlı değer olan thin, medium, veya thick ten br kullanılarak ayarlanır.
    Tek başına kullanıldığında border-width özelliği çalışmaz.Bu nedenle kenarlıkları ayarlamak için border-style özelliğini kullanın.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    p.bir
    {
    border-style:solid;
    border-width:5px;
    }
    p.iki
    {
    border-style:solid;
    border-width:medium;
    }
    p.üç
    {
    border-style:solid;
    border-width:1px;
    }
    </style></head>
    <body>
    <p class=”bir”>kenarlık genişliği</p>
    <p class=”iki”>kenarlık genişliği</p>
    <p class=”üç”>kenarlık genişliği</p>
    </body></html>


    Kenarlık rengi

    border-color özelliğini kullanarak kenarlık rengini ayarlayabilirsiniz.
    Şeffaf bir kenarlıkta ayarlayabilirsiniz.
    Tek başına kullanıldığında border-color özelliği çalışmaz.Bu nedenle kenarlık rengini ayarlamak için border-style özelliğini kullanın.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    p.bir
    {
    border-style:solid;
    border-color:red;
    }
    p.iki
    {
    border-style:solid;
    border-color:#98bf21;
    }
    </style>
    </head><body>
    <p class=”bir”>kırmızı kenarlık</p>
    <p class=”iki”>yeşil kenarlık</p></body>
    </html>


    Kenarlık Individual sides (Bağımsız taraf)

    Kenarlığın her tarafı için farklı bir özellik belirleyebilirsiniz.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    p
    {
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
    }
    </style>
    </head><body>
    <p>2 farklı kenarlık stili</p>
    </body>
    </html>


    Yukarıdaki örnekteki kenarlığı tek bir özellik ile de oluşturabiliriz.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    p
    {
    border-style:dotted solid;
    }
    </style>
    </head><body>
    <p>2 farklı kenarlık</p>
    </body>
    </html>


    Border-style özelliği dört değer birden alabilir.

    border-style:dotted solid double dashed;

    üst kenarlık dotted biçiminde
    sağ kenarlık solid biçiminde
    alt kenarlık double biçiminde
    sol kenarlık dashed biçiminde olur

    border-style:dotted solid double;

    üst kenarlık dotted biçiminde
    sağ ve sol kenarlık solid biçiminde
    alt kenarlık double biçiminde olur

    border-style:dotted solid;

    üst ve alt kenarlık dotted biçiminde
    sağ ve sol kenarlık solid biçiminde olur

    border-style:dotted;

    bütün kenarlar dotted biçiminde olur

    Border-style özelliğini border-width ve border color özellikleri içinde kullanabilirsiniz.

    Kenarlık – Kestirme özelliği

    Yukarıdaki örneklerden de görebileceğiniz gibi, kenarlıklar ile ilgili dikkate alınması gereken pek çok özellik vardır.
    Kenarlığın özelliklerini tek bir kodda belirtebilirsiniz.Buna kestirme özellik denir.

    border-width
    border-style (required)
    border-color

    sırasıyla özellikleri belirtebilirsiniz.

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    p
    {
    border:5px solid red;
    }
    </style>
    </head><body>
    <p>CSS kenarlık kestirme özelliği</p>
    </body>
    </html>


    Örnek 1

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    p
    {
    border-style:solid;
    border-top:thick double #ff0000;
    }
    </style>
    </head><body>
    <p>Sadece üst kenarlık özelliklerini belirleyen kestirme özellik.</p>
    </body></html>


    Örnek 2

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    p {border-style:solid;}
    p.none {border-bottom-style:none;}
    p.dotted {border-bottom-style:dotted;}
    p.dashed {border-bottom-style:dashed;}
    p.solid {border-bottom-style:solid;}
    p.double {border-bottom-style:double;}
    p.groove {border-bottom-style:groove;}
    p.ridge {border-bottom-style:ridge;}
    p.inset {border-bottom-style:inset;}
    p.outset {border-bottom-style:outset;}
    </style>
    </head><body>
    <p class=”none”>alt kenarlık yok.</p>
    <p class=”dotted”>dotted alt kenarlık.</p>
    <p class=”dashed”>dashed alt kenarlık.</p>
    <p class=”solid”>solid alt kenarlık.</p>
    <p class=”double”>double alt kenarlık.</p>
    <p class=”groove”>groove alt kenarlık.</p>
    <p class=”ridge”>ridge alt kenarlık.</p>
    <p class=”inset”>inset alt kenarlık.</p>
    <p class=”outset”>outset alt kenarlık.</p>
    </body>
    </html>


    örnek 3

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    p
    {
    border-style:solid;
    border-left-width:15px;
    }
    </style>
    </head><body>
    <p><b>Not:</b>”border-left-width” özelliği tek başına kullanılmaz.”border-style”
    özelliğinden sonra yazılmalıdır.</p>
    </body>
    </html>


    örnek 4

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    p.bir
    {
    border-style:solid;
    border-color:#0000ff;
    }
    p.iki
    {
    border-style:solid;
    border-color:#ff0000 #0000ff;
    }
    p.üç
    {
    border-style:solid;
    border-color:#ff0000 #00ff00 #0000ff;
    }
    p.dört
    {
    border-style:solid;
    border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
    }
    </style>
    </head><body>
    <p class=”bir”>Tek renk kenarlık!</p>
    <p class=”iki”>İki renkli kenarlık!</p>
    <p class=”üç”>Üç renkli kenarlık!</p>
    <p class=”dört”>Dört renkli kenarlık!</p></body>
    </html>


    örnek 5

    <!DOCTYPE html> 
    <html>
    <head>
    <style type=”text/css”>
    p
    {
    border-style:solid;
    border-right-color:#ff0000;
    }
    </style>
    </head><body>
    <p>Sağ kenarlığı reklendirme.</p>
    </body>
    </html>


    Alıntıdır.



    < Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 5 Temmuz 2012; 16:07:12 >




  • Hocam çok güzel.Bende birkaç güne css'ese giriş yapacağım.
  • input[type="text"]{}
    a[rel="deneme"]{}

    ile attributelere göre de ayrı css ayarlayabilirsiniz.
  • quote:

    Orijinalden alıntı: lextor

    Hocam çok güzel.Bende birkaç güne css'ese giriş yapacağım.

    web programlama için css yi mutlaka öğrenmek gerekirmiş başlarken ne işe yaradığını tam olarak bilmiyordum. Baya bir kolaylık sağlıyormuş. bu aralar yoğun olduğum için ara verdim ama en kısa sürede kaldığı yerden devam edeceğim .kolay gelsin
  • quote:

    Orijinalden alıntı: Dr.Hrn

    quote:

    Orijinalden alıntı: lextor

    Hocam çok güzel.Bende birkaç güne css'ese giriş yapacağım.

    web programlama için css yi mutlaka öğrenmek gerekirmiş başlarken ne işe yaradığını tam olarak bilmiyordum. Baya bir kolaylık sağlıyormuş. bu aralar yoğun olduğum için ara verdim ama en kısa sürede kaldığı yerden devam edeceğim .kolay gelsin

    Biliyordum zaten css önemli.Sağolun bakalım kolay olacakmı




  • quote:

    Orijinalden alıntı: Dr.Hrn

    Bismillahirrahmanirrahim

    CSS'ye başlıyorum. hadi hayırlısı

    CSS ile tek seferde birden çok web sayfasının stil ve düzenini değiştirebilriz.

    <!DOCTYPE html> 

    <html>

    <head>

    <style type="text/css">

    body

    {

    background-color:red;

    }

    h1

    {

    color:blue;

    text-align:center;

    }

    p

    {

    font-family:"Times New Roman";

    font-size:30px;

    }

    </style>

    </head>

    <body>

    <h1>CSS örnekleri</h1>

    <p>bu bir paragraftır<p>

    </body>

    </html>


    Bu örnekte sayfaların arka plan rengini h1 başlığının rengini ve paragraf için yazı tipi ve boyutunu nasıl ayarladığımızı görüyoruz .

    sayfa içindeki tüm h1 başlıkların rengini ve tüm paragrafların yazı tipi ve boyutunu tek seferde head etiketi içinde ayarlamış olsuk.

    alıntı

    Html bitti galiba, hayırlı olsun. Css te başarılar.




  • quote:

    Orijinalden alıntı: ikiodayediduvar

    quote:

    Orijinalden alıntı: Dr.Hrn

    Bismillahirrahmanirrahim

    CSS'ye başlıyorum. hadi hayırlısı

    CSS ile tek seferde birden çok web sayfasının stil ve düzenini değiştirebilriz.

    <!DOCTYPE html> 

    <html>

    <head>

    <style type="text/css">

    body

    {

    background-color:red;

    }

    h1

    {

    color:blue;

    text-align:center;

    }

    p

    {

    font-family:"Times New Roman";

    font-size:30px;

    }

    </style>

    </head>

    <body>

    <h1>CSS örnekleri</h1>

    <p>bu bir paragraftır<p>

    </body>

    </html>


    Bu örnekte sayfaların arka plan rengini h1 başlığının rengini ve paragraf için yazı tipi ve boyutunu nasıl ayarladığımızı görüyoruz .

    sayfa içindeki tüm h1 başlıkların rengini ve tüm paragrafların yazı tipi ve boyutunu tek seferde head etiketi içinde ayarlamış olsuk.

    alıntı

    Html bitti galiba, hayırlı olsun. Css te başarılar.

    Teşekkürler




  • 
Sayfa: 123
Sayfaya Git
Git
sonraki
- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.