Css ve Html İle Border-Kenarlık Özellikleri Uygulaması 2

Programlama öğrenmek için her zaman yeni örnekler denemelisiniz. Bunun için bugün sizlere Css ve Html İle Border-Kenarlık Özellikleri Uygulaması 2 programını aktaracağız.  Css ve Html  de kodlama nasıl gerçekleşir? Css ve Html İle Border-Kenarlık Özellikleri Uygulaması 2 nasıl kodlanır? Gibi sorularınızın cevabını bu içeriğimizde bulabilirsiniz.

Css ve Html İle Border-Kenarlık Özellikleri Uygulaması Kod Alanı

Css ve Html  web programlama dilinde Border-Kenarlık Özellikleri Uygulaması 2 kod metnini oluşturduk. Bu uygulamamızda bir önceki bu konu ile ilgili verilen teorik bilgilerin kullanımı hakkında bir örnek oluşturduk. Örneğimizin içerisinde <p> etiketi ve css yardımıyla birçok farklı kenarlık özelliklerinin bir anda kullanımını görebilirsiniz. Bu uygulamamızın kod metni aşağıdaki gibidir:

<!doctype html>
<html>
    <head>
        <title>Border Örnekleri</title>
        <meta charset="utf-8">
        <style>
            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.none {border-style: none;}
            p.hidden {border-style: hidden;}
            p.mix {border-style: dotted dashed solid double;}
        </style>
    </head>
    
    <body>
        <h2>border-style Özellikleri</h2>
        <p>Aşağıda border özelliğinin çeşitli kullanımları listelenmiştir.</p>

        <p class="dotted">Noktalı Kenarlık.</p>
        <p class="dashed">Kesik Çizgili Kenarlık.</p>
        <p class="solid">Düz Kenarlık.</p>
        <p class="double">Çift Kenarlık.</p>
        <p class="groove">3 boyutlu kenarlık.</p>
        <p class="ridge">3 boyutlu kenarlık.</p>
        <p class="inset">3 boyutlu kenarlık.</p>
        <p class="outset">3 boyutlu kenarlık.</p>
        <p class="none">Kenarlık yok.</p>
        <p class="hidden">Gizli kenarlık.</p>
        <p class="mix">Karma.</p>       
    </body>
</html>