Что такое css и как его использовать?

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

С помощью этого языка оформляются все html-страницы. Без него они выглядели бы страшно и убого. Так что css — это photoshop веб-разработчика, если можно так сказать.

Прежде чем растолковывать дальше, вы должны знать о первом языке, который нужно знать в сайтостроении — html. На эту тему у меня есть соответствующая статья. Я советую прочитать ее всем, кто мало знает об html.

Дело в том, что html и css нужно изучать вместе, но сначала именно первый язык, так как с его помощью создается разметка веб-страниц. Css же нужен для того, чтобы правильно оформить и разместить элементы на странице в соответствии с дизайном.

Синтаксис

У css один из самых простых синтаксисов, разобраться с ним можно буквально за пару часов. Вся таблица стилей (то есть css-файл) состоит из селекторов и описания свойств и значений для них. Вот пример:

Чтобы вам было понятнее, смотрите на этот рисунок:

Подробное описание селекторов и все их основные виды вы можете найти в статье: CSS селекторы. Как видите, сначала идет название селектора, после чего ставятся фигурные скобки. Можно писать все в один ряд, а можно переносить на следующую строчку. Лино я предпочитаю такой стиль, который вы можете увидеть на скриншоте.

В фигурных скобках записывается все стили для элемента. Стили — это свойства и их значения. Все стили для одного конкретного селектора обычно называют стилевым правилом. Запись внутри фигурных скобок выглядит так:

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

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

Подключение и пример использования

Чтобы css работал и с его помощью можно было стилизовать html-элементы, необходимо подключить этот файл к html-документу. Это делается с помощью тега link. Подробно останавливаться на этом я не буду, потому что у меня есть для вас статья на соответствующую тему. Ознакомьтесь с ней, если вы не знаете, как подключить css.

Ну и давайте рассмотрим пример взаимодействия двух языков. В html-документе создадим цитату. Она создается с помощью тегов blockquote. Отлично. Давайте посмотрим, как она будет выглядит без стилевого оформления:


Как никак она не выглядит, обыкновенный текст. И тут-то на помощь и приходят стили, которые помогают оформить любые элементы на веб-странице. Для начала я, естественно, подключу таблицу стилей к html-файлу. Пока в ней ничего нет. Чтобы обратиться к цитате можно использовать глобальный селектор blockquote. В таком случае стили будут применены ко всем цитатам. Пропишем такие правила для цитат:

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

В общем, вот она работа css на примере. Я думаю, вы поняли цель этой технологии? Можете также попробовать открыть любой популярный сайт в браузерах Google Chrome или Яндекс.Браузер, после чего нажмите F12. Откроется так называемый отладчик. Попробуйте найти в исходном коде сайта подключение стилей (находится в теге head, стили подключаются с помощью ). Попробуйте изменить путь к таблицам стилей, чтобы он был неправильным и посмотрите на сайт. Наверняка его внешний вид изменится в отрицательную сторону.

Все дело в том, что html не создан и не подходит для оформления страниц. Он предназначен именно для создание элементов, разметки, но никак не для внешнего вида. Если вы веб-дизайнер, то наверняка поймете сейчас мой пример. Очень часто перед рисованием макета сайта, дизайнер делает прототип (его еще называют mockup). Потом на основании этого прототипа легче сделать красивый макет, потому что четко видно структуру будущего сайта.

Также и с веб-технологиями, а именно с html и css. Они неразрывно связаны друг с другом.

История

Сегодня css, как и html активно развиваются. Еще в 2008-2009 годах многих свойств, которые есть сегодня, не существовало. Тогда веб-разработчики использовали CSS 2.1 (версия языка). Сегодня же активно используется CSS 3. И хотя до сих пор новые свойства поддерживаются не всеми браузерами, их все равно уже используют.

Например, в новой версии появились такие возможности: закругление углов, анимации, трансформации, плавные переходы, множественные фоны, градиенты, полупрозрачность и многое другое. Согласитесь, слишком крутые свойства, чтобы их не использовать и не обращать на них никакого внимания. Уроки по CSS3 есть у команды Webformyself. Вот их первый видеоролик (вступление):

Еще 2 урока доступно для бесплатного просмотра, остальные — после оплаты доступа в премиум-клуб сайта, где помимо этого курса вас ждут десятки других. Если вдруг вас это заинтересовало, вот ссылкассылка на описание премиум-раздела. Я сам купил туда доступ и не жалею, очень много полезного узнал.

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

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

В общем, если отвечать на вопрос: «Что такое css и как его использовать?» прямо, то это один из языков, которые используются при создании сайта. А использовать его нужно при оформлении элементов, создания различных эффектов и т.д.

Что ж, кажется я сказал все, что хотел, а если что-то забыл упомянуть, обязательно допишу в будущем. Ну и, собственно, главный вопрос: «Легко ли учиться css и за сколько можно выучить?». Могу с уверенностью заявить, что легко, а если найти хорошие видеоуроки, то можно изучить буквально за месяц. Естественно, у вас должно быть большое желание, должны гореть глаза, без этого процесс будет идти медленнее.

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