Kann nicht verbinden HTML mit CSS

Ich habe versucht, meine HTML-Datei ausführen, aber es weiß nicht, wo die CSS-Datei ist .Ich habe zwei Dateien index.html und style.css beide auf meinem Desktop.Here wie meine index.html-Datei sieht so aus:Kann nicht verbinden HTML mit CSS

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <link href="./style.css" rel="stylesheet" type="text/css"/> 
    </head> 

    <section class="header"> 
    // lots of info here 
    </section>

und mein CSS hat alle Dinge benötigt.

aber die html nicht auf die CSS-Datei

hier angeschlossen ist, erhalten ist, wie ein Teil meines style.css wie folgt aussehen:

.user { 

& { 
    width: 300px; 
    margin-left: auto; 

    display: flex; 
    flex-flow: row wrap; 
    justify-content: space-between; 
    align-items: center; 
} 

i { 
    font-size: $large; 

    &:hover { 
    color: $white; 
    cursor: pointer; 
    } 
} 

&__notifications {} 

&__inbox {} 

...

Quelle

2017-03-27 user7678931

Sie scheinen ein '' Element zu fehlen. Noch wichtiger: Sind Sie sicher, dass der Pfad zum Stylesheet korrekt ist und dass die von Ihnen verwendete Syntax gültig ist? –

Wenn Sie keinen vollständigen Pfad angeben, wird immer der Pfad relativ zur Position der HTML-Datei angezeigt. Also, wenn die CSS-Datei direkt neben dem HTML ist, einfach schreiben Sie href = "style.css" – FailedUnitTest

Wie sieht Ihr CSS-Code aus? – Timo

Wickeln Sie Ihre <section> sowie andere HTML-Elemente nach dem <head> Tag innerhalb <body> Tags.
Den scss Code erneut zu css.

Quelle

2017-03-27 18:12:48

Nur Punkt 3 wird tatsächlich benötigt. Wenn sich die html- und css-Dateien im selben Verzeichnis befinden, würden auch die OPs "./Styles.css" funktionieren. Das einzige Problem war das unkompilierte SCSS. –

@MrLister Antwort bearbeitet. Danke für die Köpfe hoch! –

Wenn die Dateien im selben Verzeichnis befinden, Sie sollte style.css als Ihre href (ohne führende Schrägstriche oder Punkte) verwenden. Und vergessen Sie nicht, Ihre <body> und <html> Tags am Ende zu schließen.

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 

 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
 
</head> 
 

 
<body> 
 
    <section class="header"> 
 
    //lots of info here 
 
    </section> 
 
</body> 
 

 
</html>

Auch sieht es aus wie Ihre CSS tatsächlich in einer Vorverarbeitung Sprache (möglicherweise SCSS) geschrieben wird. Sie sollten alle Variablen ($...) entfernen und alle verschachtelten Selektoren (&) reduzieren.

.user { 
 
    width: 300px; 
 
    margin-left: auto; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
.user i { 
 
    font-size: 10em; /* or whatever $large was */ 
 
} 
 

 
.user i:hover { 
 
    color: #fff; /* or whatever $white was */ 
 
    cursor: pointer; 
 
} 
 

 
.user__notifications {} 
 

 
.user__inbox {}

Quelle

2017-03-27 18:04:41 gyre

versuchte es so wieder, es erkennt nicht das css.I kopiert die CSS von hier https://codepen.io/alowenthal/pen/rxboRv und die Auswahlklasse ist das gleiche wie das HTML – user7678931

Siehe meine Bearbeitung. Das CSS wird in SCSS geschrieben (eine Vorverarbeitungssprache, die nicht direkt im Browser ausgeführt wird). – gyre

Auf Codepen können Sie auf den Abwärtspfeil unter CSS klicken und dann auf "View Compiled CSS" klicken, um die endgültigen Stile zu sehen. – gyre

Kann nicht verbinden HTML mit CSS

Antwort

Verwandte Themen