Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АрхитектураБиологияГеографияДругоеИностранные языки
ИнформатикаИсторияКультураЛитератураМатематика
МедицинаМеханикаОбразованиеОхрана трудаПедагогика
ПолитикаПравоПрограммированиеПсихологияРелигия
СоциологияСпортСтроительствоФизикаФилософия
ФинансыХимияЭкологияЭкономикаЭлектроника

Способы определения стилей

Читайте также:
  1. АИР-98МИ, ПТС "Профи", ПТС "Стандарт" и способы их устранения
  2. Актуальность коучинга. История возникновения. Определения.
  3. Анализ экономических карт России для определения типов территориальной структуры хозяйства. Группировка отраслей по различным показателям.
  4. Атомно-абсорбционный метод определения тяжелых металлов и токсичных элементов в пищевых продуктах и пищевом сырье
  5. Билет № 1, вопрос № 3.Смазочные устройства, способы подачи смазки, системы смазки оборудования
  6. Билет № 3, вопрос № 5.Способы оказания первой помощи пострадавшим при кровотечении. Правила наложения жгутов и повязок
  7. Билет № 4, вопрос № 1.Характер износа деталей, способы их восстановления и ремонта

· Собственный стиль для конкретного элемента документа определяется атрибутом style этого элемента и называется встраивание таблицы стилей:

<p style="font-size:12pt; color:black">Текст абзаца</p>

· Локальное определение стиля задаётся тэгом style, который помещается в тэг head, и действует в пределах этого документа. В тэг style помещаются правила таблицы стилей. Такое определение стиля называется внедрение таблицы стилей:

<head>

........

<style type="text/css">

Здесь можно вставлять такой комментарий!

Вложенные комментарии не допускаются. * /

body{ background-color:grey;

font-size:14pt } /* Первое правило*/

h1{ background-color:white;

color:blue } /* Второе правило*/

</style>

</head>

<body>

<h1>Синий заголовок на белом фоне</h1>

<p>А это абзац на сером фоне, размер символов – 14pt, цвет символов – по умолчанию (чёрный)</p>

</body>

</html>

· Локальное определение стиля также можно выполнить с помощью команды @import, которая позволяет импортировать элементы стиля из внешнего файла *.css (импорт таблицы стилей), команда помещается в тэг style раньше других правил таблицы стилей. Внешний файл *.css содержит набор правил таблицы стилей:

my.css:

body{ background-color:grey; font-size:14pt }

p{ font-size:11pt; font-face:Arial }

my.htm:

<head>

........

<style type="text/css">

@import url(my.css); /* импорт таблицы стилей */

h1{background-color:white; color:blue} /* внедрённое правило */

</style>

Можно импортировать несколько таблиц в одном документе.

· Глобальное (внешнее) определение стиля помещается в отдельный файл *.css, который содержит набор правил таблицы стилей и подключается тэгом link в тэге head нескольких документов, которые должны иметь общие правила оформления, такой способ задания стиля называется связывание:

<head>

......

<link rel="stylesheet" type="text/css" href="my.css">

</head>

Применение правил таблицы стилей:

<html>

<head>

.......

</head>

<body>

<h1>Синий заголовок на белом фоне</h1>

<p>А это абзац на сером фоне, размер символов – 14pt, цвет символов – по умолчанию (чёрный)</p>

</body>

</html>

Приоритеты таблиц стилей, начиная с наивысшего: встроенная, внедрённая, импортированная, связанная, по умолчанию (настройки браузера).

Виды селекторов

Селектор типа элемента – переопределяет атрибуты любого тэга:

h2 { color:blue }

p {font-size:16pt }

Применение:

<h2>Заголовок</h2>

<p>Абзац</p>

Селектор класса – позволяет для одного и того же тэга определить несколько вариантов оформления:

h2.red {color:red }

h2.green {color:green }

Применение:

<h2 class="red">Это красный заголовок</h2>

<h2 class="green">А это зелёный заголовок</h2>

Также селектор класса позволяет создать стиль, который можно применить для различных тэгов:

.style1 {color:blue; font-size:22pt}

.style2 {color:lime; background-color:grey}

Применение:

<p class="style1">Большие синие буквы, фон – по умолчанию</p>

<p class="style2">Зелёные буквы, фон – серый, размер букв - по умолчанию</p>

<h1 class="style1">Заголовок - большие синие буквы, фон – по умолчанию</h1>

<h1 class="style2">Заголовок - зелёные буквы, фон – серый, размер букв - по умолчанию</h1>

Имя класса чувствительно к регистру символов!


Дата добавления: 2015-10-02; просмотров: 59 | Нарушение авторских прав


<== предыдущая страница | следующая страница ==>
Создание фреймовой структуры| Свойства для таблиц стилей

mybiblioteka.su - 2015-2024 год. (0.006 сек.)