<hr> Kullanımı

Bu dersimizde <hr> kodu kullanımını öğreneceğiz.

Bazen tasarımlarımızda veya çalışma sayfalarımızda yatay çizgi çizme ihtiyacı duyarız bu yatay çizgi ihtiyacını HTML' de


<hr>

kod ile gerçekleştirebiliriz.

HTML de birçok amaç ile kullanılabilir, ayrıca Web Tasarımcılar açısından farklı işlevlerde de kullanılması mümkündür.

Lakin standart görünümlü yatay çizgi kodu bazı zengin içerikli tasarımlarda iyi görünüm sağlanmayabilir, zengin tasarımlar da kullanabilmemiz için CSS dosyamızda küçük değişlikler yaparak tasarımımızda ve kullanım amacımıza göre tasarlayabiliriz.

Eğer güçlü bir yatay çizgi çizmek için aşağıdaki işlemleri CSS dosyamızda ve Çalışma sayfamızda uygulayabiliriz.

Standart kullanım kodu:

<hr>



Çıktı:




İndex.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title></title>

    <link rel="stylesheet" href="style.css" media="all">

</head>

<body>



 



    <!-- Standart <HR> -->

    <hr>                     <!-- CSS dosyamızda standart değeri sıfırladığımız için gözükmeyecektir.-->

    

    <br>

    

    <!-- 100 PX -->

    <hr class="hrX100">

    

    <br>

    

    <!-- 300 PX-->

    <hr class="hrX300"> 

    

    <br>

    

    <!-- 300 PX - 2 PX -->

    <hr class="hrX300Y2">     

    

    

    <br>

    

    <!-- RESİM -->

    <hr class="hrResim"> 



    <br>

    

    <!-- İCİ BOS -->

    <hr class="hricibos">     

    

    

    <br>

    

    <!-- DİV İÇİERİSİNDE KULLANIM -->    

    <div class="hr"><hr /></div>

    

</body>

</html>



style.css

/* Standart değerleri sıfırlıyoruz. <HR>*/

hr {

    border: 0;

}



/* 100 PX GENİŞLİK <HR>*/



hr.hrX100 {

    color: #f00;

    background-color: #f00;

    height: 5px;

}

 

hr.hrX100 {

    width:100px;             /* Genişlik   */

    height: 20px;            /* Yükseklik */

    background: #f00;       /* Arkaplan Renk      */

}



/* 300 PX GENİŞLİK <HR>*/

hr.hrX300{

    width:300px;             /* Genişlik   */

    height:20px;            /* Yükseklik */

    background: #f00;       /* Arkaplan Renk      */

}



/* 300 PX GENİŞLİK - 2 PX YÜKSEKLİK <HR>*/

hr.hrX300Y2{

    width:300px;             /* Genişlik   */

    height:2px;            /* Yükseklik */

    background: #f00;       /* Arkaplan Renk      */

  

}

 

/* 15 PX YÜKSEKLİK - RESİM <HR>*/

hr.hrResim {

    height: 15px;                                                /* Yükseklik */

    background: #fff url(hr1.gif) no-repeat scroll center;    /* Renk  + Resim Adres  */

}



/* 15 PX YÜKSEKLİK - İÇİ BOŞ <HR>*/

hr.hricibos {

    border: 1px solid #f00;     /* Çerçeve     */

    color: #fff;             /* Renk     */

    background-color: #fff;     /* Arkaplan Renk   */

    height: 10px;             /* Yükseklik */

    width:400px;             /* Genişlik   */

}



/* DİV İÇİERİSİNDE KULLANIM <HR>*/

div.hr { 

  height: 15px; 

  background: #fff url(hr1.gif) no-repeat scroll center; 



div.hr hr { 

  display: none; 

}



Örnek Dersimizi kaynak dosyasında daha detaylı inceleyebilirsiniz.

  • Etiketler;
Zafer Başpınar
Zafer BAŞPINAR Web hizmetleri alanına 2000 yıllarında başlayarak web hizmetleri alanında eğitim ve öğretim hayatına katarak gelişmekte olan web hizmetleri teknolojisine ayak uydurmaya gayret göstermektedir. Şuan ki durumu eğitim ve öğretim hayatına yurt dışında lisans olarak devam etmektedir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git