Erori CSS
Erorile din CSS pot duce la comportamente neașteptate sau la stiluri care nu sunt aplicate corect.
Această pagină arată greșeli comune de CSS și cum să le evitați.
Punct și virgulă lipsă
Uitarea unui punct și virgulă la sfârșitul unei declarații poate strica întreaga regulă.
Exemplu
Valoarea color nu are punct și virgulă, astfel regula se strică.
<style>, definiți o regulă .bad în care declarația de culoare nu are punct și virgulă înainte de următoarea declarație, astfel încât regula se strică. Aplicați class="bad" unui paragraf din body.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bad {
color: red
background-color: yellow;
}
</style>
</head>
<body>
<p class="bad">The missing semicolon after "red" breaks this rule.</p>
</body>
</html>
Nume de proprietăți invalide
Dacă folosiți un nume de proprietate care nu există, browserul îl ignoră pur și simplu.
Exemplu
Proprietatea greșit scrisă colr este ignorată, dar font-size funcționează în continuare.
<style>, definiți o regulă .bad care folosește o proprietate scrisă greșit (colr în loc de color) plus un font-size valid. Browserul ignoră proprietatea necunoscută, dar păstrează pe cea validă. Aplicați class="bad" unui paragraf.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bad {
colr: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p class="bad">The "colr" property is ignored, but the font-size still works.</p>
</body>
</html>
Valori invalide
O proprietate corectă cu o valoare invalidă este de asemenea ignorată.
Exemplu
width-ul negativ este ignorat, dar color se aplică în continuare.
<style>, definiți o regulă .bad cu o lățime negativă (care este invalidă și ignorată) și o culoare verde validă. Aplicați class="bad" unui paragraf.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bad {
width: -100px;
color: green;
}
</style>
</head>
<body>
<p class="bad">The negative width is ignored, but the green color still applies.</p>
</body>
</html>
Acolade neînchise
Dacă uitați să închideți o acoladă }, întreaga regulă poate fi ignorată.
Exemplu
Regulii îi lipsește acolada de închidere.
<style>, definiți o regulă .bad cu padding și margin, dar omiteți acolada de închidere, astfel încât întreaga regulă poate fi ignorată. Aplicați class="bad" unui paragraf.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bad {
padding: 20px;
margin: 10px;
</style>
</head>
<body>
<p class="bad">The missing closing brace can cause the rule to be ignored.</p>
</body>
</html>
Două puncte sau acolade în plus
Greșelile de tipar precum două puncte în plus sau o acoladă plasată greșit pot strica o regulă.
Exemplu
Cele două puncte fac declarația invalidă.
<style>, definiți o regulă .bad cu o greșeală de tipar cu două puncte (color:: blue;) astfel încât declarația să fie invalidă. Aplicați class="bad" unui paragraf.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bad {
color:: blue;
}
</style>
</head>
<body>
<p class="bad">The double colon makes this declaration invalid, so the color is not applied.</p>
</body>
</html>
Sfaturi pentru a evita erorile CSS
- Folosiți un editor de cod cu evidențiere de sintaxă.
- Verificați-vă CSS-ul cu un linter sau validator.
- Scrieți CSS în secțiuni mici și testați des.