HTML'de CSS oluştururken dosya yolları

ALP2004 · 6 Nisan 2021

Derste yaptığımız konu CSS dosyaları ve yazım şekilleriydi. Daha sonrasında ayrı olarak CSS kaydedimi yaptım ve dosyama döndüm.

Öncelikle CSS dosyam "HTML/css/css3.html" kısmında duruyor. Ayrı kaydettiğim style dosyamsa "HTML/styles/temel.css" kısmında duruyor.

Buradan sonra temel.css'i çağırdığımda ve sayfamı çalıştırdığımda anlamadığım bir şekilde style dosyam çalışmadı. Aşağıya resimleri bırakıyorum. Yardımcı olabilirseniz çok güzel olur.

LayThese · 6 Nisan 2021

CSS üzerinde yapılan class tanımlarında class adının başına .(nokta) geliyor diye biliyorum yanlış değilsem. Bir de öyle deneyin.

Ecmel · 6 Nisan 2021

Diğer css için de href vermeniz gerekli.

The Anorak · 6 Nisan 2021

LayThese dedi:
CSS üzerinde yapılan class tanımlarında class adının başına .(nokta) geliyor diye biliyorum yanlış değilsem. Bir de öyle deneyin.

Custom Class için evet. (.)Nokta ile başlaması gerekir. Ancak body, h1, html gibi HTML'in kendi tagleri için .(nokta) kullanmak gerekmiyor.

Ecmel · 6 Nisan 2021

Pardon sorunu yanlış anlamışım hemen atıyorum kodlar.
[CODE lang="html" title="HTML"]<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="styles/temel.css" type="text/css">
</head>
<body>
<h1>Test</h1>
<p>Test</p>
</body>
</html>[/CODE]

[CODE lang="css" title="CSS"]body {
background-color: grey;
}

h1 {
color:white;
text-align: center;
}

p {
font-family: Verdana;
font-size: 20px;
}[/CODE]

EmrahGK · 6 Nisan 2021

Belirttiğiniz dosya yolu yanlış. Href kısmından sonrası html dosyasının bulunduğu yer itibariyle konumunu belirler. HTML dosyasının olduğu yerde styles klasörü ve temel.css var mı?

Sen sanırım HTML ve CSS dosyalarını aynı yere koymamışsın. Dosyanın bulunduğu yerden itibaren başlar yukarıda da söylediğim gibi.

CSS dosyasını HTML dosyası ile aynı yere atıp -veya style diye bir klasör oluşturduktan sonra içine atıp-şöyle kullanın.

*CSS dosyasını HTML dosyanla aynı yere atarsan;
<link rel="stylesheet" href="temel.css">

*styles diye klasör oluşturursan;
<link rel="stylesheet" href="style/temel.css">

Ecmel · 6 Nisan 2021

Ecmel dedi:
Pardon sorunu yanlış anlamışım hemen atıyorum kodlar.
[CODE lang="html" title="HTML"]<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="styles/temel.css" type="text/css">
</head>
<body>
<h1>Test</h1>
<p>Test</p>
</body>
</html>[/CODE]

[CODE lang="css" title="CSS"]body {
background-color: grey;
}

h1 {
color:white;
text-align: center;
}

p {
font-family: Verdana;
font-size: 20px;
}[/CODE]

Büyük ihtimal belirttiğiniz href yolu farklı. temel.css dosyasının bulunduğu konumu söylerseniz daha yardımcı olabiliriz. Kodun örneğini attım bu şekilde yaparsan çalışır zaten. Yolun yanlış gibi duruyor.

EmrahGK dedi:
Belirttiğiniz dosya yolu yanlış. Href kısmından sonrası html dosyasının bulunduğu yer itibariyle konumunu belirler. HTML dosyasının olduğu yerde styles klasörü ve temel.css var mı?

Sen sanırım HTML ve CSS dosyalarını aynı yere koymamışsın. Dosyanın bulunduğu yerden itibaren başlar yukarıda da söylediğim gibi.

CSS dosyasını HTML dosyası ile aynı yere atıp -veya style diye bir klasör oluşturduktan sonra içine atıp-şöyle kullanın.

*CSS dosyasını HTML dosyanla aynı yere atarsan;
<link rel="stylesheet" href="temel.css">

*styles diye klasör oluşturursan;
<link rel="stylesheet" href="style/temel.css">

Arkadaşın dediği doğru sen HTML ile CSS dosyalarını farklı yerlere koymuşsun aynı dosya içine koyup href verirsen sorun çözülür.

EmrahGK · 6 Nisan 2021

Sizin dosyalarınız böyle yanlış okumadıysam. css3.html dosyasının olduğu klasöre temel.css'i atman gerekiyor, veya tam tersi.

>HTML(1)
>css(2)
------>css3.html
<styles(2)
------>temel.css

The Anorak · 6 Nisan 2021

../styles/temel.css

Şeklinde önce bir dizin geri sonrasında o dizindeki styles klasörü içerisindeki temel.css.

. şu anki dizin. .. ise bir önceki (parent directory) belirtir.

ALP2004 · 6 Nisan 2021

Herkese teşekkürler dersteydim cevap veremedim. Hala devam ediyor. Bittiğinde bakıp size olup olmadığını ileteceğim.

HTML'de CSS oluştururken dosya yolları

Ayrıntılı düzenleme

ALP2004

Hectopat

LayThese

Megapat

Ecmel

Megapat

The Anorak

Terapat

Ecmel

Megapat

EmrahGK

Kilopat

Ecmel

Megapat

EmrahGK

Kilopat

The Anorak

Terapat

ALP2004

Hectopat

Benzer konular