Как выровнять один элемент относительно другого с помощью Flexbox

C помощью модели Flexbox можно быстро выровнять элемент относительно другого по центру, для это нужно написать всего несколько строк в таблице стилей.

Первый вариант:

justify-content — управляет выравниванием элементов по главной оси. Чаще всего по горизонтальной.

align-items — управляет выравниванием элементов по перекрёстной оси. В основном это вертикальная ось.

Код:

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

Второй вариант:

С помощью модели Flexbox и свойства margin.

Код:

.box {
  display: flex;
}

.box-2 {
  margin: auto;
}

#flexbox #центрирование_элементов

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

Если нужно установить один блок внутри другого не прибегая к модели flexbox, то это можно сделать двумя способами с помощью позиционирования элементов относительно друг друга.

HTML:

 <div class="block-1">
   <div class="block-2"></div>
 </div>

CSS:

Основной блок:

.block-1 {
position: relative;
width: 300px;
height: 300px;
background: #ccc;
}

Внутренний блок:

Первый вариант:

Без привязки к размерам внутреннего блока.

.block-2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Второй вариант:

Когда известны размеры блока, например 100х100 пикселей.

.block-2 {
position: absolute;
width: 100px;
height: 100px;
top: calc(50% - 50px);
left: calc(50% - 50px);
}

#центрирование_элементов

Как изменить расстояние между блоками с помощью свойства gap

Если делаете верстку с помощью модели flexbox, то изменить расстояние между блоками вам поможет свойство gap, которое для этого и создано.

gap - свойство CSS, которое устанавливает расстояние между рядами и столбцами.

column-gap - свойство CSS, которое устанавливает расстояние между столбцами элементов.

row-gap - свойство CSS, которое устанавливает расстояние между рядами элементов.

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

.block {
display: flex;
gap: 20px;
}

Если между рядами нужно указать одно значение, а между столбцами другое, тогда можно указать два значения сразу:

.block {
display: flex;
gap: 20px 40px;
}

Или указать их по отдельности:

.block {
display: flex;
row-gap: 20px;
column-gap: 40px;
}


#flexbox #gap #расстояние_между_элементами

#юмор #анекдот

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

В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов.

Синтаксис:

[rel=external] - Атрибут точно соответствует заданному значению.
[rel*=external] - Атрибут содержит заданное значение.
[rel^=external] - Атрибут начинается с заданного значения.
[rel$=external] - Атрибут заканчивается на заданное значение.
[rel~=external] - Атрибут находится в списке, разделённом пробелами.
[rel|=external] - Атрибут находится в списке, разделённом дефисами.
[title=one][rel^=external] - Соответствие по нескольким атрибутам.

ПРИМЕР 1.
[rel=external] - Атрибут точно соответствует заданному значению.

HTML:
<h2 id="title" class="main" rel="first-title">Title</h2>

CSS:
h2[rel=first-title] {
size: 2em;
}

Также по атрибуту можно обратиться и к ссылке.

HTML:
<a href="https://hrcode.su/">link</a>

CSS:
a[href=https://hrcode.su] {
color: red;
}


ПРИМЕР 2.
[rel*=external] - Атрибут содержит заданное значение.

HTML:
<h1 rel="xxxexternalxxx">Title</h1>

CSS:
h1[rel*=external] {
color: red;
}

ПРИМЕР 3.
[rel^=external] - Атрибут начинается с заданного значения.

HTML:
<h1 rel="external-title">Title</h1>

CSS:
h1[rel^=external] {
color: red;
}

ПРИМЕР 4.
[rel$=external] - Атрибут заканчивается на заданное значение.

HTML:
<h1 rel="title external">Title</h1>

CSS:
h1[rel$=external] {
color: red;
}

ПРИМЕР 5.
[rel~=external] - Атрибут находится в списке, разделённом пробелами.

HTML:
<h1 rel="text title text">Title</h1>

CSS:
h1[rel~=external] {
color: red;
}

ПРИМЕР 6.
[rel|=external] - Атрибут находится в списке, разделённом дефисами.

HTML:
<h1 rel="text-title-text">Title</h1>

CSS:
h1[rel|=external] {
color: red;
}

ПРИМЕР 7.
[title=one][rel^=external] - Соответствие по нескольким атрибутам.

HTML:
<h1 rel="exernal" title="home">Title</h1>

CSS:
h1[rel=external][title^=home] {
color: red;
}

#селекторы #атрибуты

CSS - Обзор псевдокласса :is()

Псевдокласс :is()  принимает в список сразу несколько селекторов и позволяет назначить им определенные свойства и значения, что значительно сокращает и упрощает написание файла стилей.

Пример написания стилей обычным способом:

header p,
main p,
footer p {
color: red;
}

Пример написания тех же стилей с помощью псевдокласса :is():

:is(header, main, footer) p {
color: red;
}

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

ol ol ul, ol ul ul,
ol menu ul, ol dir ul,
ol ol menu, ol ul menu,
ol menu menu,
ol dir menu,
ol ol dir,
ol ul dir,
ol menu dir,
ol dir dir,
ul ol ul,
ul ul ul,
ul menu ul,
ul dir ul,
ul ol menu,
ul ul menu,
ul menu menu,
ul dir menu,
ul ol dir,
ul ul dir,
ul menu dir,
ul dir dir,
menu ol ul,
menu ul ul,
menu menu ul,
menu dir ul,
menu ol menu,
menu ul menu,
menu menu menu,
menu dir menu,
menu ol dir,
menu ul dir,
menu menu dir,
menu dir dir,
dir ol ul,
dir ul ul,
dir menu ul,
dir dir ul,
dir ol menu,
dir ul menu,
dir menu menu,
dir dir menu,
dir ol dir,
dir ul dir,
dir menu dir,
dir dir dir {
list-style-type: square;
}

А так он будет выглядеть с помощью псевдокласса is():

:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
list-style-type: square;
}

#псевдокласс #is

Как изменить placeholder в CSS

Иногда при верстке страниц необходимо изменить текст, который который мы пишем внутри атрибута placeholder="" в полях для ввода, .

Сделать это можно с помощью псевдокласса ::placeholder.

Cовременные браузеры уже понимают его и без префиксов, так что можно их не использовать.

Пример.

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

HTML.

<input type="text" class="demo-1" placeholder="Поле 1">
 
<input type="text" class="demo-2" placeholder="Поле 2">
 
<input type="text" class="demo-3" placeholder="Поле 3">

CSS.

Чтобы изменить его сразу у всех полей, достаточно применить псевдокласс ::placeholder к атрибуту [type="text"]

input[type=text]::placeholder {
font-size: 12px;
color: red;
}

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

Если нужно, чтобы стили не перебивались можно их усилить:

input[type=text][class=demo-2]::placeholder {
font-size: 12px;
color: green;
}

Или просто через класс указать нужные стили:

input[class=demo-3]::placeholder {
font-size: 12px;
color: blue;
}

Здесь все зависит от структуры вашей таблицы стилей.

#псевдокласс #placeholder

#юмор #анекдот

Свойство CSS - background

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

Состоит из следующих свойств CSS:

background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size

---
background-attachment - задает, фиксируется ли положение фонового изображения в окне просмотра или прокручивается с помощью содержащего его блока.

Основные значения:
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

---
background-clip - определяет расположение фона относительно границ и отступов.

Основные значения:
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

---
background-color - задает цвет фона элемента.

Основные значения:
background-color: #ccc;

---
background-image - задает одно или несколько фоновых изображений для элемента.

Основные значения:
background-image: url("../../img/image-1.png"), url("../../img/image-2.png");

---
background-origin - задает начало фона: от начала границы, внутри границы или от начала контента.

Основные значения:
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

---
background-position - задает начальную позицию для каждого фонового изображения.

Основные значения:
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

---
background-repeat - задает способ повторения фоновых изображений.
Фоновое изображение может повторяться по горизонтальной и вертикальной осям или не повторяться вовсе.

Основные значения:
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

---
background-size - задает размер фонового изображения элемента.
Изображение можно оставить в естественном размере, растянуть или ограничить, чтобы оно соответствовало доступному пространству.

Основные значения:
background-size: cover;
background-size: contain;
background-size: auto;
background-size: 20px auto;

---

#css #background

Как сделать красивый блок с помощью свойства clip-path

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

Рассмотрим несколько фигур, которые можно быстро сделать с его помощью.
Эти фигуры помогут вам красиво оформить дизайн сайта.

Начало координат у clip-path – верхний левый угол, ось x направлена вправо, ось y – направлена вниз.

Допустим у нас есть блок для которого вы уже задали размеры цвет или фоновое изображение:

<div class="block"></div>

Чтобы сделать косой одну из его сторон, нужно в стилях написать такой код:

.block {
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

Чтобы сделать ромб, нужно добавить следующий код:

.block {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

Чтобы сделать круг, добавьте такой код:

.block {
clip-path: circle(50%);
}

#css #clip_path

Красивое подчеркивание текста или коротко о text-decoration

Многие вебмастера знают о таком свойстве css, как text-decoration, но не все полностью используют его параметры.

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

Свойство text-decoration объединяет в себе несколько свойств, каждое из которых можно указать отдельно.

Это такие свойства как:
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness

text-decoration-color - указывает цвет линии.
Синтаксис:
text-decoration-color: red;

text-decoration-line - указывает расположение линии.
Синтаксис:
text-decoration-line: none, underline, overline, line-through;

text-decoration-style - отвечает за внешний вид линии.
Синтаксис:
text-decoration-style: solid, double, dotted, dashed, wavy;

text-decoration-thickness - отвечает за толщину. линии;
Синтаксис:
text-decoration-thickness: 5px;

Вместо этих отдельных свойств все параметры можно указать в одной строке:
text-decoration: underline double red 3px;

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

#css #text_decoration

Маргарет Гамильтон, ведущий инженер-программист НАСА по программе "Аполлон", стоит рядом с написанным ею от руки кодом, который помог доставить человека на Луну летом 1969 года.

#фото

Как изменить стрелку в раскрывающемся списке в CSS

Простой способ изменить стрелку в раскрывающемся списке с помощью css.

HTML код формы:

<select class="form-select">
<option value="Директор">Директор</option>
<option value="Менеджер">Менеджер</option>
<option value="Кладовщик">Кладовщик</option>
</select>

CSS код формы:

.form-select {
appearance: none;
-webkit-appearance: none; /* сафари и хром */
-moz-appearance: none; /* Мозилла */
-ms-appearance: none; /* IE */
background: url("data:image/svg+xml,<svg height='15px' width='15px' viewBox='0 0 16 16' fill='%23c4e1ee' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
background-position: calc(100% - 15px) center;

width: 200px;
padding: 8px 32px 8px 16px;
outline: none;
cursor: pointer;
}

Настройка SVG изображения:

Чтобы изменить цвет изображения, нужно изменить параметр fill=’%23314050′.
Он не имеет знака «#», вместо него здесь %23 и чтобы добавить шестнадцатеричный цвет, просто замените «#» на %23 314050, чтобы получилось %23314050.

Чтобы изменить размер изображения, нужно изменить параметры высоты height=’15px’ и ширины width=’15px’.
#css #html #select

Одной из ранних известных хакерских атак была "Червь Морриса" (Morris Worm). Это была первая масштабная компьютерная инфекция через сеть, которая произошла в 1988 году.

Червь Морриса был создан Робертом Тапаньяром Моррисом, американским студентом Массачусетского технологического института (MIT). Целью атаки не было нанесение вреда, а скорее исследование и демонстрация уязвимостей в компьютерных системах и сетях.

Червь Морриса был запущен в сеть Интернет и распространился по UNIX-системам, эксплуатируя несколько уязвимостей, включая слабое парольное хеширование и уязвимости в некоторых сетевых службах. Он распространялся быстро и независимо от намерений Морриса вызвал значительные проблемы в компьютерных системах, вызывая перегрузки и отказы в обслуживании.

#первые

70-кубитный компьютер Google Quntum
Холодильник, украшенный микроволновыми кабелями, охлаждает квантовый чип Google почти до абсолютного нуля.

#фото

Шахматный компьютер 80-х

#видео

Первая мышь для компьютера была разработана и создана в 1964 году Дугласом Энгельбартом (Douglas Engelbart) и его командой в Стэнфордском исследовательском институте.
Устройство было названо "мышью" из-за своего физического вида, с острой пластиковой корпусом и двумя колесиками снизу.

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

Перемещение мыши создавало сигналы, которые передавались компьютеру для определения ее положения, а затем использовались для управления курсором на экране.
Оригинальная мышь имела только одну кнопку, которая использовалась для выбора и активации объектов на экране.

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

#первые

Одним из первых хакеров в мире обычно считают Кевина Митника (Kevin Mitnick), хотя это понятие неоднозначно и его статус первого хакера спорный. Родившийся в 1963 году в Соединенных Штатах, Митник получил известность в 1980-х - 1990-х годах благодаря своим действиям в области компьютерной безопасности.

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

Хакеры и хакерская деятельность существовали задолго до Митника, и сложно однозначно определить первого хакера в мире. Это понятие имеет различные толкования, и назвать определенного человека первым хакером невозможно.

#первые

Первый в мире веб-браузер назывался WorldWideWeb.
Его создал Тим Бернерс-Ли, работавший тогда в CERN в 1990 году.
Позднее его переименовали в Nexus, чтобы не создавать путаницу, когда идет речь про всемирную паутину (WWW).
Этот браузер был разработан для использования на компьютерах NeXT, предшественниках современных Mac-компьютеров и на других компьютерах того времени он не работал.

#первые

Как использовать Google Chrome в качестве простого текстового редактора

Откройте в браузере новую вкладку и в адресной строке введите:
data:text/html, <html contenteditable>

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

Чтобы его сохранить, нужно нажать сочетание клавиш ctrl+s, после чего документ сохранится в формате .html и его можно будет открыть в любом редакторе.


#советы