1. Ayyıldız Tim forumu Hariç Hiç Bir şekilde Rütbeli Oldugunu İdda edenlere inanmayınız.. Ayyıldız Tim Adına Sizden Bilgi Belge TC Kimlik Vb Evrak İsteyenlere Asla Bilgilerinizi Vermeyiniz.
    Duyuruyu Kapat

Css Dersleri 1-giriş

'Html - CSS - XML - JavaScript - Ajax' forumunda ERVAH-I-EZEL tarafından 23 Nisan 2017 tarihinde açılan konu

  1. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,651
    Özel Mesaj
    Herkese Selâmün Aleyküm.

    HTML Konuları bitirmemin üzerinden uzunca bir süre geçti. Bir süre hiç konu açmayarak ara verdim ve okul derslerine odaklandım. Artık elimden geldiğince Css dersleri üzerinden devam edeceğim inşallah...

    Html ve Css'in ne olduğu hakkında hiç bir bilgisi olmayanlar hakkında şu konuyu okumalarını istiyorum:
    Web Programlama Dilleri ve Kullanıldıkları Yerler

    Ayrıca Css öğrenmek için en az temel düzeyde HTML bilmeniz gerekiyor. Aşağıdaki konuları takip ederek Web Tasarımda temel konu olan HTML'yi iyi bir düzeyde öğrenebilirsiniz.

    HTML Dersleri 1
    HTML Dersleri 2
    HTML Dersleri 3
    HTML Dersleri 4
    HTML Dersleri 5
    HTML Dersleri 6
    HTML Dersleri 7

    Bu ilk Css dersimizde Css'in yapısı ve Css'nin sayfaya eklenmesi gibi teorik konulardan bahsedilecek. İlk ders size biraz sıkıcı gelebilir. Ancak gelecek derslerde hızlı, akıcı ve eğlenceli bir şekilde web sitemizi geliştirmeye devam edeceğiz.

    1- Css'in Sayfaya Eklenmesi

    Css'i kodları HTML kodlarını biçimlendirmeye yani geliştirip düzenlemeye yarar. Yani HTML kodları olmadan Css kodları da bir işe yarayamayacağı için Css kodlarını HTML kodları ile birleştirmek gerekiyor.
    Bunu yapmanın üç yolu var.

    A- Parametre Şeklinde Css Kodlarını Eklemek

    Özelleştirilmek istenen HTML Etiketine "style" adlı parametre ile Css kodları yerleştirilir. Örnek:

    HTML:
    <p style="Css Kodlarımız"> </p>
    B- Head Etiketine Css Kodlarını Eklemek

    HTML belgesinde <head> etiketi içine <style> adlı bir etiket açılır ve içine HTML kodları yazılır. Örnek:

    HTML:
    <head>

          <style>
           Css Kodlarımız
          </style>
</head>
    C- Ayrı Bir Sayfaya Css Kodlarını Eklemek

    Not defterinden ya da kod editörümüzden bir Css belgesi oluşturur ve içine Css kodlarımızı yazarak kaydederiz. Daha sonra bu Css belgesini link yoluyla <head> etiketi içerisine ekleriz. Bir örnek ile açıklayalım:

    Oluşturduğumuz Css belgemizin adının "Deneme123" olduğunu varsayalım. <head> etiketimizin içine şu kodu yazalım:


    HTML:
    <link href="Deneme123" type="text/css" rel="stylesheet"/>
    "href" yani kaynak bölümü sizin Css dosyanızın adına göre değişecektir.

    Benim tercihim C seçeneğidir devrelerim. Çünkü böyle olunca kodlarımız daha düzenli gözüküyor. Hangisini seçeceğiniz yine de sizin kararınız tabii ki...

    2- Css Kod Yapısı

    Css kodlarının basit ve sabit bir yapısı vardır. Şimdi ben size bu kod yapısını bir örnek üzerinden açıklamak istiyorum:

    HTML:
    <!Docytype html>

<html>
          <head>
                    <title>Css Ders 1 </title>
                    <meta charset="Utf8">
                    <style>

                   </style>
          </head>
          <body>
                    <h3>ERVAH-I-EZEL</h3>

          </body>
</html>
    Yukarıdaki alanda temel HTML kodlarını yazdıktan sonra "h3" düzeyinde bir başlık oluşturduk. Bu başlık Css kodları ile "style" etiketi içine şu şekilde özelleştirilebilir:

    HTML:
    <style>

h3 {color: red; text-align: center;}

</style>
    [​IMG]

    Şimdi yazdığım Css kodlarına takılmayın. İleriki derslerde öğreneceğiz. Kod yapısını inceleyelim.

    İlk önce özelleştirmek istediğim etiketi "h3" olarak belirttim. Sonra "{" yani süslü parantez işaretini kullandım. Daha sonra seçtiğim etiketin hangi özelliğini değiştireceğimi belirledim. "color" renk anlamına gelir yani ben "h3" etiketinin rengini değiştireceğim. Daha sonra iki nokta bırakıp başlığımın rengini "red" yani kırmızı olarak belirledim. En sonunda noktalı virgül işaretini koydum. Noktalı virgül işareti her özellikten sonra konur. Mesela ben şimdi rengini belirledim. Ama bu kodların devamı var. Yani ben başlığımın renginden başka büyüklüğünü, biçimini vs. de belirleyebilirim. Örnekte "text-align" komutu ile yazının yaslanacağı yeri belirttim. Buna göre başlığım tam ortada olacaktır. Bütün kodlarımızı yazdıktan sonra süslü parantezi kapatıyoruz.

    Kafanıza takılan bir şey varsa merak etmeyin,
    ileriki derslerde bol bol pratik yapacağımız için gayet rahat anlayacaksınız.

    Bu Css kodlarının kullanımı hep aynıdır, farklılık göstermez. Ayrıca biz Css kodlarını "head" etiketi yerine ayrı bir dosyaya yazsaydık da aynı şeyi uygulayacaktık. Parametre ile eklemek isteseydik ise biraz farklı olacaktı:

    HTML:
    <h3 style="color: red; text-align: center;">ERVAH-I-EZEL</h3>
    Kodları biraz inceleyinde en "style" parametresinin içine özelleştirmek istediğimiz etiketi belirtmediğimizi görüyoruz. Nedeni belli, hangi etiketin neresini değiştireceğimiz belli. Kodu bir daha inceleyin.

    Konuyu sonlandırmadan önce son bir şeye değinmek istiyorum:

    Css'nin HTML' den önemli bir farkı var. HTML'de tablo hazırlamak için, liste hazırlamak için, link eklemek için, yazı yazmak için vs. hep farklı etiketler kullanılr.
    Css de ise bu durum yoktur. Mesela daha deminki "color" özelliğini ele alalım. Biz yazının da, başlığın da, listedeki madde işaretinin de, tablodaki çizgilerin de hepsini rengini aynı özellikle; "color" özelliği ile değiştirebileceğiz. Bu bakımdan Css'yi kolay kavrayacağınıza emin olun.

    Devrelerim, bu ilk Css dersimizin sonuna geldik. Konuyu beğenerek devamı için destek olmayı unutmayın. Anlamadığınız yer varsa seve seve cevap veririm. Yorumlarınız değerlidir. İyi çalışmalar... :)
     
    ERVAH-I-EZEL, 23 Nisan 2017
    #1
    doctor-paradox, note, Dnarib ve 12 kişi daha bunu beğendi.
  2. smavi81 Guest

    • Guest
    Katılım:
    19 Mart 2017
    Mesaj:
    18
    Alınan Beğeniler:
    7
    Özel Mesaj
    takipdeyim devrem
     
    smavi81, 24 Nisan 2017
    #2
    DarkBat ve ERVAH-I-EZEL bunu beğendi.
  3. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,651
    Özel Mesaj
    ERVAH-I-EZEL, 29 Nisan 2017
    #3
    DarkBat bunu beğendi.
  4. Rebell33 Guest

    • Guest
    Katılım:
    29 Nisan 2017
    Mesaj:
    10
    Alınan Beğeniler:
    13
    Özel Mesaj
    Ellerine sağlık devrem.
     
    Rebell33, 29 Nisan 2017
    #4
    DarkBat ve ERVAH-I-EZEL bunu beğendi.
  5. Rebell33 Guest

    • Guest
    Katılım:
    29 Nisan 2017
    Mesaj:
    10
    Alınan Beğeniler:
    13
    Özel Mesaj
    Çok yardımcı oldun sağol devrem.
     
    Rebell33, 29 Nisan 2017
    #5
    DarkBat ve ERVAH-I-EZEL bunu beğendi.
  6. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,651
    Özel Mesaj
    Teşekkürler, beni mutlu ettiniz. :D
     
    ERVAH-I-EZEL, 29 Nisan 2017
    #6
    DarkBat bunu beğendi.
  7. psikososyal Guest

    • Guest
    Katılım:
    13 Mayıs 2017
    Mesaj:
    45
    Alınan Beğeniler:
    25
    Özel Mesaj
    Devrem ben color : red komutunu yazıyoru m, defalarca kontrol ettim ama renk kırmızı olmuyor sebebi nedir ?
     
    psikososyal, 14 Mayıs 2017
    #7
    DarkBat ve ERVAH-I-EZEL bunu beğendi.
  8. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,651
    Özel Mesaj
    Yazdığın kodu iyi anlatman gerek. Tam olarak ne yaptığını anlatabilir misin? Bu arada noktalı virgül ( ; ) koydun mu ?
     
    ERVAH-I-EZEL, 14 Mayıs 2017
    #8
    DarkBat bunu beğendi.
  9. psikososyal Guest

    • Guest
    Katılım:
    13 Mayıs 2017
    Mesaj:
    45
    Alınan Beğeniler:
    25
    Özel Mesaj
    p { color:red; } örneğin böyle yazdim. Ama yazdığım paragrafta renk kırmızı olmuyor
    Ama aynı şeyi h başlıkları için yaptığımda oluyor .
     
    psikososyal, 15 Mayıs 2017
    #9
    DarkBat ve ERVAH-I-EZEL bunu beğendi.
  10. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,651
    Özel Mesaj
    Bilemedim şuan. Mutlaka bir hata olmalı.
     
    ERVAH-I-EZEL, 15 Mayıs 2017
    #10
    DarkBat bunu beğendi.
  11. MrFurkan27CCC Guest

    • Guest
    Katılım:
    15 Temmuz 2017
    Mesaj:
    10
    Alınan Beğeniler:
    8
    Özel Mesaj
    Ellerine sağlık devrem çok güzel olmuş. Siber saldırı,site hackeleme,index basma,bu işlerde kullanılan yazılımlar, vs. anlatırmısın.
     
    MrFurkan27CCC, 23 Temmuz 2017
    #11
    DarkBat ve ERVAH-I-EZEL bunu beğendi.
  12. fedakarlik Guest

    • Guest
    Katılım:
    13 Ağustos 2017
    Mesaj:
    18
    Alınan Beğeniler:
    23
    Özel Mesaj
    devrem öncelikle eline sağlık. Konuyu incelemem de ve uygulamamda şuan olarak sıkıntı yok. ama bu kodlama da ki center parametresi ne işe yarıyor açıklayabilirmisin? konu açıklamalarını incelerken karşılaşmadım da. Kolay gelsin.
     
    fedakarlik, 17 Ağustos 2017
    #12
    DarkBat ve ERVAH-I-EZEL bunu beğendi.
  13. fedakarlik Guest

    • Guest
    Katılım:
    13 Ağustos 2017
    Mesaj:
    18
    Alınan Beğeniler:
    23
    Özel Mesaj
    gerek kalmadı çözdüm :) center ortalamakmış :)
     
    fedakarlik, 17 Ağustos 2017
    #13
    DarkBat ve ERVAH-I-EZEL bunu beğendi.
  14. BraveHeart2023 Guest

    • Guest
    Katılım:
    2 Nisan 2017
    Mesaj:
    75
    Alınan Beğeniler:
    34
    Özel Mesaj
    devrelerim program önermek reklama giriyor mu
     
    BraveHeart2023, 17 Ağustos 2017
    #14
    DarkBat ve ERVAH-I-EZEL bunu beğendi.
  15. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,651
    Özel Mesaj
    Sorun yok o zaman. Kolay gelsin. :)
    Başka bir timin vs. olmadığı sürece yasak değil devrem. ;)
     
    ERVAH-I-EZEL, 18 Ağustos 2017
    #15
    DarkBat ve BAYULKEN bunu beğendi.
  16. DarkBat Atıldı

    • Guest
    Katılım:
    30 Haziran 2017
    Mesaj:
    3,634
    Alınan Beğeniler:
    6,490
    Özel Mesaj
    Biz Yeni Görüyoruz Eline Sağlık Tertibim :D
     
    DarkBat, 18 Ağustos 2017
    #16
    ERVAH-I-EZEL bunu beğendi.
  17. BraveHeart2023 Guest

    • Guest
    Katılım:
    2 Nisan 2017
    Mesaj:
    75
    Alınan Beğeniler:
    34
    Özel Mesaj
    devlerim kati nin dosyasını ıso olarak değilde vmvare olarak indirmişim o yüzden opual machine tuşuna basmam gerekiyor o yoldan kurmayı bilen var mı
     
    BraveHeart2023, 18 Ağustos 2017
    #17
    ERVAH-I-EZEL bunu beğendi.
  18. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,651
    Özel Mesaj
    Eyvallah tertip. :D
    Bilmiyorum devrem, Linux bölümünden sorarsan yardımcı olabilirler.
     
    ERVAH-I-EZEL, 18 Ağustos 2017
    #18
    boombeach0 ve DarkBat bunu beğendi.
  19. boombeach0 Guest

    • Guest
    Katılım:
    27 Ekim 2016
    Mesaj:
    167
    Alınan Beğeniler:
    111
    Özel Mesaj
    eline sağlık devrem
     
    boombeach0, 26 Kasım 2017
    #19
    ERVAH-I-EZEL bunu beğendi.
  20. note Atıldı

    • Guest
    Katılım:
    20 Nisan 2017
    Mesaj:
    3,716
    Alınan Beğeniler:
    6,788
    Özel Mesaj
    Bu dersler ve diğer tüm derslerin için eline sağlık. Bence konuların sabitlenmeli, gerçekten forumdakiler için bulunmaz nimet. Bu konular burada olduğu halde "index" hazırlayamayanlar var inanılır gibi değil...

    İyi forumlar
     
    note, 11 Aralık 2018
    #20
    AydoganGotu, ERVAH-I-EZEL ve dragov bunu beğendi.

Bu Sayfayı Paylaş