У каждого элемента есть свое значение которое
Перейти к содержимому

У каждого элемента есть свое значение которое

  • автор:

Справочная информация по HTML атрибутам

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

Список атрибутов

Имя атрибута Элементы Описание
hidden Глобальный атрибут Предотвращает генерирование данного элемента, в то время как сохраняет дочерние элементы, например, элементы script, active.
high Указывает нижнюю границу верхнего диапазона.
href , , ,

URL связанного ресурса.
hreflang , ,

Указывает язык связанного ресурса.
http-equiv
icon Указывает картинку, которая будет представлять команду.
id Глобальный атрибут Часто используется с CSS для стилизации заданного элемента. Значение атрибута должно быть уникальным.
ismap Показывает, что изображение часть серверной карты изображений.
itemprop Глобальный атрибут
kind Указывает вид дорожки текста.
label Указывает читабельный заголовок дорожки текста.
lang Глобальный атрибут Определяет язык для используемого элемента.
language Определяет язык скрипта, используемый в элементе.
list Задаёт список предустановленных опций для предложения пользователю.
loop , , ,

Указывает, следует ли медиа элементам начинать проигрывание сначала, после их завершения.
low Указывает верхнюю границу нижнего диапазона.
manifest Задаёт URL кешированного манифеста документа.
max , ,

Указывает максимальное допустимое значение.
maxlength ,

Определяет максимальное количество символов, допустимых в элементе.
media , , , ,

Задаёт подсказку медиа, для которой, связанный ресурс был спроектирован.
method Определяет, какой HTTP метод использовать, когда отправляются данные формы. Может быть GET (по умолчанию) или POST.
min ,

Показывает минимальное допустимое значение.
multiple ,

Показывает могут ли быть выбраны множественные значения в input типа email или file.
name , , , , , , , , , , ,

Имя элемента. К примеру, используется сервером для определения полей отправленной формы.
novalidate Этот атрибут указывает, что форма не должна проверяться, когда передаётся на сервер.
open Указывает, отображать ли детали при загрузки страницы.
optimum Указывает оптимальное числовое значение.
pattern Определяет регулярное выражение, которое будет проверять входные данные элемента.
ping ,
placeholder ,

Предоставляет подсказку пользователю, касательно того, что можно ввести в поле.
poster URL указывающий блок постера для показа, пока пользователь играет или ищет.
preload ,

Указывает загружать ли ресурс целиком, его часть или не загружать вовсе.
pubdate Указывает, что эта дата и время являются ли датой ближайшего элемента предка .
radiogroup
readonly ,

Указывает, можно ли редактировать элемент.
rel , ,

Задаёт отношение целевого объекта к объекту ссылки.
required , ,

Указывает, необходимо ли заполнять этот элемент или нет.
reversed Указывает, отображать ли список по убыванию, вместо того, чтобы показывать его по возрастанию.
rows Определяет количество строк в textarea.
rowspan ,

Определяет количество строк ячейки таблицы, которые следует охватывать.
sandbox
spellcheck Глобальный атрибут Указывает, разрешена ли проверка правописания для этого элемента.
scope
scoped
seamless
selected Определяет значение, которое будет выделено при загрузки страницы.
shape ,
size ,

Определяет ширину элемента (в пикселях). Если у элемента значение атрибута type — text или password , тогда это количество символов.
sizes
span ,
src , , , , , , , ,

URL встраиваемого содержимого.
srcdoc
srclang
srcset
start Определяет первый номер, если это не 1.
step
style Глобальный атрибут Определяет CSS стили, которые перепишут установленные ранее стили.
summary
tabindex Глобальный атрибут Переписывает порядок Tab по умолчанию браузера и следует вместо него заданному.
target , , ,
title Глобальный атрибут Текст, который будет отображаться в всплывающей подсказке, когда на него наведут указатель.
type , , , , , , , ,

Определяет тип элемента.
usemap , ,
value , , , , , ,

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

Примечание: в некоторых случаях, таких как , это устаревший атрибут, в этом случае используйте свойство CSS width вместо него. В других случаях, таких как , ширина должна быть задана этим атрибутом.
wrap Указывает, следует ли переносить текст.
border , ,

Ширина границы.Примечание: это устаревший атрибут, используйте свойство CSS border .
buffered ,

Содержит отрезок времени уже буферизованного медиа.
charset ,

Определяет кодировку страницы или скрипта.
checked ,

Указывает, следует ли отметить элемент при загрузки страницы.
cite , , ,

Содержит URI, который указывает на источник цитаты или изменения.
class Глобальный атрибут Часто используется вместе с CSS, чтобы стилизовать элементы с общими свойствами.
code Указывает URL файла класса аплета для загрузки и выполнения.
codebase Этот атрибут предоставляет абсолютный или относительный URL директории, файлы аплета .class, на которые ссылаются в хранимом атрибуте кода.
color , ,

Этот атрибут устанавливает цвет текста, используя либо название цвета, либо шестнадцатеричный формат #RRGGBB.Примечание: это устаревший атрибут. Используйте CSS-свойство color .
cols Определяет количество столбцов в textarea.
colspan ,

Определяет диапазон количества столбцов ячейки.
content Значение, ассоциированное с http-equiv или name зависит от контекста.
contenteditable Глобальный атрибут Указывает, редактируется ли содержимое элемента.
contextmenu Глобальный атрибут Определяет ID элемента который послужит, как контекстное меню элемента.
controls ,

Указывает, следует ли отображать пользователю кнопки воспроизведения.
coords Набор значений, задающий координаты области для активного участка.
data Задаёт URL ресурса.
data-* Глобальный атрибут Позволяет прикрепить произвольные атрибуты для HTML-элемента.
datetime , ,

Указывает дату и время, ассоциированное с элементом.
default Указывает, что дорожка должна быть доступна, если пользовательские настройки не говорят об обратном.
defer Указывает, что скрипт должен быть запущен, после того как страница будет проанализирована.
dir Глобальный атрибут Определяет направление текста. Допустимые значения ltr (Слева направо) или rtl (Справа налево).
dirname ,
disabled , , , , , , ,

Указывает, может ли пользователь взаимодействовать с элементом.
download ,

Указывает, что ссылка используется для загрузки.
draggable Глобальный атрибут Определяет, можно ли перетаскивать элемент.
dropzone Глобальный атрибут Указывает, что элемент принимает содержимое элемента, которое перетаскивают на него.
enctype Определяет тип содержимого для данных формы, когда method — POST.
for ,

Описывает элементы, которые принадлежат им.
form , , , , , , , , ,

Указывает форму, которая является владельцем элемента.
formaction ,

Указывает действие элемента, перезаписывающее действие, указанное в форме .
headers ,

ID элементов

, которые применяются к этому элементу.
height , , , , , ,

Примечание: в некоторых экземплярах, таких как , это устаревший атрибут, в этом случае используйте свойство CSS height . В других экземплярах, таких как , высота должна быть задана этим атрибутом.
accept ,

Список типов, которые принимает сервер, обычно тип файла.
accept-charset Список поддерживаемых наборов символов.
accesskey Глобальный атрибут Определяет клавишную комбинацию для активизации или добавления фокуса к элементу.
action URI адрес программы, которая обработает данные, переданные через форму.
align , , , , , , , , , , , , ,

Задаёт горизонтальное выравнивание элемента.
alt , , ,

Альтернативный текст, в случае, если изображение не может быть отображено.
async Указывает, что скрипт должен быть выполнен асинхронно.
autocomplete ,

Показывает, могут ли управляющие элементы в форме по умолчанию иметь собственные значения для автодополнения в форме.
autofocus , , ,

На этом элементе следует автоматически сфокусироваться после загрузки страницы.
autoplay ,

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

Цвет фона элемента.Примечание: это устаревший атрибут. Используйте свойство CSS background-color .

Содержимое в сравнении с IDL атрибутами

В HTML, большинство атрибутов имеют две грани: атрибут содержимого и IDL атрибут.

Атрибут содержимого — это атрибут как вы его устанавливаете из содержимого (HTML-код), и его можно устанавливать или получать с помощью element.setAttribute() или element.getAttribute() . Атрибут содержимого всегда строка, даже когда ожидаемое значение должно быть число. Например, для того чтобы установить maxlength элемента в 42 используя атрибут содержимого, вам нужно вызвать setAttribute(«maxlength», «42») на этом элементе.

IDL-атрибут также известен как свойство JavaScript. Это атрибуты, которые вы можете читать или устанавливать используя JavaScript-свойства наподобие element.foo . IDL-атрибут всегда собирается использовать (но может преобразовать) основной атрибут содержимого для возврата, когда вы получаете его и сохраняет в атрибут содержимого, когда вы устанавливаете его. Другими словами, IDL-атрибуты, в сущности, отражают атрибуты содержимого.

IDL-атрибуты не всегда строки; например, input.maxlength число (long со знаком). Когда используете IDL атрибуты, вы читаете или устанавливаете значения желаемого типа, поэтому input.maxlength всегда намеревается вернуть число и когда вы устанавливаете input.maxlength , это требует число. Если вы передадите другой тип, это автоматически конвертируется в число, по стандартным правилам преобразования типов в JavaScript.

IDL атрибуты могут отображать другие типы такие как unsigned long, URLs, booleans, и т.д. К несчастью нет ясных правил и способа, чтобы IDL атрибуты работали в связке с их соответствующими атрибутами содержимого в зависимости от атрибута. Большую часть времени, будет следовать правилам из спецификации, но иногда нет. HTML спецификации пытаются сделать это как можно дружелюбнее для разработчиков, но по различным причинам (по большинству историческим), некоторые атрибуты работают странно ( select.size , например) и вам следует прочитать спецификацию для точного понимания того, как они работают.

Гайд по flexbox

Всё, что нужно знать про флексбоксы: основные термины, свойства флекс-контейнера и флекс-элементов, полезные ссылки по теме.

Время чтения: 12 мин

Открыть/закрыть навигацию по статье

  1. Что это?
  2. Основные термины
  3. Свойства флекс-контейнера
    1. display
    2. flex-direction
    3. flex-wrap
    4. flex-flow
    5. justify-content
    6. align-items
    7. align-content
    8. gap
    1. order
    2. flex-grow
    3. flex-shrink
    4. flex-basis
    5. flex
    6. align-self
    7. Ссылки
    1. Андрей Захаров советует
    2. Егор Левченко советует
    3. Алёна Батицкая советует
    1. Когда нужно использовать flexbox, а когда grid? Бывают ли исключения?

    Контрибьюторы:

    • Егор Левченко ,
    • Светлана Коробцева ,
    • Дмитрий Приходько ,
    • Дима Шелков

    Обновлено 12 апреля 2024

    Что это?

    Скопировать ссылку «Что это?» Скопировано

    Долгое время веб-интерфейсы были статичными — сайты разрабатывались и просматривались только на экранах мониторов стационарных компьютеров. Однако с десяток лет назад, совсем недавно по историческим меркам, у нас появилось огромное разнообразие экранов — от мобильных телефонов до телевизоров, — на которых мы можем взаимодействовать с сайтами. Так родилась необходимость в гибких системах раскладки.

    Идея флексбоксов появилась ещё в 2009 году, и этот стандарт до сих пор развивается и прорабатывается. Основная идея флексов — гибкое распределение места между элементами, гибкая расстановка, выравнивание, гибкое управление. Ключевое слово — гибкое, что и отражено в названии (flex — англ. гибко).

    Основные термины

    Скопировать ссылку «Основные термины» Скопировано

    • Флекс-контейнер: элемент, к которому применяется свойство display : flex . Вложенные в него элементы подчиняются правилам раскладки флексов.
    • Флекс-элемент: элемент, вложенный во флекс-контейнер.

    Пример флекс-контейнера и вложенных в него флекс-элементов

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

    Наглядный вид основной оси и поперечной оси

    • Начало / конец основной оси: точки в начале и в конце основной оси соответственно. Это пригодится нам для выравнивания флекс-элементов.
    • Начало / конец поперечной оси: точки в начале и в конце поперечной оси соответственно.

    Наглядный вид начала/конца основной оси и начала/конца поперечной оси

    • Размер по основной оси (основной размер): размер флекс-элемента вдоль основной оси. Это может быть ширина или высота в зависимости от направления основной оси.
    • Размер по поперечной оси (поперечный размер): размер флекс-элемента вдоль поперечной оси. Это может быть ширина или высота в зависимости от направления поперечной оси. Этот размер всегда перпендикулярен основному размеру. Если основной размер — это ширина, то поперечный размер — это высота, и наоборот.

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

    Свойства флекс-контейнера

    Скопировать ссылку «Свойства флекс-контейнера» Скопировано

    display

    Скопировать ссылку «display» Скопировано

     .container  display: flex;> .container  display: flex; >      

    Когда мы задаём какому-то элементу значение flex для свойства display , мы превращаем этот элемент в флекс-контейнер. Внутри него начинает действовать флекс-контекст, его дочерние элементы начинают подчиняться свойствам флексбокса.

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

     .container  display: inline-flex;> .container  display: inline-flex; >      

    Если контейнеру задано значение inline — flex , то снаружи он начинает вести себя как строчный (инлайн) элемент — размеры зависят только от внутреннего контента, встаёт в строку с другими элементами. Внутри это ровно такой же флекс-контейнер, как и при предыдущем значении.

    flex — direction

    Скопировать ссылку «flex-direction» Скопировано

    Свойство управления направлением основной и поперечной осей.

     .container  display: flex; flex-direction: row;> .container  display: flex; flex-direction: row; >      
    • row (значение по умолчанию) — основная ось идёт горизонтально слева направо, поперечная ось идёт вертикально сверху вниз.
    • row — reverse — основная ось идёт горизонтально справа налево, поперечная ось идёт вертикально сверху вниз.
    • column — основная ось идёт вертикально сверху вниз, поперечная ось идёт горизонтально слева направо.
    • column — reverse — основная ось идёт вертикально снизу вверх, поперечная ось идёт горизонтально слева направо.

    Пример свойства flex-direction

    Пример свойства flex-wrap

    flex — flow

    Скопировать ссылку «flex-flow» Скопировано

    Это свойство-шорткат для одновременного определения значений свойств flex — direction и flex — wrap .

     .container  display: flex; flex-flow: column wrap;> .container  display: flex; flex-flow: column wrap; >      
     .container  display: flex; flex-flow: row nowrap;> .container  display: flex; flex-flow: row nowrap; >      

    Пример свойства флекс-элементов order

    flex — grow

    Скопировать ссылку «flex-grow» Скопировано

     .container  display: flex;> .item  flex-grow: 1;> .container  display: flex; > .item  flex-grow: 1; >      

    Это свойство указывает, может ли вырастать флекс-элемент при наличии свободного места, и насколько. По умолчанию значение равно 0. Значением может быть любое положительное целое число (включая 0).

    Если у всех флекс-элементов будет прописано flex — grow : 1 , то свободное пространство в контейнере будет равномерно распределено между всеми.

    Если при этом одному из элементов мы зададим flex — grow : 2 , то он постарается занять в два раза больше свободного места, чем его соседи.

    flex — shrink

    Скопировать ссылку «flex-shrink» Скопировано

     .container  display: flex;> .item  flex-shrink: 3;> .container  display: flex; > .item  flex-shrink: 3; >      

    Свойство flex — shrink полностью противоположно свойству flex — grow . Если в контейнере не хватает места для расположения всех элементов без изменения размеров, то свойство flex — shrink указывает, в каких пропорциях элемент будет уменьшаться.

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

    Значение по умолчанию — 1. Значением может быть любое целое положительное число (включая 0).

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

    flex — basis

    Скопировать ссылку «flex-basis» Скопировано

     .container  display: flex;> .item  flex-basis: 250px;> .container  display: flex; > .item  flex-basis: 250px; >      

    Свойство flex — basis указывает на размер элемента до того, как свободное место будет распределено (см. flex-grow).

    Значением может быть размер в любых относительных или абсолютных единицах: 20rem , 5vw , 250px . А также можно использовать ключевое слово auto (значение по умолчанию). В этом случае при расчёте размера элемента будут приниматься во внимание значения свойств width , max — width , min — width или аналогичные свойства высоты, в зависимости от того, в каком направлении идёт основная ось.

    Если никакие размеры не заданы, а свойству flex — basis установлено значение auto , то элемент занимает столько пространства, сколько нужно для отображения контента.

    flex

    Скопировать ссылку «flex» Скопировано

     .container  display: flex;> .item  flex: 1 1 auto;> .container  display: flex; > .item  flex: 1 1 auto; >      

    Свойство-шорткат, с помощью которого можно указать значение трёх свойств одновременно: flex — grow , flex — shrink и flex — basis . Первое значение является обязательным, остальные опциональны.

    Значение по умолчанию: 0 1 auto , что расшифровывается как flex — grow : 0 , flex — shrink : 1 , flex — basis : auto .

     /* 0 0 auto */flex: none; /* Одно значение, число без единиц: flex-grow */flex: 2; /* Одно значение, ширина/высота: flex-basis */flex: 10em;flex: 30px;flex: auto;flex: content; /* Два значения: flex-grow | flex-basis */flex: 1 30px; /* Два значения: flex-grow | flex-shrink */flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */flex: 2 2 10%; /* Глобальные значения */flex: inherit;flex: initial;flex: unset; /* 0 0 auto */ flex: none; /* Одно значение, число без единиц: flex-grow */ flex: 2; /* Одно значение, ширина/высота: flex-basis */ flex: 10em; flex: 30px; flex: auto; flex: content; /* Два значения: flex-grow | flex-basis */ flex: 1 30px; /* Два значения: flex-grow | flex-shrink */ flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* Глобальные значения */ flex: inherit; flex: initial; flex: unset;      

    align — self

    Скопировать ссылку «align-self» Скопировано

     .container  display: flex; align-items: flex-start;> .item  align-self: flex-end;> .container  display: flex; align-items: flex-start; > .item  align-self: flex-end; >      

    При помощи этого свойства можно выровнять один или несколько элементов иначе, чем задано у родительского элемента. Например, в коде выше у родителя задано выравнивание вложенных элементов по верхнему краю родителя. А для элемента с классом .item мы задаём выравнивание по нижнему краю.

    Ссылки

    Скопировать ссылку «Ссылки» Скопировано

    1. Как реально работает flex — grow
    2. Как реально работает flex — shrink
    3. Песочница Флексбоксов
    4. Game: Flexbox Froggy
    5. Game: Flexbox Defense
    6. Game: Flexbox Ducky
    7. Курс по Флексбоксам от Wes Bos

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

    Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.

    Необходимые условия: Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
    Цель: Узнать о селекторах псевдокласса и псевдоэлемента.

    Что такое псевдокласс?

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

    Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:

    :pseudo-class-name

    Простой пример псевдокласса

    Давайте рассмотрим простой пример. Если бы мы хотели сделать шрифт первого абзаца статьи более крупным и жирным, мы могли бы добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в первом примере ниже:

    Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса :first-child — он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (к тому же это не всегда возможно, например, в случае если он генерируется CMS.)

    Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определённом состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:

    Примечание: Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать :first-child и правило было бы применено к любому элементу, оказавшемуся первым дочерним для , не только к первому дочернему абзацу — :first-child равнозначно *:first-child . Однако обычно вы хотите большего контроля, поэтому вам нужен более специфичный селектор.

    Псевдоклассы пользовательского действия

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

    • :hover — упоминался выше; он применяется только в том случае, если пользователь наводит указатель мыши на элемент, обычно на ссылку.
    • :focus — применяется только в том случае, если пользователь фокусируется на элементе, используя управление с клавиатуры.

    Что такое псевдоэлемент?

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

    ::pseudo-element-name

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

    Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть её в и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.

    Селектор псевдоэлемента ::first-line сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.

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

    Вы можете видеть, что селектор выбирает первую строку обоих абзацев.

    Объединение псевдоклассов и псевдоэлементов

    Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы :first-child и ::first-line . Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента

    , который находится внутри элемента .

    article p:first-child::first-line  font-size: 120%; font-weight: bold; > 

    Генерация контента с помощью ::before и ::after

    Существует пара специальных псевдоэлементов, которые используются вместе со свойством content для вставки содержимого в документ с помощью CSS.

    Вы можете использовать их для вставки строки текста, как в приведённом ниже живом примере. Попробуйте изменить текстовое значение свойства content и вы увидите, как изменится результат. Можете также изменить псевдоэлемент ::before на ::after и увидите, что текст вставлен в конце элемента, а не в начале.

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

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

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

    В следующем примере мы добавили пустую строку, используя псевдоэлемент ::before. Мы установили display: block , чтобы стилизовать его по ширине и высоте. Затем мы используем CSS, чтобы стилизовать его так же, как и любой другой элемент. Вы можете поиграть с CSS и изменить его внешний вид и поведение.

    Использование псевдоэлементов ::before и ::after вместе со свойством content в CSS называется «генерируемым контентом» в CSS, и вы часто будете видеть, как этот метод используется для различных задач. Отличным примером является сайт CSS Arrow Please, который помогает вам генерировать стрелку с помощью CSS. Посмотрите на CSS, когда вы создадите свою стрелку, и вы увидите использование псевдо-элементов ::before и ::after . Всякий раз, когда вы будете видеть эти селекторы, смотрите на свойство content , чтобы увидеть, что добавляется в документ..

    Справочный раздел

    Существует большое количество псевдоклассов и псевдоэлементов, и полезно иметь список, к которому можно обращаться. Ниже приведены таблицы, в которых они перечислены, со ссылками на их справочные страницы в MDN. Используйте эти таблицы как справочник, чтобы видеть массив доступных вам средств для нацеливания на элементы.

    Псевдоклассы

    Селектор Описание
    :active Подходит, когда пользователь активирует (например, щёлкает мышью) элемент.
    :any-link Соответствует как состоянию :link, так и состоянию :visited ссылки.
    :blank Соответствует элементу , для которого значение ввода является пустым.
    :checked Соответствует переключателю или флажку в выбранном состоянии.
    :current Соответствует элементу или предку элемента, который в данный момент отображается.
    :default Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (обрабатывают нажатие клавиши enter) в наборе сходных элементов.
    :dir Выбирает элемент на основе его направленности (значение атрибута HTML dir или свойства CSS direction ).
    :disabled Соответствует элементам пользовательского интерфейса, которые находятся в отключённом состоянии.
    :empty Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела.
    :enabled Соответствует элементам пользовательского интерфейса, которые находятся во включённом состоянии.
    :first В постраничном носителе соответствует первой странице.
    :first-child Соответствует элементу, который является первым среди других дочерних элементов одного предка.
    :first-of-type Соответствует элементу, который является первым определённого типа среди других дочерних элементов одного предка.
    :focus Соответствует элементу, имеющему фокус.
    :focus-visible Соответствует элементу, имеющему фокус, при этом фокус должен быть виден пользователю.
    :focus-within Соответствует элементу с фокусом, а также элементу с потомком, который имеет фокус.
    :future Соответствует элементам после текущего элемента.
    :hover Соответствует элементу, на который наведён курсор мыши.
    :indeterminate Соответствует элементам пользовательского интерфейса, значение которых находится в неопределённом состоянии, обычно checkboxes.
    :in-range Соответствует элементу с диапазоном, когда его значение находится в пределах диапазона.
    :invalid Соответствует элементу, например , в недопустимом состоянии.
    :lang Соответствует элементу, основанному на языке (значение атрибута HTML lang).
    :last-child Соответствует элементу, который является последним среди других дочерних элементов одного предка.
    :last-of-type Соответствует элементу, который является последним определённого типа среди других дочерних элементов одного предка.
    :left В постраничном носителе соответствует левосторонним страницам.
    :link Соответствует непосещавшимся ссылкам.
    :local-link Соответствует ссылкам, указывающим на страницы, которые расположены на том же сайте, что и текущий документ.
    :is() Соответствует любому селектору из полученного списка селекторов.
    :not Соответствует объектам, не входящим в список селекторов, переданный в качестве значения этому селектору.
    :nth-child Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.)
    :nth-of-type Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы

    ) — дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.)

    :nth-last-child Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.)
    :nth-last-of-type Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы

    ), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.)

    :only-child Соответствует элементу, являющемуся единственным дочерним для своего предка.
    :only-of-type Соответствует элементу, который отличается по типу от всех других дочерних элементов общего предка.
    :optional Соответствует необязательным элементам формы.
    :out-of-range Соответствует элементу с диапазоном, когда его значение находится вне диапазона.
    :past Соответствует элементам перед текущим элементом.
    :placeholder-shown Соответствует элементу input, который показывает текст-заполнитель.
    :playing Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями «воспроизведён» или «приостановлен», когда этот элемент «воспроизводится».
    :paused Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями «воспроизведён» или «приостановлен», когда этот элемент «приостановлен».
    :read-only Соответствует элементу, который не может быть изменён пользователем.
    :read-write Соответствует элементу, который может быть изменён пользователем.
    :required Соответствует обязательным элементам формы.
    :right В постраничном носителе соответствует правосторонним страницам.
    :root Соответствует элементу, который является корнем документа.
    :scope Соответствует любому элементу, который является элементом области видимости.
    :valid Соответствует элементу, такому как , в допустимом состоянии.
    :target Соответствует элементу, если он является целью текущего URL (т. е. если у него есть ID, соответствующий текущему URL fragment).
    :visited Соответствует посещённым ссылкам.

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

    Селектор Описание
    ::after Соответствует элементу, который допускает стилизацию и появляется после текущего содержимого порождающего элемента.
    ::before Соответствует элементу, который допускает стилизацию и появляется перед текущим содержимым порождающего элемента.
    ::first-letter Соответствует первой букве элемента.
    ::first-line Соответствует первой строке содержимого порождающего элемента.
    ::grammar-error Соответствует части документа, содержащей грамматическую ошибку, отмеченную браузером.
    ::marker Соответствует полю маркера пункта списка, которое обычно содержит жирную точку или число.
    ::selection Соответствует части документа, которая была выбрана.
    ::spelling-error Соответствует части документа, содержащей орфографическую ошибку, отмеченную браузером.

    Периодическая система химических элементов: как это работает

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

    Периодический закон

    К середине XIX века учёные располагали множеством сведений о физических и химических свойствах разных элементов и их соединений. Появилась необходимость упорядочить эти знания и представить их в наглядном виде. Исследователи из разных стран пытались создать классификацию, объединяя элементы по сходству состава и свойств веществ, которые они образуют. Однако ни одна из предложенных систем не охватывала все известные элементы.

    Пытался решить эту задачу и молодой русский профессор Д.И. Менделеев. Он собирал и классифицировал информацию о свойствах элементов и их соединений, а затем уточнял её в ходе многочисленных экспериментов. Собрав данные, Дмитрий Иванович записал сведения о каждом элементе на карточки, раскладывал их на столе и многократно перемещал, пытаясь выстроить логическую систему. Долгие научные изыскания привели его к выводу, что свойства элементов и их соединений изменяются с возрастанием атомной массы, однако не монотонно, а периодически.

    Так был открыт периодический закон, который учёный сформулировал следующим образом: «Свойства элементов, а потому и свойства образуемых ими простых и сложных тел, стоят в периодической зависимости от их атомного веса».

    Своё открытие Менделеев совершил почти за 30 лет до того, как учёным удалось понять структуру атома. Открытия в области атомной физики позволили установить, что свойства элементов определяются не атомной массой, а зависят от количества электронов, содержащихся в нём. Поэтому современная формулировка закона звучит так:

    Свойства химических элементов, а также формы и свойства образуемых ими веществ и соединений находятся в периодической зависимости от величины зарядов ядер их атомов.

    Этот принцип Менделеев проиллюстрировал в таблице, в которой были представлены все 63 известных на тот момент химических элемента. При её создании учёный предпринял ряд весьма смелых шагов.

    Во-первых, многочисленные эксперименты позволили Менделееву сделать вывод, что атомные массы некоторых элементов ранее были вычислены неправильно, и он изменил их в соответствии со своей системой.

    Во-вторых, в таблице были оставлены места для новых элементов, открытие которых учёный предсказал, подробно описав их свойства.

    Мировое научное сообщество поначалу скептически отнеслось к открытию русского химика. Однако вскоре были открыты предсказанные им химические элементы: галлий, скандий и германий. Это разрушило сомнения в правильности системы Менделеева, которая навсегда изменила науку. Там, где раньше учёному требовалось провести ряд сложнейших (и даже не всегда возможных в реальности) опытов — теперь стало достаточно одного взгляда в таблицу.

    Существует легенда, якобы знаменитая таблица явилась Менделееву во сне. Но сам Дмитрий Иванович эту информацию не подтвердил. Он действительно нередко засиживался над работой до поздней ночи и засыпал, продолжая размышлять над решением задачи, однако факт мистического озарения во сне учёный отрицал: «Я над ней, может быть, двадцать лет думал, а вы думаете, сел и вдруг — готово!».

    Теперь расскажем, как устроена Периодическая таблица элементов Менделеева и как ею пользоваться.

    Структура Периодической системы элементов

    На настоящий момент Периодическая таблица Менделеева содержит 118 химических элементов. Каждый из них занимает своё место в зависимости от атомного числа. Оно показывает, сколько протонов содержит ядро атома элемента и сколько электронов в атоме находятся вокруг него. Атом каждого последующего элемента содержит на один протон больше, чем предыдущий.

    Периоды — это строки таблицы. На данный момент их семь. У всех элементов одного периода одинаковое количество заполненных электронами энергетических уровней.

    Группы — это столбцы. В группы в Периодической таблице объединяются элементы с одинаковым числом электронов на внешнем энергетическом уровне их атомов. В кратком варианте таблицы, используемой в школьных учебниках, элементы разделены на восемь групп. Каждая из них делится на главную (A) и побочную (B) подгруппы, которые объединяют элементы со сходными химическими свойствами.

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

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

    Свойства Периодической системы элементов

    Расположение химических элементов в таблице Менделеева позволяет сопоставлять не только их атомные массы, но и химические свойства.

    Вот как они изменяются в пределах группы (сверху вниз):

    • Металлические свойства усиливаются, неметаллические ослабевают.
    • Увеличивается атомный радиус.
    • Усиливаются основные свойства гидроксидов и кислотные свойства водородных соединений неметаллов.

    В пределах периодов (слева направо) свойства элементов меняются следующим образом:

    • Металлические свойства ослабевают, неметаллические усиливаются.
    • Уменьшается атомный радиус.
    • Возрастает электроотрицательность.

    Элементы Периодической таблицы Менделеева

    По положению элемента в периоде можно определить его принадлежность к металлам или неметаллам. Металлы расположены в левом нижнем углу таблицы, неметаллы — в правом верхнем углу. Между ними находятся полуметаллы. Все периоды, кроме первого, начинается щелочным металлом. Каждый период заканчивается инертным газом.

    Щелочные металлы

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

    Щелочноземельные металлы

    Вторая группа главная подгруппа (IIА) представлена щелочноземельными металлами с двумя электронами на внешнем энергетическом уровне атома. Бериллий и магний часто не относят к щелочноземельным металлам. Они тоже имеют серебристый оттенок и легко взаимодействуют с другими элементами, хотя и не так охотно, как металлы из первой группы главной подгруппы. Температура плавления щелочноземельных металлов выше, чем у щелочных. Ионы магния и кальция обусловливают жёсткость воды.

    Лантаноиды и актиноиды

    В третьей группе побочной подгруппе (IIIB) шестого и седьмого периодов находятся сразу несколько металлов, сходных по строению внешнего энергетического уровня и близких по химическим свойствам. У этих элементов электроны начинают заполнять третий по счёту от внешнего электронного слоя уровень. Это лантаноиды и актиноиды. Для удобства их помещают под основной таблицей.

    Лантаноиды иногда называют «редкоземельными элементами», поскольку они были обнаружены в небольшом количестве в составе редких минералов и не образуют собственных руд.

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

    Переходные металлы

    Элементы побочных подгрупп, кроме лантаноидов и актиноидов, называют переходными металлами. Они вполне укладываются в привычные представления о металлах — твёрдые (за исключением жидкой ртути), плотные, обладают характерным блеском, хорошо проводят тепло и электричество. Валентные электроны их атомов находятся на внешнем и предвнешнем энергетических уровнях.

    Неметаллы

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

    Подгруппа углерода

    Четвёртую группу главную подгруппу (IVА) называют подгруппой углерода. Углерод и кремний обладают всеми свойствами неметаллов, германий и олово занимают промежуточную позицию, а свинец имеет выраженные металлические свойства. Углерод образует несколько аллотропных модификаций — вариантов простых веществ, отличающихся по своему строению, а именно: графит, алмаз, фуллерит и другие.

    Большинство элементов подгруппы углерода — полупроводники (проводят электричество за счёт примесей, но хуже, чем металлы). Графит, германий и кремний используют при изготовлении полупроводниковых элементов (транзисторы, диоды, процессоры и так далее).

    Подгруппа азота

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

    Физические свойства элементов подгруппы азота различны. Азот является бесцветным газом. Фосфор, мягкое вещество, образует несколько вариантов аллотропных модификаций — белый, красный и чёрный фосфор. Мышьяк — твёрдый полуметалл, способный проводить электрический ток. Висмут — блестящий серебристо-белый металл с радужным отливом.

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

    Подгруппа кислорода

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

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

    Кислород и сера легко образуют прочные соединения с металлами — оксиды и сульфиды. В виде этих соединений металлы часто входят в состав руд.

    Галогены

    Седьмая группа главная подгруппа (VIIA) представлена галогенами — неметаллами с семью электронами на внешнем электронном слое атома. Это сильнейшие окислители, легко вступающие в реакции. Галогены («рождающие соли») назвали так потому, что они реагируют со многими металлами с образованием солей. Например, хлор входит в состав обычной поваренной соли.

    Самый активный из галогенов — фтор. Он способен разрушать даже молекулы воды, за что и получил своё грозное имя (слово «фтор» переводится на русский язык как «разрушительный»). А его «близкий родственник» — иод — используется в медицине в виде спиртового раствора для обработки ран.

    Инертные газы

    Инертные газы, расположенные в последней, восьмой группе главной подгруппе (VIIIA) — элементы с полностью заполненным внешним электронным уровнем. Они практически не способны участвовать в реакциях. Поэтому их иногда называют «благородными», проводя параллель с представителями высшего общества, которые брезгуют контактировать с посторонними.

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

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

    Скоро перезвоним!

    Или напишем на почту, если не получится дозвониться

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

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