Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Конспект_лекций_Управл_IT_сервис_и_контентом_08...doc
Скачиваний:
0
Добавлен:
01.07.2025
Размер:
1.09 Mб
Скачать

6. Таблицы стилей css.

Более чем вероятно, что Вы хоть один раз в своей жизни использовали для своей работы серьезный текстовый редактор, типа Microsoft Word или Open Office Writer. И наверное, вы использовали там т.н. "Стили" - набор форматирований, собранных в один пакет. Например, в Microsoft Word есть стандартный стиль - шрифт Arial, размер шрифта 12, цвет черный, выравнивание текста по обоим краям. Выделив текст, можно применить к нему стиль. Потом, если необходимо, например, изменить размер шрифта во всех измененных отрезках текста, достаточно изменить настройки стиля.

В мире Web таблицы стилей выполняют точно такую же функцию - показывают набор форматирований для различных тегов, или т.н. классов - набор форматирований для любого тега, отрезка текста и т.п. В мире Web таблицы стилей называют сокращенно CSS (Cascading Style Sheet - каскадные таблицы стилей).

CSS (Cascading Style Sheet - Каскадные таблицы стилей) - специальный язык, применяемый вместе с языком HTML для применения к любым объектам наборам форматирований.

Начнем мы изучать стили с не совсем обычного примера. Откройте ваш документ, в любое место между тегами <head> и </head> впишите:

<style>

p{text-indent:20px}

</style>

Откройте вашу страницу в браузере. Если все правильно, в каждом параграфе появится отступ первой строки, равный 20 пикселям.

Виды таблиц стилей

Есть 3 вида таблиц стилей - внутритекстовые, постраничные и вынесенные.

Внутритекстовые таблицы стилей применяются только к одному тегу в качестве атрибута.

Атрибут - свойство HTML тега, имеющее определенное значение или набор значений. В данном случае это атрибут style.

Например:

<span style="font-family:arial">arial</span>

span - тег, style - его атрибут, имеющий набор (в данном примере из одного форматирования) форматирований.

А что означает тег <span>?

Как мы написали выше, атрибут style можно применять только к тегам. Но, тег <p> и тег <div>, который мы изучим в одном из следующих уроков разделяют текст пустыми строками. Тег <span> позволяет выделить отрезок текста внутри тега <p>(<div>) и применить к нему любой стиль или скрипт.

<span> - выделяет произвольный отрезок текста, позволяя применить к нему любой стиль или скрипт.

Постраничные таблицы стилей - это уже описанные нами теги <style> и </style>, помещаемые в заголовок страницы (теги <head>). В них вы можете настроить неограниченное количество тегов, классов. После каждого тега ставятся скобки {}, между которыми помещается набор стилей. Один и тот же набор может относиться к нескольким тегам, классам. Тогда их перечисляют через запятую. Например:

h1,h2{text-align:center}

Эта запись означает, что заголовки 1 и 2 уровня во всем документе должны быть выровнены по центру. Если один или несколько заголовков этого же уровня должны отличаться от остальных, можно использовать внутритекстовые стили.

<style> и </style> - постраничной таблицы стилей.

Последний тип CSS - вынесенный. Для этого создается отдельный текстовый файл с расширением css. Например, у вас есть страница (несколько страниц). В папку со страницей вы помещаете ваш css файл. После этого на этот файл можно ссылаться с неограниченного количества страниц. При разработке сайтов этот метод самый эффективный и самый распространенный. Иногда используется внутритекстовый стиль. Постраничный стиль практически не используется.

Вынесенная таблица стилей загружается на страницу таким тегом: <link type="text/css" rel="stylesheet" href="путьКФайлу" />. Этот тег пишется в головной части страницы (между <head> и </head>). В вынесеной таблице(файл.css) никогда не пишутся теги <style>.