Ошибки в css и их решения на примере

Приветствую Вас дорогие друзья. Сегодня мы поговорим о каскадных таблицах стилей, а точнее о частых ошибках, которые допускаются при написании кода.
Решаем ошибки возникающие в css коде документа

Когда я только начинал изучать CSS я тоже очень часто допускал подобные ошибки, чаще всего это происходило по незнанию, сейчас же это, как правило, происходит из-за торопливости.

Итак, давайте рассмотрим типичные ошибки в CSS, исправим их, а также рассмотрим варианты рациональной оптимизации длины кода.

+ этим знаком я буду обозначать правильные варианты

– а этих варианты, в которых допущены ошибки

Ошибка № 1 – нет закрывающего знака

Конечно в будущем, может быть браузеры и будут игнорировать данную ошибку, но будет это, думаю, нескоро:

-   .myclass{margin-top: 10px;

+  .myclass{margin-top: 10px;}
Ошибка № 2 – забыта кавычка “

По данным статистики одной из американских лингвистических компаний, этот символ забывают писать намного реже, чем те два, которые приведены выше:

-   <div class="primer>Hi World</div>

+   <div class="primer">Hi World</div>
Ошибка № 3 – неправильное написание служебных слов

В данном случае слово – фон:

-   bagraund-color: #666;

+   background-color: #666;
Ошибка № 4 – не написано слово пикселей

Пиксели обозначаются как px

-   .block{width: 720;}

+  .block{width: 720px;}
Ошибка № 5 – Поставлена точка . перед тегом

Рассматриваю на примере теге p

-   .p{font-size: 12px;}

+    p{font-size: 12px;}
Ошибка № 6 – Перепутаны id селекторы и классы

Одна строка в html файле, другая в файле стилей:

-   #seo-primer
   <div class="seo-primer">Привет</div>

+   #seo-primer
   <div id="seo-primer">Привет</div>

Укорачиваем код!

Теперь давайте рассмотрим один из вариантов оптимизации записи кода, вот имеющаяся запись:

background-color: #f0f;
background-image: url('/wp-content/uploads/ссылка на картинку');
background-repeat: repeat-x;
background-position: right center;

А вот более короткая и оптимальная запись, которая уместилась в одной строке и смотрится куда лучше:

background: #f0f url('/wp-content/uploads/ссылка на картинку') repeat-x right center;

Для того, чтобы реже допускать или не допускать вообще эти ошибки, вот список рекомендаций:

  1. Проверять css код на ошибки через специальные сервисы
  2. Не помешает знание английского языка
  3. Знание каскадной таблицы стилей
  4. Ну и конечно же внимательность

На сегодня у меня все, подписывайте на обновления блога, например, по электронный почте, для этого просто введите адрес почты в форму ниже (либо в колонке справа) и нажмите – “подписаться”. с вами был Виталий Admin, до новых встреч!

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.

Ошибки в css и их решения на примере: 1 комментарий

Обсуждение закрыто.