CSS border-bottom-style Örnek

Kasım 29, 2015

htmlvecssegitimi.blogspot.com

Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz.

KAYNAK KODLARI	SONUÇ EKRANI
<!DOCTYdivE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>css border-bottom-style özelliği ve örnek uygulama</title> <style> div {border-style:solid; margin:30px; border-width:5px; display:inline-block; width:100px; height:100px; padding:30px; background-color:yellow; } div.none {border-bottom-style: none;} div.dotted {border-bottom-style: dotted;} div.dashed {border-bottom-style: dashed;} div.solid {border-bottom-style: solid;} div.double {border-bottom-style: double;} div.groove {border-bottom-style: groove;} div.ridge {border-bottom-style: ridge;} div.inset {border-bottom-style: inset;} div.outset {border-bottom-style: outset;} b{color:red; font-size:1.2em;} </style> </head> <body> <h1>Css border-bottom-style değerlerini her bir div kutusunda etkilerini görelim.</h1> <div class="none">Bu kutuda alt kenar için stil tanımlamadık. <b>(none)</b> </div> <div class="dotted">Bu kutuda alt kenarı noktalı tanımladık.<b>(dotted)</b></div> <div class="dashed">Bu kutuda alt kenarı kesik çizgili uyguladık.<b>(dashed)</b></div> <div class="solid">Bu kutuda ise alt kenarı sürekli çizgi değerini verdik. <b>(solid)</b></div> <div class="double">Bu kutuda alt kenarı çift çizgili olmasını sağladık.<b>(double)</b></div> <div class="groove">Bu kutuda alt kenarlığı ,3 boyutlu oluk şeklinde belirledik.<b>(groove)</b></div> <div class="ridge">Bu kutuda alt kenarlığı ,3 boyutlu tümsek şeklinde belirledik.<b>(ridge)</b></div> <div class="inset">Bu kutuda alt kenarlığı ,3 boyutlu kenarın içine eğimli stil tanımladık.<b>(inset)</b></div> <div class="outset">Bu kutuda alt kenarlığı ,3 boyutlu kenarın dış yüzeyine doğru eğim oluşturduk.<b>(outset)</b></div> <h2>Aşağıdaki resimde border-style değerlerinin etkilerini daha rahat görebiliriz.</h2> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4o01lxQDcBFQUvHlY4y1ZNh5RRWPnoe8Djp6Q73Lo_yqgtf_3Tn2bHyRxHCa-OjUFS9t47QEo23jrJJ_hSoapzo4EdchdcYSLjdjF1mtkzs8MEloQROf4C7IYnyCew9QtbaKUeTKgBA/s320/css-border-styles.png" alt="css-border-nedir" style="margin-left:200px;" title="css-border-style" /> </body> </html>

KAYNAK KODLARI

SONUÇ EKRANI

<!DOCTYdivE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>css border-bottom-style özelliği ve örnek uygulama</title>
  <style>
    div {border-style:solid;
         margin:30px;
      border-width:5px;
      display:inline-block;
      width:100px;
      height:100px;
      padding:30px;
      background-color:yellow;
    }
    div.none {border-bottom-style: none;}
    div.dotted {border-bottom-style: dotted;}
    div.dashed {border-bottom-style: dashed;}
    div.solid {border-bottom-style: solid;}
    div.double {border-bottom-style: double;}
    div.groove {border-bottom-style: groove;}
    div.ridge {border-bottom-style: ridge;}
    div.inset {border-bottom-style: inset;}
    div.outset {border-bottom-style: outset;}
    
    b{color:red;
    font-size:1.2em;}
  </style>
</head>

<body>
  <h1>Css border-bottom-style değerlerini her bir div kutusunda etkilerini görelim.</h1>
  <div class="none">Bu kutuda alt kenar için stil tanımlamadık. <b>(none)</b> </div>
  <div class="dotted">Bu kutuda alt kenarı noktalı tanımladık.<b>(dotted)</b></div>
  <div class="dashed">Bu kutuda alt kenarı kesik çizgili uyguladık.<b>(dashed)</b></div>
  <div class="solid">Bu kutuda ise alt kenarı sürekli çizgi değerini verdik. <b>(solid)</b></div>
  <div class="double">Bu kutuda alt kenarı çift çizgili olmasını sağladık.<b>(double)</b></div>
  <div class="groove">Bu kutuda alt kenarlığı ,3 boyutlu oluk şeklinde belirledik.<b>(groove)</b></div>
  <div class="ridge">Bu kutuda alt kenarlığı ,3 boyutlu tümsek şeklinde belirledik.<b>(ridge)</b></div>
  <div class="inset">Bu kutuda alt kenarlığı ,3 boyutlu kenarın içine eğimli stil tanımladık.<b>(inset)</b></div>
  <div class="outset">Bu kutuda alt kenarlığı ,3 boyutlu kenarın dış yüzeyine doğru eğim oluşturduk.<b>(outset)</b></div>

<h2>Aşağıdaki resimde border-style değerlerinin etkilerini daha rahat görebiliriz.</h2>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4o01lxQDcBFQUvHlY4y1ZNh5RRWPnoe8Djp6Q73Lo_yqgtf_3Tn2bHyRxHCa-OjUFS9t47QEo23jrJJ_hSoapzo4EdchdcYSLjdjF1mtkzs8MEloQROf4C7IYnyCew9QtbaKUeTKgBA/s320/css-border-styles.png" alt="css-border-nedir" style="margin-left:200px;" title="css-border-style" />
</body>

</html>

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

CSS border-bottom-style Örnek

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Web Sitenizden Çok Para Kazanin

YouTube reklamları nasıl engellenir

Javascript Oyun Yapma Dersleri HTML5+CSS3

Html dersleri

İnternetten hangi alanlarda para kazanılır?-İnternetten para kazanmanın yolları

İnternetten Para Kazanmanın Yolları -İnternetten Para Kazandıran Siteler -İnternetten Nasıl Para Kazanılır

Html belgesi yapısını anlama uygulaması

HTML DOCTYPE Bildirimi

HTML5 ile SEO Uyumlu İçerik Üret

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript