CSS от А до Я — уроки и статьи по каскадным таблицам стилей

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

Этот онлайн учебник содержит подробные уроки, как для начинающих, так и для профи.

Все материалы идут в самом низу.

Но перед тем, как начать изучение, рекомендую сначала пройтись по основам.

Что такое CSS

HTML и CSS неразрывно связаны между собой. Каждый язык отвечает за свои задачи.

HTML вводит на веб-страницу набор различных элементов (картинки, таблицы, абзацы или заголовки).

Он создает своего рода структуру документа (скелет).

А каскадные таблицы стилей изменяют внешний вид этих элементов и их положение. То есть создают обертку страницы.

Например, задаем начертание шрифтов, размеры, рамки, цвета и так далее.

Таким образом, появляется много возможностей по редактированию веб-дизайна и верстки страницы.

Основы CSS

Здесь я объясню принцип работы такой веб-технологии. Также затронем синтаксис и правила написания кода.

Принцип работы

Допустим, мы создали простую HTML страницу (А) с различными тегами.

Здесь конечно же не все. Но предположим, что это полная страница (А).

Это наш фундамент.

Теперь задача — подключить к данной странице (А) свои стили css (Б). Делается это очень просто.

В области head (между тегами) пропишем специальный тег и укажем, что хотим подключить файл style.css (строчка 1).

То есть это и будет таблица стилей (Б). Она имеет расширение css. Имя у нее может быть любое.

Так вот, мы в области head прописываем данный параметр (1).

Когда браузер доходит до этой строки (1), то начинает искать файл с указанным именем (style.css).

Ищет он по тому пути, который мы ему указали.

Когда он находит этот файл (Б), то подключает его к документу (А). Файл (Б) содержит определенное количество стилей (2).

Для браузера это означает, что когда он доходит до тега body (3), все то, что находится внутри этого элемента (строки 4, 5 и нижний текст), он будет отображать ориентируясь на стили (2).

Например, в таблицах стилей можно прописать так, чтобы все заголовки (строка 4) были красного цвета.

Браузер соответственно сразу отобразит его красным цветом.

В стилях могут прописаны css команды, чтобы все картинки (строка 5) должны выравниваться по правому краю.

То есть дойдя до картинки (5), браузер автоматически выровняет ее по правому краю.

Это дополнительная инструкция для его — как именно нужно отображать элементы.

Еще один пример можно привести.

Представьте себя художником. К вам приходит заказчик и говорит, что он хочет, чтобы вы нарисовали для него картину.

На ней должно быть отражено следующее. Поле, посреди которого стоит дом. Рядом с домом озеро. И рядом с озером стая уток.

Это он вам сказал, что хочет видеть на этой картине.

А дальше он говорит, что дом должен быть с красной крышей и желтыми стенами. Озеро должно быть размером 50 на 20. А утки должны быть крупные.

То есть, здесь он уже вам говорит, как это должно выглядеть.

Вот тоже самое и при создании сайта и веб-страницы.

HTML-страницы мы создаем как каркас (что хотим видеть). А уже в css-файле мы указываем браузеру, как должно все это выглядеть.

Наглядный пример CSS

Сейчас я хочу предоставить вам очень интересный сайт, который покажет всю мощь CSS кода. Проект называется csszengarden.com.

В чем здесь изюминка?

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

Что из этого вышло, можно посмотреть на страничке «View All Designs».

Тут ему прислали огромное количество каскадных стилей для его каркаса. Лучшие он начал выкладывать в данном списке.

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

Веб-дизайн значительно изменяется.

Синтаксис CSS

Теперь давайте разберем синтаксис CSS или правила написания каскадных таблиц стилей.

Селекторы

Вся каскадная таблица стилей состоит из селекторов. Это своего рода система наведения.

С ее помощью мы указываем браузеру, к какому элементу страницы будем применять стили.

body {
  color: #353535;
}

Из примера видно, что к тегу body (селектор) нужно задать цвет шрифта (применить свойство со значением).

Селекторы бывают многих видов.

Мы их потом рассмотрим в отдельном уроке, когда вплотную будем изучать css.

Но сначала разбираем только синтаксис.

Как видите, сначала прописываем селектор. То есть указываем, какой элемент страницы нужно стилизовать.

Далее открываем фигурную кавычку и сразу же ее закрываем.

А уже внутри фигурных кавычек пишем css правила.

Сначала указываем название свойства.

Затем сразу за названием ставим двоеточие и прописываем значение свойства. Каждое свойство заканчивается точкой с запятой.

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

Свойства CSS

Свойств CSS и их значений очень много. Из примера выше видно, что к тегу body мы применяем свойство цвет и к нему задаем код вывода конкретного цвета.

body {
color: #353535;
}

Давайте к селектору дополнительно напишем свойство шрифта.

body {
color: #353535;
font: normal 1em Arial, Tahoma, sans-serif;
}

Значения

Для каждого селектора можно создавать бесконечное количество свойств. Также для каждого свойства можно задавать несколько css значений. Их количество не ограничено.

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

Если рассматривать пример свойства font: normal 1em Arial, Tahoma, sans-serif;, то получается 3 значения:

• 1-ое — normal (нормальный шрифт)
• 2-ое — 1em (размер шрифта)
• 3-е — Arial, Tahoma, sans-serif (виды подключаемых шрифтов)

CSS примеры

Стоит сказать, что синтаксис CSS не чувствителен к регистру символов, пробелам и переносам строк. Вот пример 1:

body {
color: #353535;
font: normal 1em Arial, Tahoma, sans-serif;
}

CSS пример 2:

body {color:#353535;font:normal 1em Arial,Tahoma,sans-serif;}

Для браузера это не имеет значение.

История языка CSS

В начале 90-х годов, HTML был довольно слабым языком.

Он состоял из обычных элементов для описания списков, заголовков, различных абзацев или гиперссылок.

Чуть позже, файлы уже содержали не только тексты, но и рисунки.

Также появились специальные цветные фрагменты текста и изображения.

С их помощью (при щелчке мыши) можно было перемещаться между самими файлами.

Это дало толчок к появлению многих сайтов.

С появлением большого количества сайтов, возникала потребность в усовершенствовании языка.

Многим авторам ресурсов нужны были средства для выделения самого текста полужирным шрифтом или курсивом.

На тот момент HTML не мог такое осуществить.

После этого, в языке начали появляться элементы разметки (теги big и em).

Прошло некоторое время и начали появляться более свежие версии с новыми элементами. А сами страницы стали более структурированными.

Все это значительно улучшило индексацию поисковыми системами.

Сама структурированная разметка упростила обслуживание сайта, позволила очистить код и упростить поиск.

Однако, не смотря на многие плюсы такой разметки, у нее был главный недостаток.

Это внешний вид.

Структурированная страница выглядела тогда не очень красиво.

Но авторы сайтов в дальнейшем ни за что бы не отказались от языка HTML.

Поэтому стала потребность в методе, который смог бы позволить использовать сочетание структурированной разметки с красивым внешним видом страниц без отказа от HTML.

CSS 1

В качестве такого метода послужил стандарт CSS 1. В 1996-ом году он был введен консорциумом W3C (World Wide Web Consortium).

Механизм обеспечил очень богатое представление документов.

Можно было создавать любые красивые цветовые элементы. Красивый и привлекательный текст.

Дополнительные элементы оформления и многие другие интересные эффекты.

CSS 2

12 мая 1998-ого года на основе первой версии была принята CSS2. Но уже с добавленной функциональностью.

7 июня 2011 года была принята CSS2.1 со многими исправлениями. Позже вышла разрабатываемая версия CSS3.

CSS 3

В CSS 3 появилось много возможностей.

Стала упрощенная работа с фоном. К примеру, можно сразу задавать несколько фонов.

Раньше чтобы сделать два фона у блока, нужно создавать 2 блока (внешний и внутренний).

Улучшена работа с градиентами.

Раньше нужно было вырезать какой-то кусок изображения и затем через свойство background вставлять и делать repeat по x или y.

В третьей версии сделано все намного проще.

Также стало лучше работать с тенями.

Появилось больше возможностей по заданию цвета. Впервые появилась возможность указать прозрачность.

В CSS 3 появилась анимация.

Многие скрипты для анимации теперь можно заменить на обычный CSS код.

То есть вам даже не нужно будет дополнительно подключать JQuery.

В ранних версия стилей была проблема с закругленными рамками.

Нужно было создавать кучу внутренних блоков, вставлять или вырезать картинки и так далее. То есть было много возни с этим.

В третьей версии все это можно реализовать одной строкой.

Еще в третьей версии появились функции трансформирования.

То есть можно передвигать разные блоки, поворачивать их на угол, растягивать, сужать и так далее.

Уроки CSS

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

Скажу вам, что без таких каскадных таблиц стилей, не было бы и самого веб-дизайна.

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

Ниже предлагаю вам подробные уроки по CSS для бесплатного изучения.

В каждой статье более подробно раскрываются отдельные темы. Поэтому для «чайников» никаких проблем в освоении не будет.

Но прежде чем начать обучение, рекомендую сначала изучить язык HTML. Без него вы не сможете работать со стилями.

Только после того, как выучили язык разметки, переходите к стилям из этого самоучителя.