ОПТИМИЗАЦИЯ БЛОГА/САЙТА

  • На форуме работает ручное одобрение пользователей. Это значит, что, если Ваша причина регистрации не соответствует тематике форума, а также Вы используете временную почту, Ваша учётная запись будет отклонена без возможности повторной регистрации. В дальнейшем - пожизненная блокировка обоих аккаунтов за создание мультиаккаунта.
  • Мы обновили Tor зеркало до v3!
    Для входа используйте следующий url: darkv3nw2...bzad.onion/
  • Мы вновь вернули telegram чат форуму, вступайте, общайтесь, задавайте любые вопросы как администрации, так и пользователям!
    Ссылка: https://t.me/chat_dark_time

AnGel

Администратор
Команда форума

AnGel

Администратор
Команда форума
27 Авг 2015
3,413
2,025
Приветствую Вас дорогие друзья. Сегодня мы поговорим о каскадных таблицах стилей, а точнее о частых
Когда я только начинал изучать 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. Ну и конечно же внимательность
 

О нас

  • Наше сообщество существует уже много лет и гордится тем, что предлагает непредвзятое, критическое обсуждение различных тем среди людей разных слоев общества. Мы работаем каждый день, чтобы убедиться, что наше сообщество является одним из лучших.

    Dark-Time 2015 - 2024

    При поддержке: XenForo.Info

Быстрая навигация

Меню пользователя