Типичные ошибки в CSS

CSS-common-mistaces-1.css

/*-----------------------
Неправильно указан селектор класса */

my-сlass {
	/* Не работает. Браузер будет искать ТЕГ my-class */
}

.my-class {
	/* Правильный селектор класса. Точка перед именем класса */
}

CSS-common-mistaces-2.css

/*-----------------------
Неправильный контекстный селектор.

Предположим, у нас такая разметка:

    <p class="nav"><a href="index.html">Главная</a></p>

И нужно задать свойства для ссылки при наведении */

a.nav:hover {
	/* Неверно. Этот селектор означает ссылку с классом nav */
}

a:hover p.nav {
	/* Неверно. Этот селектор означает абзац с классом nav,
	лежащий внутри ссылки */
}

p.nav a :hover {
	/* Неверно. Этот селектор означает вообще что-то непонятное.
	Ошибка в пробеле между :hover и а */
}

p.nav a:hover {
       /* Правильная запись селектора */
}

CSS-common-mistaces-3.css

/*-----------------------
Неправильно указаны значения свойств
*/


.wrong {
	font-family: Times New Roman, serif;    /* Имя шрифта должно быть в кавычках */
	color: 000;                             /* Нет символа # перед кодом цвета */
	font-size: 12 px;                       /* Пробел перед единицей измерения */
	line-height: 1,5;                       /* Запятая вместо точки */
	margin: 0                               /* Нет точки с запятой в конце строки */
	padding: 10px, 20px, 30px, 40px;        /* Перечисление свойств через запятую */
}


/* Правильная запись */
.correct {
	font-family: "Times New Roman", serif;  /* Шрифты перечисляются через запятую */
	color: #000;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	padding: 10px 20px 30px 40px;
}