Виталий Лебедев Мастер

Что такое CSS и для чего они нужны?

В одной из своих статей на «Школе жизни» под названием «Что необходимо для того, чтобы создать свой первый сайт?» я уже писал, что для создания своего собственного Интернет-ресурса необходимо знать язык гипертекстовой разметки — HTML. Большинство сайтов во всемирной паутине создано при помощи этого языка. Но HTML был разработан в 1991—1992 годах и, хотя впоследствии претерпел некоторые изменения, не стал тем универсальным языком, которым можно обойтись на все случаи жизни. С точки зрения профессионала — сайт, сделанный с применением исключительно одного HTML, будет выглядеть, мягко говоря, «на троечку».

Действительно, если вы хотите иметь для себя статичный, постоянно стоящий на одном месте и практически не изменяющийся со временем сайт, то знаний HTML вам будет вполне достаточно. Но только на первых порах. Впоследствии, если вы захотите добавить, например, новый раздел или изменить шапку, то придется заново редактировать все страницы. А если их много, то такой процесс может занять очень длительное время. Что же делать?

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

В общем случае HTML целесообразно использовать только для того, чтобы вставлять текст, картинки и другие элементы страницы. А их шрифт, размеры, цвет и другие параметры лучше задавать через стили. Это избавит вас от всех трудов, связанных с переверсткой других подобных по своему оформлению страниц, значительно упростит работу и сэкономит время. Например, если вы захотите сделать на всех страницах своего сайта шрифт 12 кегля синего цвета, находящийся на красном фоне с отступом в две строки от шапки, вам придется каждый раз на новой странице производить порядка десятка манипуляций в визуальном редакторе. А если вы делаете сайт «вручную» — многократно добавлять одни и те же теги. При использовании CSS всего этого делать не придется. Сохранив свойства шрифта, размеры и цвет в одном файле, который называется «стилистическим», вы каждый раз будете подключать его при редактировании новой страницы добавлением в код HTML-документа всего одной строки! При этом вся страница сразу же примет надлежащий ей вид. Настройки шапки (рисунок) можно сохранить в другом файле и когда понадобится ее изменить, стоит только незначительно поменять имеющуюся в нем информацию, и все страницы вашего сайта моментально изменятся! Удобно, не так ли?

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

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

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

Успешного сайтостроительства!

Обновлено 10.05.2008
Статья размещена на сайте 15.03.2008

Комментарии (8):

Чтобы оставить комментарий зарегистрируйтесь или войдите на сайт

Войти через социальные сети:

  • Очень хорошая статья! Новичкам, изучающим html необходимо сразу осваивать и CSS, чтобы сэкономить в будущем бесценные часы и дни собственной жизни.

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

    Оценка статьи: 5

    • Правильно. Непосредственно при создании нового раздела CSS не помогут. Тут я не совсем ясно выразил свою мысль.

      Поясню. Что такое раздел? Я понимаю под этим определенную страницу, на которую дается ссылка на всех страницах сайта. Эту ссылку можно определить в любом редакторе (Microsoft Word, Блокноте, Home Site и т.д.) при помощи HTML. Соотвественно новый раздел будет содержать в себе другие элементы (картинки, текст, другие ссылки и т.п.), которые будут оформленны в соотвествии с другими документами сайта. Поэтому чтобы каждый раз не тратить время на новое оформление для каждого нового раздела путем вставки HTML-тегов (это относится не только к содержимому самого раздела, но и к оформлению самой ссылки на него), лучше воспользоваться подключением готового стилевого файла, при этом каждый новый раздел будет сразу оформлен соответствующим образом.

      Кроме того оформление самого меню сайта желательно также вынести в отдельный стилевой файл, чтобы было проще добавить новый раздел.

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

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

        Кроме того оформление самого меню сайта желательно также вынести в отдельный стилевой файл, чтобы было проще добавить новый раздел.


        Может, на конкретном примере было бы понятнее. Мне кажется, что это уже ближе к SSI. Может, я ошибаюсь.

  • В 4 абзаце у меня ошибка:

    Например, если вы захотите сделать на всех страницах своего сайта шрифт 12 кегля синего цвета

    Не знаю, где я умудрился услышать слово "кегля" применительно к шрифтам , но пожалуй, лучше написать "12 размера".