- •1. Структура web-документа. Вставка комментария.
- •2. Текст - логика и физика..
- •3. Форматирование Web-документа
- •Теги физического форматирования текста.
- •Логическая разметка текста.
- •Теги логического форматирования текста.
- •Полезные советы:
- •4. Организация ссылок. Правила записи ссылок Организация ссылок
- •Правила записи ссылок
- •Ссылки на документы различных типов
- •Ссылки на другие ресурсы Интернета
- •5. Списки нумерованные и маркированные. Списки определений Создание списков html страницы
- •Нумерованный список html страницы
- •Маркированный список html страницы
- •Многоуровненвый список html страницы
- •Списки определений html страницы
- •7. Встраивание изображений в web-документ. Выравнивание изображений. Задание размеров выводимого изображения. Отделение изображения от текста. Альтернативный текст
- •Выравнивание изображений.
- •Задание размеров выводимого изображения.
- •Отделение изображений от текста.
- •Рамки вокруг изображений.
- •Альтернативный текст.
- •8. . Использование изображения в качестве ссылки. Баннеры.
- •9. Графические форматы для web-документа
- •10. Таблицы. Создание простейших таблиц. Представление таблиц на странице.
- •11.Форматирование данных внутри таблицы.
- •12. Вложенные таблицы.
- •13. Объединение ячеек таблицы по горизонтали и по вертикали.
- •Объединение ячеек html таблицы по вертикали
- •14. Особенности построения таблицы. Отображение пустых ячеек в таблице. Выравнивание данных в столбцах таблицы Особенности построения html таблиц
- •Выравнивание данных в столбцах html таблицы
- •15. Фреймы. Сферы применения фреймов.
- •Сферы применения фреймов
- •16. Правила описания фреймов.
- •17. Особенности навигации при использовании фреймов. Взаимодействие между фреймами. Различие между фреймами и окнами браузера.
- •Взаимодействие между фреймами в html
- •18. Плавающие фреймы. Варианты их использования.
- •19. Карты-изображения. Графическое представление карты-изображения. Описание конфигурации карты-изображения. Средства создания карты-изображения.
- •20. Каскадные таблицы стилей. Встраивание таблицы стилей в документ.
- •21. Группирование и наследование.
- •22. Селекторы. Селектор class и Селектор id.
- •Пример 2. Использование классов c тегами
- •Пример 3. Использование классов c тегами
- •Теги Span и Div
- •Пример 2. Использование тега div
- •Селекторы id Параметр id задает уникальное имя элемента, которое используется для обращения к нему скриптов. Это позволяет управлять стилем элемента динамически. Синтаксис id селектора следующий.
- •Пример 3. Использование идентификатора id
- •23. Примеры применения контекстных селекторов.
- •24. Псевдоклассы. Псевдоклассы связей.
- •25. Модель форматирования. Блоковые элементы. Встроенные элементы.
- •26. Стилевые свойства форматирования текста.
- •27. Стилевые свойства для цвета и фона.
- •28. Блоки. Визуальное форматирование
- •2 9. Абсолютное, относительное и статическое форматирование.
- •30. Отображение списков.
20. Каскадные таблицы стилей. Встраивание таблицы стилей в документ.
Каскадные таблицы стилей позволяют прописывать индивидуальный дизайн (оформление и форматирование) отдельно для каждого тега. То есть если один раз прописать каким должен выглядеть тот или иной тег, то можно всегда обращаться на эту запись. То есть нет необходимости прописывать каждый раз множество атрибутов (align, border, font-size и т.д.) для каждого тега. Это перекрывать действия стиля принятого в стандарте. Настало время познакомиться с тэгом < p>. Его функция — разделять вашу страницу на отдельные разделы, с последующим применением отдельного класса стилей для каждого раздела. Рассмотрим структуру создания классов стилей: .Имя_класса {его параметры оформления} Пример: .Stilzagalovka {font-size: 22; color: blue; text-align: center} (обратите внимание на точку в начале класса стиля) .Stilcitata {font-size: 14; color: gray; text-align: right} (обратите внимание на точку в начале класса стиля)
Стиль Stilzagalovka использует выровненный по центру синий шрифт с размером 22 пунктов, а Stilcitata – выровненный по правой части серый шрифт с размером 14 пунктов. Чтобы применить класс стилей, нужно добавить атрибут CLASS к тэгу p. И поместите текст, который хотите отформатировать, между тэгами: < p CLASS = “Имя_стиля“ >текст< /p> Пример:
< HTML > < HEAD > < TITLE >Использование классов стилей< /TITLE > < /HEAD>
< STYLE TYPE=”text/css” > .Stilzagalovka {font-size: 22; color: blue; text-align: center} .Stilcitata {font-size: 14; color: gray; text-align: right} -> < /STYLE> < BODY > < p CLASS=”Stilzagalovka” > Выровненный по центру синий шрифт с размером 22 пунктов < /p > < p CLASS=”Stilcitata ” > выровненный по правой части серый шрифт с размером 14 пунктов< /p > < /BODY > < /HTML>
Сегодня наверное трудно представить себе веб-сайт без использования такой, весьма мощной технологии, как каскадные таблицы стилей. В этой статье мы поговорим с вами о том, каким образом подставляются стили в веб-страницу. Различают три способа размещения стиля на странице:
Подставляемые стили (in-line)
Встраиваемые стили (embedded)
Внешние таблицы стилей
Теперь давайте рассмотрим каждый способ по отдельности. Первый способ — это подставляемые таблицы стилей. Данный метод мы применяем для конкретного элемента страницы, например для горизонтальной линии (<HR>). Пример: <HR STYLE="width:50px; height:4px; color:#ff8c00;"> Применив этот стиль, мы получим горизонтальную линию длинной 50 пикселей, высотой в 4 пикселя и, соответственно, цветом #ff8c00. Данный способ встраивания стиля целесообразно использовать, если необходимо изменить стиль написания текста, гарнитуру, цвет только в определенном месте страницы. Следующий способ подстановки — это встраиваемый стиль. Данный способ более компактно добавляет таблицу стилей. Осуществляется путем добавления в заголовок html-страницы тегов <STYLE></STYLE>, между которыми вы записываете нужные стили. Пример:
<HTML> <HEAD> <TITLE>Заголовок вашей страницы</TITLE> <STYLE type="text/css"> <!-- body {font-face:'Times New Roman'; background-color:#ffffff;} .smalltext {font-size:6pt; color:gray;} #red {color:red;} --> </STYLE> </HEAD>… </HTML>
Как видно из примера, теги <STYLE></STYLE> должны находиться между <HEAD></HEAD>. Также желательно использовать атрибут type="text/css", т. к. это поможет некоторым браузерам распознать стиль, отсутствие этого атрибута может привести к полному игнорированию некоторыми браузерами данного участка кода. Кроме того, обычно необходимо помещать вокруг содержимого <STYLE> теги комментария (<!-- и -->). Данный способ встраивания CSS-стиля используется более часто, нежели другие виды подстановки.
Следующим способом подстановки будет использование внешней таблицы стилей. Данный способ является наилучшим, для использования каскадных таблиц стилей. Представляет собой вот что. Все css-стили мы собираем в одном единственном текстовом файле и в каждой html-странице делаем ссылку на этот файл. Теперь мы очень быстро сможем изменить требуемый стиль и эти изменения автоматически отразятся на всех страницах сайта. Не правда ли удобно?
Существует два способа обращения к внешним таблицам стилей (кстати, файл таблиц стилей должен иметь расширение .css) из html-страницы.
1. Ссылка. Здесь мы используем следующую конструкцию, взгляните на пример:
<HTML> <HEAD> <TITLE>Заголовок вашей страницы</TITLE> <LINK rel="stylesheet" type="text/css" href="/путь/style.css"> </HEAD> … </HTML>
Здесь мы используем специальный тег <LINK>, который ссылается на файл со стилями. Данный способ хорошо поддерживается различными браузерами и является наиболее часто используемым. Атрибуты, содержащиеся в данном теге обозначают следующее: атрибут rel="stylesheet" указывает на то, что мы будем иметь дело с таблицей стилей, атрибут href="…" указывает месторасположение css-файла. Здесь может указываться как относительный путь, так и абсолютный.
2. Импорт. Этот способ является альтернативой ссылкам. Здесь происходит импортирование внешнего файла таблиц стилей в элемент <STYLE>. Для этого используется специальная функция @import. Вот пример:
<HTML> <HEAD> <TITLE>Заголовок вашей страницы</TITLE> <STYLE type="text/css"> @import url(http://domen/stylesheet/file.css); p {color:black; font-size:12pt; font-weight:800;} </STYLE> </HEAD> … </HTML>
Здесь нужно сделать замечание, что функция @import должна стоять перед любыми правилами. Преимуществом данного способа является возможность добавить на страницу сразу несколько таблиц стилей.
Перечисленные здесь способы встраивания таблиц стилей имеют свои плюсы и минусы. Это уж вам решать, каким образом следует прикрепить стиль к странице, какой способ будет более приемлемым для вас и для конкретной ситуации. Удачи.