Как сделать логин и пароль в html

Как сделать логин и пароль в html

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

Примечание: Любые формы, содержащие конфиденциальную информацию, такую как пароли (например, формы входа), должны обслуживаться через HTTPS; В Firefox теперь реализованы несколько механизмов для предупреждения от небезопасных форм входа в систему — см. Небезопасные пароли (en-US) . Другие браузеры также реализуют аналогичные механизмы.

Value	DOMString представляет пароль или пустую строку
События	change (en-US) и input (en-US)
Общие поддерживаемые атрибуты	autocomplete , inputmode , maxlength , minlength , pattern , placeholder , readonly , required , and size
IDL атрибуты	selectionStart , selectionEnd , selectionDirection , и value
Методы	select() (en-US), setRangeText() (en-US), и setSelectionRange()

Значения

Атрибут value содержит DOMString , значение которого является текущим содержимым элемента редактирования текста, используемого для ввода пароля. Если пользователь ещё ничего не указал, это значение представляет собой пустую строку ( «» ). Если указано свойство required , то поле ввода пароля должно содержать значение, отличное от пустой строки, которое должно быть действительным.

Если указан атрибут pattern , содержимое элемента управления «password» считается действительным только в том случае, если значение проходит проверку; см. Validation для получения дополнительной информации.

Примечание: Символы строки (U+000A) и возврата каретки(U+000D) недопустимы в значении поля «password» . При вставке пароля, возвращаемые символы удаляются из значения.

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

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

Простое поле ввода пароля

Здесь мы видим самый простое поле ввода пароля, с меткой, установленной с помощью элемента .

label for="userPassword">Пароль:label> input id="userPassword" type="password" /> 

Поддержка автозаполнения

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

Разрешить браузеру или менеджеру паролей автоматически заполнять поле пароля. Это не так информативно, как использование «current-password» или «new-password» .

Запрещает браузеру или менеджеру паролей автоматически заполнять поле пароля.

Разрешить браузеру или менеджеру паролей вводить текущий пароль для сайта. Это даёт больше информации, чем «on» , так как позволяет браузеру или менеджеру паролей знать, что в настоящее время известен пароль для сайта в поле, а не используется новый.

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

label for="userPassword">Пароль:label> input id="userPassword" type="password" autocomplete="current-password" /> 

Обязательное заполнение пароля

Чтобы сообщить браузеру пользователя, что поле пароля должно иметь действительное значение перед отправкой формы, просто укажите Boolean атрибут required .

label for="userPassword">Пароль:label> input id="userPassword" type="password" required /> 

Указание режима ввода

Если ваше приложение лучше обслуживается с использованием другого режима ввода, чем по умолчанию, вы можете использовать атрибут inputmode для определённого запроса. Наиболее очевидным вариантом использования является то, что ваше приложение использует в качестве пароля числовое значение (например, ПИН). Например, мобильные устройства с виртуальными клавиатурами могут переключаться на макет цифровой клавиатуры вместо полной клавиатуры, чтобы облегчить ввод пароля.

label for="pin">ПИН:label> input id="pin" type="password" inputmode="numeric" /> 

Настройка длины пароля

Как обычно, вы можете использовать атрибуты minlength и maxlength , чтобы установить минимальную и максимальную допустимую длину пароля , Этот пример дополняет предыдущий, указав, что PIN-код пользователя должен быть не менее четырёх и не более восьми цифр. Атрибут size используется для обеспечения того, чтобы элемент управления ввода пароля имел ширину в восемь символов.

label for="pin">ПИН:label> input id="pin" type="password" inputmode="numeric" minlength="4" maxlength="8" size="8" /> 

Выделение текста

Как и другие элементы управления текстовой записью, вы можете использовать метод select() (en-US) для выбора всего текста в поле пароля.

HTML

label for="userPassword">Парольlabel> input id="userPassword" type="password" size="12" /> button id="selectAll">Выделить всеbutton> 

JavaScript

.getElementById("selectAll").onclick = function (event)  document.getElementById("userPassword").select(); >; 

Результат

Вы также можете использовать selectionStart и selectionEnd , чтобы получить (или установить), какой диапазон символов в элементе управления, и selectionDirection , чтобы узнать, какой выбор направления произошёл (или будет расширен в зависимости от вашей платформы, см. его документацию для объяснения) , Однако, учитывая, что текст затенён, их полезность несколько ограничена.

Валидация

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

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

label for="hexId">Hex ID:label> input id="hexId" type="password" pattern="[0-9a-fA-F]" title="Enter an ID consisting of 4-8 hexadecimal digits" /> 

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

Примеры

Запрос номера социального страхования

В этом примере принимается только ввод, который соответствует формату действительного номера социального страхования Соединённых Штатов. Эти цифры, используемые для целей налогообложения и идентификации в США, представлены в форме «123-45-6789». Также существуют различные правила, для которых допустимы значения в каждой группе.

HTML

label for="ssn">SSN:label> input type="password" id="ssn" inputmode="number" minlength="9" maxlength="12" pattern="(?!000)([0-6]\d|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d" required autocomplete="off" /> br /> label for="ssn">Value:label> span id="current">span> 

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

В inputmode установлено значение «number» , чтобы побудить устройства с виртуальными клавиатурами переключаться на макет цифровой клавиатуры для облегчения ввода. Для атрибутов minlength и maxlength установлено значение 9 и 12 соответственно, чтобы требовалось, чтобы значение было не менее девяти и не более 12 символов (первый не разделяет символы между группами цифр и последними с ними). Атрибут required используется для указания того, что этот элемент управления должен иметь значение. Наконец, autocomplete установлен «off» , чтобы избежать попыток установить пароли менеджеров паролей.

JavaScript

var ssn = document.getElementById("ssn"); var current = document.getElementById("current"); ssn.oninput = function (event)  current.innerHTML = ssn.value; >; 

Значение password

Тип password (от англ. «password» ‒ «пароль») создаёт поле ввода пароля.

Внешний вид

• ‒ поле ввода пароля;
• ‒ наведение курсора;
• ‒ фокус.

Примечание

Символы вводимые в поле ввода пароля, как правило, браузерами (в целях безопасности) отображаются в виде звёздочек (« * »).

Поддержка браузерами

Спецификация

Верс.	Раздел
HTML
2.0	Password Field: INPUT TYPE=PASSWORD	Перевод
3.2	INPUT text fields, radio buttons, check boxes, .
4.01	17.4.1 Control types created with INPUT DTD: Transitional Strict Frameset
5.0	4.10.5.1.6 Password state (type=password)
5.1	4.10.5.1.6. Password state (type=password)
XHTML
1.0	Extensible HyperText Markup Language DTD: Transitional Strict Frameset
1.1	Extensible HyperText Markup Language

Сопутствующие атрибуты

autocomplete Автозаполнение значения поля ввода пароля. autofocus Автоматческая фокусировка на поле ввода пароля после полной загрузки страницы. disabled Блокировка поля ввода пароля.

disabled=»disabled»

disabled=»disabled» value=»password»

form Присоединение поля ввода пароля к форме. maxlength Задаёт максимально-допустимое количество вводимых символов. minlength Задаёт минимально-допустимое количество вводимых символов. name Присваивает имя полю ввода пароля. pattern Устанавливает критерий/шаблон ввода. placeholder Указывает текст-подсказку для пустого поля.

placeholder=»Текст-подсказка»

readonly Указывает, что поле ввода пароля доступно только для чтения (изменение/редактирование запрещено). required Указывает что поле ввода пароля обязательно для заполнения. size Задаёт ширину поля ввода пароля по количеству вводимых символов.

size=»10″

value Указывает значение числового поля, отправляемое на сервер.

Примечание: Данный атрибут должен иметь значение, которое не содержит символов «LF» ПЕРЕВОД СТРОКИ [ U+000A ] или «CR» ВОЗВРАТ КАРЕТКИ [ U+000D ].

value=»password»

Создание логинов и паролей на страницы

Здравствуйте. Я создаю свой сайт. Мне нужно, чтобы любому, кто зайдёт на него, был доступ только к некоторым страницам, а остальные были запаролены. Т.е., например, как работает сайт Вконтакте, где у любого человека есть доступ только к заглавной странице (для зарегистрированных пользователей ещё и к своей странице). Также мне необходимо сделать так, чтобы у каждой страницы были свой логин и пароль, и желательно, чтобы их нельзя было взломать (т.е. лучше было бы, если создать отдельный файл со всеми логинами и паролями). Если это возможно, то напишите, пожалуйста, как это сделать, а то мне приходится лазить по всему интернету, рыскать HTML коды и собирать сайт по маленьким частям. )

Отслеживать
11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков
задан 7 дек 2014 в 10:22
2,510 5 5 золотых знаков 31 31 серебряный знак 60 60 бронзовых знаков

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Советую Вам начинать изучать основы в следующей последовательности:

1. HTML.
2. CSS.
3. JavaScript.
4. PHP.
5. MySQL.
6. jQuery.
7. ООП, особенно MVC.

Зная все эти вещи, можно написать отличный сайт!

Пароли никогда хранить в файле нельзя, тем более в открытом виде!
Для этих вещей тебе необходимо создать БД (MySQL) и таблицу user, в которой будешь хранить всю информацию о конкретном пользователе, а также пароль, но только не в открытом виде. Можно зашифровать элементарным и безопасным md5.

P.S. Если вы пишите сайт, чтобы научиться программировать, то изучите все пункты, которые я описал выше. А если Вам сайт нужен для показа какой-либо информации, продажи товаров или что-либо, то тут посоветую использовать готовую CMS.

Отслеживать
11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков
ответ дан 7 дек 2014 в 10:35
МаринаВоин МаринаВоин
898 5 5 серебряных знаков 10 10 бронзовых знаков
Из этих пунктов мне знакомы только 1,2,3,4. Остальное пока что тёмный лес)
7 дек 2014 в 10:38
Берите готовую бесплатную CMS. Лично я использую Joomla.
7 дек 2014 в 10:39

Ну так не теряйте время, начинайте изучать. Я бы посоветовал для начала изучить frameWork CodeIgniter Ссылка на фреймворк: code-igniter.ru Его необходимо скачать, установить и пользоваться! Он написан на чистом MVC. Я еще в институте на нем написал сайте по продаже автомобилей, дипломная работа! Ушло на изучение всех выше описанных пунктов и создания сайта — около 3-4 месяцев. Никита__, если Вам дали правильный или исчерпывающий ответ, то не забывайте его отмечать как правильный.

7 дек 2014 в 10:43
@ale_x тогда уж «Он написан на чистом MVC» — а с какого MVC относится к ЯП?
7 дек 2014 в 12:11

MVC — это паттерн проектирования. В его определении ничего не сказано про ООП. Можно и в процедурном языке спокойно заюзать MVC. «Знать ООП и не знать MVC» — это значит ничего не знать — ГРОМКОЕ УТВЕРЖДЕНИЕ midlle разработчика со стажем 1.5 года, знающий все выше им указанное в совершенстве. Дайте ссылку на определение ООП, в котором говорится о том, что MVC является частью его парадигмы?

7 дек 2014 в 12:19

По авторизации смотрите php сессии, также нужны азы работы с бд (MySQl, например), но это все не так просто, как кажется. В Вашем случае, я думаю, идеальный вариант был бы WordPress либо Joomla.

Отслеживать
11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков
ответ дан 7 дек 2014 в 10:33
176 2 2 золотых знака 5 5 серебряных знаков 19 19 бронзовых знаков

С одной стороны очень хорошо, что Вы сами пишете (разбираетесь) в коде сайта. Но зачем изобретать велосипед? Не проще взять подходящую для сайта CMS и далее разбираться. Ну и напоследок, одними HTML и JS Вы полнофункциональный сайт измучаетесь строить.

Отслеживать
ответ дан 7 дек 2014 в 10:27
Вячеслав Кириченко Вячеслав Кириченко
1,344 8 8 серебряных знаков 21 21 бронзовый знак

А вы сайт пишите на html небось. А сервер на чем у вас?

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

Отвечая на ваш вопрос (все-таки прийдется написать абзац-другой). html и css отвечают исключительно за внешний вид страницы. js — за поведение. Но этого не достаточно, чтобы все заработало. Всм нужна структура, которая все это контролирует. Живет она на сервере и написана на серверных языках (я сторонник python, многие используют php, вообще тут наблюдается холивар, но у каждого языка есть свои особенности, обуславливающие его применимость в данной конкретной ситуации).

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

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

Трясём пароль с помощью CSS

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

Вот что получится в итоге:

Подготовка

Нам нужно поле для ввода пароля, немного CSS и немного JavaScript-кода.

HTML очень простой — поле ввода, кнопка, и всё это обёрнуто в , чтобы было удобнее трясти:

 
 Submit 
 

Первая часть стилей — контейнер для поля ввода и кнопки шириной 300 пикселей (можно сколько угодно).

.input-container

Анимация тряски

Вторая часть — ключевые кадры анимации, которая называется shake . Мы будем её использовать ниже:

@keyframes shake < 10%, 90% < transform: translateX(-0.5px); >20%, 80% < transform: translateX(1px); >30%, 50%, 70% < transform: translateX(-2px); >40%, 60% < transform: translateX(2px); >> 

Эта анимация «трясёт» элемент горизонтально влево и вправо.

В начале (на 10% времени анимации) и ближе к концу (на 90%) элемент двигается немного влево на пол пикселя. Затем, на 20% и 80% времени, он двигается вправо на пиксель. После этого, на 30%, 50% и 70% времени, элемент смещается сильнее влево на 2 пикселя, и, наконец, на 40% и 60% времени он смещается ещё сильнее вправо на 2 пикселя.

Кривые Безье

Класс shake отвечает за запуск анимации. Он немного сложный, но мы всё объясним.

.shake

• shake — название анимации.
• 0.5s — продолжительность анимации. В нашем случае — полсекунды.
• cubic-bezier(0.68, -0.55, 0.27, 1.55) — функция задает скорость анимации в разные моменты времени. Она определяет, как быстро или медленно будет идти анимация в разные моменты. Например, наша анимация начнется быстро, затем замедлится, и снова ускорится в конце. Это делает анимацию более «живой» и интересной.
• both : Это говорит браузеру начинать и заканчивать анимацию на основе её времени начала и конца. Если бы мы указали значение forwards , после завершения анимации стиль элемента остался бы таким же, как в конце анимации. Если бы это было backwards , то стиль бы вернулся к исходному состоянию до начала анимации. both просто сочетает оба этих эффекта.

В общем, этот код делает так, что при добавлении класса shake к элементу он будет «трястись» в течение полсекунды определённым, «живым» образом.

Подробнее про кривые Безье (сложно)

Эта часть может быть сложноватой, если вы не любите математику. Но тем не менее, нужно объяснить.

cubic-bezier — это функция, которая позволяет нам контролировать скорость анимации на разных этапах её выполнения. Она основана на математической концепции кривых Безье. У кривой Безье, если упростить, есть две крайние и две контрольные точки.

Параметры 0.68 и 0.55 — координаты первой контрольной точки. Эта точка определяет, как начнется наша анимация.

• 0.68 — это положение по горизонтали (или, если говорить о времени, то это сколько времени займет до первой контрольной точки).
• 0.55 — это положение по вертикали. Интересно, что у нас тут отрицательное значение, что означает, что анимация «отстает» от обычного темпа в начале.

Параметры 0.27 и 1.55 — координаты второй контрольной точки. Они определяют, как анимация будет продолжаться и завершаться.

• 0.27 — это положение второй точки по горизонтали (или на какой стадии времени мы достигнем этой точки).
• 1.55 — это положение по вертикали. Это значение больше 1 , что говорит о том, что к этому моменту анимация «обгоняет» свою обычную скорость.

Когда вы смотрите на график этих координат, он создает плавную кривую. Эта кривая показывает, как быстро (или медленно) будет двигаться анимация на разных этапах.

Таким образом, cubic-bezier(0.68, -0.55, 0.27, 1.55) создает довольно динамичную анимацию, которая начинается медленно, потом ускоряется и в конце снова замедляется, создавая эффект «отскока».

Хочу разобраться

JS для проверки пароля

Сразу скажем, что это ненастоящая функция — лучше так не делать в реальных проектах. Мы используем этот код только для демонстрации.

/* Функция для проверки введённого пароля */ function checkPassword() < /* Получаем элемент поля ввода */ var input = document.getElementById('passwordInput'); /* Получаем значение из поля ввода */ var password = input.value; if (password !== 'secret') < /* Если пароль неправильный, добавляем класс 'shake' для анимации */ input.classList.add('shake'); /* Через 600 мс (продолжительность анимации) удаляем класс 'shake' */ setTimeout(function() < input.classList.remove('shake'); >, 600); > > 

После нажатия на кнопку функция checkPassword() проверяет, что введённый пароль совпадает со словом secret . И если да — полю ввода добавляется анимация тряски с помощью класса shake .

И всё — получается вот так. Нажмите кнопку и потрясите пароль.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

• 13 ноября 2023

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

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

• 1 ноября 2023

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

• 13 октября 2023

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

• IE 11, 10, 9, 8, 7, …
• Chrome 4–35
• Edge 12 и 13
• Safari 3–9.1
• Firefox 2–38
• Opera 22 и ниже
• Android 4.4.4 KitKat и ниже (а это
• Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

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

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

• 23 сентября 2023

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.

• 29 августа 2023

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 
Центрированный текст
 
 

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

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

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

• 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

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

• 28 июля 2023

CSS-свойство contain

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

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

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container

• 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element

• 13 июля 2023

Как перекрыть один элемент другим. CSS-свойство z-index

z-index определяет порядок наложения элементов в трёхмерном пространстве на веб-странице. Свойство управляет тем, как элементы перекрывают друг друга, если они имеют позиционирование, отличное от значения static .

Синтаксис

.my-element

• 10 июля 2023