русс | укр

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

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

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

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


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

Стили шрифтов


Дата добавления: 2013-12-23; просмотров: 1247; Нарушение авторских прав


Использование стилей для форматирования текста

Применение нескольких таблиц стилей

В документе обычно используется несколько разных стилей. Конфликты между ними разрешаются при помощи понятия каскадности (cascade) и наследования (inheritance). Наследование основывается на том, что элементы html вложены один в другой и соотносятся как предок и потомок. Те параметры, которые не указаны у потомка наследуются им от родителя.Приоритеты (от высшего к низшему):

  1. Таблицы пользователя
  2. Таблицы автора документа
  3. Таблицы браузера по умолчанию

Если использовать несколько таблиц автора, то приоритет расставляется следующим образом:

  1. Правило задается как значение атрибута style
  2. Правило задается как значение id
  3. Правило определяется с помощью атрибута class
  4. Правило для параметров элементов в таблице связанной с документом тегом <link> зависит от того в какой последовательности включены элементы link и style. Больший приоритет имеет последний записанный элемент.
  5. Правило определяет параметры элементов по умолчанию браузера

Наследование наоборот от 5 к 1.

Пример:

Файл mystyle.css содержит строку: h1 { color : blue; font-size : 26 pt; font-style : italic}

Документ:

<HTML>

<HEAD>

<link rel=” stylesheet” type = “text/css” href = “mystyle.css”>

<style>

h1 { color : red; font-size : 40 pt}

</style>

</HEAD>

<BODY>

<h1 style = “color : yellow”> Заголовок </h1>

</BODY>

</HTML>

При открытии этого документа в браузере, заголовок будет отображаться желтым курсивом размером 40 pt. Если поменять местами link и style, то заголовок отобразиться желтым курсивом, размер – 26 pt.


Составные части форматирования текста:

– шрифт текста (стиль шрифтов)

– цвет текста, фона, фоновый рисунок (стиль оформления)



– «табулирование», межсловное и межсимвольное расстояние, отступы, подчеркивание и т.д.

– расположение элемента (размеры, поля, отступы, границы)

– позиционирование

Рассмотрим параметры и их значения.

1) font-family –семейство шрифта (поддерживается всеми элементами). Если конкретного шрифта нет у пользователя, браузер выбирает наиболее подходящий из указанного семейства. Можно через запятую указать альтернативные варианты семейства шрифтов, это является хорошим тоном. Возможные значения: Arial, Courier, Helvetica, “Times New Roman”, название состоящее из нескольких слов пишется в кавычках ‘ или “.

Пример:

р {font-family: ”Times New Roman”, Arial}

2) font-size –размер шрифта (поддерживается всеми элементами). Для таблиц стилей существует несколько способов задания размеров:

  • абсолютный, указывается размер в единицах

- cm (сантиметр)

- mm (миллиметр)

- in (дюймы lin=2,54cm)

- pt (пункт l pt= 1/72 in)

- pc (пика 1 pc= 12 pt)

- px (пикселы, зависит от конкретного экрана)

  • абсолютный размер с помощью ключевых слов (условно абсолютный), в этом случае размер зависит от таблицы шрифтов конкретного браузера. Ключевые слова: xx-small, x- small, medium, large, x- large, xx- large
  • относительный размер (размер вычисляется относительно текущего текста, того который указан в элементе-контейнере)

- в процентах

- c помощью ключевых слов (зависит от браузера). Возможные значения: larger, smaller

Пример: р {font-size: 12pt}

body {font-size : 12 pt}

h1 { font-size : 125%}

h3 { font-size : 75%}

В примере размеры заголовков hi задаются относительно body

3) font- weight – толщина шрифта (поддерживается всеми элементами). Не у каждого шрифта есть соответствующая жирность, браузер выбирает наиболее подходящую толщину. Значением может служить: ключевое слово или числа 100, 200,…900. Некоторые соответствия ключевых слов и числены значений:

normal 400

lignt

bold 700

bolder

4) font-style – стиль шрифта (поддерживается всеми элементами)

normal – прямой (по умолчанию)

italic – курсивный

5) font-variant – вариант стиля шрифта (смена написания строчных букв) (поддерживается всеми элементами)

normal – не включен

small-caps – капитель (строчные как малые заглавные) Е и е (ТЕКСТ текст)

6) font – задание одновременно всех свойств, описанных выше (поддерживается всеми элементами). Значение свойств задается через пробел для каждого одно, альтернативные могут быть только у font-family через запятую. Свойства задаются в определённом порядке: стиль, вариант, толщина, размер, семейство.

Такие стили рекомендуется использовать вместо нежелательных элементов управления шрифтом: b (полужирный шрифт), big (крупный шрифт), small (мелкий шрифт), i (курсив), strike и s (перечеркнутый текст – как задать будет описано далее), u (подчеркнутый текст), tt (шрифт курьер), font, basefont.

Стили оформления текста (цвет, фон)

1) color – цвет текста (всеми). Значения: ключевое слово (16 названий), шестнадцатеричное число # 000000 (из 6 цифр: 0 – F), вещественные числа, определяющие яркость в процентах или значениях от 0 до 255, как параметр функции rgb.

Примеры:

Black # 000000 red # FF 0000

Lime # 00FF00 blue # 0000 FF

сolor: rgb (0, 255, 0)

сolor: rgb (0%, 100%, 0%)

Код цвета, созданный путем любой комбинации пар 00, 33, 66, 99, CC, FF, считается безопасным, т. е. должны отражаться одинаково на любом устройстве, любой платформе или операционной системе.

2) background–image – изображение для фона (все), значением является url-адрес файла с рисунком; формат файла: GIF, JPG, PNG

Пример: background–image: url (pic.gif)

3) background–repeat – расположение фонового рисунка (все)

- repeat – заполнение всей области элемента по горизонтали и вертикали (по умолчанию)

- no–repeat – вывод изображения в единственном экземпляре

- repeat–x – повторяется изображение только по горизонтали

- repeat–y – повторяется изображение только по вертикали

4) background-attachment – прокручивание фонового изображения (все)

- scroll (по умолчанию)

- fixed

5) background – position – начальное положение фонового изображения с помощью 2-х значений: горизонтальной и вертикальной координаты, разделяемых запятой. Значение координат может задаваться абсолютной величиной (см, мм, in, px), в процентах (от размера области), ключевыми словами (top, center, bottom, left, right)

6)background – одновременно значение всех четырех свойств через пробел. Порядок: цвет, изображение, способ расположения, прокрутка, начальное положение.

Пример: body {background: blue url (pic.gif) repeat-x}



<== предыдущая лекция | следующая лекция ==>
Способы встраивания стилей в HTML – документ | Расположение элемента


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


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

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

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


 


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

 
 

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

Генерация страницы за: 0.006 сек.