Типичные ошибки в 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('ссылка на картинку');
background-repeat: repeat-x;
background-position: right center;
А вот более короткая и оптимальная запись, которая уместилась в одной строке и смотрится куда лучше:
background: #f0f url('ссылка на картинку') repeat-x right center;
Для того, чтобы реже допускать или не допускать вообще эти ошибки, вот список рекомендаций:
  1. Проверять css код на ошибки через специальные сервисы
  2. Не помешает знание английского языка
  3. Знание каскадной таблицы стилей
  4. Ну и конечно же внимательность
На сегодня у меня все, подписывайте на обновления блога, например, по электронный почте, для этого просто введите адрес почты в форму ниже (либо в колонке справа) и нажмите - "подписаться". с вами был Сергей Оганесян, до новых встреч!


Раздел: Продвижение сайтов

Дата последнего изменения: 2012-08-01 23:48:46

Просмотров: 11809

Читайте также:

Настройка целей в Яндекс Метрике
Как связать Google Adwords и Google Analytics
Как найти медленные страницы сайта через Google Analytics
Как покупать статьи для сайта - основные положения и правила!
Как раскрутить новостной сайт города?
Оптимизация карточки товара для интернет-магазина
Поведенческие факторы - как их улучшить и почему не стоит накручивать?
Как размещать программный код на сайте?

Оставить комментарий

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*