CSS - 1. Введение



Введение в CSS – это первый урок по основам языка из серии уроков, которые я подготовил, Вы узнаете все базовые понятия, которые касаются языка, а также какие бывают селекторы, свойства и так далее. И после введения в CSS Вы сможете приступить к более сложным урокам и делать по настоящему красивые вещи.

Если Вы знаете язык стилей, это ещё не значит, что Вы не сможете вынести из этой серии ничего полезного, поскольку совсем не исключено, что после введения в CSS Вы поймёте, что знаете его недостаточно хорошо. Кроме того, мы будем рассматривать новые свойства CSS3. Но прежде, чем говорить непосредственно о языке, я хочу сделать небольшую такую историческую предпосылку, чтобы показать, как оформлялись страницы до его появления.

До и после CSS

Допустим мы хотели изменить фон страницы, у нас есть тег <body>, мы ставили в тег <body> атрибут "bgcolor", равно и давали этому атрибуту значение "red" для того, чтобы поставить красный цвет фона. Дальше, например, в <body> мы хотели сделать большой заголовок, добавляли <h1> в какой-нибудь заголовок и если нам не нравился размер этого заголовка, мы хотели сделать этот заголовок поменьше – ставили <h2>, и он становился поменьше, и так далее, и тому подобное.

<body bgcolor="red">   
  <h2>Hello!</h2>   
  Параграф текста.
</body>

See the Pen oXWawx by proglang (@proglang) on CodePen.

Для просмотра результат перейдите на вкладку "Result".

То есть раньше HTML затрагивал оформление html-страницы, заполняли файл, как хотели бы, чтобы элементы выглядели. Но потом всё развивалось и люди столкнулись с такой проблемой, допустим, Вы хотели изменить цвет фона, меняли "bgcolor", и становилось всё нормально, но если у Вас было сто страниц, Вам нужно было поменять на ста страницах. Тут пришло на помощь появление языка CSS.

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

Таблицы теперь используются не для вёрстки страницы, а именно для своего первоначального предназначения для того чтобы создавать таблицы. Табличная вёрстка была ещё распространена недавно, в таких программах как Photoshop и других программах, которые позволяли нарезать Ваш макет и экспортировать в html-страницу с табличной вёрсткой, тем самым начиная создание веб-интерфейса с помощью CSS. И это был, в принципе, удобный вариант, простой и логичный, но помимо разделения информации и веб-интерфейса у таблиц были и другие недостатки, например, при помощи таблиц нельзя сделать, то, что можно сделать при помощи position absolute.

Это, однако, не значит, что Вы сегодня не сможете встретить ресурсы с табличной вёрсткой. Она применяется и применяется в довольно крупных ресурсах, например, сайт 3dnews.ru. До сих пор использует её, и создание веб-интерфейсов, видимо, новых не будет. Но скорее всего какое-то исключение, чем то, на что необходимо ориентироваться.

Для того чтобы показать разделение информации и веб-интерфейса, я покажу Вам сайт envato.com. И для того чтобы посмотреть как выглядит страница без стилей, набора элементов веб-интерфейса, используете браузер firefox, и отключите стили.

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

Что дальше?

Теперь, когда Вы поняли для чего нужен язык стилей, мы можем перейти к следующему уроку.