Hangi div etiketine özellik verilmeli?

CelalBeyTr

CelalBeyTr

Decapat
Katılım
5 Temmuz 2023
Mesajlar
148
Daha fazla  
Cinsiyet
Erkek
Kod: 
<section class="courses">
        <div class="container">
          <h2 class="allcourseh">Tüm kurslar</h2>
          <div class="all-courses">
            <div class="course-container">
              <div class="course">
                <img src="Resimler/htmlcss.jpg" alt="" />
                <div class="course-info">
                  <h3>Web geliştirme kursu</h3>
                  <p>
                    Temel seviyede web geliştirme konularını öğrenin. Html vs
                    Css dilleri ile başlayın.
                  </p>
                </div>
              </div>
              <div class="course">
                <img src="Resimler/htmlcss.jpg" alt="" />
                <div class="course-info">
                  <h3>Web geliştirme kursu</h3>
                  <p>
                    Temel seviyede web geliştirme konularını öğrenin. Html vs
                    Css dilleri ile başlayın.
                  </p>
                </div>
              </div>
              <div class="course">
                <img src="Resimler/htmlcss.jpg" alt="" />
                <div class="course-info">
                  <h3>Web geliştirme kursu</h3>
                  <p>
                    Temel seviyede web geliştirme konularını öğrenin. Html vs
                    Css dilleri ile başlayın.
                  </p>
                </div>
              </div>
            </div>
            <div class="course-container">
              <div class="course">
                <img src="Resimler/htmlcss.jpg" alt="" />
                <div class="course-info">
                  <h3>Web geliştirme kursu</h3>
                  <p>
                    Temel seviyede web geliştirme konularını öğrenin. Html vs
                    Css dilleri ile başlayın.
                  </p>
                </div>
              </div>
              <div class="course">
                <img src="Resimler/htmlcss.jpg" alt="" />
                <div class="course-info">
                  <h3>Web geliştirme kursu</h3>
                  <p>
                    Temel seviyede web geliştirme konularını öğrenin. Html vs
                    Css dilleri ile başlayın.
                  </p>
                </div>
              </div>
              <div class="course">
                <img src="Resimler/htmlcss.jpg" alt="" />
                <div class="course-info">
                  <h3>Web geliştirme kursu</h3>
                  <p>
                    Temel seviyede web geliştirme konularını öğrenin. Html vs
                    Css dilleri ile başlayın.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

Bu verdiğim kodda Udemy'den aldığım kursta yapılan örnek bir sitenin HTML kısmı.
Ben buraları çok karıştırıyorum kafam almıyor gibi bir sürü div var mesela CSS'te hangisine hangi özelliği vereceğim? O verdiğim özellik hangi kesime etki ediyor kafamı çok allak bullak ediyor. Nasıl bu karışıklığın üstesinden gelebilirim?
 
Son düzenleyen: Moderatör:
Hocam hangisine hangi özelliği vereceğiniz size kalmış. Eğer bir kutu özelliği vermek istiyorsanız .kutu id'sine css özelliklerini yazdığınızı varsayalım. div class="kutu" diye kod yazdığınızda o css özelliklerine sahip görüntüyü çekiyorsunuz.
Bunun devamında .paragraf diye id oluşturdunuz ve isteğinize göre bir paragraf stili yaptınız css ile.
kutu div'inin devamına span class="paragraf" diye çağırma yaptığınızda ise o stili okumaya başlar. Genellikle bir metin satırındaki bir kelime gibi satır içi içeriğe stil vermek için kullanılan span etiketlerini görürsünüz. Div etiketleri ise daha büyük içerik bölümlerine stil vermeli veya alt öğeler için bir kap görevi görmelidir.

Her div'in amacı ayrı. Eğer hepsini aynı stilde toplamak isterseniz sürekli aynı classı çağırabilirsiniz bu sizin isteğinize kalmış.
 
CelalBeyTr dedi:
Kod: 
<section class="courses">
 <div class="container">
 <h2 class="allcourseh">Tüm kurslar</h2>
 <div class="all-courses">
 <div class="course-container">
 <div class="course">
 <img src="Resimler/htmlcss.jpg" alt="" />
 <div class="course-info">
 <h3>Web geliştirme kursu</h3>
 <p>
 Temel seviyede web geliştirme konularını öğrenin. Html vs.
 Css dilleri ile başlayın.
 </p>
 </div>
 </div>
 <div class="course">
 <img src="Resimler/htmlcss.jpg" alt="" />
 <div class="course-info">
 <h3>Web geliştirme kursu</h3>
 <p>
 Temel seviyede web geliştirme konularını öğrenin. Html vs.
 Css dilleri ile başlayın.
 </p>
 </div>
 </div>
 <div class="course">
 <img src="Resimler/htmlcss.jpg" alt="" />
 <div class="course-info">
 <h3>Web geliştirme kursu</h3>
 <p>
 Temel seviyede web geliştirme konularını öğrenin. Html vs.
 Css dilleri ile başlayın.
 </p>
 </div>
 </div>
 </div>
 <div class="course-container">
 <div class="course">
 <img src="Resimler/htmlcss.jpg" alt="" />
 <div class="course-info">
 <h3>Web geliştirme kursu</h3>
 <p>
 Temel seviyede web geliştirme konularını öğrenin. Html vs.
 Css dilleri ile başlayın.
 </p>
 </div>
 </div>
 <div class="course">
 <img src="Resimler/htmlcss.jpg" alt="" />
 <div class="course-info">
 <h3>Web geliştirme kursu</h3>
 <p>
 Temel seviyede web geliştirme konularını öğrenin. Html vs.
 Css dilleri ile başlayın.
 </p>
 </div>
 </div>
 <div class="course">
 <img src="Resimler/htmlcss.jpg" alt="" />
 <div class="course-info">
 <h3>Web geliştirme kursu</h3>
 <p>
 Temel seviyede web geliştirme konularını öğrenin. Html vs.
 Css dilleri ile başlayın.
 </p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
 </main>

Bu verdiğim kodda Udemy'den aldığım kursta yapılan örnek bir sitenin HTML kısmı.
Ben buraları çok karıştırıyorum kafam almıyor gibi bir sürü div var mesela CSS'te hangisine hangi özelliği vereceğim? O verdiğim özellik hangi kesime etki ediyor kafamı çok allak bullak ediyor. Nasıl bu karışıklığın üstesinden gelebilirim?
Genişletmek için tıkla...

Ben öğrenme aşamasindayken class ve ID adlarını kendimin anlayacağı şekilde Türkçe yazardım. Bir de kursdaki kodu direkt yazma. Kursu izle ardından durdurup videoya bakmadan kendi aklındakileri yap. Hem HTML, CSS bu kadar zor değil. Daha yolun başı. Bir de HTML ve CSS'de yorum etiketi kullanabilirsin.
 
672932 dedi:
Ben öğrenme aşamasindayken class ve ID adlarını kendimin anlayacağı şekilde Türkçe yazardım. Bir de kursdaki kodu direkt yazma. Kursu izle ardından durdurup videoya bakmadan kendi aklındakileri yap. Hem HTML, CSS bu kadar zor değil. Daha yolun başı. Bir de HTML ve CSS'de yorum etiketi kullanabilirsin.
Genişletmek için tıkla...

Hocam benim aslında anlatmak istediğim aşırı fazla iç içe div var hangisi neyin içinde hangisine ne kodu verirsem çıktıda nereye etki eder gibi.

die dedi:
Hocam hangisine hangi özelliği vereceğiniz size kalmış. Eğer bir kutu özelliği vermek istiyorsanız. Kutu ID'sine CSS özelliklerini yazdığınızı varsayalım. Div class="kutu" diye kod yazdığınızda o CSS özelliklerine sahip görüntüyü çekiyorsunuz.
Bunun devamında. Paragraf diye ID oluşturdunuz ve isteğinize göre bir paragraf stili yaptınız CSS ile.
Kutu div'inin devamına span class="paragraf" diye çağırma yaptığınızda ise o stili okumaya başlar. Genellikle bir metin satırındaki bir kelime gibi satır içi içeriğe stil vermek için kullanılan span etiketlerini görürsünüz. div etiketleri ise daha büyük içerik bölümlerine stil vermeli veya alt öğeler için bir kap görevi görmelidir.

Her Div'in amacı ayrı. Eğer hepsini aynı stilde toplamak isterseniz sürekli aynı classı çağırabilirsiniz bu sizin isteğinize kalmış.
Genişletmek için tıkla...

Hocam benim aslında anlatmak istediğim aşırı fazla iç içe div var hangisi neyin içinde hangisine ne kodu verirsem çıktıda nereye etki eder gibi.
Diğer arkadaşa da dediğim gibi.
 
Çıktıdaki etkisini tarayıcı üzerinden canlı canlı test edebilirsiniz.
Hangi div ismine özellik verirseniz o div içindeki tüm içerik etkilenir.
 
CelalBeyTr dedi:
Hocam benim aslında anlatmak istediğim aşırı fazla iç içe div var hangisi neyin içinde hangisine ne kodu verirsem çıktıda nereye etki eder gibi.

Hocam benim aslında anlatmak istediğim aşırı fazla iç içe div var hangisi neyin içinde hangisine ne kodu verirsem çıktıda nereye etki eder gibi.
Diğer arkadaşa da dediğim gibi.
Genişletmek için tıkla...

CSS box model ile dom yapısını arastirabilirsin. Deneyerek oluyor bu işler. Saatlerce basit tasarımlar için uğraştığım zamanlar vardı.
 
CelalBeyTr dedi:
Hocam benim aslında anlatmak istediğim aşırı fazla iç içe div var hangisi neyin içinde hangisine ne kodu verirsem çıktıda nereye etki eder gibi.



Hocam benim aslında anlatmak istediğim aşırı fazla iç içe div var hangisi neyin içinde hangisine ne kodu verirsem çıktıda nereye etki eder gibi.
Diğer arkadaşa da dediğim gibi.
Genişletmek için tıkla...
Sağ tık incele yapıp divlerin üzerine giderseniz kodla hangi divin neyi kapsadığını işaretleyip gösterir.
 

Benzer konular

B
HTML CSS div nasıl konumlandırılır?
Mesaj
7
Görüntüleme
576
WoqZ
WoqZ
Egit DİKMEN
  • Çözüldü
Çözüldü  CSS div içerisindeki divlerin taşması nasıl sağlanır?
Mesaj
7
Görüntüleme
1.176
Diego
D
Tony0
  • Soru
HTML frame içine div eklemek
Mesaj
2
Görüntüleme
1.389
Tony0
Tony0
P
Rehber  HTML ve CSS neden bir programlama dili değil?
Mesaj
4
Görüntüleme
2.708
429106
4
erenghlt
HTML CSS loader ekleme
Mesaj
5
Görüntüleme
1.144
erenghlt
erenghlt

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı