- •Объявление типа документа[править | править исходный текст]
- •Cоздание файлов таблиц стилей
- •Ссылка на файл таблицы стилей
- •Стили в документе html
- •Селекторы
- •Селекторы класса
- •Обычные классы
- •Универсальный селектор класса
- •Применение классов стилей
- •Селекторы id
- •Inline- ("инлайн"-) элементы
- •Позиционирование и визуализация элементов страниц
- •Статическая компоновка страницы
- •Динамическая компоновка страницы
- •Создание и изменение
- •Авто-длина length
- •Перебор элементов
- •8. Типы
- •Введение в dom
- •4.2.2. Основные понятия
- •Пример 1
- •Пример 2.1
- •Пример 2.2
- •Пример 3.1
- •Пример 3.2
- •Типы данных[править | править исходный текст]
- •Константы
- •Переменные
- •Пример 1
- •Результат примера 1:
- •Типы данных
- •Массивы ¶
- •Синтаксис ¶
- •Определение при помощи array() ¶
- •Условные операторы
- •Открытие сессии
- •Регистрация переменных сессии
- •Закрытие сессии
- •Пример простой сессии
- •Конфигурирование Apache
- •Пути к файлам
- •Директивы файла httpd.Conf
- •Примечание
- •Примечание
- •Создание виртуальных хостов
- •Файл httpd.Conf. Настройка виртуальных хостов
- •Подключение MySql
- •Установка расширений php
Cоздание файлов таблиц стилей
Файлы таблиц стилей содержат определение стилей, которые можно использовать для того, чтобы разом оформить несколько документов HTML, расположеных на одном или нескольких серверах Web.
Приведем пример внешнего вида файла таблицы стилей:
<style>
H1{color: red; font-size: 27px; margin-left: 10%; font-weigt: bold}
H2{color: green; font-size: 24px; font-family: courier; font-weigt: bold}
P.italic{font-style: italic}
P.red{color:red}
</style>
Здесь определены стили для тегов <H1>, <H2>, а также стилевые классы P.italic и P.red.
Определение стиля тега начинается с имени тега (например, <H1>), вслед за которым в фигурных скобках перечисляются параметры стиля. Для стиля с классом <H1> в приведенном примере указаны размер шрифта, равный 24 пунктам, полужирное начертание, красный цвет и отступ с левой стороны на 10% от ширины экрана.
Чтобы определить различные параметры для одного и того же тега, используют классы. Например, класс P.italic задает оформление тега <P>(класс italic) наклонным щрифтом, а класс P.red задает цветовое оформление символов (красным цветом).
Ссылка на файл таблицы стилей
Для того чтобы документ HTML был офрмлен с использованием файла таблицы стилей, в разделе заголовка документа необходимо разместить тег <LINK>
Приведем пример ссылки на файл таблицы стилей:
<html>
<head>
<title>Использование стилей</title>
<link rel=stylesheet href=style.css type=text/css>
</head>
<body>
<H1>Заголовок первого уровня</H1>
<p>Обычный текст</p>
<H2>Заголовок второго уровня</H2>
<p class=italic>Наклонный текст</p>
<p class=red>Текст красного цвета</p>
</body>
</html>
Атрибут <LINK> необходимо задавать как указано в примере. В атрибуте HREF обязательно указыают URL - адрес, файла таблицы стилей.
Для того чтобы пользоваться стилями из файла таблицы стилей необходимо, прежде всего подключить таблицу стилей к документу HTML с помощью тега <LINK>, расположенного в заголовке документа. Если в таблице стилей определены атрибуты тегов языка HTML , вы просто указываете в документе эти теги без изменений:
<H1>Заголовок первого уровня</H1>
<p>Обычный текст</p>
<H2>Заголовок второго уровня</H2>
Кроме создания стилей, разрешается создавать новые классы для тегов. Например:
P.italic{fon-style: italic}
P.red{color:red}
Для того чтобы задействовать созданные классы, требуется указать имя нужного класса в атрибуте CLASS тега <P> (или другого тега), как покозано ниже (подробнее классы описаны ниже):
<p class=italic>Наклонный текст</p>
<p class=red>Текст красного цвета</p>
Внешний вид документа приведенного выше можно посмотреть здесь.
Стили в документе html
Таблицу стилей можно встроить непосредственно в документ HTML, для чего необходим тег <STYLE>, который имеет закрывающий тег </STYLE>. Между этими тегами распологают таблицу стилей. Эти теги распологаются в разделе <HEAD>:
<html>
<head>
<style>
H1{color: red; font-size: 27px; margin-left: 10%; font-weigt: bold}
H2{color: green; font-size: 24px; font-family: courier; font-weigt: bold}
P.italic{font-style: italic}
P.red{color:red}
</style>
<head>
<body>
</body>
</html>
Методы определения стилей в CSS. Преимущества использования CSS.
Существует целых четыре способа связывания документа и таблицы стилей: Связывание – позволяет использовать одну таблицу стилей для форматирования многих страниц HTML Внедрение – позволяет задавать все правила таблицы стилей непосредственно в самом документе Встраивание в теги документа – позволяет изменять форматирование конкретных элементов страницы Импортирование – позволяет встраивать в документ таблицу стилей, расположенную на сервере. Остановимся на каждом из этих способов более подробно. Связывание Как вам уже известно, информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в коде веб-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега LINK, располагающегося внутри тега HEAD ваших страниц: <LINK REL=STYLESHEET TYPE="text/css" href="URL"> Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить броузеру, что на этой страничке будет использоваться CSS. Третий параметр – href= «URL» – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://…») в случае, если файл стилей находится на другом сервере. Внедрение Второй вариант, при котором описание стилей располагается в коде Web-странички, внутри тега HEAD, в теге <STYLE type="text/css">... </STYLE>. В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type=»text/css» является обязательным и служит для указания броузеру использовать CSS.
Встраивание в теги документа Третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен, он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.
Импортирование В теге <STYLE> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей: @import: url(mystyles.css); Его следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значение свойства @import является URL файла таблицы стилей.
Главные преимущества CSS:
Более чистый код
Этот код легче поддерживать
Он быстрее загружается
Он лучше оптимизирован для поисковых систем
Модульный код
Правила стиля могут применяться ко множеству страниц
Единообразный дизайн
Код легче поддерживать
Сила дизайна
Точность контроля (позиционирование, размер, поля и др.)
Разделение труда
Задача разработчика — разрабатывать, задача дизайнера — создавать дизайн
Лучше доступность
Теги больше не используются не по назначению (например, <blockquote> для форматирования)
Нет необходимости в позиционировании невидимых картинок
Пользователи могут переписывать стилевые таблицы автора
Селекторы в CSS. Селекторы классов CSS . Селекторы идентификаторов CSS. Приоритеты селекторов.