русс | укр

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

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

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

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


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

Каскадные таблицы стилей

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

  • border - рамка вокруг содержимого тега. Возможные значения: ширина границы в стандартных единицах (обычно пикселях: 1px), стиль границы (сплошная solid, точечная dotted, штриховая dashed, отсутствующая none), цвет границы (название цвета или RGB-код цвета).
  • color - цвет текста. Возможные значения: название цвета (black, red, green, yellow) или RGB-код цвета (#00fac3).
  • display - показ содержимого тега. Возможные значения: inline (содержимое тега отображается); none (содержимое тега не отображается и место на экране не резервируется).
  • font-family - шрифт текста. Возможные значения: название шрифта (Arial, Times New Roman) или название семейства шрифтов (Times, Courier).
  • font-size - размер шрифта. Возможные значения: размер шрифта в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселях: 12px), в абсолютных единицах (small, medium, large), в относительных единицах (smaller, larger).
  • font-weight - полужирное начертание шрифта. Возможные значения: normal или bold.
  • font-style - курсивное начертание шрифта. Возможные значения: normal или italic.
  • left - отступ слева содержимого тега. Возможные значения: отступ в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселях: 12px).
  • margin - граница вокруг содержимого тега. Возможные значения: ширина границы в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселях: 12px).
  • padding - отступ между содержимым тега и рамкой вокруг содержимого тега. Возможные значения: отступ в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселях: 12px).
  • position - тип позиционирования содержимого тега. Возможные значения: absolute (абсолютное позиционирование на экране с использованием параметров стиля top и left), relative (относительное позиционирование согласно обычным правилам HTML), static (какое-либо специальное позиционирование отсутствует и содержимое тега размещается согласно обычным правилам HTML).
  • text-align - выравнивание абзаца текста. Возможные значения: left (по левому краю), right (по правому краю), center (по центру), justify (по ширине).
  • top - отступ сверху содержимого тега. Возможные значения: отступ в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселях: 12px).

Предусмотрено три различных способа определения стилей:

  • внешние таблицы стилей для нескольких страниц - определение стилей размещается в отдельном текстовом файле с расширением css. Применяется для стилей, используемых на нескольких страницах. Структура файла с таблицей стилей:

<style type="text/css">
определение стилей
</style>
Определить стиль можно следующим образом:

  • указав параметры стиля для требуемого тега;

    тег {параметр: значение; параметр: значение;}

  • указав параметры стиля для стилевого класса;

    .класс {параметр: значение; параметр: значение;}

  • указав параметры стиля для идентификатора стиля;

    #идентификатор {параметр: значение; параметр: значение;}
Для использования в странице HTML внешнего файла таблицы стилей необходимо применить в заголовке страницы тег <link>:

<head>
<link rel=stylesheet href="имя файла" type="text/css">
</head>

Применение стиля на странице HTML зависит от того, каким образом стиль был определен:

  • если параметры стиля были указаны для определенного тега, то никаких изменений на странице HTML делать не нужно;
  • если параметры стиля были указаны для стилевого класса, то для применения стиля к требуемому тегу на странице необходимо присвоить атрибуту class значение, равное имени стилевого класса;

    <тег class=класс>

  • если параметры стиля были указаны для идентификатора стиля, то для применения стиля к требуемому тегу на странице необходимо присвоить атрибуту id значение, равное имени идентификатора стиля (идентификатор стиля рекомендуется использовать на странице только в одном теге);

    <тег id=идентификатор>

  • встраивание таблиц стилей в страницу HTML - определение стилей прописывается в заголовке страницы в парном теге <style>. Применяется для стилей, используемых только на данной странице.

<head>
<style type="text/css">
определение стилей
</style>
</head>

Определение и применение стилей аналогично использованию внешних таблиц стилей.

  • встраивание стилей в теги HTML - определение стиля прописывается в атрибуте style какого-либо тега. Применяется для стилей, используемых только для данного тега на странице. Встраивание стилей в теги HTML записывается следующим образом:

    <тег style="параметр: значение; параметр: значение;">

Просмотров: 2112

Вернуться в оглавление:Введение в разработку распределенных информационных систем




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


Уроки php mysql Программирование

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

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


 


Полезен материал? Поделись:

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

 
 

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