WEB start

Компьютеры. Интернет. Заочное профессиональное обучение. 055-966-10-17

hit 
counter

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения 055-966-10-17
  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Защита информации.
  • Интернет. Планирование, создание WEB-сайтов. Дизайн, программирование. CEO, продвижение сайтов в интернет.
  • Основы современных IT - технологий.

Наши преимущества

  • Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
  • Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
  • Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
  • Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.


Регистрация на сайте

CSS

  • WEB - уведомления (Notifications)

    API уведомлений (notifications) позволяет веб-страницам управлять показом уведомлений конечным пользователям. Они находятся за пределами окна просмотра, поэтому их можно отображать даже тогда, когда пользователь переключает вкладки или перемещается в другое приложение. API разработан с учётом совместимости с существующими системами уведомлений на разных платформах.

    На поддерживаемых платформах показ системного уведомления обычно включает в себя два этапа.

    Во-первых, пользователь должен предоставить разрешение для отображения системных уведомлений, что обычно делается, когда приложение или сайт инициализируются с использованием метода Notification.requestPermission (). Это вызовет диалог запроса , где пользователь может разрешить уведомления из этого источника, блокировать уведомления из этого источника или не выбирать в этот момент. После того, как выбор сделан, настройка обычно сохраняется для текущего сеанса.

    Во-вторых, с помощью конструктора Notification () создается новое уведомление. Ему должен быть передан в качестве аргумента заголовок сообщения и, возможно, - объект options для указания дополнительных параметров, таких как направление текста, основной текст, значок для отображения, звук уведомления для воспроизведения и многое другое.

    Запрос разрешения

    Notification.requestPermission()

    Проверить статус разрешения

    Notification.permission

    Создание уведомления

    Для этого используется конструктор уведомления. Этот конструктор предполагает, что в уведомлении будет отображаться заголовок и некоторые параметры для улучшения уведомления, такие как иконка или тело текста.

    var notification = new Notification('Need support', {
    body: 'Call us...'
    });

    Методы, свойства и события

    API веб-уведомлений принимает два параметра: строку, содержащую заголовок уведомления, и необязательный объект настроек. Настройки, которые мы можем указать:

    • body: Строка, используемая для дальнейшего уточнения цели уведомления.
    • lang: Указывает язык уведомления. Его значение должно соответствовать стандарту BCP 47. Примеры действительных строк - en-US и it-IT.
    • dir: Определяет направление текста сообщения. Его значение может быть автоматически означающим, что направление основано на настройках браузера, ltr, чтобы указать направление слева направо (для европейских языков) или rtl, чтобы указать направление справа налево (для некоторых азиатских языков).
    • tag: Строка, которая используется как идентификатор, который можно использовать для извлечения, замены или удаления уведомления.
    • icon: Указывает URL-адрес изображения, которое будет использоваться в качестве значка уведомления.

    Чтобы создать экземпляр объекта Notification, мы должны написать инструкцию следующим образом:

    var note = new Notification('Need support', {
    body: 'Call us...'
    });

    Настройки доступны как свойства для чтения экземпляра объекта notification.

    Кроме того, объект Notification предоставляет свойство, называемое разрешением (permission). Разрешение содержит строку, представляющую текущей статус разрешения на отображение уведомлений.

    Его значение может быть одним из следующих:

    • denied, что означает, что пользователь отклонил уведомления
    • granted, что означает, что пользователь дал разрешение
    • default, что означает, что выбор пользователя неизвестен

    Этот API предоставляет два метода: requestPermission() и close(). Как следует из названия, первый используется для запроса разрешения на показ уведомлений пользователю, в то время как последний программно закрывает уведомление.

    requestPermission () - это метод объекта Notification, который принимает необязательный параметр - callback функцию, которая выполняется, когда пользователь принимает или отклоняет разрешение. Выбор пользователя передается в эту функцию в качестве параметра, и значение может быть: granted, denied, default.

    close () является методом, который не принимает никаких параметров.

    Иногда может потребоваться выполнить действие в тот момент, как только изменится статус уведомления. Например, мы можем захотеть узнать, нажал ли пользователь уведомление или когда уведомление закрывается. Для этого мы можем привязать программу-обработчик к одному из четырех событий:

    • onclick: вызывается, когда пользователь нажимает на уведомление.
    • onclose: вызывается, как только пользователь или броузер закрывает уведомление.
    • onerror: вызывается, если с уведомлением возникает ошибка.
    • onshow: вызывается, когда отображается уведомление.

    Пример использования этих событий.

    var note = new Notification('Need support', {
    body: 'Call us...'
    });
    note.onshow = function () {
    console.log ("Отображено уведомление");
    };

  • CSS - работа со шрифтами

    Для внешнего вида WEB - сайта большое значение имеет то, как и какие шрифты (fonts) Вы используете. Шрифт определяет начертание букы текста.

    Все шрифты, которые сайт использует, должны быть всегда доступны браузеру клиента, откуда бы он ни смотрел сайт (Windows, Linux, Android, Mac ,...).

    Если браузер на момент просмотра странички не нашёл нужный шрифт, то он пытается заменить его на наиболее похожий, выбирая из доступных ему альтернативных шрифтов, что может привести к произвольному изменению дизайна сайта. 

    Указания браузеру, какие именно шрифты использовать, даются с помощью CSS - директивы font-family.

    Например - для двух CSS - классов (.MySansSerif и .MyMonospace ) :

    .MySansSerif { font-family: Arial, Helvetica, sans-serif; } .MyMonospace { font-family: "Courier New", Courier, monospace; }

    Для этой директивы (font-family) в качестве значения задаётся список имён шрифтов (через запятую, в порядке приоритета), из которых браузер выбирает доступные шрифты (Arial, Helvetica, sans-serif).


    Универсальные WEB - шрифты (Safe web fonts)

    Это те шрифты, которые практически наверняка есть на любом компьютере, с которого заходит посетитель Вашего сайта

    По типу шрифтов.

    Шрифты Serif

    font-family Пример шрифта
    Georgia, serif Пример шрифта
    "Times New Roman", Times, serif Пример шрифта
    "Palatino Linotype", Palatino, "Book Antiqua", serif Пример шрифта

    Шрифты Sans-Serif

    font-family Пример шрифта
    Arial, Helvetica, sans-serif Пример шрифта
    "Arial Black", Gadget, sans-serif Пример шрифта
    Impact, Charcoal, sans-serif Пример шрифта
    Tahoma, Geneva, sans-serif Пример шрифта
    "Trebuchet MS", Helvetica, sans-serif Пример шрифта
    Verdana, Geneva, sans-serif Пример шрифта

    Шрифты Monospace

    font-family Пример шрифта
    Courier, monospace Пример шрифта
    "Courier New", Courier, monospace Пример шрифта
    "Lucida Console", Monaco, monospace Пример шрифта

    Шрифты Cursive

    font-family Пример шрифта
    "Comic Sans MS", cursive Пример шрифта
    "Courier New", Courier, monospace Пример шрифта
    "Lucida Console", Monaco, monospace Пример шрифта


    Сохранение шрифтов на сервере

    WEB - шрифты можно хранить на сервере, вместе с WEB сайтом. Для этого нужно:

    • сохранить файлы шрифтов на сервере
    • при помощи CSS директивы  @font-face описать шрифты, которые предполагается использовать в документе
    • при помощи директивы CSS  font-family закрепить шрифты за HTML - элементами.

    Файлы - описания шрифтов можно купить у разработчика, можно скачать бесплатные (например - Google Fonts).

    В директиве @font-face указывается имя, под которым далее шрифт будет использоваться в HTML - документе, путь к папке со шрифтами на сервере и имя файла, содержащего конкретный шрифт.

    Например:

    @font-face { font-family: Molle-Regular; src: url(Molle-Regular.ttf);

    Далее этот шрифт можно использовать через CSS директиву font-family. Например директива:

    .MyMonospace { font-family: Molle-Regular; }

    назначает классу .MyMonospace шрифт из файла: Molle-Regular.ttf


    Использование шрифтов из библиотек (CDN - Content Delivery Network)

    Существует ряд online- ресурсов, на которых хранятся шрифты, и с которых эти шрифты можно подгружать в HTML документ.

    Например, команда:

    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />

    подключает к HTML документу шрифт "Open Sans"; . И далее его можно использовать через CSS - директиву 

    font-family: "Open Sans";


    В удобной форме посмотреть доступные Google-шрифты и сразу получить ссылку на нужный можно, например, по этой ссылке:   fontcdn.org


    Дополнительные свойства шрифтов

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

    Свойства CSS font

    Свойство  Описание
    font Задаются все свойства шрифта в одном параметре
    font-family Задаёт шрифт
    font-size Размер шрифта
    font-style Стиль шрифта
    font-variant Модификация шрифта
    font-weight Толщина линии

    Например:

    style=" font-size :200%; font-style :italic; font-variant :small-caps; font-weight :bold; "
    Показывает отформатированный текст:
    Отформатированный текст.


    Свойства CSS text

    Свойство Описание
    color Цвет текста
    direction Направление текста / направление написания
    letter-spacing Увеличивает или уменьшает пространство между символами в тексте
    line-height Устанавливает высоту строки
    text-align Определяет горизонтальное выравнивание текста
    text-decoration Определяет декорацию текста
    text-indent Определяет отступ первой строки в текстовом блоке
    text-shadow Определяет эффект тени добавляется к тексту
    text-transform Управляет капитализации текста
    unicode-bidi Используется вместе с направлением собственности , чтобы установить или вернуться , должен ли текст быть перекрыты для поддержки нескольких языков в одном документе
    vertical-align Устанавливает вертикальное выравнивание элемента
    white-space Определяет, как обрабатываются пробелы
    word-spacing Увеличивает или уменьшает пространство между словами в тексте


    Пример1

    style=" color: rgb(217, 217, 217); font-size: 30px; background-color: rgb(186, 186, 186); text-shadow: rgb(46, 46, 46) 0px 2px 3px; text-align:center; font-weight:bolder; line-height:150%; "
    Показывает отформатированный текст:
    Отформатированный текст

    Пример2

    style=" color: #CEF0D4; font-family: 'Rouge Script', cursive; font-size: 30px; font-weight: normal; line-height: 10px; text-align: center; text-shadow: 1px 1px 2px #082b34;"> "
    Показывает отформатированный текст:
    Отформатированный текст

    Пример3

    style=" padding: 20px; text-align: center; text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8); color: #cdcdcd; background-color:#cdcdcd; opacity: 0.4; font-size: 6em; font-weight: bold; font-family: Helvetica; "
    Показывает отформатированный текст:
    TEXT

    Пример4

    style=" color: #fff; text-align: center; font-size: 6em; font-weight: bold; font-family: Helvetica; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); "
    Показывает отформатированный текст:
    TEXT


  • CSS Grid Layout

    CSS Grid Layout — новая и мощная система построения макета окна браузера, позволяющая с лёгкостью разделить веб-страницу на столбцы и строки.

    Главным отличием Grid от Flexbox является количество измерений (осей). При работе только с последним вам придётся выбирать между осью X и осью Y. Иначе говоря, Flexbox может быть направлен на создание только колонок или только строк.

    Однако эти инструменты не конкурируют друг с другом, поэтому можно применять их вместе.

    Сегодня большинство браузеров поддерживает Grid. Но Grid новее, чем FlexBox (Bootstrap подерживает FlexBox) , поэтому при использовании GRID больше вероятность того, что возникнут проблемы с совместимостью браузеров. Возможно, какие-то версии браузеров не поддерживают все свойства Grid или поддерживают частично.

    Основные понятия

    Контейнер (CSS grid container)

    Планирование макета начинается с контейнера. Контейнер задаёт сетку - разбиение экрана. Сетка состоит из ячеек (пересечение рада и колонки) и разделительных линий между ячейками.

    Контейнер - основа макета. Есть корневой - главный, родительский контейнер. В его ячейки могут быть, в свою очередь, вложены другие элементы - контейнеры.

    Элемент-контейнер описывается свойством display: grid (контейнер - блочный элемент) или display:inline-grid (контейнер - строчный элемент).

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

    Элемент внутри контейнера (Grid Item)

    Дочерний элемент контейнера. Элемент, расположенный определённым образом на сетке-макете, которую задал контейнер. Элементы на сетке можно расположить произвольным образом. Автоматически или вручную. В одной или нескольких ячейках. Задать координаты начала и конца элемента по клеткам или по (поименованным или пронумерованным) разделительным линиям, расположенным между ячейками.

    Пример: простой макет

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="/css/style.css"> </head> <body> <div id='container0'> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> </div> </body> </html>

    Определим один контейнер (#container0) с дочерними элементами (.items1) - колонками автоматического размера и автоматического расположения, с промежутками между ними - 2 px.

    #container0 { display: grid; grid-auto-flow: row; grid-gap: 2px; } .items1 { background-color: lightgray; border: 1px dotted red; }

    Зададим расположение дочерних элементов - по колонкам.

    #container0 { display: grid; grid-auto-flow: column; grid-gap: 2px; } .items1 { background-color: lightgray; border: 1px dotted red; }

    Определим вручную ряды для размещения дочерних элементов (grid-template-rows). Зададим высоту каждого ряда в px.

    #container0 { display: grid; grid-template-rows: 10px 20px 30px 40px 50px 60px 70px; } .items1 { background-color: lightgray; border: 1px dotted red; }

    Разобьём контейнер на 15 ячеек: 5 колонок и 3 ряда.

    #container0 { display: grid; grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px 100px 100px; grid-gap: 2px; } .items1 { background-color: lightgray; border: 1px dotted red; }

    Дочерние элементы распределились по ячейкам. Так как элементов меньше, чем ячеек. то в сетке остались незаполненные ячейки.

    Использованные директивы

    grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px 100px 100px;

    можно переписать, используя CSS grid функцию repeat() в виде:

    grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(5, 100px);

    Добавим стили к первому и последнему дочерним элементам (first-child, last-child), которые заставят элементы занять 5 колонок (целый ряд) в первом и третьем рядах соответственно.

    #container0 { display: grid; grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px 100px 100px; grid-gap: 2px; } .items1 { background-color: lightgray; border: 1px dotted red; } .items1:first-child { grid-row: 1 / 2; grid-column: 1 / 6; background-color: red; } .items1:last-child { grid-row: 3 / 4; grid-column: 1 / 6; background-color: red; }

    Единицы измерения (CSS grid units)

    Для задания размеров ячеек макета (CSS grids), расстояний между ними можно использовать различные единицы ихмерения.

    Это могут быть как стандартные для CSS 3 единицы (px, %, em,...) так и новая единица измерения - fr (fractions).

    В примере ниже, внутри контейнера element, колонки распределяются равномерно по ширине окна, причём соотношение их ширины - 1:3:1 , высота рядов задаётся для первого (60px ) и последнего ряда (5em), высота среднего ряда автоматически вычисляется, в соответствии с контентом.

    element { display: grid;grid-template-columns: 1fr 3fr 1fr;grid-template-rows: 60px auto 5em;}

    Единицы измерения - fr и % похожи. Например, 2 директивы: grid-template-columns: 50% 50%; и grid-template-columns:1fr 1fr; приводят к одинаковым результатам (когда используются только % или только fr ).

    В том случае, когда эти (относительные) единицы измерения используются совместно с другими (такими как px , em), результаты разные.

    Директива

    grid-template-columns: 100px 50% 50%;

    создаст одну колонку 100px и 2 шириной 50% от ширины контейнера (общая ширина = 100% + 100px)

    Директива

    grid-template-columns: 100px 1fr 1fr;

    создаст колонку 100px, поделит оставшуюся ширину на 2 и создаст ещё 2 колонки равной ширины. (общая ширина колонок - 100% от контейнера)

    Создание поименованных областей (Named Grid Areas)

    В дополнение к тому, что дочерние элементы (grid items) можно размещать по ячейкам сетки (например: grid-column-start: 2;grid-row-start: 2;), можно создавать на сетке поименованные области и размещать контент в них.

    Область можно создать директивой:

    grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end |area_name;

    Где:

    grid-row-start - ряд, в котором область начинается

    grid-column-start колонка, в которой область начинается

    grid-row-end - ряд - конец области

    grid-column-end - колонка - конец области

    area_name - имя области

    Тогда можно разместить элемент в контейнере в этой области, указав для него:

    grid-area: area_name;

    Например:

    index.html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="/css/style.css"> </head> <body> <div id='wrapper'> <div id='logo'>&nbsp; </div> <div id='menu'>&nbsp; </div> <div id='leftCol'>&nbsp; </div> <div id='content'>&nbsp; </div> <div id='note'>&nbsp; </div> <div id='footer'>&nbsp; </div> </div> </body> </html>

    style.css

    #wrapper { display: grid; grid-template-areas: 'logo menu menu menu' 'left content content content' 'left notes footer footer'; grid-template-rows: 50px minmax(100px, auto) 10px; grid-template-columns: repeat(4, 1fr); grid-gap: 2px; } #logo { grid-area: logo; background-color: gray; background-image: url('../images/logo.png'); background-size: auto 100%; background-repeat: no-repeat; } #menu { grid-area: menu; background-color: red; } #leftCol { grid-area: left; background-color: gray; } #content { grid-area: content; background-color: lightgray; } #note { grid-area: notes; background-color: green; } #footer { grid-area: footer; background-color: blue; }

    Автоматическое разбиение на ячейки (implicit grid)

    Для автоматического разбиения grid - контейнера на ячейки, используются CSS свойства:

    grid-auto-columns - определяет размеры автоматически создаваемых колонок

    grid-auto-rows - размеры автоматически создаваемых рядов

    grid-auto-flow -

    Для задания размеров ячейки контейнера могут использоваться:

    Размер (px, em) - положительное число. Проценты (%) - положительное число. Fractures - положительное число, с единицей измерения - fr. Функция minmax(min, max), которая позволяет задать минимальное и максимальное значение для размера элемента. Ключевое слово auto, которое определяет автоматическое вычисление размеров.

    Пример:

    Стиль для контейнера

    display: grid; grid-auto-columns: 1fr; grid-auto-rows: 100px;

    задаёт алгоритм, по которому в окне браузера будут, при необходимости, организовываться ячейки для дочерних элементов.Согласно этому алгоритму, колонки для ячеек займут всю ширину экрана (если нужна будет одна колонка, то шириной 100%, четыре колонки - по 25%), а каждый ряд будет высотой 100px.

    Реальные позиции ячеек в такой структуре будут определяться необходимым количеством ячеек в контейнере и их стилями.Зададим HTML шаблон документа (index.html):

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="/css/style.css"> </head> <body> <div id='wrapper'> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> </div> </body> </html>

    Стили для этого примера:

    /* Стиль контейнера */ #wrapper { display: grid; grid-auto-columns: 1fr; grid-auto-rows: 100px; grid-gap: 1px; } /* Стили для ячеек */ .item1 { background-color: blue; } .item1:nth-child(1) { grid-column: 1 / 5; }

    Директива:grid-column: 1 / 5; задаёт, что элемент () должен занять в контейнере колонки с номера 1 по номер 5, что приводит к автоматическому созданию этих колонок по алгоритмуgrid-auto-columns: 1fr; - то есть одинакого размера, равномерно распределённых по ширине экрана.

    Всего в HTML щаблоне описано 11 дочерних эдементов (.item1) в контейнере (.wrapper ). Все они размещены последовательно в созданной сетке.

    Если задать для последнего элемента (:last-child) область его размещения, предусматривающую, 2 ряда? начиная с третьего (grid-row: 3 / span 2;), то размещение элементов в контейнере изменится..item1:last-child {grid-row: 3 / span 2;background-color: red;}

    Выравнивание элементов внутри grid - контейнера

    HTML структура макета GRID состоит из трёх уровней, на которых элементы могут быть отцентрованы (выравнены): GRID - container (элемент, с заданным свойством display: grid;),  GRID-item (дочерний элемент grid- контейнера), GRID-content (содержимое элемента ).

    При работе с шаблоном grid есть две оси для выравнивания объектов: горизонтальная (inline ) и вертикальная (block).

    Для выравнивания GRID-элементов (GRID items) по вертикальной оси используются свойства CSS:align-self и align-items.

    Для выравнивания по горизонтальной оси - justify-items и justify-self.

    Эти свойства могут принимать значения:

    • auto
    • normal
    • start
    • end
    • center
    • stretch
    • baselinefirst
    • baselinelast
    • baseline

    Для GRID-контейнера используются свойства:

    align-items:

    justify-items:


    Для дочерних элементов

    justify-self:

    align-self:


    CSS grid properties

    • grid-template-columns
    • grid-template-rows
    • grid-template-areas
    • grid-template
    • grid-auto-columns
    • grid-auto-rows
    • grid-auto-flow
    • grid
    • grid-row-start
    • grid-column-start
    • grid-row-end
    • grid-column-end
    • grid-row
    • grid-column
    • grid-area
    • grid-row-gap
    • grid-column-gap
    • grid-gap

    CSS grid функции

    • repeat()
    • minmax()
    • fit-content()

  • CSS - анимация

    Свойство animation  (для браузеров Chrome, Safari, Opera нужно использовать другое свойство: -webkit-animation)  в CSS можно использовать для анимации многих  свойств CSS, таких как цвет, фон, цвет, высота или ширина. Каждая анимация должна быть определена с помощью директивы @keyframes (для браузеров Chrome, Safari, Opera нужно использовать другую директиву: @-webkit-keyframes ), которая затем вызывается со свойством анимации.

    Набор свойств, которые могут быть анимированы

    background

    background-color

    background-position

    background-size

    border

    border-bottom

    border-bottom-color

    border-bottom-left-radius

    border-bottom-right-radius

    border-bottom-width

    border-color

    border-left

    border-left-color

    border-left-width

    border-right

    border-right-color

    border-right-width

    border-spacing

    border-top

    border-top-color

    border-top-left-radius

    border-top-right-radius

    border-top-width

    bottom

    box-shadow

    clip

    color

    column-count

    column-gap

    column-rule

    column-rule-color

    column-rule-width

    column-width

    columns

    filter

    flex

    flex-basis

    flex-grow

    flex-shrink

    font

    font-size

    font-size-adjust

    font-stretch

    font-weight

    height

    left

    letter-spacing

    line-height

    margin

    margin-bottom

    margin-left

    margin-right

    margin-top

    max-height

    max-width

    min-height

    min-width

    opacity

    order

    outline

    outline-color

    outline-offset

    outline-width

    padding

    padding-bottom

    padding-left

    padding-right

    padding-top

    perspective

    perspective-origin

    right

    text-decoration-color

    text-indent

    text-shadow

    top

    transform

    transform-origin

    vertical-align

    visibility

    width

    word-spacing

    z-index

     

     



    Свойство  CSS - animation позволяет анимировать переходы от одной конфигурации стиля CSS в другую. 

    Анимация состоит из двух компонентов: стиля, описывающего анимацию и набора ключевых кадров, которые указывают начальное и конечное состояния стиля анимации, а также возможные промежуточные точки.

    Существуют три ключевых преимущества использования CSS - анимации перед традиционными методами анимации, управляемыми скриптами:

    1. Они просты в использовании для простых анимаций; Вы можете создавать их, даже не зная JavaScript.
    2. Анимация работает хорошо, даже при умеренной загрузке системы. Простые анимации часто могут плохо работать в JavaScript (если только они не особенно качественно сделаны). Механизм рендеринга может использовать пропуски кадров и другие методы, чтобы поддерживать оптимальную производительность.
    3. Предоставление браузеру управления последовательностью анимации позволяет ему оптимизировать производительность и эффективность, например, уменьшая частоту обновления анимаций, запущенных на вкладках, которые в настоящее время не отображаются.

    Настройка анимации

    Чтобы создать CSS - анимацию, необходимо оформить элемент, который нужно анимировать, с помощью свойства анимации. Это позволяет настроить время, продолжительность и другие детали того, как последовательность анимации должна выполняться. Но это не настраивает реальный внешний вид анимации, что выполняется с помощью правила @keyframes.




    Cвойства animation


    animation-delay

    animation-delay: 3s;
    animation-delay: 2s, 4ms;

    Настраивает задержку между загрузкой элемента и началом последовательности анимации.

    animation-direction

    /*  Единственная анимация  */
    animation-direction: normal;
    animation-direction: reverse;
    animation-direction: alternate;
    animation-direction: alternate-reverse;

    /* Множественные анимации */
    animation-direction: normal, reverse;
    animation-direction: alternate, reverse, normal;

    /* Глобальные значения  */
    animation-direction: inherit;
    animation-direction: initial;
    animation-direction: unset;

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

    animation-duration

    animation-duration: 6s;
    animation-duration: 120ms;
    animation-duration: 1s, 15s;
    animation-duration: 10s, 30s, 230ms;

    Настраивает продолжительность времени, которое анимация должна выполнить для завершения одного цикла.

    animation-iteration-count

    animation-iteration-count: infinite;
    animation-iteration-count: 3;
    animation-iteration-count: 2.3;

    animation-iteration-count: 2, 0, infinite;

    Настраивает количество повторений анимации; Вы можете указать бесконечное повторение анимации на неопределенный срок.

    animation-name

     

    Задаёт имя директивы @keyframes .

    animation-play-state

    /*  Одна анимация  */
    animation-play-state: running;
    animation-play-state: paused;

    /* Множественные анимации */
    animation-play-state: paused, running, running;

    /* Глобальные значения */
    animation-play-state: inherit;
    animation-play-state: initial;
    animation-play-state: unset;

    Позволяет приостановить и возобновить последовательность анимации.

    animation-timing-function

    /* Keyword values */
    animation-timing-function: ease;
    animation-timing-function: ease-in;
    animation-timing-function: ease-out;
    animation-timing-function: ease-in-out;
    animation-timing-function: linear;
    animation-timing-function: step-start;
    animation-timing-function: step-end;

    /* Function values */
    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    animation-timing-function: steps(4, end);

    /* Multiple animations */
    animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

    /* Global values */
    animation-timing-function: inherit;
    animation-timing-function: initial;
    animation-timing-function: unset;

    Настраивает время анимации; То есть как анимация переходит через ключевые кадры, устанавливая кривые ускорения.

    animation-fill-mode

    forwards, backwards, both, none

    animation-fill-mode: none;
    animation-fill-mode: forwards;
    animation-fill-mode: backwards;
    animation-fill-mode: both;

    /* Several values may be given, separated by commas. */
    /* Each applies for each animation in animation-name. */
    animation-fill-mode: none, backwards;
    animation-fill-mode: both, forwards, none;

    Настраивает, какие значения применяются анимацией до и после ее выполнения.


    Пример:

    <HTML> <HEAD> <STYLE> p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } </STYLE> </HEAD> <BODY> <p>Test animation . Test animation . Test animation . Test animation . Test animation . Test animation . Test animation . Test animation . Test animation . Test animation . </p> </HTML>



    Видео


  • Масштабируемая векторная графика (SVG)

    SVG (Scalable Vector Graphics) - это язык разметки, построенный на основе XML и предназначенный для описания двумерной векторной графики. SVG – это графическое расширение для языка HTML. То, что HTML  делает с текстом, SVG делает с графикой.

    SVG похож на фирменную технологию Adobe Flash, но это - текстовый открытый веб-стандарт вместо закрытого двоичного формата. Он разработан для работы с другими веб-стандартами, такими как CSS, DOM и SMIL.

    Изображение в формате SVG - это текстовый файл. Этот файл создаётся в формате XML. Поэтому изображения в этом формате можно создавать в текстовом редакторе. 

    Часто удобнее создавать такие изображения, использую специальные программы (например - INKSCAPE ) или экспортируя из популярных графических программ (например - Adobe Photoshop).

     

    Графические элементы, созданные в формате SVG, можно вставить в HTML страничку разными способами:

     

     

     

    • используя теги img, embed, iframe, object (для вставки изображения из отдельного файла)
    • в любой HTML тег в качестве фона
    • используя тег svg (описание изображения непосредственно в документе)

     

     

     

    Синтаксис описания SVG

    Теги <svg>, <g>, <defs>

     

    Пример


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>SVG 1</title>
    <style>
    SVG {
    height :300px;
    width :300px;
    border :1px solid black;
    }
    </style>
    </head>
    <body>
    <svg >
    <line x1="0" y1="0" x2="300" y2="300" stroke-width="10" stroke="rgb(255,0,0)"/>
    </svg>
    <svg>
    <polyline points="0,0 100,0 100,100 200,100 200,200 300,200 300,300" fill="rgb(255,0,0)" stroke-width="2" stroke="rgb(0,0,255)"/>
    </svg>
    <svg>
    <rect width="300" height="300" fill="rgb(0,0,255)" stroke-width="1" stroke="rgb(0,255,0)"/>
    <rect width="200" height="200" fill="rgb(255,0,0)" stroke-width="1" stroke="rgb(0,255,0)"/>
    <rect width="100" height="100" fill="rgb(0,255,0)" stroke-width="1" stroke="rgb(0,255,0)"/>
    </svg>
    <svg>
    <circle cx="150" cy="150" r="150" fill="rgb(255,255,0)" stroke-width="0" />
    <circle cx="150" cy="150" r="100" fill="rgb(0,0,255)" stroke-width="0" />
    </svg>
    <svg>
    <ellipse cx="150" cy="150" rx="150" ry="50" fill="rgb(0,0,255)" stroke-width="1" stroke="rgb(0,255,0)"/>
    </svg>
    <svg>
    <polygon points="0,100 100,100 100,50 300,150 100,250 100,200 0,200" fill="rgb(255,255,0)" stroke-width="1" stroke="rgb(255,0,0)" />
    </svg>
    </body>
    </html>

     

    Результат 

     

    Базовые формы изображений SVG 

    Линия - прямая <line>

    Тег рисует прямую линию. Использует параметры:

    x1, y1 - координаты начала

    x2, y2 - координаты конца

    stroke-width - толщина линии

    stroke - цвет линии

     

    Линия - ломаная  <polyline>

    Тег рисует ломаную линию. Использует параметры:

    points - массив координат узлов линии

    fill - цвет заливки

    stroke-width - толщина линии

    stroke - цвет линии

     

    Прямоугольник <rect>

    Тег рисует прямоугольник. Использует параметры:

    x, y - координаты прямоугольника 

    width - ширина

    height - высота

    fill - цвет заливки

    stroke-width - толщина линии обводки

    stroke - цвет линии обводки

     

    Круг <circle>

    Тег рисует круг. Использует параметры:

    cx, cy - координаты центра

    r - радиус

    fill - цвет заливки

    stroke-width - толщина линии обводки

    stroke - цвет линии обводки

     

     

    Эллипс <ellipse>

    Тег рисует элипс. Использует параметры:

    cx, cy - координаты центра

    rx - ширина

    ry - высота

    fill - цвет заливки

    stroke-width - толщина линии обводки

    stroke - цвет линии обводки

     

    Многоугольник <polygon>

    Тег рисует многоугольник. Использует параметры:

    points - массив координат углов

    fill - цвет заливки

    stroke-width - толщина линии обводки

    stroke - цвет линии обводки

     

    Путь <path>

    Этот тип формы позволяет нарисовать на экране кривую сложной формы, состоящую из разных участков: отрезков прямых, дуг и тд..

    Атрибут d тегв <path> задаёт набор команд рисования:

    M - переместить курсор в точку (Move)

    L - нарисовать отрезок прямой (Line)

    A - нарисовать дугу (Arc)

    Q - кривая Безье (Quadratic Bezier Curves)

    C - кривая Безье (Cubic Bezier Curves)

    Z - замкнуть путь 

     

    Например:

    <path d="M100,100
    L150,100
    a50,25 0 0,0 150,100
    q50,-50 70,-170
    Z"
    style="stroke: #006666; fill: none;"/>

     

     

     

    Команды, используемые при рисовании линии пути (path)

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

    Команда Параметры Имя Описание
    M x,y moveto Перемещает карандаш в точку с абсолютными координатами x,y без рисования
    m x,y moveto Перемещает карандаш на x точек по горизонтали и на y - по вертикали, без рисования
     
    L x,y lineto Рисует строку из текущего местоположения пера в указанную точку x, y.
    l x,y lineto Рисует прямую от текущего положения до точки x,y относительно текущего положения
     
    H x horizontal lineto Draws a horizontal line to the point defined by 
    (specified x, pens current y).
    h x horizontal lineto Draws a horizontal line to the point defined by 
    (pens current x + specified x, pens current y). The x is relative to the current pens x position.
     
    V y vertical lineto Draws a vertical line to the point defined by 
    (pens current x, specified y).
    v y vertical lineto Draws a vertical line to the point defined by 
    (pens current x, pens current y + specified y). The y is relative to the pens current y-position.
     
    C x1,y1 x2,y2 x,y curveto Draws a cubic Bezier curve from current pen point to x,y. x1,y1 and x2,y2 are start and end control points of the curve, controlling how it bends.
    c x1,y1 x2,y2 x,y curveto Same as C, but interprets coordinates relative to current pen point.
     
    S x2,y2 x,y shorthand / 
    smooth curveto
    Draws a cubic Bezier curve from current pen point to x,y. x2,y2 is the end control point. The start control point is is assumed to be the same as the end control point of the previous curve.
    s x2,y2 x,y shorthand / 
    smooth curveto
    Same as S, but interprets coordinates relative to current pen point.
     
    Q x1,y1 x,y quadratic Bezier curveto Draws a quadratic Bezier curve from current pen point to x,y. x1,y1 is the control point controlling how the curve bends.
    q x1,y1 x,y quadratic Bezier curveto Same as Q, but interprets coordinates relative to current pen point.
     
    T x,y shorthand / smooth quadratic Bezier curveto Draws a quadratic Bezier curve from current pen point to x,y. The control point is assumed to be the same as the last control point used.
    t x,y shorthand / smooth quadratic Bezier curveto Same as T, but interprets coordinates relative to current pen point.
     
    A rx,ry 
    x-axis-rotation 
    large-arc-flag,
    sweepflag 
    x,y
    elliptical arc Draws an elliptical arc from the current point to the point x,y. rx and ry are the elliptical radius in x and y direction.
    The x-rotation determines how much the arc is to be rotated around the x-axis. It only seems to have an effect when rx and ry have different values.
    The large-arc-flag doesn't seem to be used (can be either 0 or 1). Neither value (0 or 1) changes the arc. 
    The sweep-flag determines the direction to draw the arc in.
    a rx,ry 
    x-axis-rotation 
    large-arc-flag,
    sweepflag 
    x,y
    elliptical arc Same as A, but interprets coordinates relative to current pen point.
     
    Z   closepath Closes the path by drawing a line from current point to first point.
    z   closepath Closes the path by drawing a line from current point to first point.
     

     

     

    Текст

     

    <text x="20" y="40" style="fill: #000000; stroke: none; font-size: 48px;"> Fill only </text> <text x="20" y="100" style="fill: none; stroke: #000000; font-size: 48px;"> Stroke only </text> <text x="20" y="150" style="fill: #999999; stroke: #000000; font-size: 48px;"> Fill and stroke </text>

     

     

     

    Оператор - switch

    Этот оператор позволяет использовать разные изображения, в зависимости от языка.

     

     

    <switch>
    <g systemLanguage="en-UK">
    <text x="10" y="20">UK English</text>
    </g>
    <g systemLanguage="en">
    <text x="10" y="20">English</text>
    </g>
    <g systemLanguage="es">
    <text x="10" y="20">Spanish</text>
    </g>
    </switch>

     

     SVG система координат

    В SVG отсчёт координат (точка с координатами х=0, y=0) начинается из левого верхнего угла. Ось y - направление сверху вниз. Ось x - направление слева направо.

     

    Единицы измерения

    Единица измерения указывается после значения. Например:  10cm или 125mm.

    Если единицы измерения не указаны, то имеются в виду пиксели - pixels (px).

    Кроме этого допускается использование:

    Единица Описание
    em Высота букв шрифта по умолчанию.
    ex Высота символа - x
    px Пиксели
    pt Пойнты (1 / 72 дюйма - inch)
    pc Picas (1 / 6 дюйма)
    cm Centimeters
    mm Миллиметры
    in Дюймы

    Единицы, установленные в элементе <svg> для  атрибутов width и height, влияют только на элемент <svg> (viewport - область просмотра).

    Формы, находящиеся  внутри элемента <svg> должны иметь свои собственные единицы.

    Если единицы измерения не указаны, то по умолчанию используются пиксели.

     

    Размеры форм, размер области их размещения

    Область, в которую выводятся SVG - формы, определяется тегом <svg>. Эта область - ViewPort определяется параметрами тега <svg> - width, height и параметром viewPort. 

    Если параметра viewBox в теге svg нет, то width и height определяют абсолютные размерый этой области.

    Это - абсолютные размеры области видимости форм. И параметры размеров самих форм, которые выводятся на экран тоже абсолютные (x, y, r, cx, cy,... ).

    Например, если задано в теге svg  height :500 и width :200, то на экране выделится для вывода изображений область шириной 200 и высотой 500 пикселей. Если в ней определено: 

    <rect   width=50 height=70 fill ="#0b0" stroke-width="1" stroke="#050" />

    то внутри области будет нарисован прямоугольник шириной 50 рикселей и высотой - 100.

    Параметр viewBox пропорционально меняет размеры всех элементов. Эта область имеет координаты (x, y ) и размеры (ширину, высоту).  Например: viewBox="0 0 50 20". Если для нашего примера задать такой viewBox, то реальные размеры всех элементов увеличется по горизонтали на коэффициент 500/50, а по вертикали - на коэффициент 200/20. То есть реальные размеры прясоугольника будут - 500 на 700 пикселей, а размер вилимой области - 5000 на 2000 пикселей.

     

     

    Применение стилей к SVG 

    С SVG можно использовать стили как внутри SVG - тегов, так и отдельно описанныа, аналогично HTML стилям.

    Примеры:

     

    <svg> <rect x="203" width="200" height="200" style="fill:red; stroke:black; stroke-width:3;"/> </svg>

     

    <style type="text/css" media="screen"> rect { fill: green; stroke: black; stroke-width: 3; } rect:hover { fill: green; } </style>

     

     

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

     

     

    <?xml-stylesheet type="text/css" href="/style.css"?>

     

     

    Назначение стилей для всех сгруппированных элементов

    <g style="fill:blue; stroke:black; stroke-width:3; fill-opacity: 0.5;"> <rect x="200" width="200" height="200"/> <circle cx="120" cy="100" r="100"/> </g>

     

     

    Анимация SVGs при помощи CSS

    <svg> <rect x="10" y="10" height="110" width="110" style="stroke:#ff0000; fill: #0000ff"> <animateTransform attributeName="transform" begin="0s" dur="20s" type="rotate" from="0 60 60" to="360 60 60" repeatCount="indefinite" /> </rect> </svg>

     

     

     

     

    <rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;"> <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="10s" repeatCount="indefinite" rotate="auto" /> </rect>

     

     

     

    Пример: таймер


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>SVG Javascript test1</title>
    <script>
    var x2, y2, grad, clockFace, secCounter, arrLength// Declare globals
    function drawTimer(){
    // Init counter
    x2=0, y2 = 0, grad = -90, clockFace = 400, secCounter = 0, arrLength = 180

    document.getElementById("myTimer").style.width = clockFace + "px";
    document.getElementById("myTimer").style.height = clockFace + "px";
    document.getElementById("myTimer").style.border = "4px solid red";
    document.getElementById("myTimer").style.backgroundColor = "#FFDDDD";
    document.getElementById("myTimer").style.borderRadius = "30%";
    x1 = clockFace/2;
    y1 = clockFace/2;
    x2 = arrLength;
    y2 = 0;
    rad = grad * (Math.PI / 180);
    x2 = x1 + Math.cos(rad)*arrLength;
    y2 = y1 + Math.sin(rad)*arrLength;
    console.log("x1 = " + x1 + ", y1 = " + y1 + ", x2 = " + x2 + ", y2 = " + y2);
    // Draw Line
    document.getElementById("arrow").setAttribute("x1",x1);
    document.getElementById("arrow").setAttribute("y1",y1);
    document.getElementById("arrow").setAttribute("x2",x2);
    document.getElementById("arrow").setAttribute("y2",y2);
    document.getElementById("arrow").setAttribute("stroke-width",2);
    document.getElementById("arrow").setAttribute("stroke","#FF0000");
    // Draw arrow end point
    document.getElementById("arrowEnd").setAttribute("cx",x2);
    document.getElementById("arrowEnd").setAttribute("cy",y2);
    document.getElementById("arrowEnd").setAttribute("r",4);
    document.getElementById("arrowEnd").setAttribute("fill","#FF0000");

    document.getElementById("arrowEnd").setAttribute("stroke-width",0);

    // Draw arrow start point
    document.getElementById("arrowStart").setAttribute("cx",x1);
    document.getElementById("arrowStart").setAttribute("cy",y1);
    document.getElementById("arrowStart").setAttribute("r",15);
    document.getElementById("arrowStart").setAttribute("fill","none");
    document.getElementById("arrowStart").setAttribute("stroke","#F00");
    document.getElementById("arrowStart").setAttribute("stroke-width",2);

    // draw numbers
    document.getElementById("out2").setAttribute("x",x1);
    document.getElementById("out2").setAttribute("y",y1);
    document.getElementById("out2").setAttribute("fill","#FFBBBB");
    document.getElementById("out2").setAttribute("font-size",arrLength);


    }

    function arrowStep(){
    // Move arrow once
    grad += 1;
    secCounter += 1;
    rad = grad * (Math.PI / 180);
    x2 = x1 + Math.cos(rad)*arrLength;
    y2 = y1 + Math.sin(rad)*arrLength;
    document.getElementById("arrow").setAttribute("x2",x2);
    document.getElementById("arrow").setAttribute("y2",y2);
    console.log("x1 = " + x1 + ", y1 = " + y1 + ", x2 = " + x2 + ", y2 = " + y2 + ", angle (degrees) = " + grad);
    console.log(secCounter);
    // Draw arrow top point

    document.getElementById("arrowEnd").setAttribute("cx",x2);
    document.getElementById("arrowEnd").setAttribute("cy",y2);
    document.getElementById("arrowEnd").setAttribute("r",4);
    document.getElementById("arrowEnd").setAttribute("fill","#FF0000");
    document.getElementById("arrowEnd").setAttribute("stroke-width",0);
    document.getElementById("out2").innerHTML = secCounter;
    }
    </script>
    </head>
    <body onload="drawTimer()">
    <svg id="myTimer">
    <text id = "out2" x="" y="" fill="" font-size="" alignment-baseline="middle" text-anchor="middle">0</text>
    <line id="arrow" x1="" y1="" x2="" y2="" stroke-width="" stroke=""/>
    <circle id="arrowStart" cx="" cy="" r="" fill="" stroke-width="" />
    <circle id="arrowEnd" cx="" cy="" r="" fill="" stroke-width="" />
    </svg>

    <button onclick = "arrowStep();">Go one step</button>
    <button onclick = "int1 = setInterval(arrowStep,1000);">Start timer</button>
    <button onclick = "clearInterval(int1);">Stop timer</button>
    <button onclick = "drawTimer();">Reset counter</button>

    </body>
    </html>

     

     

    Результат

     

  • CSS - Единицы измерения

    Единица Описание Пример
    % Определяет размер в процентах относительно другого значения, обычно являющегося родительским элементом. p {font-size: 16pt; line-height: 125%;}
    cm Размер в сантиметрах div {margin-bottom: 2cm;}
    em Относительный размер высоты шрифта. Один em эквивалентен текущему размеру данного шрифта в родительском элементе, если вы назначаете шрифт 12pt, каждый элемент «em» будет 12pt; Таким образом, 2em будет 24pt.

    p {letter-spacing: 7em;}
    remОтносительный размер высоты шрифта. Один rem эквивалентен текущему размеру данного шрифта в корневом элементе странички.

    ex Это значение определяет размер относительно высоты x шрифта. Высота x определяется высотой строчной буквы x шрифта. p {font-size: 24pt; line-height: 3ex;}
    in Размер в дюймах (inches ) p {word-spacing: .15in;}
    mm Размер в миллиметрах p {word-spacing: 15mm;}
    pc Определяет измерение в пиках (picas). Пика эквивалентна 12 пойнтам (points). Таким образом, в одном дюйме 6 рик.

    p {font-size: 20pc;}
    pt Размер в пойнтах (points). Один пойнт =  1/72-я часть дюйма. body {font-size: 18pt;}
    px Размер - в пикселях (screen pixels). p {padding: 25px;}
    vh 1% от высоты viewport. h2 { font-size: 3.0vh; }
    vw 1% от ширины viewport h1 { font-size: 5.9vw; }
    vmin 1vw или 1vh, выбирается то значение, которое меньше p { font-size: 2vmin;}
  • CSS свойства*

    Каждое свойство стиля задаётся при помощи декларации стиля (style declaration), в формате:

    property : value;

    Например:

    color : red;

    Некоторые свойства могут иметь несколько значений. Например:

    border: 1px solid red;

    Такого типа свойства имеют дополнительные (дочерние свойства). Например свойство, описанное выше, может быть описано так:

    border-width: 1px; border-style: solid; border-color: red;



    Группы свойств CSS

    • Управление цветом (Color)
    • Границы и фон (Background, Borders)
    • Базовые свойства блока (box)
    • Гибкий блок (flexible block)
    • Текст
    • Оформление текста (Text Decoration)
    • Шрифты (fonts)
    • Режимы написания (Writing Modes)
    • Таблицы (Table)
    • Списки и щётчики (Lists, Counters
    • Анисация (Animation)
    • Трансформация (Transform)
    • Переходы, именения (Transition)
    • Интерфейс пользователя (User Interface)
    • Многоколочность (Multi-column)
    • Многостраничные носители информации (Paged Media)
    • Generated Content
    • Фильтры (Filter Effects)
    • Image/Replaced Content
    • Masking
    • Speech
    • Marquee

    Управление цветом

    Свойство Описание CSS
    color цвет текста 1
    opacity прозрачность 3


    Свойства фона и границ 

    Свойство  Описание Версия
    CSS
    background A shorthand property for setting all the background properties in one declaration 1
    background-attachment Sets whether a background image is fixed or scrolls with the rest of the page 1
    background-blend-mode Specifies the blending mode of each background layer (color/image)
    background-color Specifies the background color of an element 1
    background-image Specifies one or more background images for an element 1
    background-position Specifies the position of a background image 1
    background-repeat Sets how a background image will be repeated 1
    background-clip Specifies the painting area of the background 3
    background-origin Specifies where the background image(s) is/are positioned 3
    background-size Specifies the size of the background image(s) 3
    border Sets all the border properties in one declaration 1
    border-bottom Sets all the bottom border properties in one declaration 1
    border-bottom-color Sets the color of the bottom border
    border-bottom-left-radius Defines the shape of the border of the bottom-left corner 3
    border-bottom-right-radius Defines the shape of the border of the bottom-right corner 3
    border-bottom-style Sets the style of the bottom border 1
    border-bottom-width Sets the width of the bottom border 1
    border-color Sets the color of the four borders 1
    border-image A shorthand property for setting all the border-image-* properties 3
    border-image-outset Specifies the amount by which the border image area extends beyond the border box 3
    border-image-repeat Specifies whether the border image should be repeated, rounded or stretched 3
    border-image-slice Specifies how to slice the border image 3
    border-image-source Specifies the path to the image to be used as a border 3
    border-image-width Specifies the widths of the image-border 3
    border-left Sets all the left border properties in one declaration 1
    border-left-color Sets the color of the left border 1
    border-left-style Sets the style of the left border 1
    border-left-width Sets the width of the left border 1
    border-radius A shorthand property for setting all the four border-*-radius properties 3
    border-right Sets all the right border properties in one declaration 1
    border-right-color Sets the color of the right border 1
    border-right-style Sets the style of the right border 1
    border-right-width Sets the width of the right border 1
    border-style Sets the style of the four borders 1
    border-top Sets all the top border properties in one declaration 1
    border-top-color Sets the color of the top border 1
    border-top-left-radius Defines the shape of the border of the top-left corner 3
    border-top-right-radius Defines the shape of the border of the top-right corner 3
    border-top-style Sets the style of the top border 1
    border-top-width Sets the width of the top border 1
    border-width Sets the width of the four borders 1
    box-decoration-break Sets the behaviour of the background and border of an element at page-break, or, for in-line elements, at line-break. 3
    box-shadow Attaches one or more drop-shadows to the box 3


    Свойства блока

    Свойство Описание CSS
    bottom Specifies the bottom position of a positioned element 2
    clear Specifies which sides of an element where other floating elements are not allowed 1
    clip Clips an absolutely positioned element 2
    display Specifies how a certain HTML element should be displayed 1
    float Specifies whether or not a box should float 1
    height Sets the height of an element 1
    left Specifies the left position of a positioned element 2
    margin Sets all the margin properties in one declaration 1
    margin-bottom Sets the bottom margin of an element 1
    margin-left Sets the left margin of an element 1
    margin-right Sets the right margin of an element 1
    margin-top Sets the top margin of an element 1
    max-height Sets the maximum height of an element 2
    max-width Sets the maximum width of an element 2
    min-height Sets the minimum height of an element 2
    min-width Sets the minimum width of an element 2
    overflow
    Specifies what happens if content overflows an element's box 2
    overflow-x Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area 3
    overflow-y Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area 3
    padding Sets all the padding properties in one declaration 1
    padding-bottom Sets the bottom padding of an element 1
    padding-left Sets the left padding of an element 1
    padding-right Sets the right padding of an element 1
    padding-top Sets the top padding of an element 1
    position Specifies the type of positioning method used for an element (static, relative, absolute or fixed) 2
    right Specifies the right position of a positioned element 2
    top Specifies the top position of a positioned element 2
    visibility Specifies whether or not an element is visible 2
    width Sets the width of an element 1
    vertical-align Sets the vertical alignment of an element 1
    z-index Sets the stack order of a positioned element 2


    Flexible Box Layout

    Свойство Описание CSS
    align-content Specifies the alignment between the lines inside a flexible container when the items do not use all available space 3
    align-items Specifies the alignment for items inside a flexible container 3
    align-self Specifies the alignment for selected items inside a flexible container 3
    flex Specifies the length of the item, relative to the rest 3
    flex-basis Specifies the initial length of a flexible item 3
    flex-direction Specifies the direction of the flexible items 3
    flex-flow A shorthand property for the flex-direction and the flex-wrap properties 3
    flex-grow Specifies how much the item will grow relative to the rest 3
    flex-shrink Specifies how the item will shrink relative to the rest 3
    flex-wrap Specifies whether the flexible items should wrap or not 3
    justify-content Specifies the alignment between the items inside a flexible container when the items do not use all available space 3
    order Sets the order of the flexible item, relative to the rest 3


    Свойства текста

    Свойство Описание CSS
    hanging-punctuation Specifies whether a punctuation character may be placed outside the line box 3
    hyphens Sets how to split words to improve the layout of paragraphs 3
    letter-spacing Increases or decreases the space between characters in a text 1
    line-break Specifies how/if to break lines 3
    line-height Sets the line height 1
    overflow-wrap Specifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box) 3
    tab-size Specifies the length of the tab-character 3
    text-align Specifies the horizontal alignment of text 1
    text-align-last Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" 3
    text-combine-upright Specifies the combination of multiple characters into the space of a single character 3
    text-indent Specifies the indentation of the first line in a text-block 1
    text-justify Specifies the justification method used when text-align is "justify" 3
    text-transform Controls the capitalization of text 1
    white-space Specifies how white-space inside an element is handled 1
    word-break Specifies line breaking rules for non-CJK scripts 3
    word-spacing Increases or decreases the space between words in a text 1
    word-wrap Allows long, unbreakable words to be broken and wrap to the next line 3


    Оформление текста

    Свойство Описание CSS
    text-decoration Specifies the decoration added to text 1
    text-decoration-color Specifies the color of the text-decoration 3
    text-decoration-line Specifies the type of line in a text-decoration 3
    text-decoration-style Specifies the style of the line in a text decoration 3
    text-shadow Adds shadow to text 3
    text-underline-position Specifies the position of the underline which is set using the text-decoration Свойство 3


    Шрифт

    Свойство Описание CSS
    @font-face Позволяет подключить к веб-страницам произвольные шрифты, а не только  "web-safe" fonts 3
    @font-feature-values Allows authors to use a common name in font-variant-alternate for feature activated differently in OpenType 3
    font Позволяет установить все свойства шрифта (font-family, font-size, font-style, font-variant, font-weight) за одно определение. 1
    font-family шрифт текста. 1
    font-feature-settings Allows control over advanced typographic features in OpenType fonts 3
    font-kerning Controls the usage of the kerning information (how letters are spaced) 3
    font-language-override Controls the usage of language-specific glyphs in a typeface 3
    font-size установить размер текста 1
    font-size-adjust Preserves the readability of text when font fallback occurs 3
    font-stretch Selects a normal, condensed, or expanded face from a font family 3
    font-style Specifies the font style for text 1
    font-synthesis Controls which missing typefaces (bold or italic) may be synthesized by the browser 3
    font-variant Specifies whether or not a text should be displayed in a small-caps font 1
    font-variant-alternates Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values 3
    font-variant-caps Controls the usage of alternate glyphs for capital letters 3
    font-variant-east-asian Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese) 3
    font-variant-ligatures Controls which ligatures and contextual forms are used in textual content of the elements it applies to 3
    font-variant-numeric Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers 3
    font-variant-position Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font 3
    font-weight Specifies the weight of a font 1


    Свойства написания текста

    Свойство Описание CSS
    direction Направление написания (слева направо или наоборот)  2
    text-orientation Defines the orientation of the text in a line 3
    text-combine-upright Specifies the combination of multiple characters into the space of a single character 3
    unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document 2
    writing-mode 3


    Таблицы

    Свойство Описание CSS
    border-collapse Specifies whether or not table borders should be collapsed 2
    border-spacing Specifies the distance between the borders of adjacent cells 2
    caption-side Specifies the placement of a table caption 2
    empty-cells Specifies whether or not to display borders and background on empty cells in a table 2
    table-layout Sets the layout algorithm to be used for a table 2


    Списки  и счётчики

    Свойство Описание CSS
    counter-increment Increments one or more counters 2
    counter-reset Creates or resets one or more counters 2
    list-style Sets all the properties for a list in one declaration 1
    list-style-image Specifies an image as the list-item marker 1
    list-style-position Specifies if the list-item markers should appear inside or outside the content flow 1
    list-style-type Specifies the type of list-item marker 1


    Анисация

    Свойство Описание CSS
    @keyframes Specifies the animation code 3
    animation A shorthand property for all the animation properties (except animation-play-state and animation-fill-mode) 3
    animation-delay Specifies a delay for the start of an animation 3
    animation-direction Specifies whether or not the animation should play in reverse on alternate cycles 3
    animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle 3
    animation-fill-mode Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay) 3
    animation-iteration-count Specifies the number of times an animation should be played 3
    animation-name Specifies the name of the @keyframes animation 3
    animation-play-state Specifies whether the animation is running or paused 3
    animation-timing-function Specifies the speed curve of an animation 3


    Transform Properties

    Свойство Описание CSS
    backface-visibility Defines whether or not an element should be visible when not facing the screen 3
    perspective Specifies the perspective on how 3D elements are viewed 3
    perspective-origin Specifies the bottom position of 3D elements 3
    transform Applies a 2D or 3D transformation to an element 3
    transform-origin Allows you to change the position on transformed elements 3
    transform-style Specifies how nested elements are rendered in 3D space 3


    Transitions Properties

    Свойство Описание CSS
    transition A shorthand property for setting the four transition properties 3
    transition-property Specifies the name of the CSS property the transition effect is for 3
    transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete 3
    transition-timing-function Specifies the speed curve of the transition effect 3
    transition-delay Specifies when the transition effect will start 3


    Basic User Interface Properties

    Свойство Описание CSS
    box-sizing Tells the browser what the sizing properties (width and height) should include 3
    content Used with the :before and :after pseudo-elements, to insert generated content 2
    cursor Specifies the type of cursor to be displayed 2
    ime-mode Controls the state of the input method editor for text fields 3
    nav-down Specifies where to navigate when using the arrow-down navigation key 3
    nav-index Specifies the tabbing order for an element 3
    nav-left Specifies where to navigate when using the arrow-left navigation key 3
    nav-right Specifies where to navigate when using the arrow-right navigation key 3
    nav-up Specifies where to navigate when using the arrow-up navigation key 3
    outline Sets all the outline properties in one declaration 2
    outline-color Sets the color of an outline 2
    outline-offset Offsets an outline, and draws it beyond the border edge 3
    outline-style Sets the style of an outline 2
    outline-width Sets the width of an outline 2
    resize Specifies whether or not an element is resizable by the user 3
    text-overflow Specifies what should happen when text overflows the containing element 3


    Multi-column Layout Properties

    Свойство Описание CSS
    break-after Specifies the page-, column-, or region-break behavior after the generated box 3
    break-before Specifies the page-, column-, or region-break behavior before the generated box 3
    break-inside Specifies the page-, column-, or region-break behavior inside the generated box 3
    column-count Specifies the number of columns an element should be divided into 3
    column-fill Specifies how to fill columns 3
    column-gap Specifies the gap between the columns 3
    column-rule A shorthand Свойство for setting all the column-rule-* properties 3
    column-rule-color Specifies the color of the rule between columns 3
    column-rule-style Specifies the style of the rule between columns 3
    column-rule-width Specifies the width of the rule between columns 3
    column-span Specifies how many columns an element should span across 3
    column-width Specifies the width of the columns 3
    columns A shorthand property for setting column-width and column-count 3
    widows Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element 2


    Paged Media

    Свойство Описание CSS
    orphans Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element 2
    page-break-after Sets the page-breaking behavior after an element 2
    page-break-before Sets the page-breaking behavior before an element 2
    page-break-inside Sets the page-breaking behavior inside an element 2


    Generated Content for Paged Media

    Свойство Описание CSS
    marks Adds crop and/or cross marks to the document 3
    quotes Sets the type of quotation marks for embedded quotations 2


    Filter Effects Properties

    Свойство Описание CSS
    filter Defines effects (e.g. blurring or color shifting) on an element before the element is displayed 3


    Image Values and Replaced Content

    Свойство Описание CSS
    image-orientation Specifies a rotation in the right or clockwise direction that a user agent applies to an image (This property is likely going to be deprecated and its functionality moved to HTML) 3
    image-rendering Gives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled 3
    image-resolution Specifies the intrinsic resolution of all raster images used in/on the element 3
    object-fit Specifies how the contents of a replaced element should be fitted to the box established by its used height and width 3
    object-position Specifies the alignment of the replaced element inside its box 3


    Masking Properties

    Свойство Описание CSS
    mask 3
    mask-type 3


    Speech Properties

    Свойство Описание CSS
    mark A shorthand property for setting the mark-before and mark-after properties 3
    mark-after Allows named markers to be attached to the audio stream 3
    mark-before Allows named markers to be attached to the audio stream 3
    phonemes Specifies a phonetic pronunciation for the text contained by the corresponding element 3
    rest A shorthand property for setting the rest-before and rest-after properties 3
    rest-after Specifies a rest or prosodic boundary to be observed after speaking an element's content 3
    rest-before Specifies a rest or prosodic boundary to be observed before speaking an element's content 3
    voice-balance Specifies the balance between left and right channels 3
    voice-duration Specifies how long it should take to render the selected element's content 3
    voice-pitch Specifies the average pitch (a frequency) of the speaking voice 3
    voice-pitch-range Specifies variation in average pitch 3
    voice-rate Controls the speaking rate 3
    voice-stress Indicates the strength of emphasis to be applied 3
    voice-volume Refers to the amplitude of the waveform output by the speech synthesises 3


    Marquee Properties

    Свойство Описание CSS
    marquee-direction Sets the direction of the moving content 3
    marquee-play-count Sets how many times the content move 3
    marquee-speed Sets how fast the content scrolls 3
    marquee-style Sets the style of the moving content 3

     



    * По материалам  www.w3schools.com

     

  • CSS селекторы

    CSS селектор определяет, к какому именно HTML элементу (или группе элементов) относится данный блок стилей.

     

    Селекторы

    Селектор Пример Описание примера Версия\CSS
    .class .Class1 Выбирает все элементы с атрибутом  class="Class1" 1
    #id #div11 Выбирает все элементы с атрибутом id="div11" 1
    * * Выбирает все элементы 2
    element p Выбирает все элементы типа <p>  1
    element,element div, p Выбирает все элементы типов <div> и <p>  1
    element element div p Выбирает все элементы <p> находящиеся внутри элементов <div>  1
    elemeВыбирает все элементыnt>element div > p Выбирает все элементы <p>, для которых родительский элемент - <div> 2
    element+element div + p Выбирает все элементы <p>, которые помещаются сразу после элементов <div> 2
    element1~element2 p ~ ul Выбирает каждый элемент <ul>, которому предшествует элемент <p> 3
    [attribute] [src] Выбирает все элементы, у которых есть атрибут src 2
    [attribute=value] [target=_blank] Выбирает все элементы, для которых значение атрибута  target="_blank" 2
    [attribute~=value] [title~=flower] Выбирает все элементы, у которых атрибут title содержит слово "flower" 2
    [attribute|=value] [lang|=en] Выбирает все элементы, у которых значение атрибута lang начинается с "en" 2
    [attribute^=value] a[href^="https"] Выбирает все элементы, у которых значение атрибута href начинается с "https" 3
    [attribute$=value] a[href$=".pdf"] Выбирает все элементы, у которых значение атрибута href заканчивается на ".pdf" 3
    [attribute*=value] a[href*="microsoft"] Выбирает все элементы, у которых значение атрибута href содержит строку "microsoft" 3
    :active a:active Выбирает активную ссылку 1
    ::after p::after Вставляет что-то после элемента p 2
    ::before p::before Вставляет что-то до элемента p 2
    :checked input:checked Выбирает каждый элемент input с атрибутом checked 3
    :disabled input:disabled Выбирает каждый элемент input с атрибутом disabled 3
    :empty p:empty Выбирает каждый элемент <p> , внутри которого нет ни дочерних элементов ни текста 3
    :enabled input:enabled Выбирает каждый элемент <input> с атрибутом enabled 3
    :first-child p:first-child Выбирает каждый <p> элемент, который является первым дочерним элементом для его родителя. 2
    ::first-letter p::first-letter Выбирает первый символ у каждого элемента <p> 1
    ::first-line p::first-line Выбирает первую строку у каждого элемента <p> 1
    :first-of-type p:first-of-type Выбирает каждый элемент <p> , который является первым элементом типа <p> для его родителя 3
    :focus input:focus Выбирает элемент <input> у которого сейчас фокус 2
    :hover a:hover Выбирает те ссылки (элементы типа a)? на которые наведён курсор мыши 1
    :in-range input:in-range CSS псевдокласс in-range выбирает элемент <input> когда его значение находится внутри диапазона, заданных атрибутами min и max этого элемента. 3
    :invalid input:invalid Выбирает все элементы типа <input> с неправильными значениями 3
    :lang(language) p:lang(it) Выбирает каждый элемент <p> атрибутом lang, имеющим значение "it" (Italian) 2
    :last-child p:last-child Выбирает каждый элемент <p> , который является последним дочерним элементов у своего родителя 3
    :last-of-type p:last-of-type Выбирает каждый элемент <p> , который является последним элементом типа <p> для своего родителя 3
    :link a:link Выбирает все непосещённые ссылки 1
    :not(selector) :not(p) Выбирает все элементы типа, отличного от <p> 3
    :nth-child(n) p:nth-child(2) Выбирает каждый элемент типа <p>, который является вторым дочерним у своего родителя 3
    :nth-last-child(n) p:nth-last-child(2) Выбирает каждый элемент <p> который является вторым дочерним у своего родителя, считая с последнего дочернего элемента 3
    :nth-last-of-type(n) p:nth-last-of-type(2) Выбирает каждый элемент <p> , который является вторым элементом типа <p> у своего родителя, считая с последнего дочернего элемента 3
    :nth-of-type(n) p:nth-of-type(2) Выбирает каждый элемент <p> , который является вторым элементом типа <p> у своего родителя 3
    :only-of-type p:only-of-type Выбирает каждый элемент типа <p> , который является единственным элементом типа <p> у своего родителя 3
    :only-child p:only-child Выбирает каждый элемент <p> который является единственным элементом у своего родителя 3
    :optional input:optional Выбирает все элементы типа <input> , у которых нет атрибута "required" 3
    :out-of-range input:out-of-range Выбирает все элементы <input> , значение которых находится вне диапазона, определяиого атрибутами min и max 3
    :read-only input:read-only Выбирает все элементы <input> с атрибутом "readonly" 3
    :read-write input:read-write Выбирает все элементы <input> без атрибута "readonly" 3
    :required input:required Выбирает все элементы <input> с атрибутом "required" 3
    :root :root Выбирает корневой элемент документа 3
    ::selection ::selection Выбирает выделенную пользователем часть элемента  
    :target h1:target Выбирает элемент H1 , на который ссылается активная ссылка 3
    :valid input:valid Выбирает все элементы <input> с корректными значениями 3
    :visited a:visited Выбирает все посещённые ссылки 1

     

     

  • Стили в HTML документе - CSS

    CSS - это акроним от Cascading Style Sheets.

    CSS это язык, который описывает стиль HTML-документа, его внешний вид. HTML задаёт структуру документа, а CSS описывает, как должны отображаться HTML элементы на экране браузера.

    Определения

    Свойство (property) - название стиля.

    Значение (value) - значение свойства.

    Селектор (selector) - переключатель, идентификатор набора стилей (блока стилей)

    Блок стилей (block) - набор описаний стилей (declarations), который заключается в фигурные скобки ({}).

    Правило (rule или набор правил - rule set) - селектор стиля плюс блок стилей.  

    Декларация (declaration ) - строка-описание стиля. Внутри одного блока (между фигурными скобками) может  находиться одна декларация или несколько, разделённых символом точка с запятой (;). Декларация состоит из свойства (property), после которого ставится двоеточие (:) после этого символа - значение этого свойства (value ), после этого - символ точка с запятой (;).

    Лист стилей (StyleSheet) - это один набор правил. Он может ограничиваться тегами <STYLE></STYLE> , или импортироваться из какого-либо файла директивами @import или тегом <LINK>. 

    Документ может использовать один или несколько листов стилей. 

    Приоритет при этом у каждого последующего листа стилей выше, чем у предыдущего. То есть листы стилей срабатывают в том порядке, в котором они встретились в HTML - страничке.

    Нивысший приоритет у стилей, заданных атрибутом style внутри тега.

    Пример

    Правило
    SPAN.text { display :inline-block; background-color :red; min-height :50px; width :50%; margin :20px; padding :20px 30px 35px 15px ; }
    Селектор
    SPAN.text
    Свойства
    display background-color min-height width margin padding
    Декларации стилей
    display :inline-block; background-color :red; min-height :50px; width :50%; margin :20px; padding :20px 30px 35px 15px ;
    Блок
    { display :inline-block; background-color :red; min-height :50px; width :50%; margin :20px; padding :20px 30px 35px 15px ; }


    Использование стилей

    Способы назначения стилей

    Приоритеты стилей. Наследование стилей. Простые селекторы. Отладка стилей в отладчике Google Chrome 

    Свойства стилей

    Подробнее

    Единицы измерения для значений

    Подробнее

    Цвет.  Способы задания цвета.

    Подробнее

    Блоки, элементы

    Фон. Границы. Тень. Параметры блоков. Отступы элементов. Схема блока. Свойства float, clear.

    CSS3 Flexible Box Model

    Подробнее

    Способы позиционирования элементов

    Абсолютное и относительное позиционирование. Свойство position - absolute, relative. Точное размещение блочных элементов в окне браузера (box model), размеры блока, абсолютные и относительные координаты. Наложение слоев, свойство z-index, прозрачность. Управление видимостью слоя и видимостью содержания слоя.

    CSS Селекторы - подробнее 

    Псевдоклассы. Псевдоэлементы.

    Работа с текстом

    Стили текста (text, font, @font-face ). Free Google fonts.

    Дополнительные CSS директивы - @ - rules

    • @import: импортирует стили из файла
    • @charset задаёт кодировку
    • @font-face задаёт шрифт
    • @media, @support - позволяют модифицировать CSS таблицы в зависимости от устройства вывода - Подробнее - CSS3 media queries 
    • !important увеличивает приоритет CSS правила

    Трансформации, анимация

    Подробнее


    CSS функции

    Подробнее


    CSS grid 

     Подробнее 


  • CSS - функции

    Функция

    Описание

    CSS
    attr() Возвращает значение атрибута выбранного элемента 2
    calc() Позволяет выполнять вычисления для определения значений свойств CSS 3
    linear-gradient() Создает «изображение», которое представляет линейный градиент цветов 3
    radial-gradient() Создает «изображение», которое представляет собой градиент цветов, излучающих из центра градиента 3
    repeating-linear-gradient() Создает «образ», состоящий из повторяющихся градиентов 3
    repeating-radial-gradient() Подобно радиальному градиенту (), но он автоматически повторяет цвет бесконечно бесконечно в обоих направлениях 3
    cubic-bezier() Определяет кубическую кривую Безье
    hsl() Определяет цвета с использованием модели Hue-Saturation-Lightness (HSL)
    hsla() Определяет цвета с использованием модели Hue-Saturation-Lightness-Alpha (HSLA)
    rgb() Определяет цвета с использованием модели Red-Green-Blue (RGB)
    rgba() Определяет цвета с использованием модели Red-Green-Blue-Alpha (RGBA)
    var() возвращает значение свойства, заданного переменной


    Пример использования некоторых функций


    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> :root { --color1: #fff6e6; --color2: #ffa500; --color3: #b37400; --color4: #332100; } body { background-color: var(--color1); color: var(--color4); } blockquote { border-left: 5px solid var(--color2); padding: 10px; } p:before { content: " "; display: block; width: 25%; height: calc(1rem/2); border-top: 1px solid var(--color2); } .grad { color: var(--color1); text-shadow: 1px 1px var(--color4); font-size: 1.2rem; padding: 20px 10px; text-align: center; margin: 10px 0px; } .linGrd1 { background: linear-gradient(var(--color1), var(--color4)); } .linGrd2 { background: linear-gradient(90deg, var(--color1), var(--color4), var(--color1), var(--color4)); } </style> </head> <body> <h1>Heading1</h1> <h2>Heading2</h2> <h3>Heading3</h3> <h4>Heading4</h4> <h5>Heading5</h5> <h6>Heading6</h6> <p>Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text </p> <p>Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text </p> <p>Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text </p> <blockquote>Blockquote text Blockquote text Blockquote text Blockquote text Blockquote text Blockquote text Blockquote text </blockquote> <div class="grad linGrd1">linear-gradient(var(--color1), var(--color4))</div> <div class="grad linGrd2">linear-gradient(90deg, var(--color1), var(--color4), var(--color1), var(--color4))</div> </body> </html>












  • Работа с цветом в HTML5/CSS3,4

    Сложно переоценить значение правильного выбора цветовой палитры, корректного использования цветов для дизайна сайта.

    Спецификаци HTML5 даёт в руки дизайнера целый набор многофункциональных инструментов управления цветом. 

    Форматы задания цвета

    Спецификация стилей CSS3,4 позволяет задавать цвета несколькими способами:

    • используя шестнадцатеричные значения
    • используя функцию rgb
    • по интуитивно понятному названию цвета
    • используя функцию hsl (начиная с версии CSS3)
    • используя функцию hwb (начиная с версии CSS4)

    Наиболее часто сегодня используются три первых способа.

    Формат Синтаксис Пример
    Шестнадцатеричный код #RRGGBB p{color:#FF0000;}

    #RGB p{color:#6A7;}
    RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}
    RGB  rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}
    Название цвета aqua, black, etc. p{color:teal;}


    Шестнадцатеричная нотация для обозначения цвета

    Любой цвет представляется как результат наложения трёх базовых цветов: красного (red), зелёного (green) и синего (blue).

    В шестнадцатеричном представлении количество каждого цвета задаётся двузначным шестнадцатеричным числом. Это число, каждая из двух цифр которого (количество десятков и количество единиц) может принимать 16 значений: от 0 до F (0,1,2,3,... 9,A,B,C,D,E,F).

    Каждый  цвет, таким обазом, представляется набором из трёх пар цифр (трёх двузначных шестнадцвтеричных чисел). Перед кодом цвета ставится префикс - символ #.

    Например, запись #FF0000 означает чисто красный цвет (максимум красного и 0 зелёного и синего). Код #FFFF00 - жёлтый цвет (максимум красного и зелёного и 0 - синего.

    Можно использовать и сокращённую запись - только 3 цифры. Тогда каждый цвет обозначается одной из них. Например: #00F - чисто синий цвет.


    Примеры цветов.

    Color Color HEX
    #000000
    #FF0000
    #00FF00
    #0000FF
    #FFFF00
    #00FFFF
    #FF00FF
    #C0C0C0
    #FFFFFF


    Color Color HEX
    #000
    #F00
    #0F0
    #0FF
    #FF0
    #0FF
    #F0F
    #FFF


    Функция rgb(r,g,b)  

    Цвет задаётся также количеством красного, зелёного и синего в нём, но их количество указывается или в процентах или в десятичных цифрах от 0 до 255.

    Color Color RGB
    rgb(0,0,0)
    rgb(255,0,0)
    rgb(0,255,0)
    rgb(0,0,255)
    rgb(255,255,0)
    rgb(0,255,255)
    rgb(255,0,255)
    rgb(192,192,192)
    rgb(255,255,255)


    Названия цветов

    Часто для разработчика удобнее использовать не коды цветов, а их названия. Ниже приведены 140 названий цветов, которые поддерживаются всеми браузерами.

    Название цвета HEX RGB
    aliceblue#F0F8FF 240 248 255
    antiquewhite#FAEBD7 250 235 215
    aqua#00FFFF 0 255 255
    aquamarine#7FFFD4 127 255 212
    azure#F0FFFF 240 255 255
    beige#F5F5DC 245 245 220
    bisque#FFE4C4 255 228 196
    black#000000 0 0 0
    blanchedalmond#FFEBCD 255 235 205
    blue#0000FF 0 0 255
    blueviolet#8A2BE2 138 43 226
    brown#A52A2A 165 42 42
    burlywood#DEB887 222 184 135
    cadetblue#5F9EA0 95 158 160
    chartreuse#7FFF00 127 255 0
    chocolate#D2691E 210 105 30
    coral#FF7F50 255 127 80
    cornflowerblue#6495ED 100 149 237
    cornsilk#FFF8DC 255 248 220
    crimson#DC143C 220 20 60
    cyan#00FFFF 0 255 255
    darkblue#00008B 0 0 139
    darkcyan#008B8B 0 139 139
    darkgoldenrod#B8860B 184 134 11
    darkgray#A9A9A9 169 169 169
    darkgreen#006400 0 100 0
    darkgrey#A9A9A9 169 169 169
    darkkhaki#BDB76B 189 183 107
    darkmagenta#8B008B 139 0 139
    darkolivegreen#556B2F 85 107 47
    darkorange#FF8C00 255 140 0
    darkorchid#9932CC 153 50 204
    darkred#8B0000 139 0 0
    darksalmon#E9967A 233 150 122
    darkseagreen#8FBC8F 143 188 143
    darkslateblue#483D8B 72 61 139
    darkslategray#2F4F4F 47 79 79
    darkslategrey#2F4F4F 47 79 79
    darkturquoise#00CED1 0 206 209
    darkviolet#9400D3 148 0 211
    deeppink#FF1493 255 20 147
    deepskyblue#00BFFF 0 191 255
    dimgray#696969 105 105 105
    dimgrey#696969 105 105 105
    dodgerblue#1E90FF 30 144 255
    firebrick#B22222 178 34 34
    floralwhite#FFFAF0 255 250 240
    forestgreen#228B22 34 139 34
    fuchsia#FF00FF 255 0 255
    gainsboro#DCDCDC 220 220 220
    ghostwhite#F8F8FF 248 248 255
    gold#FFD700 255 215 0
    goldenrod#DAA520 218 165 32
    gray#808080 128 128 128
    green#008000 0 128 0
    greenyellow#ADFF2F 173 255 47
    grey#808080 128 128 128
    honeydew#F0FFF0 240 255 240
    hotpink#FF69B4 255 105 180
    indianred#CD5C5C 205 92 92
    indigo#4B0082 75 0 130
    ivory#FFFFF0 255 255 240
    khaki#F0E68C 240 230 140
    lavender#E6E6FA 230 230 250
    lavenderblush#FFF0F5 255 240 245
    lawngreen#7CFC00 124 252 0
    lemonchiffon#FFFACD 255 250 205
    lightblue#ADD8E6 173 216 230
    lightcoral#F08080 240 128 128
    lightcyan#E0FFFF 224 255 255
    lightgoldenrodyellow#FAFAD2 250 250 210
    lightgray#D3D3D3 211 211 211
    lightgreen#90EE90 144 238 144
    lightgrey#D3D3D3 211 211 211
    lightpink#FFB6C1 255 182 193
    lightsalmon#FFA07A 255 160 122
    lightseagreen#20B2AA 32 178 170
    lightskyblue#87CEFA 135 206 250
    lightslategray#778899 119 136 153
    lightslategrey#778899 119 136 153
    lightsteelblue#B0C4DE 176 196 222
    lightyellow#FFFFE0 255 255 224
    lime#00FF00 0 255 0
    limegreen#32CD32 50 205 50
    linen#FAF0E6 250 240 230
    magenta#FF00FF 255 0 255
    maroon#800000 128 0 0
    mediumaquamarine#66CDAA 102 205 170
    mediumblue#0000CD 0 0 205
    mediumorchid#BA55D3 186 85 211
    mediumpurple#9370DB 147 112 219
    mediumseagreen#3CB371 60 179 113
    mediumslateblue#7B68EE 123 104 238
    mediumspringgreen#00FA9A 0 250 154
    mediumturquoise#48D1CC 72 209 204
    mediumvioletred#C71585 199 21 133
    midnightblue#191970 25 25 112
    mintcream#F5FFFA 245 255 250
    mistyrose#FFE4E1 255 228 225
    moccasin#FFE4B5 255 228 181
    navajowhite#FFDEAD 255 222 173
    navy#000080 0 0 128
    oldlace#FDF5E6 253 245 230
    olive#808000 128 128 0
    olivedrab#6B8E23 107 142 35
    orange#FFA500 255 165 0
    orangered#FF4500 255 69 0
    orchid#DA70D6 218 112 214
    palegoldenrod#EEE8AA 238 232 170
    palegreen#98FB98 152 251 152
    paleturquoise#AFEEEE 175 238 238
    palevioletred#DB7093 219 112 147
    papayawhip#FFEFD5 255 239 213
    peachpuff#FFDAB9 255 218 185
    peru#CD853F 205 133 63
    pink#FFC0CB 255 192 203
    plum#DDA0DD 221 160 221
    powderblue#B0E0E6 176 224 230
    purple#800080 128 0 128
    rebeccapurple#663399 102 51 153
    red#FF0000 255 0 0
    rosybrown#BC8F8F 188 143 143
    royalblue#4169E1 65 105 225
    saddlebrown#8B4513 139 69 19
    salmon#FA8072 250 128 114
    sandybrown#F4A460 244 164 96
    seagreen#2E8B57 46 139 87
    seashell#FFF5EE 255 245 238
    sienna#A0522D 160 82 45
    silver#C0C0C0 192 192 192
    skyblue#87CEEB 135 206 235
    slateblue#6A5ACD 106 90 205
    slategray#708090 112 128 144
    slategrey#708090 112 128 144
    snow#FFFAFA 255 250 250
    springgreen#00FF7F 0 255 127
    steelblue#4682B4 70 130 180
    tan#D2B48C 210 180 140
    teal#008080 0 128 128
    tdistle#D8BFD8 216 191 216
    tomato#FF6347 255 99 71
    turquoise#40E0D0 64 224 208
    violet#EE82EE 238 130 238
    wheat#F5DEB3 245 222 179
    white#FFFFFF 255 255 255
    whitesmoke#F5F5F5 245 245 245
    yellow#FFFF00 255 255 0
    yellowgreen#9ACD32 154 205 50


    Web Safe Colors

    Даже сегодня не все компьютеры и мониторы могут корректно воспроизвести всю палитру цветов. WEB safe colors - это тот набор цветов, который наверняка поддердивается и корректно отображается всеми браузерами на любом компьютере. Эта пилитра содержит только те цвета, в которых количество красного, зелёного м синего соответствует одному из значений в приведённой ниже таблице.

    RGBHEX
    000
    5133
    10266
    15399
    204cc
    255ff

    Вот эти цвета. 

    000000 000033 000066 000099 0000CC 0000FF
    003300 003333 003366 003399 0033CC 0033FF
    006600 006633 006666 006699 0066CC 0066FF
    009900 009933 009966 009999 0099CC 0099FF
    00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
    00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
    330000 330033 330066 330099 3300CC 3300FF
    333300 333333 333366 333399 3333CC 3333FF
    336600 336633 336666 336699 3366CC 3366FF
    339900 339933 339966 339999 3399CC 3399FF
    33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
    33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
    660000 660033 660066 660099 6600CC 6600FF
    663300 663333 663366 663399 6633CC 6633FF
    666600 666633 666666 666699 6666CC 6666FF
    669900 669933 669966 669999 6699CC 6699FF
    66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
    66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
    990000 990033 990066 990099 9900CC 9900FF
    993300 993333 993366 993399 9933CC 9933FF
    996600 996633 996666 996699 9966CC 9966FF
    999900 999933 999966 999999 9999CC 9999FF
    99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
    99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
    CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
    CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
    CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
    CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
    CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
    CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
    FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
    FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
    FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
    FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
    FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
    FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF


    функция hsl(h,s,l)

    Этот способ задания цвета используется реже, чем вышеперечисленные. Цвет в нём определяется, как комбинация трёх параметров: оттенок, насыщенность, яркость.

    Оттенок - это значение цвета на цветовом круге и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.

    Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.

    Яркость задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.


    Прозрачность

    Спецификация стилей CSS3 позволяет добавить к цвету дополнительное свойство - прозрачность.

    rgba

    Прозрачность можно задавать с помошью функции rgba(r,g,b,o) , четвёртый параметр которой - прозрачность цвета (0 - полностью прозрачный цвет, 1 - непрозрачный).

    Например запись: 

    background-color:rgba(255,0,0,0.3);

    задаёт красный цвет с 30%-й прозрачностью для фона элемента.

    HEX

    Прозрачность можно задавать для цвета в формате HEX.

    #RRGGBBAA - RR - красный, GG - зелёный, BB - синий, AA - прозрачность (от 00 до FF)

    или

    #RGBA - R - красный, G - зелёный, B - синий, A - прозрачность (от 0 до F)

     opacity

    Можно задавать прозрачность сразу и цвету и всему контенту элемента при помощи отдельного CSS свойства - opacity.

    Например:

    rgb(255, 0, 0);

    opacity:0.8;





     

  • CSS 2D transforms

    Трансформации в CSS позволяют перемещать, поворачивать, масштабировать и деформировать элементы.

    • translate()
    • rotate()
    • scale()
    • skewX()
    • skewY()
    • matrix()

    Примеры:


    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS transform</title> <link rel="stylesheet" href="/style.css"> </head> <body> <div class="rotate">rotate</div> <div class="scale">scale</div> <div class="skewX">skewX</div> <div class="translateX">translateX</div> </body> </html>


    div { min-width: 100px; font-size: 2rem; background-color: orange; padding: 50px; margin: 50px; text-align: center; transition: transform 500ms linear; color: #FFF; } div:hover { background-color: rgba(255, 166, 0, 0.582); } .rotate:hover { transform: rotate(0.01turn); } .scale:hover { transform: scale(1.5, 1); } .skewX:hover { transform: skewX(-10deg); } .translateX:hover { transform: translateX(10px); }



  • CSS Media Queries


    В спецификации CSS3 введены медиа-звпросы.

    Наряду с HTML тегом <meta name="viewport"... > - это удобный и гибкий мехпнизм для создания сайтов с адаптивным дизайном.

    Медиа-запросы позволяют модифицировать CSS таблицы стилей для разных устройств, HTML тег META с параметрами типа:

    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    В атрибуте контент ( content) можно задавать параметры:

    Параметр Описание
    width Ширина экрана (виртуальная). Может быть задана в CSS пикселях (width=600) или равной физически возможному разрешению экрана устройства (width=device-width)
    device-width Ширина экрана (физическая)
    height Высота (длина) экрана (логическая, виртуальная)
    device-height Высота (длина) экрана (физическая)
    initial-scale Начальное увеличение (zoom) для странички на экране устройства. 1.0 - нет увеличения.
    minimum-scale Минимальное увеличение, доступное пользьзователю.
    maximum-scale Минимальное увеличение, доступное пользьзователю.
    user-scalable Разрешено или запрещено пользователю увеличивать (уменьшать) страничку. Может быть yes или no.

    При задании ширины экрана для устройства вывода нужно иметь в виду, что CSS пиксели (логические пиксели) не соответствуют физическим пикселям (разрешающая способность экрана). Для мобильных устройств эти параметры сильно отличаются.

    Подробнее, для разных устройств, можно посмотреть, например, здесь: http://viewportsizes.com/

    Медиа-запросы в CSS3 расширили идею медиа-типов CSS2: вместо того, чтобы определять тип устройства, в CSS3 определяются параметры устройства.

    Такие как:

    • ширина и высота окна просмотра
    • ширина и высота устройства
    • ориентация (это планшет / телефон в альбомном или портретном режиме?)
    • разрешающая способность

    Использование медиа-запросов - это удобный, популярный метод корректировки CSS стилей для различных устройств: настольные компьютеры, ноутбуки, планшеты и мобильные телефоны (например, телефоны iPhone и Android).

    Медиа-запрос состоит из типа носителя и может содержать одно или несколько выражений, которые принимают значения true, либо false.

    @media not|only mediatype and (mediafeature and|or|not mediafeature) { CSS-Code; }


    @media - директива: медиа-запрос ( совместно с ней также может использоваться CSS диретива @support, которая позволяет проверить, поддерживает ли браузер те или иные CSS свойства )

    mediatype - тип устройства

    mediafeature - набор логических выражений, состоящий из описаний свойств устройств, связанных длгическими операторами and, not, or.

    Результат запроса истинен, если:

    указанный тип носителя соответствует типу устройства, на котором отображается документ

    все выражения в запросе на мультимедиа являются истинными. 

    Когда медиа-запрос является истинным, применяются соответствующие таблицы стилей или правила стилей.

    Если не использутся операторы not или only, тип носителя можно не указывать (подразумевается: все типы).

    Иакже можно задать разные таблицы стилей для разных носителей:


    <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="/print.css">



    CSS3 - некоторые типы устройств (CSS3 media types)

    Тип устройства (media type) Описание
    all Любые устройства.
    print Устройства печати.
    screen Экран компьютера, таблета, мобильного телефона.
    speech Устройства чтения экрана, которые озвучивают текст.
    handheld
    Наладонники.
    projection
    Проекторы.
    printПринтеры.


    Свойства устройств (CSS3 media features)


    Синтаксически мультимедиа-свойства напоминают свойства CSS: они имеют имена и принимают определенные значения. Однако есть несколько важных различий между свойствами и средствами массовой информации::

    • Свойства CSS используются в объявлениях для предоставления информации о том, как представить документ. Свойства мультимедиа-устройств используются в выражениях для описания требований к устройству вывода.
    • Большинство мультимедиа-свойств принимают необязательные ‘min-’ или ‘max-’ префиксы для того, чтобы задать константы "больше или равно" и "меньше или равно". Этот синтаксис используется, чтобы избежать символов "<" и ">" которые могут вступать в конфликт с HTML и XML. Те свойства, которые допускают префиксы, чаще всего (но не обязательно) используются с префиксами.
    • Свойства CSS всегда требуют значения для формирования объявления. С другой стороны, свойства мультимедиа могут использоваться и без значений. В случае иультимедиа-свойств, выражение (свойство) будет принимать значение true, если (свойство: x) будет принимать значение true для значения x, отличного от нуля или нуля, за которым следует идентификатор единицы измерения (то есть - любое, кроме 0, 0px, 0em и т. Д. ). Те multimedia - свойства, которые описаны с префиксом min / max, не могут использоваться без конкретного значения.
    • Свойства CSS могут принимать более сложные значения, например, вычисления, которые включают в себя несколько других значений. Media-свойства могут иметь только единственное значение: одно ключевое слово, одно число или число с единицей измерения. (Исключение составляют ‘aspect-ratio’ и ‘device-aspect-ratio’ )

    Например, медиа-свойство «color» может формировать выражения без значения (‘(color)’) или со значением (‘(min-color: 1)’).


    Свойство Описание Пример
    width

    Описывает ширину области отображения устройства. Для непрерывных носителей это ширина окна просмотра , включая размер отображаемой полосы прокрутки (если есть). Для постраничных носителей это ширина окна страницы.

    Значение не может быть отрицательным.

    Допускает префиксы min/max

    Например, этот мультимедийный запрос определяет, что таблица стилей применится для печати на устройстве вывода, ширина которого более 25 см:


    <link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

    Этот мультимедийный запрос задаёт, что таблицу стилей нужно использовать для устройств? у которых viewport (часть экрана / бумаги, где отображается документ) шириной от 400 до 700 пикселей:

    @media screen and (min-width: 400px) and (max-width: 700px) { … }

    Этот мультимедийный запрос определяет устройства, для которых viewport больше 20em.

    @media all and (min-width: 20em)


    height  Описывает длину целевой области отображения устройства вывода. Для непрерывных носителей это высота окна просмотра, включая размер отображаемой полосы прокрутки (если есть). Для постраничных носителей это высота окна страницы.

    Указанная <длина> не может быть отрицательной.

    Допускает префиксы min/max
    @media screen and (height: 800px) { … }
    device-height
    высота (длмна) поверхности рендеринга устройства. Значение свойства height не всегда равно значению device-height. Это зависит от зарактеристик конкретного устройства (логический - CSS пиксель может не соответствовать физическому пикселю устройства).

    В последние годы физическое разрешение экрана современных устройств увеличилось до такого размера, что отдельные пиксели неразличимы для человеческого глаза. Например, последние смартфоны обычно имеют 5-дюймовые экраны с разрешением выше 1920-1080 пикселей (~ 400 точек на дюйм). Из-за этого многие браузеры могут отображать свои страницы в меньшем физическом размере, использую несколько аппаратных пикселей для каждого пикселя CSS.

     HTML tag meta позволяет задать параметр width=device-width
    <meta name="viewport" content="width=device-width, initial-scale=1">

    device-width
    ширина поверхности рендеринга устройства вывода. Для сплошных носителей это ширина экрана. Для постраничного носителя это ширина размера листа страницы.
    @media screen and (device-width: 800px) { … }
    В приведенном выше примере таблица стилей будет применяться только к экранам, на которых в настоящее время отображается ровно 800 горизонтальных пикселей. Единица «px» здесь - логический пиксель
    orientation
    Принимает заначение portrait, если для этого устройства height больше или равна width.
    В противном случае - landscape.

    Значение не может быть отрицательным.


    Эта директива описывает стили для любых типов устройств (all) с вертикальной ориентацией экрана.

    @media all and (orientation:portrait) { … }

    aspect-ratio

    Отношение значения  свойства width к значению свойства  height

     Допускает префиксы min/max


    device-aspect-ratio
    Отношение значения свойства device-width к значению свойства device- height
    @media screen and (device-aspect-ratio: 1280/720) { … }
    colorКоличество битов, которое устройство использует для обозначения увета. Для монохромных устройств color = 0
    Допускает префиксы min/max
    Все устройства с цветным экраном:
    @media all and (color) { … }

    color-index
    количество записей в таблице поиска цветов устройства вывода
    Допускает префиксы min/max
    media="all and (min-color-index: 256)"
    Те устройства, у которых 256 цветов
    monochrome
    количество бит на пиксель в монохромном буфере кадров. Если устройство не является монохромным устройством, значение  будет равно 0.
    В примере одна таблица стилей определяется для цветных, а другая -  для монохромных устройств:
    <link rel="stylesheet" media="print and (color)" href="http://…" /> <link rel="stylesheet" media="print and (monochrome)" href="http://…" />
    resolution
    Разрешение - плотность пикселей для устройства.@media print and (min-resolution: 300dpi) { … }
    @media print and (min-resolution: 118dpcm) { … }
    scanпроцесс сканирования выходных устройств «ТВ».
    Например, этот мультимедийный запрос задаёт, что таблица стилей - для устройств с прогрессивной разверткой (progressive scan):
    @media tv and (scan: progressive) { … }
    grid
    Свойств используется для запроса устройства, является ли оно точечным или графическим (grid или bitmap ). Если выходное устройство основано на сетке (например, терминал «tty» или дисплей телефона с одним фиксированным шрифтом), значение будет равно 1. В противном случае значение будет равно 0.

    Только 0 и 1 являются допустимыми значениями. 
    @media handheld and (grid) and (max-width: 15em) { … }





    Примеры

    CSS - диреrтивы @media и @support могут быть размещены на одном уровне кода или вложены.

    /* Расположено в самой программе */ @media screen and (min-width: 900px) { article { padding: 1rem 3rem; } } /* Вложено в другую директиву */ @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } }



    @media print { body { font-size: 10pt; } } @media screen { body { font-size: 13px; } } @media screen, print { body { line-height: 1.2; } } @media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) { body { line-height: 1.4; } }



    @media print { body { font-size: 10pt } }


    @media screen { body { font-size: 13px } }


    @media screen, print { body { line-height: 1.2 } }











  • CSS3 адаптивные блоки (Flexible Box Model)

    CSS3 Flexible Box — это новая спецификация разметки, позволяющая создавать макеты страниц и размещать блоки на странице таким образом, чтобы они вели себя предсказуемо в тех случаях, когда разметка страницы адаптирована под различные размеры экрана и устройства.

    Элементы типа block используют вертикальный макет размещения. Элементы типа inline - горизонтальны. Flexbox позволяет и то и другое. Flexbox удобен, в частности, для устройств типа мобильных, где иногда нужно полностью менять макет страницы с горизонтального на вертикальный.

    Вместо терминологии block и inline элементов flexbox исользует термины: главная и перпендикулярная оси (main axis и cross axis).

    Контейнер (container)

    Родительский элемент, в котором содержатся все остальные flexible - элементы. Flex - контейнер определяется с использованием значений flex или inline-flex свойства display.

    Элемент (item)

    Каждый дочерний элемент flex - контейнера становится flex - элементом.

    Оси (axis)

    Каждый flexbox макет использует две оси. Главная и перепендикулярная. Flex - элементы следуют один за другим вдоль главной оси (main-axis).

    • flex-direction - это свойство, которое задаёт главную ось
    • justify-content - задаёт размещение flex-элементов в текущей строке главной оси
    • align-items - задаёт размещение flex-элементов в текущей строке перпендикулярной оси
    • align-self - определяет, как единичный flex-элемент выравнивается вдоль перпендикулярной оси, переопределяя значения, заданные в align-items

    Направления (directions)

    Границы flex- контейнера ( main start/main end и cross start/cross end ) определяют задают начальные и конечные точки для перемещений flex-элементов внутри контейнера.

    • Свойство order присваивает элементы порядковым группам и определяет, какие элементы появляются первыми.
    • Свойство flex-flow сокращает описание свойств flex-direction и flex-wrap для размещения flex-элементов.

    Строки (lines)

    Элементы Flex могут быть размещены либо на одной строке, либо на нескольких строках в соответствии с свойством flex-wrap, которое управляет направлением поперечной оси и направлением, в котором формируются новые строки.

    Размеры (dimensions)

    Для flex-элементов свойства width и height задают размеры.

    Свойство flex сокращает описание свойств flex-grow, flex-shrink, flex-basis для описаниия адаптивных размеров flex-элементов.

    CSS3 Flexbox свойства

     

    Свойство Описание Значения Пример
    display Тип flex-контейнера flex
      inline-flex
    display:flex;
    display: -webkit-flex;
     
    flex-direction Определяет направление размещения flex-элементов внутри flex-контейнера flex-direction flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    justify-content Выравнивает горизонтально элементы flex в случае, если они не занимают всё пространство по главной оси. flex-start
      flex-end
      center
      space-between
      space-around
      initial
      inherit
    div {
    -webkit-justify-content: space-around; 
    justify-content: space-around;
    }
    align-items Свойство align-items указывает выравнивание по умолчанию для элементов внутри flex-контейнера.
    Можно использовать свойство align-self для каждого элемента, чтобы переопределить свойство align-items.
    stretch
      center
      flex-start
      flex-end
      baseline
      initial
      inherit;
    div {
    -webkit-align-items: center; 
    align-items: center;
    }
    flex-wrap Указывает, должны ли flex-элементы переноситься на другую строку, если им недостаточно места в одной строке nowrap
      wrap
      wrap-reverse
      initial
      inherit
    div {
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap;
    }
    align-content Модифицирует поведение свойства flex-wrap. Похоже на align-items, но вместо выравнивания flex-элементов  выравнивает строки stretch
      center
      flex-start
      flex-end
      space-between
      space-around
    i  nitial
      inherit
    div {
    -webkit-align-content: center;
    align-content: center;
    }
    flex-flow Сокращение для свойств flex-direction и flex-wrap flex-flow: flex-direction flex-wrap|initial|inherit; div {
    -webkit-flex-flow: row-reverse wrap; 
    flex-flow: row-reverse wrap;
    }
    order Задаёт порядок следования flexible элементов относительно остальных внутри одного контейнера number
      initial
      inherit
    -webkit-order: 2;
      order: 2;
    align-self Используется для  flex-элементов. Переопределяет свойство контейнера align-items  auto
    stretch
    center
    flex-start
    flex-end
    baseline
    initial
    inherit
    div {
    -webkit-align-self: center; 
    align-self: center;
    }
    flex Задаёт длину  flex-элемента по отношению к остальным внутри того же контейнера flex-grow flex-shrink flex-basis auto|initial|inherit div {
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1;
    }
    flex-grow Указывает, насколько элемент будет увеличиваться относительно остальных элементов внутри одного и того же контейнера    
    flex-shrink Свойство определяет, как элемент будет уменьшаться относительно остальных гибких элементов внутри одного контейнера    
    flex-basis Свойство задает начальную длину flex-элемента   div:nth-of-type(2) {
    -webkit-flex-basis: 80px; 
    flex-basis: 80px;
    }
           

     

     

     

  • DOM - обработка событий (Events)

    Браузер отслеживает события которые происходят в его окне. События могут быть привязаны к определенному элементу, группе элементов, или к окну браузера. 

    События могут генерироваться как пользователем (например: перемещение мышки) так и системой (например: законцилась анимация )

    События могут быть разных типов, например:

    • нажатия клавиш мыши, перемещение курсора
    • нажатие клавиш клавиатуры
    • изменение размеров окна браузеа (закрытие окна)
    • загрузка страницы в окно
    • заполнение формы
    • воспроизведение видео
    • возникновение ошибок.

    Реакция на события описывается через бработчики событий (events listeners или event handlers).

    Браузер постоянно отслеживает все события, при его возникновении (event firing) он ищет назначенную этому событию фукцию-обработчик события и запускает её (если она найдена).

    То есть: события, как правило, используются в сочетании с функциями, функция не будет выполняться до возникновения события (например, до того, как пользователь нажал на кнопку).

    Типы событий

    События, связанные с мышью (mouse events)

    Событие Описание DOM
    onclick Клик левой кнопкой мыши 2
    oncontextmenu Клик правой кнопкой мышки 3
    ondblclick Два клика подряд левой кнопкой 2
    onmousedown Нажатие левой кнопки мышки 2
    onmouseenter Курсор попал на элемент 2
    onmouseleave Курсор ушёл с элемента 2
    onmousemove Курсор переместился, находясь над элементом 2
    onmouseover Курсор находится над элементом или его дочерними элементами 2
    onmouseout Курсор ушёл с области самого элемента или одного из его дочерних элементов 2
    onmouseup Отпускание левой кнопки мышки 2

    События клавиатуры (keyboard events)

    Событие Описание DOM
    onkeydown Нажатие кнопки клавиатурв 2
    onkeypress Нажатие и отпускание кнопки клавиатуры 2
    onkeyup Отпускание кнопки клавиатуры 2

    События объекта frame (frame/window events)

    Собвтие Описание DOM
    onabort Загрузка документа в фрейм прервана 2
    onbeforeunload Начало загрузки документа в фрейм 2
    onerror Ошибка загрузки файла в фрейм 2
    onhashchange Изменился параметр anchor фрейма 3
    onload Загрузка документа в фрейм 2
    onpageshow Событие происходит, когда пользователь переходит на веб-страницу 3
    onpagehide Событие происходит, когда пользователь уходит с веб-страницы 3
    onresize Событие возникает, когда размер окна документа изменяется 2
    onscroll Событие происходит при прокрутке элемента 2
    onunload Событие происходит после выгрузки страницы (для <body>) 2

    События, связанные с формой (form events)

    Событие Описание DOM
    onblur Событие происходит, когда элемент теряет фокус 2
    onchange Событие происходит, когда изменилось содержимое элемента формы (для <input>, <keygen>, <select> и <textarea>) 2
    onfocus Событие возникает, когда элемент получает фокус 2
    onfocusin Событие возникает, когда элемент собирается получить фокус 2
    onfocusout Событие происходит, когда элемент теряет фокус 2
    oninput Событие возникает, когда элемент получает пользовательский ввод 3
    oninvalid Событие oninvalid происходит, когда элемент <input> недопустим. 3
    onreset Событие происходит, когда форма сбрасывается 2
    onsearch Событие возникает, когда пользователь что-то пишет в поле поиска (для <input = "search">) 3
    onselect Событие происходит после выбора пользователем текста (для <input> и <textarea>) 2
    onsubmit Событие происходит при отправке формы 2

    События drag/drop

    Событие Описание DOM
    ondrag Событие возникает, когда элемент перетаскивается 3
    ondragend Событие происходит, когда пользователь закончил перетаскивание элемента 3
    ondragenter Событие возникает, когда элемент перетаскивания входит в целевую точку  3
    ondragleave Событие происходит, когда элемент перетаскивания оставляет целевую точку 3
    ondragover Событие происходит, когда элемент перетаскивания находится над целевой точкой перетаскивания 3
    ondragstart Событие возникает, когда пользователь начинает перетаскивать элемент 3
    ondrop Событие происходит, когда перетаскиваемый элемент выбрасывается в целевой точке 3

    Clipboard - события

    Событие Описание DOM
    oncopy Событие происходит, когда пользователь копирует содержимое элемента
    oncut Событие происходит, когда пользователь вырезает содержимое элемента
    onpaste Событие возникает, когда пользователь вставляет некоторый контент в элемент

    Print - события

    Событие Описание DOM
    onafterprint Событие происходит, когда страница начала печать, или если диалоговое окно печати закрывается 3
    onbeforeprint Событие происходит, когда страница будет напечатана 3

    Media - события

    Событие Описание DOM
    onabort The event occurs when the loading of a media is aborted 3
    oncanplay The event occurs when the browser can start playing the media (when it has buffered enough to begin) 3
    oncanplaythrough The event occurs when the browser can play through the media without stopping for buffering 3
    ondurationchange The event occurs when the duration of the media is changed 3
    onemptied The event occurs when something bad happens and the media file is suddenly unavailable (like unexpectedly disconnects) 3
    onended The event occurs when the media has reach the end (useful for messages like "thanks for listening") 3
    onerror The event occurs when an error occurred during the loading of a media file 3
    onloadeddata The event occurs when media data is loaded 3
    onloadedmetadata The event occurs when meta data (like dimensions and duration) are loaded 3
    onloadstart The event occurs when the browser starts looking for the specified media 3
    onpause The event occurs when the media is paused either by the user or programmatically 3
    onplay The event occurs when the media has been started or is no longer paused 3
    onplaying The event occurs when the media is playing after having been paused or stopped for buffering 3
    onprogress The event occurs when the browser is in the process of getting the media data (downloading the media) 3
    onratechange The event occurs when the playing speed of the media is changed 3
    onseeked The event occurs when the user is finished moving/skipping to a new position in the media 3
    onseeking The event occurs when the user starts moving/skipping to a new position in the media 3
    onstalled The event occurs when the browser is trying to get media data, but data is not available 3
    onsuspend The event occurs when the browser is intentionally not getting media data 3
    ontimeupdate The event occurs when the playing position has changed (like when the user fast forwards to a different point in the media) 3
    onvolumechange The event occurs when the volume of the media has changed (includes setting the volume to "mute") 3
    onwaiting The event occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data) 3

    Animation - события

    Событие Описание DOM
    animationend The event occurs when a CSS animation has completed 3
    animationiteration The event occurs when a CSS animation is repeated 3
    animationstart The event occurs when a CSS animation has started 3

    Transition - события

    Событие Описание DOM
    transitionend The event occurs when a CSS transition has completed 3

    Server-Sent - события

    Событие Описание DOM
    onerror The event occurs when an error occurs with the event source
    onmessage The event occurs when a message is received through the event source
    onopen The event occurs when a connection with the event source is opened

    Другие события

    Событие Описание DOM
    onmessage The event occurs when a message is received through or from an object (WebSocket, Web Worker, Event Source or a child frame or a parent window) 3
    onmousewheel Deprecated. Use the onwheel event instead
    ononline The event occurs when the browser starts to work online 3
    onoffline The event occurs when the browser starts to work offline 3
    onpopstate The event occurs when the window's history changes 3
    onshow The event occurs when a <menu> element is shown as a context menu 3
    onstorage The event occurs when a Web Storage area is updated 3
    ontoggle The event occurs when the user opens or closes the <details> element 3
    onwheel The event occurs when the mouse wheel rolls up or down over an element 3

    Touch - события

    Событие Описание DOM
    ontouchcancel The event occurs when the touch is interrupted
    ontouchend The event occurs when a finger is removed from a touch screen
    ontouchmove The event occurs when a finger is dragged across the screen
    ontouchstart The event occurs when a finger is placed on a touch screen

    Объект event

    Когда происходит событие, браузер создает объект 'event', помещает в него детали события и передает его в качестве аргумента обработчику.

    пример ниже выводит на консоль все свойства текущего объека event, созданного баузеом при клике мышкой по элементу ELEMENT .

    function myFunc2(evnt){ console.log('Event: ', evnt); }

    ELEMENT.addEventListener('click', myFunc2);


    Константы

    Константа Описание DOM
    CAPTURING_PHASE The current event phase is the capture phase (1) 1
    AT_TARGET The current event is in the target phase, i.e. it is being evaluated at the event target (2) 2
    BUBBLING_PHASE The current event phase is the bubbling phase (3) 3

    Свойства

    Свойство Описание DOM
    bubbles Returns whether or not a specific event is a bubbling event 2
    cancelable Returns whether or not an event can have its default action prevented 2
    currentTarget Returns the element whose event listeners triggered the event 2
    defaultPrevented Returns whether or not the preventDefault() method was called for the event 3
    eventPhase Returns which phase of the event flow is currently being evaluated 2
    isTrusted Returns whether or not an event is trusted 3
    target Returns the element that triggered the event 2
    timeStamp Returns the time (in milliseconds relative to the epoch) at which the event was created 2
    type Returns the name of the event 2
    view Returns a reference to the Window object where the event occured 2

    Методы

    Метод Описание DOM
    preventDefault() Cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur 2
    stopImmediatePropagation() Prevents other listeners of the same event from being called 3
    stopPropagation() Prevents further propagation of an event during event flow 2

    Объект - MouseEvent

    Свойство Описание DOM
    altKey Возвращает, была ли нажата клавиша «ALT» при запуске события мыши 2
    button Возвращает, какая кнопка мыши была нажата при запуске события мыши 2
    buttons Возвращает, какие кнопки мыши были нажаты при запуске события мыши 3
    clientX Возвращает горизонтальную координату указателя мыши относительно текущего окна, когда событие мыши было запущено 2
    clientY Возвращает вертикальную координату указателя мыши относительно текущего окна, когда событие мыши было запущено 2
    ctrlKey Возвращает, была ли нажата клавиша CTRL при запуске события мыши 2
    detail Возвращает число, указывающее, сколько раз щелкнули мышь 2
    metaKey Возвращает, была ли нажата клавиша «META» при срабатывании события 2
    pageX Возвращает горизонтальную координату указателя мыши относительно документа, когда событие мыши было запущено
    pageY Возвращает вертикальную координату указателя мыши относительно документа, когда событие мыши было запущено
    relatedTarget Возвращает элемент, связанный с элементом, вызвавшим событие мыши 2
    screenX Возвращает горизонтальную координату указателя мыши относительно экрана, когда событие было вызвано 2
    screenY Возвращает вертикальную координату указателя мыши относительно экрана, когда событие было инициировано 2
    shiftKey Возвращает, была ли нажата клавиша «SHIFT» при срабатывании события 2
    which Возвращает, какая кнопка мыши была нажата при запуске события мыши 2

    Объект - KeyboardEvent

    Свойство Описание DOM
    altKey Возвращает, была ли нажата клавиша «ALT» при срабатывании  события 2
    ctrlKey Возвращает, была ли нажата клавиша CTRL при срабатывании события клавиатуры 2
    charCode Возвращает код символа Юникода клавиши, которая вызвала событие onkeypress 2
    key Возвращает для нажатой клавиши её значение  3
    location Возвращает местоположение ключа на клавиатуре или устройстве 3
    metaKey Возвращает, была ли нажата клавиша «meta» при запуске  события 2
    shiftKey Возвращает, была ли нажата клавиша «SHIFT» при срабатывании  события 2
    which Возвращает код символа Юникода ключа, вызвавшего событие onkeypress, или код ключа Unicode ключа, вызвавшего событие onkeydown или onkeyup 2

    HashChangeEvent - объект

    Property Описание DOM
    newURL Returns the URL of the document, after the hash has been changed
    oldURL Returns the URL of the document, before the hash was changed

    PageTransitionEvent - объект

    Property Описание DOM
    persisted Returns whether the webpage was cached by the browser

    FocusEvent - объект

    Property Описание DOM
    relatedTarget Returns the element related to the element that triggered the event 3

    AnimationEvent - объект

    Property Описание DOM
    animationName Returns the name of the animation
    elapsedTime Returns the number of seconds an animation has been running

    TransitionEvent - объект

    Property Описание DOM
    propertyName Returns the name of the CSS property associated with the transition
    elapsedTime Returns the number of seconds a transition has been running

    WheelEvent - объект

    Property Описание DOM
    deltaX Returns the horizontal scroll amount of a mouse wheel (x-axis) 3
    deltaY Returns the vertical scroll amount of a mouse wheel (y-axis) 3
    deltaZ Returns the scroll amount of a mouse wheel for the z-axis 3
    deltaMode Returns a number that represents the unit of measurements for delta values (pixels, lines or pages) 3

     

    Регистрация обработчика событий

    Зарегистриовать обработчик событий можно разными способами.

    Присвоить значение специальному атрибуту (onclick, onkeypress, onmouseenter,...) при описании HTMl тега. Например:

    <button id='myButton1' onclick="alert('My event!');">Press me</button>

    Можно его изменить с помощью соответствующего свойства объекта element:

    document.getElementById('myButton1').onclick = 'alert("New action")'

    Можно использовать метод объекта element - addEventListener(event, listener). Например:

    document.getElementById('myButton1').addEventListener('click', click2); function click2(){ alert('Listener 1 - click2()'); }

    или

    document.getElementById('myButton1').addEventListener('click', () => { alert ('Listener 1!!'); });

    Если в этом примере  ипользовать оба способа, то к элементу id=myButton1 , к событию click будут привязаны сразу 2 обработчика.


    Удаление обработчика событий

    Обработчик событий, который привязан к элементу через его атрибут, можно удалить, переопределив значение атрибута.

    Привязать обработчик к элементу 

    <button id="myButton1" onclick='alert("Event listener connected")'>Click me</button>

    или

    document.getElementById('myButton1').onclick='alert("Event listener connected")';

    Удалить его

    document.getElementById('myButton1').onclick='';

    Можно использовать метод элемента removeEventListener(событие, имя_обработчика)

    Привязать

    function myFunc2(){ alert("Listener myFunc2() response"); } document.getElementById('myButton1').addEventListener('click', myFunc2);

    Удалить

    document.getElementById('myButton1').removeEventListener('click', myFunc2);


    Удалить все обработчики событий у элемента можно, например, клонировав элемент (метод cloneNode()) , при этом обработчики событий не клонируются. 

    function removeAllEventListeners(elmntID){ var oldElement = document.getElementById(elmntID); var newElement = oldElement.cloneNode(true); oldElement.parentNode.replaceChild(newElement, oldElement); // cleanup out1 out1.innerHTML = ''; }



    Events bubbling, capturing

    event.target - элемент, который инициировал событие.

    event.currentTarget - текущий элемент, обрабатывающий событие.

    event bubbling (event propagation) - обработка события, котоое инициировал элемент, всеми его родительскими элементами (снизу вверх или от дочернего элемента).

    event capturing - 

    event.eventPhase - фаза обработки события (capturing=1, bubbling=3)

    Стандартные события DOM проходят фазы обработки событий (event.eventPhase):

    Константа Значение Описание
    Event.NONE 0 Ни одно событие не обрабатывается
    Event.CAPTURING_PHASE 1 Событие передаётся через объекты-предки целевого элемента (event.target). Этот процесс начинается с объекта Window, затем - Document, затем HTMLHtmlElement и т. д. через элементы до тех пор, пока не будет достигнут непоседственно родительский элемент. Обработчики событий, зарегистрированные для Capturing (при вызове EventTarget.addEventListener (EVENT, HANDLER, useCapture)), запускаются на этом этапе.
    Event.AT_TARGET 2 Событие достигло целевого элемента. В это время вызываются обработчики событий, зарегистрированные для этой фазы. Если Event.bubbles принимает значение false, обработка события завершается после завершения этой фазы.
    Event.BUBBLING_PHASE 3 Событие распространяется к предкам целевого элемента, в обратном порядке, начиная с его непосредственного родителя, и в конечном итоге достигает объекта Window. Этот процесс называется bubbling происходит только в том случае, если Event.bubbles принимает значение true. Обработчики событий, зарегистрированные для этой фазы, запускаются в это время.
    • Capturing phase - событие переходит к элементу
    • Target phase - событие достигло целевого элемента
    • Bubbling phase - событие "поднимается" от элемента




     

  • DOM - объекты CSS

    Определения

    Свойство (property) - название стиля.

    Значение (value) - значение свойства.

    Селектор (selector) - переключатель, идентификатор набора стилей (блока стилей)

    Блок стилей (block) - набор описаний стилей (declarations), который заключается в фигурные скобки ({}).

    Правило (rule или набор правил -rule set)- селектор стиля плюс блок стилей.

    Декларация (declaration ) - строка-описание стиля. Внутри одного блока (между фигурными скобками) может быть находиться одна декларация или несколько, разделённых символом (;). Декларация состоит из свойства (property), после которого ставится двоеточие (:) после этого символа - значение этого свойства (value ), после этого - символ точка с запятой (;).

    Объект DOM - Style

    Отражает свойства стилей элемента (inline styles). Отражает те свойства стилей, которые заданы атрибутом style.

    Задать атрибут style (нужно иметь в виду, что если этот атрибут уже был задан, его старое значение будет удалено)

    element.setAttribute("style", "background-color: red;");

    Удалить атрибут (и все inline стили элемента)

    element.removeAttribute("style")

    Модифицировать параметры атрибута style (изменение свойс объекта style для элемента).

    element.style.backgroundColor = "red";

     

    Свойства объекта style

     

    Свойство Описание Версия
    CSS
    alignContent Устанавливает или возвращает выравнивание между линиями внутри гибкого контейнера, когда элементы не используют все свободное пространство 3
    alignItems Устанавливает или возвращает выравнивание элементов внутри гибкого контейнера 3
    alignSelf Устанавливает или возвращает выравнивание для выбранных элементов внутри гибкого контейнера 3
    animation Сокращённое свойство для всех свойств анимации, приведённых ниже, за исключением свойства animationPlayState 3
    animationDelay Устанавливает или возвращает, когда анимация начнется 3
    animationDirection Устанавливает или возвращает, должна ли анимация воспроизводиться в обратном порядке на альтернативных циклах 3
    animationDuration Устанавливает или возвращает количество секунд или миллисекунд, которое требуется анимации для завершения одного цикла 3
    animationFillMode Устанавливает или возвращает значения, которые применяются анимацией за пределами времени ее выполнения 3
    animationIterationCount Устанавливает или возвращает количество раз, когда должна воспроизводиться анимация 3
    animationName Устанавливает или возвращает имя для анимации @keyframes 3
    animationTimingFunction Устанавливает или возвращает кривую скорости анимации 3
    animationPlayState Устанавливает или возвращает, работает анимация или приостановлена 3
    background Устанавливает или возвращает все свойства фона в одной директиве 1
    backgroundAttachment Устанавливает или возвращает фиксированное фоновое изображение или прокручивает страницу 1
    backgroundColor Устанавливает или возвращает фоновый цвет элемента 1
    backgroundImage Устанавливает или возвращает фоновое изображение для элемента 1
    backgroundPosition Устанавливает или возвращает начальную позицию фонового изображения 1
    backgroundRepeat Устанавливает или возвращает как повторять (мозаику) фоновое изображение 1
    backgroundClip Устанавливает или возвращает область рисования фона 3
    backgroundOrigin Устанавливает или возвращает область позиционирования фоновых изображений 3
    backgroundSize Устанавливает или возвращает размер фонового изображения 3
    backfaceVisibility Устанавливает или возвращает, должен ли элемент быть видимым, если он не обращен к экрану 3
    border Устанавливает или возвращает borderWidth, borderStyle и borderColor в одном объявлении 1
    borderBottom Устанавливает или возвращает все свойства borderBottom в одном объявлении 1
    borderBottomColor Устанавливает или возвращает цвет нижней границы 1
    borderBottomLeftRadius Устанавливает или возвращает форму границы нижнего левого угла 3
    borderBottomRightRadius Устанавливает или возвращает форму границы нижнего правого угла 3
    borderBottomStyle Устанавливает или возвращает стиль нижней границы 1
    borderBottomWidth Устанавливает или возвращает ширину нижней границы 1
    borderCollapse Устанавливает или возвращает, должна ли граница таблицы быть свернута в одну границу или нет 2
    borderColor Устанавливает или возвращает цвет границы элемента (может иметь до четырех значений) 1
    borderImage Стеновое свойство для установки или возврата всех свойств borderImage 3
    borderImageOutset Устанавливает или возвращает величину, на которую область изображения границы выходит за пределы поля 3
    borderImageRepeat Устанавливает или возвращает, следует ли повторять, округлять или растягивать границу изображения 3
    borderImageSlice Устанавливает или возвращает внутренние смещения границы изображения 3
    borderImageSource Устанавливает или возвращает изображение, которое будет использоваться в качестве границы 3
    borderImageWidth Устанавливает или возвращает ширину границы изображения 3
    borderLeft Устанавливает или возвращает все свойства borderLeft в одном объявлении 1
    borderLeftColor Устанавливает или возвращает цвет левой границы 1
    borderLeftStyle Устанавливает или возвращает стиль левой границы 1
    borderLeftWidth Устанавливает или возвращает ширину левой границы 1
    borderRadius Сокращенное свойство для установки или возврата радиусавсех четырех границ 3
    borderRight Устанавливает или возвращает все свойства borderRight в одном объявлении 1
    borderRightColor Устанавливает или возвращает цвет правой границы 1
    borderRightStyle Устанавливает или возвращает стиль правой границы 1
    borderRightWidth Устанавливает или возвращает ширину правой границы 1
    borderSpacing Устанавливает или возвращает пробел между ячейками в таблице 2
    borderStyle Устанавливает или возвращает стиль границы элемента (может иметь до четырех значений) 1
    borderTop Устанавливает или возвращает все свойства borderTop в одном объявлении 1
    borderTopColor Устанавливает или возвращает цвет верхней границы 1
    borderTopLeftRadius Устанавливает или возвращает форму границы верхнего левого угла 3
    borderTopRightRadius Устанавливает или возвращает форму границы верхнего правого угла 3
    borderTopStyle Устанавливает или возвращает стиль верхней границы 1
    borderTopWidth Устанавливает или возвращает ширину верхней границы 1
    borderWidth Устанавливает или возвращает ширину границы элемента (может иметь до четырех значений) 1
    bottom Устанавливает или возвращает нижнее положение позиционированного элемента 2
    boxDecorationBreak Устанавливает или возвращает поведение фона и границы элемента при разрыве страницы или для встроенных элементов при разрыве строки. 3
    boxShadow Прикрепляет к коробке одну или несколько отбрасываемых теней 3
    boxSizing Позволяет определить для определенных элементов способ размещения в определенной области 3
    captionSide Устанавливает или возвращает позицию заголовка таблицы 2
    clear Устанавливает или возвращает позицию элемента относительно плавающих объектов 1
    clip Устанавливает или возвращает часть видимого элемента 2
    color Устанавливает или возвращает цвет текста 1
    columnCount Устанавливает или возвращает количество столбцов, на которые элемент должен быть разделен 3
    columnFill Устанавливает или возвращает способ заполнения столбцов 3
    columnGap Устанавливает или возвращает промежуток между столбцами 3
    columnRule Стеновое свойство для установки или возврата всех свойств columnRule 3
    columnRuleColor Устанавливает или возвращает цвет линии-разделителя между столбцами 3
    columnRuleStyle Устанавливает или возвращает стиль линии-разделителя между столбцами 3
    columnRuleWidth Устанавливает или возвращает ширину линии-разделителя между столбцами 3
    columns Сокращенное свойство для установки или возврата columnWidth и columnCount 3
    columnSpan Устанавливает или возвращает, сколько столбцов должен занимать элемент 3
    columnWidth Устанавливает или возвращает ширину столбцов 3
    content Используется с: :before and :after псевдоэлементами, для вставки сгенерированного содержимого 2
    counterIncrement Увеличивает один или несколько счетчиков 2
    counterReset Создает или сбрасывает один или несколько счетчиков 2
    cursor Устанавливает или возвращает тип курсора для отображения указателя мыши 2
    direction Устанавливает или возвращает направление текста 2
    display Устанавливает или возвращает тип отображения элемента 1
    emptyCells Устанавливает или возвращает, показывать границу и фон пустых ячеек, или нет 2
    filter Устанавливает или возвращает фильтры изображений (визуальные эффекты, такие как размытие и насыщенность) 3
    flex Устанавливает или возвращает длину элемента относительно остальных 3
    flexBasis Устанавливает или возвращает начальную длину гибкого элемента 3
    flexDirection Устанавливает или возвращает направление гибких элементов 3
    flexFlow Сокращенное свойство свойств flexDirection и flexWrap 3
    flexGrow Устанавливает или возвращает, насколько элемент будет расти относительно остальных 3
    flexShrink Устанавливает или возвращает, как элемент будет уменьшаться относительно остальных 3
    flexWrap Устанавливает или возвращает, устанавливать ли свойство wrap для flex - элементов 3
    cssFloat Устанавливает или возвращает горизонтальное выравнивание элемента 1
    font Устанавливает или возвращает fontStyle, fontVariant, fontWeight, fontSize, lineHeight, and fontFamily в одном объявлении 1
    fontFamily Устанавливает или возвращаетсемейство шрифта 1
    fontSize Устанавливает или возвращает размер текста 1
    fontStyle Устанавливает или возвращает стиль шрифта 1
    fontVariant Устанавливает или возвращает модификацию шрифта 1
    fontWeight Устанавливает или возвращает толщину линии шрифта 1
    fontSizeAdjust Preserves the readability of text when font fallback occurs 3
    fontStretch Выбирает нормальное, сжатое или расширенное написание из семейства шрифтов 3
    hangingPunctuation Указывает, может ли знак пунктуации быть помещен вне блока строки 3
    height Устанавливает или возвращает высоту элемента 1
    hyphens Устанавливает, как разделять слова для улучшения макета абзацев 3
    icon Предоставляет автору возможность стилизовать элемент под иконку 3
    imageOrientation Определяет поворот вправо или в направлении по часовой стрелке, который браузер применяет к изображению 3
    justifyContent Устанавливает или возвращает выравнивание между элементами внутри гибкого контейнера, когда элементы не используют все доступное пространство 3
    left Устанавливает или возвращает левую позицию позиционируемого элемента 2
    letterSpacing Устанавливает или возвращает пробел между символами в тексте 1
    lineHeight Устанавливает или возвращает расстояние между строками в тексте 1
    listStyle Устанавливает или возвращает listStyleImage, listStylePosition и listStyleType в одном объявлении 1
    listStyleImage Устанавливает или возвращает изображение для маркера элемента списка 1
    listStylePosition Устанавливает или возвращает позицию для маркера элемента списка 1
    listStyleType Устанавливает или возвращает типмаркера списка 1
    margin Устанавливает или возвращает внешние отступы элемента (может иметь до четырех значений) 1
    marginBottom Устанавливает или возвращает нижний отступ элемента 1
    marginLeft Устанавливает или возвращает левый отступ элемента 1
    marginRight Устанавливает или возвращает правый отступ элемента 1
    marginTop Устанавливает или возвращает верхний отступ элемента 1
    maxHeight Устанавливает или возвращает максимальную высоту элемента 2
    maxWidth Устанавливает или возвращает максимальную ширину элемента 2
    minHeight Устанавливает или возвращает минимальную высоту элемента 2
    minWidth Устанавливает или возвращает минимальную ширину элемента 2
    navDown Устанавливает или возвращает, куда следует перемещаться при использовании клавиши со стрелкой вниз 3
    navIndex Устанавливает или возвращает порядок табуляции для элемента 3
    navLeft Устанавливает или возвращает, куда следует перемещаться при использовании клавиши навигации со стрелкой влево 3
    navRight Устанавливает или возвращает, куда следует перемещаться при использовании клавиши навигации со стрелкой вправо 3
    navUp Устанавливает или возвращает туда, куда следует перемещаться при использовании клавиши навигации со стрелкой 3
    opacity Устанавливает или возвращает уровень непрозрачности для элемента 3
    order Устанавливает или возвращает порядок гибкого элемента относительно остальных 3
    orphans Устанавливает или возвращает минимальное количество строк для элемента, который должен быть оставлен в нижней части страницы, когда разрыв страницы происходит внутри элемента 2
    outline Устанавливает или возвращает все свойства обводки (контура) в одном объявлении 2
    outlineColor Устанавливает или возвращает цвет контура вокруг элемента 2
    outlineOffset Смещает контур и вытягивает его за пределы края 3
    outlineStyle Устанавливает или возвращает стиль контура вокруг элемента 2
    outlineWidth Устанавливает или возвращает ширину контура вокруг элемента 2
    overflow Устанавливает или возвращает, что делать с содержимым, которое отображается вне поля элемента 2
    overflowX Указывает, что делать с левыми / правыми краями содержимого, если он переполняет область содержимого элемента 3
    overflowY Указывает, что делать с верхними / нижними краями содержимого, если оно переполняет область содержимого элемента 3
    padding Устанавливает или возвращает внутренние отступы элемента (может иметь до четырех значений) 1
    paddingBottom нижний отступ 1
    paddingLeft левый отступ 1
    paddingRight правый отступ 1
    paddingTop верхний отступ 1
    pageBreakAfter Устанавливает или возвращает поведение разрыва страницы после элемента 2
    pageBreakBefore Устанавливает или возвращает поведение разрыва страницы до элемента 2
    pageBreakInside Устанавливает или возвращает поведение разрыва страницы внутри элемента 2
    perspective Устанавливает или возвращает перспективу просмотра 3D-элементов 3
    perspectiveOrigin Устанавливает или возвращает нижнюю позицию трехмерных элементов 3
    position Устанавливает или возвращает тип метода позиционирования, используемый для элемента (статический, относительный, абсолютный или фиксированный) 2
    quotes Устанавливает или возвращает тип кавычек для встроенных котировок 2
    resize Устанавливает или возвращает, может ли пользователь изменять размер элемента 3
    right Устанавливает или возвращает правое положение позиционируемого элемента 2
    tableLayout Устанавливает или возвращает способ компоновки ячеек, строк и столбцов таблицы 2
    tabSize Устанавливает или возвращает длину (колич пробелов) символа табуляции 3
    textAlign Устанавливает или возвращает горизонтальное выравнивание текста 1
    textAlignLast Устанавливает или возвращает, как последняя строка блока или строка прямо перед выравниванием принудительной строки выравнивается, когда выравнивание текста - "justify" 3
    textDecoration Устанавливает или возвращает оформление текста 1
    textDecorationColor Устанавливает или возвращает цвет оформления текста 3
    textDecorationLine Устанавливает или возвращает тип строки в текстовом оформлении 3
    textDecorationStyle Устанавливает или возвращает стиль линии для оформления текста 3
    textIndent Устанавливает или возвращает отступ первой строки текста 1
    textJustify Устанавливает или возвращает метод выравнивания, используемый, когда text-align установлено "justify" 3
    textOverflow Устанавливает или возвращает то, что должно произойти, когда текст переполняет содержащий элемент 3
    textShadow Устанавливает или возвращает теневой эффект текста 3
    textTransform Устанавливает или возвращает капитализацию текста 1
    top Устанавливает или возвращает верхнее положение позиционированного элемента 2
    transform Применяет преобразование 2D или 3D к элементу 3
    transformOrigin Устанавливает или возвращает позицию преобразованных элементов 3
    transformStyle Устанавливает или возвращает способ отображения вложенных элементов в 3D-пространстве 3
    transition Стеновое свойство для установки или возврата четырех свойств перехода (transition) 3
    transitionProperty Устанавливает или возвращает свойство CSS, для которого применяется эффект перехода 3
    transitionDuration Устанавливает или возвращает количество секунд или миллисекунд, которое требуется для перехода 3
    transitionTimingFunction Устанавливает или возвращает кривую скорости эффекта перехода 3
    transitionDelay Устанавливает или возвращает, когда эффект перехода начнется 3
    unicodeBidi Устанавливает или возвращает, должен ли текст переопределяться для поддержки нескольких языков в одном документе 2
    verticalAlign Устанавливает или возвращает вертикальное выравнивание содержимого в элементе 1
    visibility Устанавливает или возвращает, должен ли элемент быть видимым 2
    whiteSpace Устанавливает или возвращает способ обработки вкладок, разрывов строк и пробелов в тексте 1
    width Устанавливает или возвращает ширину элемента 1
    wordBreak Устанавливает или возвращает правила нарушения строки для не-CJK-скриптов 3
    wordSpacing Устанавливает или возвращает расстояние между словами в тексте 1
    wordWrap Позволяет разбивать длинные, неразделяемые слова и перенести на следующую строку 3
    widows Устанавливает или возвращает минимальное количество строк для элемента, который должен быть видимым в верхней части страницы 2
    zIndex Устанавливает или возвращает порядок по вертикали позиционированного элемента 2

     

    Объект styleSheet (CSSStyleSheet)

    Объект «StyleSheet» позволяет просматривать листы стилей документа, добавлять или удалять правила в одном из них.

    Получить перечень листов стилей для документа

    var styleSheetList = document.styleSheets;

    Добавить элемент STYLE - создать из него новый объект CSSStyleSheet

    document.createElement('style'); css1.type = 'text/css'; css1.innerText = 'body { background: #FEE; } '; document.head.appendChild(css1);

    Добавить элемент LINK - добавить из файла стили и на этой базесоздать новый объект CSSStyleSheet

    var s = document.createElement('link'); s.type = 'text/css'; s.rel = 'stylesheet'; s.href = 'file.css'; document.head.appendChild(s); var myCSSStyleSheetObj = Object.create(document.styleSheets[0])

     

    Свойства

    Свойство Описание 
    cssRules[] Возвращает массив, содержащий все правила CSS таблицы
    cssText Свойство Read / Write, содержащее все содержимое таблицы стилей.
    disabled Свойство Read / write, которое указывает, отключена ли таблица стилей или нет. Значение по умолчанию - false.
    href Свойство «Read/write», которое содержит URL-адрес листа стилей
    media Указывает устройство для таблицы стилей. Значение по умолчанию - «экран».
    ownerNode Ссылки на узел дерева документов, который содержит текущую таблицу стилей. Для обычных HTML-страниц ownerNode обычно возвращает элемент LINK или STYLE в таблице стилей.
    ownerRule Для таблиц стилей, которые определяются с помощью правила @import, возвращается объект CSSImportRule.
    owningElement Ссылки на узел дерева документов, который содержит текущую таблицу стилей. IE только свойство. В NS6 + / Firefox эквивалент «ownerNode».
    parentStyleSheet Для таблиц стилей, которые включены на странице с помощью правила @page, @import родительский стиль StyleSheet ссылается на таблицу стилей верхнего уровня. Для стандартных таблиц стилей LINK или STYLE это свойство возвращает null.
    rules[] Возвращает массив, содержащий все правила CSS таблицы стилей. IE только. В NS6 + / Firefox вместо этого используется cssRules []. С помощью правил [] можно добавлять, удалять или изменять существующие правила в таблице стилей.
    title Возвращает значение атрибута title таблицы стилей, если оно определено.
    type Возвращает значение атрибута type таблицы стилей.

    Методы

    Метод Описание
    addRule(selector, declaration, [index]) Метод для IE? который добавляет новое правило в styleSheet/ Параметр selector - селектор правила ("p", "div b"), declaration - набор свойств правила ("background-color: yellow; color: brown"). Необязательный параметр - "index" позволяет указать позицию нового правила в таблице стилей.
    removeRule([index]) Метод, который удаляет первое правило таблицы стилей. Необязательный индекс (целое число) позволяет удалить определенное правило на основе его позиции в коллекции правил [].
    deleteRule(index) Удаляет правило из таблицы стилей, основываясь на его позиции в коллекции cssRules []. Параметр «index» (integer) используется, чтобы указать эту позицию.
    insertRule(rule, index) Вставляет новое правило в таблицу стилей, где параметр «rule» - это строка, содержащая все добавляемое правило (например: #myid {color: red; border: 1px solid black}) и «index» - целое число, определяющее положение внутри cssRules [].

    Объект CSS Rules

    Свойство Описание
    cssText Возвращает содержимое правила css целиком, от селектора до соответствующих объявлений CSS. Полезное свойство для простого поиска внутри правила, позволяющее увидеть как селектор, так и все сразу правила.
    length Возвращает длину объекта CSS Rule (cssRules.length или rules.length), другими словами, количество правил в таблице стилей.
    parentStyleSheet Возвращает объект styleSheet, который содержит текущее правило.
    selectorText Возвращает часть правила - селектор.
    style Даёт доступ для чтения-записи к отдельным атрибутам, заданным в правиле. Аналогично inline объекту "style" элемента DOM.

     

     

  • Объект DOM - Элемент

    Этот объект порождается каждым HTML тэгом документа, таким образос каждый элемент (узел) дерева DOM  наследует все его свойства и методы.

    Далее имеется в виду, что node (узел в дереве объектов DOM) может быть типа: element (узел типа: HTML элемент ), text node (узел типа: текст), attribute node (узел типа: атрибут элемента).

    Свойства и методы

    Свойство / Метод Описание
    accessKey Задаёт или возвращает accesskey атрибут элемента
    addEventListener() Добавляет к элементу обработчик событий
    appendChild() Добавляет новый дочерний узел к эдементу дерева DOM , после всех существующих дочерних элементов
    attributes Возвращает список атрибутов элемента
    blur() Уводит фокус с элемента
    childElementCount Возвращает количество дочерних элементов
    childNodes Возвращает коллекцию дочерних элементов, включая тексты(text nodes) и комментарии
    children Возвращает коллекцию дочерних элементов, не включая тексты(text nodes) и комментарии
    classList Возвращает список классов элемента
    className Задаёт или возвращает значение атрибута class 
    click() Симулирует событие mouse-click для элемента
    clientHeight Возвращает высоту элемента, включая отступы
    clientLeft Возвращает ширину левой границы элемента
    clientTop Возвращает ширину верхней границы элемента
    clientWidth Возвращает ширину элемента, включая отступы
    cloneNode() Клонирует элемент
    compareDocumentPosition() Сравнивает позицию элемента с позицией другого
    contains() Возвращает true , если данный узел - родитель узла - аргумента (содержит его), иначе - e false
    contentEditable Делает элемент релактируемым
    dir Задаёт иои возвращает значение атрибута dir
    firstChild Возврашает первый дочерний узел элемента
    firstElementChild Возврашает первый дочерний элемент
    focus() Перемщает фокус на элемент
    getAttribute() Возвращает указанное значение атрибута узла элемента
    getAttributeNode() Возвращает указанный узел атрибута
    getElementsByClassName() Возвращает коллекцию всех дочерних элементов с указанным именем класса
    getElementsByTagName() Возвращает коллекцию всех дочерних элементов с указанным именем тега
    getFeature()  
    hasAttribute() Возвращает true, если элемент имеет указанный атрибут, иначе false
    hasAttributes() Возвращает true, если элемент имеет какие-либо атрибуты, иначе false
    hasChildNodes() Возвращает true, если элемент имеет какие-либо дочерние узлы, иначе false
    id Устанавливает или возвращает значение атрибута id элемента
    innerHTML Устанавливает или возвращает содержимое элемента
    insertBefore() Вставляет новый дочерний узел перед указанным, существующим дочерним узлом
    isContentEditable Возвращает true, если содержимое элемента редактируемое, иначе false
    isDefaultNamespace() Возвращает true, если указанное namespaceURI является значением по умолчанию, иначе false
    isEqualNode() Проверяет, идентичны ли два элемента
    isSameNode()  
    isSupported() Возвращает true, если указанная функция поддерживается элементом
    lang Устанавливает или возвращает значение атрибута lang элемента
    lastChild Возвращает последний дочерний узел элемента
    lastElementChild Возвращает последний дочерний элемент элемента
    namespaceURI Возвращает URI пространства имен элемента
    nextSibling Возвращает следующий узел на том же уровне дерева узлов
    nextElementSibling Возвращает следующий элемент на том же уровне дерева узлов
    nodeName Возвращает имя узла
    nodeType Возвращает тип узла узла
    nodeValue Устанавливает или возвращает значение узла
    normalize() Соединяет смежные текстовые узлы и удаляет пустые текстовые узлы в элементе
    offsetHeight Возвращает высоту элемента, включая внутренние отступы, границу и полосу прокрутки
    offsetWidth Возвращает ширину элемента, включая прописку, границу и полосу прокрутки
    offsetLeft Возвращает позицию горизонтального смещения элемента
    offsetParent Возвращает смещение родительского элемента
    offsetTop Возвращает координату вертикального смещения элемента
    ownerDocument Возвращает корневой элемент (объект document) для элемента
    parentNode Возвращает родительский узел элемента
    parentElement Возвращает родительский узел типа элемент для элемента
    previousSibling Returns the previous node at the same node tree level
    previousElementSibling Возвращает предыдущий узел на том же уровне дерева узлов
    querySelector() Возвращает первый дочерний элемент, который соответствует указанному CSS-селектору  элемента
    querySelectorAll() Возвращает все дочерние элементы, которые соответствуют указанному CSS-селектору  элемента
    removeAttribute() Удаляет указанный атрибут из элемента
    removeAttributeNode() Удаляет указанный узел атрибута и возвращает удаленный узел
    removeChild() Удаляет дочерний узел из элемента
    replaceChild() Заменяет дочерний узел в элементе
    removeEventListener() Удаляет обработчик событий, который был присоединен с помощью метода addEventListener ()
    scrollHeight Возвращает всю высоту элемента, включая отступы
    scrollLeft Устанавливает или возвращает количество пикселей, на которое содержимое элемента прокручивается по горизонтали
    scrollTop Устанавливает или возвращает количество пикселей, на которое элемент содержимого прокручивается по вертикали
    scrollWidth Возвращает всю ширину элемента, включая отступы
    setAttribute() Устанавливает или изменяет указанный атрибут на указанное значение
    setAttributeNode() Устанавливает или изменяет указанный узел атрибута
    style Устанавливает или возвращает значение атрибута style элемента
    tabIndex Устанавливает или возвращает значение атрибута tabindex элемента
    tagName Возвращает имя тега элемента
    textContent Устанавливает или возвращает текстовое содержимое узла и его потомков
    title Устанавливает или возвращает значение атрибута title элемента
    toString() Преобразует элемент в строку
       
    nodelist.item() Возвращает узел по указанному индексу в NodeList
    nodelist.length Возвращает количество узлов в NodeList

     

    Пример:

    (распечатать все свойства объекта ELEMENT )

    <html>

    <head>

    <script>

    function myFunction() {

    var outString = "<h3>All element properties:</h3>"

    myObj = document.getElementById("demo");

    // loop - all obbject properties

    outString += "<table width='30%' border='1'><tr><th>N</th><th>Свойство </th><th>Значение</th></tr>";

    i = 0;

    for(let key in myObj){

    outString += "<tr> <td>" + i++ + "</td>" + "<td>" + key + "</td>" + "<td>" + myObj[key] + "</td></tr>";

    }

    outString += "</table>";

    document.getElementById("demo").innerHTML = outString;

    }

    </script>

    </head>

    <body>

    <button onclick="myFunction()">Получить свойства</button>

    <br>

    <DIV id="demo"></DIV>

    <br>

    <button onclick="document.getElementById('demo').innerHTML = ''">Очистить DIV</button>

    </body>

    </html>

     

    Основные ипы узлов DOM (node type)

     

    Константа - тип узла Значение Описание
    Node.ELEMENT_NODE 1 Узел типа element 
    Node.TEXT_NODE 3 Узел типа текст
    Node.COMMENT_NODE 8 Узел типа comment
    Node.DOCUMENT_NODE 9 Узел типа: document
    Node.DOCUMENT_TYPE_NODE 10 Узел типа  DocumentType 
     <!DOCTYPE html> для  HTML5 документов

     

     

     
  • Обект - Window*

    Property Description
    closed Returns a Boolean value indicating whether a window has been closed or not
    defaultStatus Sets or returns the default text in the statusbar of a window
    document Returns the Document object for the window (See Document object)
    frameElement Returns the <iframe> element in which the current window is inserted
    frames Returns all <iframe> elements in the current window
    history Returns the History object for the window (See History object)
    innerHeight Returns the inner height of a window's content area
    innerWidth Returns the inner width of a window's content area
    length Returns the number of <iframe> elements in the current window
    localStorage Returns a reference to the local storage object used to store data. Stores data with no expiration date
    location Returns the Location object for the window (See Location object)
    name Sets or returns the name of a window
    navigator Returns the Navigator object for the window (See Navigator object)
    opener Returns a reference to the window that created the window
    outerHeight Returns the outer height of a window, including toolbars/scrollbars
    outerWidth Returns the outer width of a window, including toolbars/scrollbars
    pageXOffset Returns the pixels the current document has been scrolled (horizontally) from the upper left corner of the window
    pageYOffset Returns the pixels the current document has been scrolled (vertically) from the upper left corner of the window
    parent Returns the parent window of the current window
    screen Returns the Screen object for the window (See Screen object)
    screenLeft Returns the horizontal coordinate of the window relative to the screen
    screenTop Returns the vertical coordinate of the window relative to the screen
    screenX Returns the horizontal coordinate of the window relative to the screen
    screenY Returns the vertical coordinate of the window relative to the screen
    sessionStorage Returns a reference to the local storage object used to store data. Stores data for one session (lost when the browser tab is closed)
    scrollX An alias of pageXOffset
    scrollY An alias of pageYOffset
    self Returns the current window
    status Sets or returns the text in the statusbar of a window
    top Returns the topmost browser window

    Window Object Methods

    Method Description
    alert() Displays an alert box with a message and an OK button
    atob() Decodes a base-64 encoded string
    blur() Removes focus from the current window
    btoa() Encodes a string in base-64
    clearInterval() Clears a timer set with setInterval()
    clearTimeout() Clears a timer set with setTimeout()
    close() Closes the current window
    confirm() Displays a dialog box with a message and an OK and a Cancel button
    focus() Sets focus to the current window
    getComputedStyle() Gets the current computed CSS styles applied to an element
    getSelection() Returns a Selection object representing the range of text selected by the user
    matchMedia() Returns a MediaQueryList object representing the specified CSS media query string
    moveBy() Moves a window relative to its current position
    moveTo() Moves a window to the specified position
    open() Opens a new browser window
    print() Prints the content of the current window
    prompt() Displays a dialog box that prompts the visitor for input
    resizeBy() Resizes the window by the specified pixels
    resizeTo() Resizes the window to the specified width and height
    scroll() Deprecated. This method has been replaced by the scrollTo() method.
    scrollBy() Scrolls the document by the specified number of pixels
    scrollTo() Scrolls the document to the specified coordinates
    setInterval() Calls a function or evaluates an expression at specified intervals (in milliseconds)
    setTimeout() Calls a function or evaluates an expression after a specified number of milliseconds
    stop() Stops the window from loading

     

    Записаться на курс

     

    * По материалам сайта www.w3schools.com

     

     

     

  • Объект  DOM - document

     

    Свойство / Метод Описание
    document.activeElement Возвращает текущий сфокусированный элемент в документе
    document.addEventListener() Прикрепляет обработчик события к документу
    document.adoptNode() Принимает узел из другого документа
    document.anchors Возвращает коллекцию всех <a> элементов в документе с атрибутом  name 
    document.applets Возвращает коллекцию всех элементов <applet> в документе
    document.baseURI Возвращает абсолютный базовый URI документа
    document.body Устанавливает или возвращает тело документа (элемент <body>)
    document.close() Закрывает выходной поток, ранее открытый с помощью document.open ()
    document.cookie Возвращает все пары файлов cookie имя-значение в документе
    document.createAttribute() Создает узел атрибута - attribute node
    document.createComment() Создает узел типа Comment 
    document.createDocumentFragment() Создает чистый узел типа DocumentFragment node
    document.createElement() Создает узел типа: Element node
    document.createTextNode() Создает узел типа: Text node
    document.doctype Возвращает декларацию типа документа, связанную с документом
    document.documentElement Возвращает элемент типа Document (элемент <html>) 
    document.documentMode Возвращает режим, используемый браузером для рендеринга документа
    document.documentURI возвращает URI документа
    document.domain Возвращает доменное имя сервера, который загрузил документ
       
    document.embeds Возвращает коллекцию всех <embed> элементов документа
    document.forms Возвращает коллекцию всех элементов <form> в документе
    document.getElementById() Возвращает элемент с атрибутом ID с указанным значением
    document.getElementsByClassName() Возвращает NodeList, содержащий все элементы с указанным именем класса
    document.getElementsByName() Возвращает NodeList, содержащий все элементы с указанным именем
    document.getElementsByTagName() Возвращает NodeList, содержащий все элементы с указанным именем тега
    document.hasFocus() Возвращает логическое значение (true - false), указывающее, имеет ли документ фокус
    document.head Возвращает элемент <head> документа
    document.images Возвращает коллекцию всех элементов <img> в документе
    document.implementation Возвращает объект DOMImplementation, который обрабатывает этот документ
    document.importNode() Импортирует узел из другого документа
    document.inputEncoding Возвращает кодировку, набор символов, используемый для документа
    document.lastModified Возвращает дату и время последнего изменения документа.
    document.links Возвращает коллекцию всех элементов <a> и <area> в документе с атрибутом href
    document.normalize() Удаляет пустые текстовые узлы и соединяет соседние узлы
    document.normalizeDocument() Удаляет пустые текстовые узлы и соединяет соседние узлы
    document.open() Открывает выходной поток HTML для сбора вывода из документа document.write () 
    document.querySelector() Возвращает первый элемент, который соответствует указанному селектору (ам ) CSS в документе
    document.querySelectorAll() Возвращает статический NodeList, содержащий все элементы, которые соответствуют указанному селектору (ам) CSS в документе
    document.readyState Возвращает (loading) статус загрузки документа
    document.referrer Возвращает URL-адрес документа, который загружал текущий документ
    document.removeEventListener() Удаляет обработчик событий из документа (который был присоединен с помощью метода addEventListener ())
    document.renameNode() Переименовывает указанный узел
    document.scripts Возвращает коллекцию элементов <script> в документе
    document.strictErrorChecking Устанавливает или возвращает, выполняется ли проверка ошибок или нет
    document.title Устанавливает или возвращает заголовок документа
    document.URL Возвращает полный URL-адрес документа HTML
    document.write() Записывает HTML-выражения или код JavaScript в документ
    document.writeln() То же, что и write (), но добавляет символ новой строки после каждого предложения