Введение в CSS

Основа CSS - стиль. Иными словами - это комбинация правил форматирования и оформления. Он применяется к разным элементам страницы. Для присвоения какому-то элементу данных свойств (к примеру: положение на странице, размер, цвет и так далее) для любого встречающегося тэга в стандартном HTML описывать эти свойства приходится каждый раз. И даже в том случае, если 10 или 110 однотипных элементов находятся на одной страничке. Величина файла и количество времени, которое требуется для загрузки на компьютер просматривающего его пользователя, в данном случае увеличивается.

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

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

Кроме того, CSS позволяет функционировать со шрифтовым оформлением веб-страниц на более

высоком уровне, чем HTML. При этом страницы графикой излишне не утяжеляются.

Освоение CSS

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

Если намечается применение этих стилей не к одной, а к большему числу количеству страниц, то

использование отдельного файла имеет смысл. В этом случае следует сформировать обычный

текстовый файл; при помощи языка CSS описать нужные стили; поместить данный файл на веб-

сервере; в коде веб-страниц, которые из данного файла будут использовать описанные стили, на этот

файл необходимо сделать ссылку - с помощью тэга <link>, который находится внутри тэга <body>

созданных веб-страниц:

Первые два параметра этого тэга - это сохраненные имена, которые необходимы для того, чтобы сообщить веб-браузеру, что CSS будет использоваться на данной странице. Параметр - href= «URL» - указывает непосредственно на файл с описанием стилей. Если параметр находится на том веб-сервере, что и документ, при помощи которого к нему обращаются, он должен содержать или относительный путь к файлу, или полный URL («http://...»), если файл со стилями - на ином сервере.

2-ой вариант, в процессе которого описание стилей располагается внутри тэга <body>, в тэге <style type="text/css">... </style> в коде страницы. В данном случае можно использовать данные стили для элементов, которые располагаются в пределах страницы. type="text/css" является обязательным параметром, служит для указания Web-браузеру использовать CSS.

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

Итак, давайте рассмотрим механизм, при помощи которого стили присваиваются элементам страниц. Вот самый простой случай присвоения:

НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;},

НАЗВАНИЕ_ЭЛЕМЕНТА - это имя тэга HTML (h1, TD, P и так далее), а параметры, расположенные в фигурных скобках - это список свойств элемента, а так же присвоенных им значений.

Пример:

h1 {font-size: 50pt; color: red;}

Всем заголовкам, расположенным на странице, которые оформлены тегом Н1, присваивается шрифт, размером 50 пунктов и красный цвет.

Созданные с использованием CSS элементы страниц тоже используют механизм наследования. Это означает: если расположить изображение внутри тэга <p>...</p>, который оформлен с участием CSS, с отступами, и таким образом, чтобы параграф помещался лишь на определенной части ширины страницы, изображение тоже получит значения отступов, которые отмечены для данного параграфа.

CSS может присваивать стили не только всем равным элементам страницы, но и избирательно. Для этих целей применяется идентификатор ID=«имя элемента», либо параметр CLASS = "имя класса". Они присваиваются всякому элементу страницы.

Рассмотрим данные возможности подробнее.

CLASS применяется, если нужно создать одинаковый (идентичный) стиль для нескольких элементов страницы, но не всех (разных или одинаковых).

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

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