В основном про CSS

Каждый, кто сегодня решил самостоятельно изменить дизайн своего сайта, блога или отдельно взятого его элемента, в любом случаи столкнется с таким понятием как - CSS или стили(стиль). Для новичка в веб-разработке это всего лишь буквы, а CSS-код - непонятный набор цифр и символов, с не очень понятной структурой и принципами действия.
  В данной статье изложены основные понятия, структура и принципы работы с CSS, для простого и быстрого понимания сути этого инструмента.

Что такое CSS и его возможности

  Стилем, в веб-разработке принято называть каскадные таблицы стилей(Cascading Style Sheets) - CSS. Этот мощнейший инструмент, созданный специально для удобства и простоты оформления веб-страниц, предоставляет вагон и маленькую тележку возможностей для неповторимого и красочного дизайна любого интернет-ресурса.
  На сегодняшний день существует четыре рабочих версии спецификации - CSS1, CSS2, CSS2.1, CSS3(дополняется) и находящаяся в разработке версия - CSS4.
  Самая популярная, среди разработчиков, последняя версия - CSS3, т.к. обладает более широкими возможностями в отношении не только обозначения, оформления и позиционирования элементов страницы, но и допускает некоторые возможности программирования. Именно возможности этой версии позволяют создавать анимации и необычные визуальные эффекты не прибегая к помощи JavaScript, jQuery и др.

Структура каскадных таблиц стилей

  Структура таблиц CSS очень проста, она состоит из: селектора - обозначения элемента, к которому можно применить какие-либо свойства с тем или иным значением.
  В чистом виде запись выглядит следующим образом:
  селектор {
  свойство: значение;
  свойство: значение;
  }
  Селекторы могут повторятся в коде, также можно группировать их через запятую (,). Для некоторых свойств допустимо группировать значения через пробел или запятую, также можно добавлять свои комментарии к коду, заключая их между символов - /* */
  селектор,
  селектор,
  селектор {
  свойство: значение значение значение; /* ваш комментарий */
  свойство: значение, значение, значение;
  }

Как правильно добавить CSS в HTML-документ

  Используя свойства с соответствующими значениями возможно изменить практически любой параметр элемента. Существует несколько способов добавления CSS к элементам страницы - общий, частный и удаленный.
  Общий или, как говорят: "глобальный", способ подключить CSS означает, что стилевые свойства прописываются в начале HTML-документа и действуют для всего документа (всех страниц и указанных блоков). Код заключается в специальные теги STYLE и располагается до закрывающего тега HEAD
<!DOCTYPE html>
<html>
  <head>
  ...
  <style>
   body {
  color: red;
  }
  </style>

 </head>
 <body>
 ...
 </body>
</html>
  Частный способ или "локальный", дает возможность добавить необходимые свойства непосредственно к выбранному элементу.
<!DOCTYPE html>
<html>
  <head>
  ...
 </head>
 <body>
 <div style="background: green; color: white;"></div>
 </body>
</html>
  Также можно подключить таблицу стилей к сайту удаленно, т.е. вынести весь код в отдельный файл, а в коде страницы указать на него ссылку, существует два способа это сделать, используя тег LINK и применяя правило @import
<!DOCTYPE html>
<html>
  <head>
  ...
  <link rel="stylesheet" href="style.css"> <!-- подключения по средствам тега link -->
  ...
  <style>
  @import url(style.css); /* использование правила @import*/
  </style>

 </head>
 <body>
 <div>...</div>
 </body>
</html>

Оптимизация кода

  Стилевые правила, воспринимаются браузером очень быстро, однако если их много, на низких скоростях соединения с интернетом (например мобильном или общедоступном Wi-Fi) могут возникать проблемы с быстротой желаемого отображения элементов сайта. Такое часто бывает если документ CSS подключается удаленно. Чтобы избежать такой ситуации, можно оптимизировать законченный код, используя следующие простые рекомендации:
  1. При написании кода, старайтесь группировать селекторы со одинаковыми значениями свойств. Например: заголовки с однотипными шрифтами, блоки с одинаковым оформлением и т.п.
h1, h2, h3 {
background: lightbue;
font-family: Arial, sans-serif;
font-weight: bold;
text-align: center;
}
h1 {
font-size: 24px;
}
h2, h3 {
font-size: 18px;
}
  2. Старайтесь соблюдать иерархию документа, т.е. от основного к мало значимому. Начинайте оформление с основных блоков, далее заголовки, вложенные элементы, дополнительные включения и т.д.
  3. Избегайте указывать противоречивые стилевые правила для одних и тех же элементов. Корректно пользуйтесь поиском и указанием элементов в коде по соответствующим селекторам.
  4. По окончании написания кода и его проверки, вы можете удалить лишние пробелы или даже записать все в одну строку, это только ускорить обработку кода браузером.

Добавление CSS в шаблоны Blogger

  В шаблоны Blogger, как и в любой HTML-документ без труда можно добавить собственные стилевые свойства для элементов шаблона, не смотря на то что сам шаблон написан на XML. Более подробно написано в статье отдельно посвященной этой теме.

©http://magentawave.com

7 комментариев:

  1. Спасибо, Александр!
    Интересный пост про css, но все же так и не смог понять, как решить свою проблему.

    ОтветитьУдалить
    Ответы
    1. Это начало, дальше будет еще интереснее. Вашу проблему можно решить двумя способами - или присваивать ссылкам в посту отдельный класс и именно для него указывать свойства, либо удалять ссылки из картинок.

      Удалить
  2. Интересно! Коротко и ясно. Всё самое нужное про CSS.
    Небольшая ремарка: у вас в самом конце ссылка ведёт в никуда :)

    ОтветитьУдалить
  3. Анонимный08.11.16, 14:03

    Привет Александр!
    Спасибо за пост. Не помешала бы еще статья о классах, id и тп... Как эти все разные элементы различаются и как их использовать.
    Для новичков это лес :)

    ОтветитьУдалить
    Ответы
    1. Вам сюда -
      http://www.magentawave.com/2014/01/all-about-css-selectors.html
      http://www.magentawave.com/2014/01/css-pseudo-classes-and-elements.html

      Удалить
    2. Анонимный13.11.16, 2:53

      Спасибо, очень подробно

      Удалить

Следующее Предыдущее

BestProject