Введение в CSS или что такое каскадные таблицы стилей css

Css

Начинающему веб-мастеру зачастую ничего не говорят аббревиатуры HTML и CSS. А ведь это основа основ (не путать с «потеря потерь») сайтостроения.

Без применения каскадных таблиц стилей Ваш сайт будет безликим (голый не отформатированный текст). Навряд ли такой сайт привлечет внимание посетителей.

Так что без умения пользоваться таблицами стилей Вам хороший сайт не сделать. Можно конечно выбрать какой-нибудь готовый шаблон, который уже хорошо отформатирован.

Но как правило, в процессе разработки сайта часто приходится добавлять какие-нибудь новые элементы, устанавливать дополнительные плагины, да мало ли что еще... И внешний вид этих элементов сайта часто будет сильно отличаться от основного стилевого оформления Вашего сайта.

Чтобы привести эти элементы в соответствие с дизайном сайта, Вам придется научиться пользоваться каскадными таблицами стилей CSS.

Итак, мы приступаем к изучению CSS.

1. CSS — что за зверь такой?

CSS (Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Проще говоря, это такой файл (или файлы), который содержит инструкции по оформлению элементов Вашего сайта.

Когда браузер формирует внешний вид интернет страницы, он пользуется этими инструкциями и отображает элементы страницы в том или ином виде.

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

С появлением каскадных таблиц стилей стало возможно задать стили для любой страницы в отдельном файле, прикрепить этот файл к любой странице (или ко всем сразу) и менять стили для всего сайта, внося изменения всего в одном файле.

Более того, при помощи CSS стилей можно задать разное оформление для различных устройств вывода информации. Например, отдельные стили для вывода на экран монитора, отдельные — для вывода на печать, отдельные — для вывода на экран мобильного телефона.

Да что там говорить... даже отдельные стили можно прописать для различных интернет браузеров (иногда и это нужно делать, потому что разные браузеры интерпретируют оформление страниц по разному).

Так что, друзья! Обязательно нужно знать основы CSS форматирования для того, чтобы сделать действительно хороший сайт.

2. Использование CSS стилей для форматирования элементов сайта.

Вопрос этот довольно объемный. И подразумевает под собой объем материала не на одну статью. Мы с Вами будем постепенно вникать в тонкости использования CSS стилей.

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

Чтобы не пропустить этот важный материал, обязательно подписывайтесь на обновления блога.

А сейчас я хочу немного остановиться на вопросе общего синтаксиса и культуре оформления каскадных таблиц стилей CSS.

Файл с каскадными таблицами стилей представляет собой обычный текстовый документ и имеет расширение .css

В нем содержатся css-инструкции для форматирования отдельных элементов интернет страниц.

Синтаксис написания css-инструкций очень прост:

селектор {
 свойство: значение;
 свойство: значение;
 свойство: значение;}

То есть, сначала мы указываем селектор (элемент, к которому будут применены стили). Затем в блоке из фигурных скобок указываем свойства этого элемента, ставим двоеточие и после двоеточия указываем значение этого свойства. Заканчиваем инструкцию точкой с запятой.

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

Сравните пожалуйста, два следующих фрагмента css-стилей:

h2 {
 font-size: 110 %;
 color: red;
 background: white;}

и вот этот:

h2 {font-size: 110 %; color: red; background: white;}

Здесь написаны одни и те же инструкции, но в разном виде.

В первом случае у нас каждая инструкция написана с новой строчки, а во втором случае — все в одной строке.

Читаемость кода во втором случае сильно падает. Если Вам в дальнейшем придется исправлять эти стили, Вам будет нелегко найти нужную инструкцию в этом винегрете. И это здесь всего три инструкции, а их может быть намного больше.

Делаем вывод. Это важно!

Пишите css инструкции в таком виде, чтобы Вам потом было легко их найти и если нужно — исправить.

ВажноА именно:

  • Каждую инструкцию пишите с новой строки, желательно еще и в начале строки использовать табуляцию (чтобы текст начинался не с начала строки, а с отступом).
  • Перед написанием нового селектора отступите лишнюю строку, пусть будет более выраженное разделение между селекторами.

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

Но об этом мы поговорим в другой раз.

Сегодня мы с Вами познакомились с основами работы с каскадными таблицами стилей CSS.

В ближайшее время ждите Выхода новых статей. И обязательно подпишитесь на обновления, если Вы до сих пор этого не сделали. Обучение только начинается.

Удачи!

Обновления блога:

Вы еще не читаете нашу ?
Тогда получайте новые статьи на E-mail:
Моя статья помогла Вам? Это хорошо! Теперь не нужно жадничать - поделитесь этой статьей с друзьями в социальных сетях.
Хотите быть в курсе того, что происходит на сайте? Читайте меня в Твиттере.

Комментарии к статье:
"Введение в CSS или что такое каскадные таблицы стилей css"

  1. Пробую самостоятельно разобраться в этой теме, время уходит вагон, пока найду нужную информацию :eek:

    В идеале хочу самостоятельно редактировать шаблоны тем wordpress :D

    • Ничего сложного в этом нет. Ждите, скоро появятся более подробные статьи. ;)