@rainbowcat

Облегченный язык разметки Markdown

2024-07-13T21:48:42.937Z

Шпаргалка

Каскадность в CSS

2023-03-30T08:57:01.882Z

Краткий конспект по книге: Кит Грант "СSS для профи".

Каскадность - набор правил, который определяет, какое объявление будет выполняться при их конфликте.

Например, какое правило будет выполняться в данном случае:

<p class="example" id="example>Hello</p>

#example {
  color: red;
 }
 
.example {
  color: blue;
 }
 
p {
  color: black;
 }

Для определения приоритета учитываются три показателя:

источник стилей;
специфичность селекторов;
исходный порядок.

Источник стилей

По убыванию приоритета:

Важные авторские стили - созданные вами, помеченные аннотацией !important.

Авторские стили - созданные вами таблицы.

Браузерные стили - стили браузера по умолчанию.

Специфичность селекторов

По убыванию приоритета:

селектор с идентификаторами. Чем большее идентификаторов, тем более специфичен селектор.
селектор с классами. Чем больше классов, тем более специфичен селектор.
селектор с тегами. Чем больше тегов, тем более специфичен селектор.

В итоге, если селектор имеет хотя бы один идентификатор, он будет более специфичен, чем селектор с несколькими классами.

Для удобства специфичность выражают в численной форме:

1, 2, 1

число идентификаторов, классов, тегов

Например:

#id1 #id2 {}           -   2, 0, 0   - самый специфичный

#id1 .class1 .class2{} -   1, 2, 0

.class1 .class2 p{}    -   0, 2, 1

html body header p     -   0, 0, 4

Но правило с пометкой !important обладает самой высокой специфичностью!

Исходный порядок

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

#css

#верстка

#конспект

#каскадность

#специфичность

#селекторы

Сравнение синтаксиса языков Python и Java Script (продолжение)

2023-03-03T09:44:25.987Z

Сравнение записи операторов в языках программирования Python и Java Script

2023-02-22T13:12:02.590Z

Табличка актуальна для меня, так как я изучаю Java Script после изучения Питона.

Базовые операторы схожи. Основное различие - существование в JS нестрогих операторов равенства и неравенства.

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

Поэтому в JS:

"2" == 2   //true
"2" === 2   //false

В Питоне сравнение всегда более строгое. Приведение типов происходит только при сравнении 0 и 1 с булевыми значениями.

1 == True // True
0 == False // True

Создание поля поиска в html/css

2022-07-15T16:58:28.236Z

Базу для поля поиска можно создать на основе тега <form>, в который будут вложены два тега <input>. Первый тег отвечает за поле поиска, второй — за кнопку «Поиск».

В HTML5 для поиска существует специальное поле с типом «search». Оно отличается от текстового тем, что браузеры Chrome, Safari и IE10, добавляют крестик в правой части поля для быстрой очистки введенного текста. Атрибут placeholder позволяет выбрать текст для автозаполнения поля.

Второй <input> создает кнопку отправки данных и имеет тип «submit». Атрибут value определяет, что будет написано на кнопке.

<form> 
  <input type="search" name="text" class="search" placeholder="Что вы хотите найти?">
  <input type="submit" name="submit" class="submit" value="Найти">
</form>

Такое поле поиска выглядит очень скромно, но его можно изменять с помощью css.

Пример 1

В данном примере были изменены цвет поля ввода и кнопки. В помощью атрибута border-radius скруглены края. Текст на кнопке заменен иконкой с помощью атрибута background.

Пример 2

Добавляем анимацию с помощью transform.

html-код как в предыдущем примере.

В первую очередь назначаем для тега <form> позиционирование relative, а для input - позиционирование absolute. Привяжем поле ввода и кнопку к верхнему левому краю формы.

Используем псевдокласс :hover, чтобы при наведении мышки на форму кнопка смещалась на 200px вправо, а поле ввода растягивалось, заполняя пространство до кнопки.

С помощью функции свойства transform — translate() - можно переместить элемент с его начальной точки. Функция принимает два параметра — один для перемещения по оси X, второй — по оси Y.

Свойство transitions предоставляют способ контролировать скорость анимации.