2017-11-01
1285
Часть I. Что есть CSS
Немного о CSS
Так что это такое - CSS? Cascading Style Sheets (Таблицы Каскадных Стилей) - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента HTML-страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов. Например, нужно создать жирный красный подчеркнутый текст.
ПРИМЕР HTML:
<font color="red"><strong><u>
Какой-то текст
</u></strong></font>
А если подобный стиль нужно использовать несколько раз? Хорошо если раз 5, а если 10-20? Вот тут нам и поможет CSS. Существует три вида таблиц стилей: Внутренние таблицы стилей, Глобальные таблицы стилей и Связанные таблицы стилей. Внутренние таблицы стилей (Inline Style Sheets) при помощи специального атрибута помещаются прямо в HTML теги. Глобальные (Global Style Sheets) определяют стиль элементов во всем документе. Связанные (Linked Style Sheets) могут быть использованы для нескольких документов сразу и хранятся во внешнем файле, поэтому их ещё называют внешними. Подробнее обо всем этом написано ниже.
|
|
|
Внутренние Таблицы Стилей
Использование внутренних стилей мало чем отличается от использования обычных HTML тегов. Они задают стиль только одному элементу документа при помощи атрибута STYLE в HTML теге.
ПРИМЕР HTML:
<font color="blue" size="3" face="Arial"> Вперед в будущее </font>
ПРИМЕР INLINE STYLE SHEET:
<p style="color:blue;font-size:12pt;font-family:Arial"> Вперед в будущее </p>
Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать, только если необходимо задать определенному элементу свой индивидуальный стиль, существующий в классификации CSS и нереализованный в HTML. Или же при необходимости абсолютно позиционировать данный элемент.
Как видно из вышеприведенного примера, содержимое параметра style представляет собой список параметров CSS. Параметры записываются в виде:
- Имя параметра.
- Двоеточие.
- Значение параметра.
- Точка с запятой.
Если внутри параметров CSS потребуется использовать кавычки, то используются одинарные кавычки, т.к. двойные уже использованы для выделения всего списка параметров. Точку с запятой после последнего параметра ставить не обязательно.
Не следует между параметрами ставить лишних пробелов, т.к. пробелы служат специальными разделителями для групповых параметров CSS.
Глобальные Таблицы Стилей
Глобальные стили задают вид элементов всей страницы HTML. Для этого используется пара тегов <STYLE type="text/css"> и </STYLE>. Он размещается в заголовке документа.
ПРИМЕР:
|
|
|
<html>
<head> <title> Пример Глобальных Таблиц Стилей </title>
<STYLE type="text/css">
h1{color:red;font-style:italic;font-size:32px}
p{color:blue}
span{font-weight:bold}
</STYLE>
</head>
<body>
<h1> Этот заголовок написан крупным красным курсивом </h1>
<p> Вот этот абзац синий, a
<span> это - жирное. </span >
Продолжение абзаца,
<span> и снова жирное. </span >
</p>
</body>
</html>
В данном примере все элементы <H1> будут написаны крупным красным курсивом, все элементы <P> станут синими, все элементы <SPAN> станут жирными. Для простоты вместо <STYLE type="text/css"> можно использовать просто тег <STYLE>, что менее грамотно. Как видите, для выделения списка параметров CSS используются фигурные скобки в отличие от кавычек во внутреннем стиле. Перед фигурными скобками стоит тег, для которого и описаны параметры в скобках. Таким образом, эти параметры работают во всех повторениях данного тега в тексте страницы. Если тег создает контейнер (блок), то параметры распостраняются на весь контейнер.
