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

Реклама

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

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

Реклама

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

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

Реклама

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

Реклама

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

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

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

Реклама