Каскадные таблицы стилей (CSS)
В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходится каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Все равно необходимо десять или сто десять раз вставлять один и тот же кусок HTML-кода, увеличивая размер файла.
CSS (Cascading Style Sheets - каскадные таблицы стилей) позволяют действовать другим, более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик требуется один раз описать этот элемент и определить это описание как стиль. В дальнейшем можно просто указывать, что элемент, который требуется оформить соответствующим образом, должен принять свойства указанного стиля.
Существует три вида таблиц стилей: Внутренние таблицы стилей, Глобальные таблицы стилей и Связанные таблицы стилей. Внутренние таблицы стилей (Inline Style Sheets) мало чем отличаются от HTML тегов. Глобальные (Global Style Sheets) определяют стиль элементов во всем документе. Связанные (Linked Style Sheets) могут быть использованы для нескольких документов и хранятся во внешнем файле.
Расположение описания стилей в отдельном файле имеет смысл в случае, если планируется применять эти стили к большому количеству документов. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, а в коде документов, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега , располагающегося внутри тега .
Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить броузеру, что на этой страничке будет использоваться CSS. Третий параметр - HREF - указывает на файл, который содержит описания стилей. Этот параметр должен содержать путь к файлу.
Во втором варианте описание стилей располагается внутри тега BODY, в теге
В этом случае можно использовать указанные стили для элементов, располагающихся в пределах документа. Параметр type = ”text/css” является обязательным и служит для указания броузеру использовать CSS.
И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента. Это делается с помощью параметра STYLE, используемого с большинством стандартных тегов HTML. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS - возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.
Самый простой способ присвоения какому-либо элементу определенного стиля выглядит так:
НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;}
НАЗВАНИЕ_ЭЛЕМЕНТА - имя HTMLтега (H1, P, TD, A и т. д.),
параметры в фигурных скобках - список свойств элемента и присвоенных им значений.
Пример:
H1 {font-size: 30pt; color: blue;}
В этом примере всем заголовкам на странице, оформленным тегом H1, присваивается размер шрифта 30 пунктов и синий цвет.
CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно - для этого используется параметр CLASS = “имя класса” или идентификатор ID = “имя элемента”, присваивающиеся любому элементу документа.
Рассмотрим эти возможности подробнее.
Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов документа (одинаковых или разных).
Примеры:
описание стиля для класса A1
.A1 {font-weight: bold; text-align: center}
Все элементы класса A1 будут отображаться жирным шрифтом с выравниванием по центру страницы (или ячейки таблицы).
параграфу и ячейке таблицы присвоен стиль класса A1
Текст параграфа
текст
Содержащийся в ячейке текст будет отображаться согласно описанию класса. Таким образом, можно присвоить описанный стиль любым текстовым элементам документа.
При написании названия классов необходимо соблюдать регистр символов, согласно тому, как назван класс в описании стиля.
Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент в документе. Если элементов, которым необходимо присвоить такой стиль, несколько - это уже класс.
Язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять. Но этот стандарт в полном объеме поддерживают не все броузеры. Совместно с ДОМИНО рекомендуется использовать Microsoft Internet Explorer версии 5 и выше.
Далее рассмотрим некоторые элементы стиля.
Свойства шрифта
font-family - Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
P {font-family: Times New Roman, sans-serif;}
font-weight - Определяет степень жирности шрифта с помощью трех параметров: lighter, bold, bolder
B {font-weight: bolder;}
font-size - Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и в абсолютной величине (пункты, пикселы, сантиметры)H1 {font-size: 200%;}H2 {font-size: 150px;}H3 {font-size: 400pt;}
Цвет элемента и цвет фона
Color - Определяет цвет элемента
I {color: yellow;}
background-color – Устанавливает цвет фона для элемента – именно для элемента, а не для документа.
Пример использования CSS