Il CSS non funziona nel foglio di stile

Question

Ho un set di stili che sono stati creati prima all'interno dell'attributo style su una pagina.

Voglio spostarlo da essere sulla stessa pagina in un foglio di stile.

tuttavia, quando lo spostamento in un file .css, la pagina si rompe, riporta il codice al documento html e funziona di nuovo bene.

Questo assolutamente non ha senso, lo spostamento di stili da uno stile a un file css non dovrebbe interrompere il codice, dovrebbe?

Mi manca qualcosa? Non sto cambiando alcun codice, è semplicemente una copia e incolla.

Answer 1

Questo è solo uno scatto al buio poiché (al momento di questo post) non hai fornito il codice sorgente.

Assicurati di collegarti al foglio di stile utilizzando un tag link nello head del documento HTML.

Se trovassi:

<style type="text/css"> 
/* <![CDATA[ */ 
#someid 
{ 
    margin: 0; 
    padding: 3px 12px; 
} 
/* ]]> */ 
</style> 

Avrete bisogno di avere

#someid 
{ 
    margin: 0; 
    padding: 3px 12px; 
} 

nel file CSS con:

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

per collegare il foglio di stile.

alcuni errori comuni newbie includono:

• <style type="text/css" src="path/to/style.css">: perché è una sintassi simile al tag <script>, che avrebbe senso, ma non è valido
• <link rel="stylesheet" src="path/to/style.css">: ma link elementi utilizzare href non src
• posizionando gli elementi link all'interno del corpo: sebbene i browser tenderanno a gestire gli elementi link nel corpo, è probabile che ci saranno alcuni errori e non è un comportamento definito
• non specifica di una dichiarazione di tipo docty: consente al browser di passare alla modalità quirks, ovvero mai una buona idea.

Answer 2

È necessario assicurarsi che il foglio di stile sia importato correttamente. A volte il @import non funziona bene se non utilizzato di conseguenza, in modo sempre riferimento foglio di stile:

<link rel="stylesheet" type="text/css" href="name-of-stylesheet.css" />

ricordarsi sempre di chiudere il tag <link> come si tratta di un tag auto-vicino. Penso che @zzzzBov abbia dimenticato di dirlo.

Infine, se questo non funziona, provate a sostituire alcuni degli stili scrivendo fisicamente (sopra la sezione </head>) qualcosa come:

<style type="text/css"> 
    body { background: blue; } 
    * { color: red; } 
</style> 

e vedere se questo ti dà uno sfondo blu e rosso testo colorato. Dovrebbe. Successivamente, prova ad implementare il metodo di riferimento e assicurati di fare riferimento al file del foglio di stile nella directory corretta.

Buona fortuna!

Answer 3

Ho avuto lo stesso problema, ma la causa non è stata un errore nel codice ma il fatto che il file .css è stato caricato con un certo ritardo dopo aver apportato le modifiche al suo interno. Il server aveva bisogno di 5-10 minuti per aggiornare le modifiche.

Answer 4

Ho avuto anche questo problema, e il motivo era che il percorso doveva essere aggiornato per alcuni riferimenti a url() poiché il file css era in un'altra cartella rispetto al file html da cui era stato precedentemente chiamato.

Quindi, in pratica

background-image: url('patterns/debut_dark.png'); 

doveva essere cambiato a

background-image: url('../patterns/debut_dark.png'); 

Answer 5

Non includere <style type="text/css"></style> nel file css.