Htmlbook display: display — CSS: Cascading Style Sheets – Плавающие элементы | htmlbook.ru

Leave a Comment / Html / By /

direction | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.02.0+9.2+1.3+1.0+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

direction предназначен для сайтов, в которых имеет значение направление текста. Например, при использовании арабского алфавита чтение происходит справа налево.

Свойство direction достаточно универсально и управляет следующими возможностями:

  • способ отображения текста в блоке;
  • порядок колонок в таблице;
  • позиция полосы прокрутки в блоке;
  • положение последней висячей строки текстового блока при text-align: justify.

Для использования со встроенными элементами, значение свойства unicode-bidi должно быть задано как embed или override.

Синтаксис

direction: ltr | rtl | inherit

Значения

ltr
Устанавливает направление слева направо.
rtl
Задает направление справа налево.
inherit
Наследует значение родителя.

Пример 1

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>direction</title>
  <style type="text/css">
   DIV.rtl { 
    direction: rtl; /* Направление */ 
    width: 200px; /* Ширина блока */ 
    height: 150px; /* Высота блока */ 
    overflow: scroll; /* Полоса прокрутки */ 
    text-align: left; /* Выравнивание по левому краю */ 
    padding: 5px; /* Поля вокруг текста */ 
    border: 1px solid #000; /* Параметры рамки */ 
   }
  </style>
 </head>
 <body>
  <div>Велосипед уже изобрели, различные приемы верстки тоже. 
  Так что больше знакомься с мировым опытом по части верстки и тебе не придется 
  тратить время на разработку того, что всем давно известно.</div>
 </body>
</html>

Результат данного примера показан на рис. 1. Обратите внимание на положение точки в предложении, а также на то, что полоса прокрутки в браузере Internet Explorer отображается слева.

Рис. 1. Результат использования direction в браузере Internet Explorer

Пример 2

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>direction</title>
  <style>
    table { 
     direction: rtl; /* Колонки идут справа налево */
     width: 100%; /* Ширина таблицы */
     border-spacing: 0; /* Убираем пространство между ячейками */
    } 
  </style>
 </head>
 <body>
  <table border="1">
   <tr> 
     <td>&nbsp;</td><td>1999</td><td>2000</td>
     <td>2001</td><td>2002</td><td>2003</td>
   </tr>
   <tr> 
     <td>Нефть</td><td>16</td><td>34</td>
     <td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
     <td>Золото</td><td>4</td><td>69</td>
     <td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
     <td>Дерево</td><td>7</td><td>73</td>
     <td>79</td><td>34</td><td>86</td>
   </tr>
  </table> 
 </body>
</html>

Результат данного примера показан на рис. 2. Колонки таблицы отображается справа налево.

Рис. 2. Применение direction к таблице

Браузеры

При добавлении свойства direction со значением rtl к блоку с полосой прокрутки (например, <textarea>), браузер Internet Explorer и Firefox отображают скроллинг слева, а Opera и Safari — справа.

@page | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
8.0+2.0+6.0+5.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Правило @page позволяет задать значение полей при печати документа или для страниц, у которых тип носителя задан как print.

Синтаксис

@page [ { :left | :right | :first } ] { Значения отступов }

Значения

Для установки полей на странице используется универсальное свойство margin или его производные — margin-top, margin-right, margin-bottom и margin-left, задающие соответственно отступ сверху, справа, снизу и слева. Отрицательное значение допускается, но часть страницы может оказаться «отрезанной». Свойства border и padding не применимы.

Ключевое слово :left позволяет задать поля для всех левых страниц, :right — для всех правых, а :first — для первой страницы.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>@page</title>
  <style>
   @media print { /* Стиль для печати */
    body {
     font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
    }
    h2, h3, p {
     color: #000; /* Черный цвет текста */
    }
   }
   @page :first {
    margin: 1cm; /* Отступы для первой страницы */ 
   }
   @page :left {
    margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех левых страниц */ 
   }
   @page :right {
    margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех правых страниц */ 
   }
  </style>
 </head>
 <body>
  <h2>Метод ловли льва в пустыне</h2>
  <h3>Метод последовательного перебора</h3>
  <p>Пусть лев имеет габаритные размеры LxWxH, где L — длина льва от кончика носа 
  до кисточки хвоста, W — ширина льва, а H — его высота. После чего пустыню разбиваем на 
  ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва. 
  Учитывая, что лев может находиться не строго на заданном участке, а одновременно на 
  двух из них, клетку для ловли следует делать повышенной площади, а именно 2Lx2W. 
  Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина 
  льва или, что хуже, только его хвост.</p>
  <p>Далее последовательно накрываем каждый из размеченных прямоугольников пустыни 
  клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура 
  поимки считается завершенной.</p>
 </body>
</html>

right | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+3.1+1.0+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента. Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края (рис. 1). В случае значения relative, right отсчитывается от правого края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от правого края родителя (рис. 2).

Рис. 1. Значение свойства right относительно окна браузера

Рис. 2. Значение свойства right относительно родителя

Синтаксис

right: значение | проценты | auto | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства right может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента.

auto
Не изменяет положение элемента.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>right</title>
   <style>
    .leftcol { 
     position: absolute; /* Абсолютное позиционирование */
     top: 20px; /* Положение от верхнего края */
     left: 10px; /* Положение от левого края */
     width: 100px; /* Ширина блока */
     background: #fc3; /* Цвет фона */
     border: 1px solid #000; /* Параметры рамки */
     padding: 10px; /* Поля вокруг текста */
    } 
    .centercol { 
     position: relative; /* Относительное позиционирование */
     background: maroon; /* Цвет фона */
     padding: 10px; /* Поля вокруг текста */
     color: white; /* Цвет текста */
     border: 1px solid #000; /* Параметры рамки */
     margin: 20px 240px 0 140px; /* Отступы вокруг блока */
    }
    .rightcol { 
     position: absolute; /* Абсолютное позиционирование */
     top: 20px; /* Положение от верхнего края */
     right: 10px; /* Положение от правого края */
     width: 200px; /* Ширина блока */
     background: #ccc; /* Цвет фона */
     border: 1px solid black; /* Параметры рамки */
     padding: 10px; /* Поля вокруг текста */
    }
   </style>
  </head>
 <body> 
  <div>Колонка 1</div>
  <div>Колонка 2</div>
  <div>Колонка 3</div>
 </body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3. Применение свойства right

Объектная модель

[window.]document.getElementById(«elementID»).style.right

Браузеры

В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

@import | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+2.0+4.0+2.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. @import не разрешается вставлять после любых объявлений кроме @charset или другого @import.

Синтаксис

@import url("имя файла") [типы носителей];
@import "имя файла" [типы носителей];

В качестве типа носителя выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.

Табл. 1. Типы носителей и их описание
ТипОписание
all
Все типы. Это значение используется по умолчанию.
auralРечевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
brailleУстройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheldНаладонные компьютеры и аналогичные им аппараты.
printПечатающие устройства вроде принтера.
projectionПроектор.
screenЭкран монитора.
tvТелевизор.

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

Значения

В качестве значения используется путь к стилевому файлу, который указывается внутри необязательной конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Импорт стиля</title>
  <style>
    @import "/style/main.css" screen; /* Стиль для вывода результата на монитор */
    @import "/style/palm.css" handheld, print; /* Стиль для печати */
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

Браузеры

Браузер Internet Explorer до версии 7.0 включительно не поддерживает типы носителей при импорте стилевого файла. Более того, при добавлении типа носителя стилевой файл вообще не загружается.

outline-style | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
8.0+1.0+7.0+2.0+1.5+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Задает стиль внешней границы элемента. В отличие от линии, задаваемой через border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение.

Синтаксис

outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

Значения

none
Граница не отображается. Это значение перекрывает свойство outline-width, если оно присутствует.
dotted
Линия состоящая из набора точек.
dashed
Пунктирная линия, состоящая из серии коротких отрезков.
solid
Сплошная линия.
double
Двойная линия.
groove
Создает эффект вдавленной рамки.
ridge
Создает эффект рельефной границы.
inset
Псевдотрехмерная рамка, при которой правая и нижняя граница осветляется, а левая и верхняя линии затемняются.
outset
Псевдотрехмерная рамка, при которой левая и верхяя граница имеют более светлый оттенок, чем заданный цвет, а правая и нижняя линии затемняются.
inherit
Наследует значение родителя.

Вид указанных стилей представлен на рис. 1.

Рис. 1. Вид границы с разным значением стилей

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>outline-style</title>
  <style>
   .noborder a {
    outline-style: none; /* Убираем границу вокруг ссылок */ 
   }
  </style>
 </head> 
<body> 
   <p><a href="http://ya.ru">Яндекс</a>
   <a href="http://google.ru">Google</a></p>

   <p><a href="http://ya.ru">Яндекс</a>
   <a href="http://google.ru">Google</a></p>
 </body>
</html>

Результат примера показан на рис. 2. В данном примере для браузера IE8 убирается пунктирная граница вокруг ссылок, возникающая при их активации. В первом абзаце рамка еще будет отображаться, а во втором абзаце она скрывается с помощью значения none свойства outline-style.

Рис. 2. Использование свойства outline-style для ссылок

Объектная модель

[window.]document.getElementById(«elementID»)style.outlineStyle

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *