CSS Dersleri

CSS ,html kodlari uzerinde islem yaptigi icin Css derslerimize baslamadan once kucuk bir uyari yapalim

Temel Düzeyde html bilgisine sahip degilseniz once html derslermizi inceleyebilirsiniz.[ Html Dersleri]
( html derslerinde css hakkinda hatiri sayilir derecede bilgi verildi.)


Html Kodlariyla Bicimlendirme Ornegi
<p align="center"><font size="5" color="green">"Olmadı diye sızlandığın duaya Gün gelir olmadı diye şükredersin" <br>
Lorentz Mayda</font></p>

Yukardaki kodun olumsuz birkac tarafindan bahsedelim(CSS bu olumsuzluklara cozum sunabiliyor!)
  • ornekte eklenen htm stilleri Sadece eklendigi elementin bicimlendirilmesinde etkili olacaktir,yani benzer bir stile tekrar ihtiyac duyarsak kodlari tekrar yazmak zorundayiz,yuzlerce dokumanin guncellenmesi gerektiginde cekilecek zahmeti bi dusunun!
  • Html bicimlendirme yetenegi oldukca zayiftir!
  • Nitelik-deger seklinde yapilan bicimlendirmeler bir sure sonra icinden cikilmasi zor kod yiginina donusecektir,update,hiz,seo acisindan bunlar negatif durumlardir
  • Css

  • CSS Cascading Style Sheets (Basamaklı Stil Şablonları,Basamaklı Biçim Sayfaları,Basamaklı Stil Sayfaları...) gibi turkce karsiliklarini webde bulmak mumkun
  • CSS html kodlarina gorsel "guzellik" katar (html kodlarinin bir cop adam olusturdugunu dusunelim iste CSS ile bu cop adami normal yakisikli bir adam gibi gosterebiliriz :) )
  • ...Yukardaki aciklamaya ek olarak CSS sadece gorsel guzellik icin kullanilmaz, hazirladigimiz dokumanin Farkli ortamlarda farkli gorunebilmesini saglayabiliriz,Bilgisayarda,Telefonda vs. (PC de 32px font boyutundaki bir yaziyi/basligi telefonda gormek pek estetik olmayabilir css kodlari ile telefonda 18px gosterebiliriz,....)
  • CSS genel olara css uzantili harici bir dosyaya kaydedilir.
  • Bir CSS dosyasi yuzlerce dokumana hukmedebilir,sadece tek 1 CSS dosyasinin guncellenmesi ile butun bir web sayfasinin gorunumunu degistirebilirsiniz.
  • CSS'in Sayfaya etkisini gorelim

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Html-Css Uygulama</title>
      <style>
    
      </style>
      </head>
      <body>
         <!--Ust Menu Alani-->
          <div id="menu">
              <ul>
                <li><a href="#sinavlar">Sinavlar</a></li>
                <li><a href="#dersler">Dersler</a></li>
                <li><a href="#testler">Testler</a></li>
              </ul>
          </div>
          <!--Ust Menu Alani Bitti-->
    
    <!-- Icerik -->
    <div id="sayfaicerigi">
      <div id="sinavlar" class="bolum">
        <h1 class="baslik">Sinavlar</h1>
        <strong><br></strong>
      </div>
    
      <div id="dersler" class="bolum">
        <h1 class="baslik">Dersler</h1>
        <strong>Dersler Bolumu<br></strong>
      </div>
    
      <div id="testler" class="bolum">
        <h1 class="baslik">Testler</h1>
        <strong>Testler Bolumu<br></strong>
      </div>
    
    </div>
    <!-- Icerik Son -->
    
    <!-- Footer -->
    <div id="footer">
      © 2017  All Rights Reserved
    </div>
    <!-- Footer son-->
      </body>
    </html>
    
    /*padding,margin degeri en basta 0px olsun*/
          *{padding: 0px;margin: 0px;}
    
          #menu{
            width: 100%;
            background-color: rgba(0, 0, 0, 0.7);
          }
    
          #menu ul li{
            display: inline-block;
          }
    
          #menu ul li a{
            display: block;
            padding: 15px;
            text-decoration: none;
            color: rgba(255,255, 255, 0.9);
            font-size: 20px;
          }
          #menu ul li a:hover{
            background-color: rgba(0, 0, 0, 0.9);
          }
    
          #sayfaicerigi{
            padding: 20px 15px 30px 15px;
          }
    
          .bolum{
            padding: 20px;
            font-size: 18px;
            text-align: justify;
            height: 600px;
          }
    
          .baslik{
            text-align: center;
            background-color: rgba(0, 200, 0, 0.2);
            padding:5px 20px;
            margin-bottom: 20px;
            color: rgba(0, 0, 0, 0.8);
            border-bottom:1px solid rgba(0,0,0,.2);
          }
    
          #sinavlar{background-color: rgba(250,0,0,.2);}
          #dersler{background-color: rgba(0,250,0,.2);}
          #testler{background-color: rgba(0,0,250,.2);}
          #footer{
            text-align: center;
            background-color: rgba(0, 0, 0,.7);
            color:white;
            padding: 20px;
          }
    
    Bu dersin amaci CSS ihtiyaci ve CSS'in html ogeleri uzerindeki etkisini gorebilmekti!

    Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
    birbyte.net@gmail.com