CSS NEDİR ÖRNEK CSS PROGRAM KODLARI

1-CSS NEDİR?

HTML bize metin biçimlendirme alanında çok geniş olanaklar sunar. CSS, uzun yazılışıyla Cascading Style Sheets, veya Türkçesiyle Stil şablonları ise bunu bir adım daha öteye götürür, bize sayfalarımız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki bu esnekliğidir.

Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanmayız. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki, bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz.Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz.

CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler.

Hemen hemen her konuda olduğu gibi CSS konusunda da Microsoft Internet Explorer ve Netscape farklı yorumlar ortaya koyarlar. Bu noktada her iki browserın da aynı/benzer yorumlayacağı kodlar yazmak en uygunudur.

2-BAZI FAYDALI CSS KODLARI

a-CSS'ye giriş:




HTML KODU:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

<head runat="server">

    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

    <title>Untitled Page</title>

</head>

<body>

    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <div>

        <h1>mehmet yarluğkal</h1>

        <h1>yaşar yarluğkal</h1>

        <h1>hayri yarluğkal</h1>

       

        <h1 class="kişiler">mehmet yarluğkal</h1>

        <h1 class="kişiler">yaşar yarluğkal</h1>

        <h1 class="kişiler">hayri yarluğkal</h1>

       

         <h1 id="kişi1">mehmet yarluğkal</h1>

        <h1 id="kişi2">yaşar yarluğkal</h1>

        <h1 id="kişi3">hayri yarluğkal</h1>

       

        <p id="kişi1">hayri yarluğkal</p>

       

       

       

        </div>

    </form>

</body>

</html>

CSS KODU:

body /*bu özellik de  sayfanın gövdesini etkileyecek türden değişiklikler yapılırken kullanılır*/

{

      background-color:Yellow;

}

h1 /*css de defaultta yazdığımız kodlara buradan mesela h1 tagını kullanarak ve class ismin de n ya da id den ulaşarak gerekli düzenlemeleri yapabiliirz.*/

{

      color:Red;

}

 

.kişiler /*class isimleri kullanılırken başında nokta kullanılara ilgili classlara erişilir*/

{

      color:Black;

}

 

h1#kişi1 /*id ler kullanılırken başında sharp işareti kullanılarak erişim yapılır. ayrıca burada başına h1 yazarsam hem h1 i hem de kişi1 e sahip olanı etkileyecek ama sade #kişi1 yazarsam bütün kişi1 leri etkiler*/

{

      color:Blue;

}

b-CSS ile resimli menü yapımı:

 

 

HTML KODU:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

<head runat="server">

    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

    <title>Untitled Page</title>

</head>

<body>

    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <div>

        <ul id="menu">

        <li> <a href="Default.aspx"  class="tıkla">Anasayfa</a></li>

        <li> <a href="hak.htm">HakkImIzda</a></li>

        <li> <a href="ürün.htm">Ürünlerimiz</a></li>

        <li> <a href="ilet.htm">İletİşİm</a></li>

       

       

       

       

       

       

        </ul>

       

        </div>

    </form>

</body>

</html>

CSS KODU:

body {

}

ul#menu

{

      list-style-type:none;/*linklerin yanıdaki noktaları atmak için kullanıyoruz*/

      padding:0;/*padding ve margin sayesinde yazılarımız sayfanın soluna kayar*/

      margin:0;

      width:auto;

      height:36px;

      text-transform:uppercase;/*bu özellkikle yazılan yazılan büyük harfla yazılmış hale gelir*/

      font-size:12px;

      font-weight:bold;

      font-family:Arial Helvetica Sans-Serif;

      border-bottom:4px solid #336666;/*içi dolu çizgi oluşturulurken*/

      border-top:1px solid #c0e2d4;

      background:transparent url(images/açık.gif) repeat-x top left;  

}

ul#menu li

{

      display:block; /*linklerimizi yatay blok haline getirdi ve sola doğu döşedik float:left ile */

      float:left;

     

}

ul#menu li a

{

      color:#874b46;

      height:32px;

      text-decoration:none;

      padding:12px 20px 0;

      background:transparent url(images/çizgi.gif) no-repeat top right;

           

}

ul#menu li a:hover

{

      background:transparent url(images/açık.gif) no-repeat top right;

      height:32px;

}ul#menu li a.tıkla

{

      color:#ffffff;

      background:transparent url(images/koyu.gif) no-repeat top right;

}


ÜCRETSİZ KPSS VİDEO DERSLER, TESTLER BURADA TIKLAYINIZ


BENZER KONULARI SİTE İÇİNDE ARAYIN










  • SİTE İÇİ ARAMA
  • Kariyerdersleri.com
  • KATEGORİLER
  • HAKKIMIZDA
Mutlu olmayı yarına bırakmak, karşıya geçmek için nehrin durmasını beklemeye benzer ve bilirsin, o nehir asla durmaz.
KPSS MATEMATİK KPSS GEOMETRİ KPSS VATANDAŞLIK KPSS TÜRKÇE KPSS TARİH KPSS COĞRAFYA
İNGİLİZCE ALMANCA İTALYANCA KARİYER OYUN BİLGİSAYAR YAZILIM BİLGİSAYAR NETWORK
BİLGİSAYAR DONANIM BİLİŞİM TERİMLERİ CİLT VE CİLT BAKIMI HASTALIKLARIMIZ İNSAN VÜCUDU NEDİR