CSS kodundaki hatalar nasıl anlaşılır?

ErrorCorrection

Hectopat
Katılım
11 Ağustos 2022
Mesajlar
2.547
Çözümler
4
Daha fazla  
Cinsiyet
Erkek
biraz karışık yazıyorum onu biliyorum. CSS'i ayrı olarak bir. CSS dosyasında yazmam gerekli olduğunu da biliyorum bunun dışındaki hatalar nelerdir? Koddaki?
@kaan.w @300319 @Beroski

HTML: 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Shopping</title>
 <style type="text/css">
 body{
 margin: 0;
 padding: 0;
 }.navbar div{
 display: inline-block;
 padding: 5px;
 padding: 10 15px;
 margin-right: 20px;
 transition: .5s;
 }.navbar div a{
 text-decoration: none;
 color: white;
 transition: .5s;
 }

 .navbar{
 background-color:#191825;
 padding: 10px;
 text-align: right;
 border-bottom: 1px solid white;
 }main img{
 width: 200px;
 transition: 1s;
 }main{
 margin: 0 25%;
 text-align: center;
 }main p{
 transition: 1s;
 font-size:15px;
 color: gray;
 }main img:hover{
 width:300px;
 }.buy{
 display: inline-block;
 margin: 20px;
 background-color: #F16767;
 text-decoration: none;
 padding:10px 15px;
 color: white;
 transition: 1s;
 }.buy:hover{
 background-color: white;
 color: #F16767;
 }.navbar div:hover a{
 color: black;
 }.navbar div:hover{
 background-color: white;
 border-radius:10px;
 }.ozellikler ul{
 padding: 0;
 margin:0;
 list-style-type: none;
 text-align: left;
 }.ozellikler ul li{
 margin: 0;
 padding: 8px 15px;
 transition: .3s;
 }.ozellikler{
 padding: 0;
 margin: 0;
 }.ozellikler ul li:hover{
 background-color: #E9A178;
 color: white;

 }
 </style>

</head>
<body>
<div class="navbar">
 <div><a href="#">Shopping</a></div>
 <div><a href="#">Categories</a></div>
 <div><a href="#">My Cart</a></div>
 <div><a href="#">More</a></div>
 </div>
</div>
<main>
 <h1>Macbook-Air</h1>
 <img src="https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/macbook-air-space-gray-select-201810?wid=452&hei=420&fmt=jpeg&qlt=95&.v=1664472289661">
 <h2>$ 2000</h2>
 <p class="yazi">Apple tarafından üretilen pek çok farklı dizüstü bilgisayar modeli arasında incelik ve kolay taşınabilirlik özellikleri ile ön plana çıkan modellerin başında Apple Macbook Air gelir. Adında bulunan “air” kelimesi cihazın hafifliğine en iyi şekilde dikkat çeker.</p>
 <a class="buy" href="https://www.youtube.com/watch?v=6_EFabdC1_E">Buy Now</a>
 <div class="ozellikler">
 <ul>
 <li>RAM Bellek Boyutu: 8 GB.</li>
 <li>İşlemci: M1.</li>
 <li>Ekran kartı: 7 Çekirdekli.</li>
 <li>Sabit disk kapasitesi: 256 GB.</li>
 <li>Ekran Boyutu: 33.78 cm / 13.3 inç</li>
 <li>Çözünürlük: inç başına 227 piksel yoğunlukta 2560 x 1600 özgün.</li>
 <li>Görüntü kalitesi: Full-HD.</li>
 </ul>
 </div>
</main>
</body>
</html>
 
Son düzenleme:
ANON1M dedi:
Çalışıyorsa bir problem yok demektir. Dediğiniz gibi biraz karışık.
<Link href> ekleyip CSS'i farklı dosyadan almak daha basitleştirir.
Genişletmek için tıkla...

Hocam baktınız mı projeye yani çalıştırdınız mı?
Çalışıyor ama küçültünce falan bozulma hataları var onu da düzletimce ileride
 
Kod işinden hiç anlamam ama forumda ve bir kaç yerde okuduğuma göre Chat GPT de kod yazabiliyordu sormayı denediniz mi acaba?
 
Arkadaşın da dediği gibi kodlar biraz makarna, CSS'i mutlaka farklı bir dosya dizininden çağır, ayrıca belli başlı etiketleri mutlaka Tab ile boşluk bırakarak hizalandır ki daha düzenli olsunlar.

Bu tür yazmaya şimdiden alışmalısın dostum, şu an bu kod gayet normal ancak ileride en basit HTML kodların bile yüzlerce satıra ulaştığında "ulan nereye yazdım, bu nerede, bunu niye böyle yapmışım." dedirtir.
 
Site gayet düzgün çalışıyor. CSS'i style.css diye dosya oluşturup onun içine yapıştırın. Prettier kurun lütfen çünkü kodlar tek satırda ve okunurluk düşüyor. Ayırca 83. Satırda ki div hiç bir işe yaramıyor silin.

Boş kodu sildim ve güzelce formatladım.
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Shopping</title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
            .navbar div {
                display: inline-block;
                padding: 5px;
                padding: 10 15px;
                margin-right: 20px;
                transition: 0.5s;
            }
            .navbar div a {
                text-decoration: none;
                color: white;
                transition: 0.5s;
            }

            .navbar {
                background-color: #191825;
                padding: 10px;
                text-align: right;
                border-bottom: 1px solid white;
            }
            main img {
                width: 200px;
                transition: 1s;
            }
            main {
                margin: 0 25%;
                text-align: center;
            }
            main p {
                transition: 1s;
                font-size: 15px;
                color: gray;
            }
            main img:hover {
                width: 300px;
            }
            .buy {
                display: inline-block;
                margin: 20px;
                background-color: #f16767;
                text-decoration: none;
                padding: 10px 15px;
                color: white;
                transition: 1s;
            }
            .buy:hover {
                background-color: white;
                color: #f16767;
            }
            .navbar div:hover a {
                color: black;
            }
            .navbar div:hover {
                background-color: white;
                border-radius: 10px;
            }
            .ozellikler ul {
                padding: 0;
                margin: 0;
                list-style-type: none;
                text-align: left;
            }
            .ozellikler ul li {
                margin: 0;
                padding: 8px 15px;
                transition: 0.3s;
            }
            .ozellikler {
                padding: 0;
                margin: 0;
            }
            .ozellikler ul li:hover {
                background-color: #e9a178;
                color: white;
            }
        </style>
    </head>
    <body>
        <div class="navbar">
            <div><a href="#">Shopping</a></div>
            <div><a href="#">Categories</a></div>
            <div><a href="#">My Cart</a></div>
            <div><a href="#">More</a></div>
        </div>

        <main>
            <h1>Macbook-Air</h1>
            <img
                src="https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/macbook-air-space-gray-select-201810?wid=452&hei=420&fmt=jpeg&qlt=95&.v=1664472289661"
            />
            <h2>$ 2000</h2>
            <p class="yazi">
                Apple tarafından üretilen pek çok farklı dizüstü bilgisayar modeli
                arasında incelik ve kolay taşınabilirlik özellikleri ile ön plana çıkan
                modellerin başında Apple Macbook Air gelir. Adında bulunan “air”
                kelimesi cihazın hafifliğine en iyi şekilde dikkat çeker.
            </p>
            <a class="buy" href="https://www.youtube.com/watch?v=6_EFabdC1_E"
                >Buy Now</a
            >
            <div class="ozellikler">
                <ul>
                    <li>RAM Bellek Boyutu: 8 GB.</li>
                    <li>İşlemci: M1.</li>
                    <li>Ekran kartı: 7 Çekirdekli.</li>
                    <li>Sabit disk kapasitesi: 256 GB.</li>
                    <li>Ekran Boyutu: 33.78 cm / 13.3 inç</li>
                    <li>
                        Çözünürlük: inç başına 227 piksel yoğunlukta 2560 x 1600 özgün.
                    </li>
                    <li>Görüntü kalitesi: Full-HD.</li>
                </ul>
            </div>
        </main>
    </body>
</html>
 
Tam anlamıyla güzel bir örnek...
 
Sublime Text kullanıyorum hocam prettier var mı?
 
Konuyu cevapla
Menü
Giriş yap
Kaydol
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…