Словарь html и css: Тег

Содержание

position | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

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

Значение по умолчанию	static
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/visuren.html#propdef-position

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Синтаксис

position: absolute | fixed | relative | static | inherit

Значения

absolute: Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
fixed: По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
relative: Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
static: Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
inherit: Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>position</title>
  <style>
   .layer1 {
    position: relative; /* Относительное позиционирование */
    background: #f0f0f0; /* Цвет фона */
    height: 200px; /* Высота блока */
   }
   .layer2 {
    position: absolute; /* Абсолютное позиционирование */
    bottom: 15px; /* Положение от нижнего края */
    right: 15px; /* Положение от правого края */
    line-height: 1px;
   }
  </style>
 </head>
 <body>
  <div>
   <div>
     <img src="images/girl.
  jpg" alt="Девочка" />
   </div>
  </div>
 </body>
</html>

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

Рис. 1. Применение свойства position

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

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

Браузеры

Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit.

Позиционирование

CSS по теме

position

Статьи по теме

4 метода создания колонок одинаковой высоты
Выравнивание слоя по центру
Две колонки, навигация справа
Обзор HasLayout
Подвал страницы
Позиционирование элементов
Понятие потока
Поток документа
Разрезание и склейка изображений
Резиновый дизайн. Двухколонный макет
Резиновый трёхколоночный макет
Фиксированный дизайн. Наложение слоев
Фиксированный дизайн. Позиционирование
Фиксированный дизайн. Размещение трех колонок
Фиксированный трёхколоночный макет
Шапка страницы

Рецепты CSS

Как выделить строку с помощью блока с закруглениями?
Как добавить скругленные уголки у фотографии фиксированного размера?
Как заменить текст изображением?
Как зафиксировать слой, чтобы он оставался на одном месте при прокрутке страницы?
Как сделать рамку со скругленными уголками?

Справочник элементов — Учебник HTML — schoolsw3.com

❮ Дом Далее ❯

Тег	Описание
<!—…—>	Определяет комментарий
<!DOCTYPE>	Определяет тип документа
<a>	Определяет гиперссылку
<abbr>	Определяет аббревиатуру или акроним
<acronym>	Не поддерживается в HTML5. Использовать вместо <abbr>. Определяет акроним
<address>	Определяет контактные данные автора/владельца документа
<applet>	Не поддерживается в HTML5. Использовать вместо <embed> или <object>. Определяет встроенный апплет
<area>	Определяет область внутри изображения-карты
<article>	Определяет статью
<aside>	Определяет содержание в стороне от содержимого страницы
<audio>	Определяет звуковое содержимое
<b>	Определяет полужирный текст
<base>	Указывает базовый URL-адрес/цель для всех относительных URL-адресов в документе
<basefont>	Не поддерживается в HTML5. Вместо этого используйте CSS. Задает цвет, размер и шрифт по умолчанию для всего текста в документе
<bdi>	Изолирует часть текста, которая может быть отформатирована в другом направлении от другого текста за его пределами
<bdo>	Переопределяет текущее направление текста
<big>	Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет большой текст
<blockquote>	Определяет раздел, который цитируется из другого источника
<body>	Определяет тело документа
<br>	Определяет один разрыв строки
<button>	Определяет нажатую кнопку
<canvas>	Используется для рисования графики, на лету, с помощью сценариев (обычно JavaScript)
<caption>	Определяет заголовок таблицы
<center>	Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет центрированный текст
<cite>	Определяет название работы
<code>	Определяет часть кода компьютера
<col>	Задает свойства столбца для каждого столбца в элементе <colgroup>
<colgroup>	Задает группу из одного или нескольких столбцов в таблице для форматирования
<data>	Связывает данное содержимое с машинно-читаемым переводом
<datalist>	Задает список предварительно заданных параметров для элементов управления вводом
<dd>	Определяет описание/значение термина в списке описания
<del>	Определяет текст, который был удален из документа
<details>	Определяет дополнительные сведения, которые пользователь может просматривать или скрывать
<dfn>	Представляет определяющий экземпляр термина
<dialog>	Определяет диалоговое окно или окно
<dir>	Не поддерживается в HTML5. Использовать вместо <ul>. Определяет список каталогов
<div>	Определяет раздел в документе
<dl>	Определяет список описания
<dt>	Определяет термин/имя в списке описания
<em>	Определяет подчеркнутый текст
<embed>	Определяет контейнер для внешнего (не HTML) приложения
<fieldset>	Группирует связанные элементы в форме
<figcaption>	Определяет заголовок для <figure> Элемент
<figure>	Указывает автономное содержимое
<font>	Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет шрифт, цвет и размер текста
<footer>	Определяет нижний колонтитул для документа или раздела
<form>	Определяет HTML-форму для ввода данных пользователем
<frame>	Не поддерживается в HTML5. Определяет окно (фрейм) в фрейме
<frameset>	Не поддерживается в HTML5. Определяет набор фреймов
<h2> to <h6>	Определяет заголовки HTML
<head>	Определяет сведения о документе
<header>	Определяет заголовок документа или раздела
<hr>	Определяет тематическое изменение содержания
<html>	Определяет корень HTML-документа
<i>	Определяет часть текста в альтернативный голос или настроение
<iframe>	Определяет встроенный фрейм
<img>	Определяет изображение
<input>	Определяет элемент управления вводом
<ins>	Определяет текст, вставленный в документ
<kbd>	Определяет ввод с клавиатуры
<label>	Определяет метку для <input> Элемент
<legend>	Определяет заголовок для <fieldset> Элемент
<li>	Определяет элемент списка
<link>	Определяет связь между документом и внешним ресурсом (наиболее используемым для связывания с таблицами стилей)
<main>	Указывает основное содержимое документа
<map>	Определяет изображение на стороне клиента-Map
<mark>	Определяет выделенный/выделенный текст
<menu>	Определяет список/меню команд
<menuitem>	Определяет команду/пункт меню, который пользователь может вызвать из всплывающего меню
<meta>	Определяет метаданные HTML-документа
<meter>	Определяет скалярное измерение в пределах известного диапазона (датчика)
<nav>	Определяет навигационные ссылки
<noframes>	Не поддерживается в HTML5. Определяет альтернативное содержимое для пользователей, которые не поддерживают кадры
<noscript>	Определяет альтернативное содержимое для пользователей, которые не поддерживают сценарии на стороне клиента
<object>	Определяет внедренный объект
<ol>	Определяет упорядоченный список
<optgroup>	Определяет группу связанных параметров в раскрывающемся списке
<option>	Определяет параметр в раскрывающемся списке
<output>	Определяет результат вычисления
<p>	Определяет абзац
<param>	Определяет параметр для объекта
<picture>	Определяет контейнер для нескольких ресурсов изображения
<pre>	Определяет предварительно отформатированный текст
<progress>	Представляет ход выполнения задачи
<q>	Определяет краткое предложение
<rp>	Определяет, что отображать в обозревателях, не поддерживающих аннотации Ruby
<rt>	Определяет объяснение/произношение символов (для восточно-азиатских типографии)
<ruby>	Определяет аннотацию Ruby (для восточно-азиатских типографий)
<s>	Определяет текст, который больше не является правильным
<samp>	Определяет выборку выходных данных из компьютерной программы
<script>	Определяет сценарий на стороне клиента
<section>	Определяет раздел в документе
<select>	Определяет раскрывающийся список
<small>	Определяет меньший текст
<source>	Определяет несколько мультимедийных ресурсов для элементов мультимедиа (<video> И <audio>)
<span>	Определяет раздел в документе
<strike>	Не поддерживается в HTML5. Использовать вместо <del> или <s>. Определяет текст зачеркивания
<strong>	Определяет важный текст
<style>	Определяет сведения о стиле для документа
<sub>	Определяет текст с подстрочным текстом
<summary>	Определяет видимый заголовок для <details> Элемента
<sup>	Определяет текст с надписью
<svg>	Определяет контейнер для графики SVG
<table>	Определяет таблицу
<tbody>	Группирует содержимое тела в таблице
<td>	Определяет ячейку в таблице
<template>	Определяет шаблон
<textarea>	Определяет многострочный элемент управления вводом (область текста)
<tfoot>	Группирует содержимое нижнего колонтитула в таблице
<th>	Определяет ячейку заголовка в таблице
<thead>	Группирует содержимое заголовка в таблице
<time>	Определяет дату и время
<title>	Определяет заголовок документа
<tr>	Определяет строку в таблице
<track>	Определяет текстовые дорожки для элементов мультимедиа (<video> И <audio>)
<tt>	Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет телетайп текст
<u>	Определяет текст, который должен быть стилистически отличается от обычного текста
<ul>	Определяет неупорядоченный список
<var>	Определяет переменную
<video>	Определяет видео или фильм
<wbr>	Определяет возможный разрыв строки

❮ Дом Далее ❯

Глоссарий CSS | Codecademy

Комментарии в CSS обозначаются косой чертой и звездочкой.

Пример

   /* Это однострочный комментарий. 03 
 комментарий */

Свойства

Определение

Свойства определяются в селекторах путем определения свойства и значения. Они разделяются двоеточием и обозначаются точкой с запятой.

Синтаксис

   selector { 
  свойство: значение; 
  }

Пример

   h2 { 
  цвет: синий; 
  }

Подробнее

http://www.htmldog.com/reference/cssproperties/

Определение множества свойств

Каждое правило CSS может иметь любое количество свойств. Каждый из них применяется к элементам, к которым применяется селектор.

Пример

   h2 { 
  размер шрифта: 24px; 
  вес шрифта: полужирный; 
  граница: сплошной черный 1 пиксель; 
  цвет: розовый; 
  } 
  /* Это сделает все заголовки 
 большими, полужирными, розовыми и внутри тонкого черного прямоугольника! */

Заполнение

Заполнение — это расстояние между содержимым и границей (краем элемента). Мы можем настроить это значение с помощью CSS, чтобы переместить границу ближе или дальше от содержимого. Здесь div с идентификатором «box» получит 10 пикселей отступа вокруг себя.

Пример

   #box { 
  padding: 10px; 
  }

Поля

Поля — это пространство вокруг элемента. Чем больше поле, тем больше пространство между нашим элементом и элементами вокруг него. Мы можем настроить поле, чтобы переместить наши HTML-элементы ближе или дальше друг от друга. Здесь div с идентификатором «box» получит отступ в 10 пикселей сверху и снизу от него и по 5 пикселей слева и справа.

Пример

   #box { 
  margin: 10px 5px 10px 5px; 
  }

font-family

Свойство font-family устанавливает шрифт текста HTML-элемента.

Синтаксис

   p { 
  семейство шрифтов: Arial, Helvetica, без засечек; 
  }

Селекторы

Что такое селекторы?

Селекторы используются в CSS для выбора частей HTML, которые стилизуются. Вы можете использовать несколько различных методов для выбора элемента.

Синтаксис

   селектор { 
  правила; 
  правила; 
  правил; 
  }

Подробнее

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/

Селекторы имени класса

Вы также можете выбирать элементы HTML по имени их класса. В отличие от селекторов ID, селекторы класса выбирают все элементы с соответствующим классом.

Пример

   a.link { 
  размер шрифта: 12px; 
  } 
  /* HTML Selected: , 
   */

Пример

   .jumbo { 
  text-size: 1000px; 
  } 
  /* HTML Selected:  com">, 
   */

Селекторы элементов

Вы можете сначала выбрать элементы HTML, просто используя имя элемента.

Пример

   body { 
  background-color: #333; 
  }

Пример

   h2 { 
  цвет: синий; 
  }

Пример

   a { 
  подчеркивание текста: нет; 
  }

ID-селекторы

ID-селекторы используются для выбора только одного элемента на странице. Как указывает термин («идентификация»), селекторы идентификаторов будут выбирать ТОЛЬКО первый элемент с совпадающим идентификатором.

Пример

   #thatThingINeededToStyle { 
  цвет: синий; 
  размер шрифта: 24 пикселя; 
  } 
  /* HTML Selected:  */

Пример

   a#codecademy { 
  цвет: фиолетовый; 
  } 
  /* HTML Selected:  com"> */

Селекторы атрибутов

Элементы HTML также можно выбирать по их атрибутам.

Пример

   a[href="http://codecademy.com"] { 
  цвет: фиолетовый; 
  } 
  /* HTML Selected:  */

Пример

   input[type="text"] { 
 width:
2 100 пикселей; 
 
  } 
  /* HTML Selected:  */

Пример

   input[required] { 
  граница: 1 пиксель красная сплошная; 
  } 
  /* HTML Selected:  */

Подробнее

http://dev.opera.com/articles/view/27-css- основы/#атрибут

Дочерние селекторы

Вы также можете использовать несколько селекторов, чтобы получить именно те элементы, которые вам нужны, используя родительское вложение. Используя символ «больше» (>), вы можете выбрать только прямые дочерние элементы элемента, опустившись только на один уровень.

Example

   ul > li { 
  display: inline-block 
  } 
  /* Выбирает только элементы списка первого уровня во всех ненумерованных списках в HTML */ 
3 2 
  Пример  
    ul a { 
  подчеркивание текста: нет; 
  } 
  /* Выбирает все якоря, имеющие неупорядоченный список своих предков */ 
 
  Пример 
  ul + span { 
  дисплей: встроенный; 
  } 
  /* Выбирает только диапазоны, которые следуют непосредственно за неупорядоченным списком */ 
 
  Пример 
   a ~ h2 { 
  color: blue; 
  } 
  /* Выбирает все элементы h2, находящиеся в непосредственной близости от якоря */ 
 
  Подробнее 
 https://developer. mozilla.org/en-US/docs/Web /CSS/Descendant_selectors
 Универсальный селектор 
 Универсальный селектор (*) может использоваться для выбора всех элементов в определенном диапазоне. Имейте в виду, что универсальный селектор — это селектор с наибольшей нагрузкой на производительность, и его следует использовать с осторожностью.
  Пример 
   * { 
  цвет фона: синий; 
  } 
  /* Выбирает ВСЕ элементы HTML на странице */ 
 
  Пример 
   body * { 
  цвет: красный; 
  } 
  /* Выбирает ВСЕ дочерние элементы тела */ 
 
  Пример 
   div > * { 
  цвет: красный; 
  } 
  /* Выбирает ВСЕ дочерние элементы первого уровня всех div на странице */ 
 
  Подробнее 
 CSS/универсальные_селекторы
 http://www. stevesouders.com/blog/2009/06/18/simplifying-css-selectors/
 http://dev.opera.com/articles/view/27-css-basics/#universal
 Селекторы псевдоклассов 
 Псевдоселекторы можно использовать для сужения выбора с определенными правилами.
  Пример 
   li:first-child { 
  цвет: красный; 
  } 
  /* 
  Выбирает только те элементы 
, перед которыми нет элементов 
  
 
  
Selected; будет красным
 
  
Не выбрано
 
  
Не выбрано
 
  
 
  */ 
  li:last-child { 
  цвет: красный; 
  } 
  /* Это делает обратное; только последний 
 будет красным. */ 
 
  Пример 
   a:hover { 
  text-decoration: underline; 
  } 
  /* Будут подчеркнуты все ссылки, когда пользователь наведет на них указатель мыши */ 
  a:active { 
  вес шрифта: полужирный; 
  } 
  /* Все ссылки будут выделены жирным шрифтом, пока пользователь нажимает на них.  */ 
 
  Подробнее 
 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
 http://dev.opera.com/articles/view/27-css-basics/#псевдоклассы
 Хотите глубже погрузиться в CSS? Ознакомьтесь с нашим курсом «Изучение CSS».
 Узнайте больше на Codecademy 
 Путь навыков
 Основы кода 
 Начните свое путешествие по программированию со знакомства с миром кода и основных концепций.
 Checker Dense Включает
  5 курсов 
 Checker DenseCertificate Icon С
  Сертификат 
 Checker DenseLevel Icon
7 Дружелюбный
8
8 15  Уроки
 Карьерный путь
 Инженер полного цикла 
 A full-stack инженер может выполнить проект от начала до конца, от бэкенда до бэкенда.
 Checker Dense Включает
  51 курс 
 Checker DenseCertificate Icon С
  Профессиональная сертификация 
 Checker DenseLevel Icon 2 Дружелюбный Новичок
 597 169  Уроки
 Глоссарий 
 Глоссарий Как и во всем техническом плане, понимание терминологии , связанной с HTML, CSS и интерфейсной веб-разработкой, невероятно полезно.
 Общие условия 
 Точка останова
 Размер экрана, при котором конкретный  мультимедийный запрос  становится активным в адаптивном дизайне   .
 Браузер
 Приложение, которое позволяет пользователям получать и просматривать веб-сайты. За кулисами это достигается поиском доменных имен в системе DNS, подключением к серверу, загрузкой запрошенного веб-контента (файлов кода) с сервера и отображением его на доступном для просмотра веб-сайте.
  DNS 
 Интернет-система для сопоставления удобочитаемого доменного имени, введенного в браузере, с числовым IP-адресом сервера, на котором хранятся файлы данного веб-сайта.
 Доменное имя
 Удобный для человека адрес веб-сайта; адрес, который вводится в браузере. Браузер отправляет этот адрес в DNS для переадресации на соответствующий сервер по IP-адресу, связанному с доменным именем.
 Жидкий дизайн
 Веб-страницы и элементы веб-страниц, которые растягиваются и сжимаются, чтобы соответствовать доступному пространству. Нестилизованные веб-страницы по умолчанию изменчивы.
 Гит
 Популярный протокол контроля версий. Позволяет пользователям отслеживать изменения, внесенные в код, и при необходимости возвращаться к предыдущим версиям.
 Гитхаб
 Популярный веб-сайт, предлагающий хостинг и управление репозиториями git.
  IP 
 Адрес компьютера или сервера в Интернете. Браузер должен получить этот адрес от DNS для связи с сервером и загрузки файлов сайта для отображения.
 Адаптивный дизайн
 Веб-страницы, которые меняют свой макет или другие стили в зависимости от носителя (размер экрана, ориентация, тип устройства), на котором они отображаются. Использует  медиа-запросов  в CSS, чтобы определить, как и в каком контексте следует использовать конкретный CSS.
 Семантический код
 Относится к коду HTML, который правильно использует элементы в соответствии с их значением. Это код, который описывает содержимое, а не использует элементы просто на основе их внешнего вида.
 Сервер
 Специализированный компьютер, на котором хранятся файлы и содержимое веб-сайтов и который делает их доступными в Интернете.
 Разделение интересов
 Это концепция, согласно которой содержимое и стиль веб-страницы должны быть разделены в коде. HTML должен определять содержание, а стиль/презентация должны быть оставлены на усмотрение CSS. Эта методология была разработана, чтобы упростить обслуживание, изменение темы и анализ сайтов.
 Синтаксис
 Части кодового языка и их правильный порядок, чтобы сделать правильное утверждение. Точно так же, как в английском языке утверждения состоят из слов и символов, которые должны идти в определенном порядке, чтобы передать определенное значение, так же и утверждения в кодовых языках должны быть правильно построены для достижения желаемого эффекта.
 Окно просмотра
 Видимая область веб-страницы в окне браузера. Размеры области просмотра зависят от размера экрана устройства, ориентации и масштабирования окна.
 HTML-термины 
 Атрибут
 Дополнительная информация, которую можно добавить к некоторым элементам HTML   для обеспечения дополнительной конфигурации или поведения в браузере   . Атрибуты записываются в скобках тега  элемента  (или открывающего тега) и состоят либо из имени атрибута в паре со значением, либо просто из имени атрибута для двоичных атрибутов. Например.    , где "src" — имя атрибута, а "file.jpg" — его значение.
 Браузер
 Приложение/программное обеспечение, используемое для просмотра веб-сайтов и взаимодействия с ними. Браузеры используют данное доменное имя   , обращаются к  DNS  , чтобы указать  IP-адрес  связанного сервера   , а затем загружают файлы кода для веб-страницы с сервера. Затем файлы считываются для отображения веб-страницы, как описано в коде. Наконец, браузер продолжает следить за действиями пользователя и отвечает в соответствии с указаниями кода.
 Элемент
 Отдельный фрагмент кода в HTML, определяющий конкретное содержимое, такое как текст, мультимедиа и т. д. Элемент обычно включает открывающий тег   и может включать атрибуты   и закрывающий тег   (если он не является самозакрывающимся элементом).
  HTML 
 Аббревиатура для  языка гипертекстовой разметки  . Это основной язык веб-сайтов, определяющий значение и структуру  контент  на веб-странице.
 Самозакрывающийся элемент
 Любой элемент, не требующий отдельного закрывающего тега в дополнение к открывающему тегу. Например:    , который стоит отдельно, в отличие от  text  , для которого требуется закрывающий тег после текста.
 Сервер
 Специальный компьютер для хранения файлов кода и другого веб-контента.  Браузеры  должны подключаться к серверу и загружать этот контент для отображения веб-сайта.
 Тег
 Написанный код, связанный с элементом   . Обычно состоит из названия элемента (или иногда аббревиатуры), заключенного в скобки со стрелками, например.  <раздел> 
 Термины CSS 
  УСС 
 Кодовый язык для определения визуального и презентационного стиля веб-страницы. Код CSS ищет совпадающие фрагменты HTML и , объявляя  особые правила для их представления.
 Декларация / Правило
 Пара свойств   /  значений , которая определяет стиль для одного аспекта выбранного элемента. Например.  padding: 2rem  , где  padding  — свойство, а  2rem  — значение.
 Блок объявлений
 Фрагмент CSS, включающий один или несколько  селекторов , связанных с одним или несколькими  правилами  (пары свойство/значение).
 Свойство
 Определяет, на какую функцию повлияет объявление CSS. Свойство связано с действительным  значение , чтобы объявить, что следует использовать определенный стиль. Вместе пара свойство/значение называется правилом   или объявлением   . Примеры свойств могут включать  color  ,  font-size  или  margin  .
 Селектор
 Указывает конкретное HTML-содержимое, которое должно быть оформлено заданным блоком объявлений CSS   .