русс | укр

Программирование:

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог1С

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании

Обучение

Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Связывание таблиц стилей с документами

Дата добавления: 2015-07-09; просмотров: 417; Нарушение авторских прав


 

Таблицу стилей можно внедрить в HTML_документ, поместив ее между тегами <style> и </style> в заголовке документа, или сохранить в собственном файле, со_ славшись на файл из HTML_документа с помощью тега <link>. Например:


 

16.1. Обзор CSS
   

 

<html>

 

<head><title>Тестовый документ</title> <style type="text/css">

 

body { margin_left: 30px; margin_right: 15px; background_color: #ffffff } p { font_size: 24px; }

</style>

</head>

 

<body><p>Проверка, проверка и еще раз проверка</p></body> </html>

 

Если таблица стилей используется более чем одним документом на веб_сайте, лучше хранить ее в виде отдельного файла без охватывающих HTML_тегов. Этот CSS_файл может быть подключен к HTML_странице. Однако в отличие от тега <script>, тег <style> не имеет атрибута src. Поэтому, чтобы подключить таблицу стилей к HTML_документу, необходимо воспользоваться тегом <link>:

 

<html>

<head><title>Тестовый документ</title>

 

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

 

<body><p>Проверка, проверка и еще раз проверка</p></body> </html>

 

Тег <link> может использоваться для задания альтернативной таблицы стилей. Некоторые броузеры (такие как Firefox) позволяют выбирать из имеющихся альтернатив (в меню с помощью пункта Вид>Стиль страницы). Например, вы могли бы предусмотреть альтернативную таблицу стилей для посетителей сайта, кото_ рые предпочитают крупный шрифт и высококонтрастное цветовое оформление:

 

<link rel="alternate stylesheet" href="largetype.css" type="text/css" title="Крупный шрифт"> <!__ заголовок отображается в меню __>

 

Если к веб_странице с помощью тега <style> подключается особенная таблица стилей, то чтобы включить в эту таблицу общий CSS_файл, можно воспользо_ ваться CSS_директивой @import:

 

<html>

 

<head><title>Тестовый документ</title> <style type="text/css">

@import "mystyles.css"; /* импорт общей таблицы стилей */

 

p { font_size: 48px; } /* переопределение импортированных стилей */ </style>

</head>

 

<body><p>Проверка, проверка и еще раз проверка</p></body> </html>

 


<== предыдущая лекция | следующая лекция ==>
Применение правил стиля к элементам документа | Каскад правил

Карта сайта Карта сайта укр

Видео
Уроки php mysql Программирование
Онлайн сервисы
Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские
Полезное

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных

 


Не нашли то, что искали? Google вам в помощь!

  
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.
Генерация страницы за: 0.188 сек.