display
Block - показывается, как блок во всю отведенную ширину. Строки в начале и в конце содержимого переносятся
Inline - встроенный. При указании этого значения для блочных элементов не происходит перенос строк
keyframes
position
static - по умолчанию. элемент не имеет позиционирования
relative - можно сдвигать относительно положения блока
absolute - зафиксирован, он как бы скрыт от других элементов
fixed - фиксирован, похоже поведение на absolute
sticky - элемент фиксируется, но только в рамках одного блока. Например, если прикрепить верхнее меню с position: sticky, то пока блок не закончится, меню будет закреплено, но, как начнется новый блок, так прокрутка страницы скроет меню.
кастомный checkbox
создаем label и в него заносим все стили внешнего вида чекбокса. Далее в элементе input скрываем его вывод. Для отслеживания нажатия используется псевдо-класс checked
input { opacity: 0; } label { width: 60px; height: 60px; background-color: black; border-radius: 50%; } input:checked + label { background-color: red; }
центрирование блока
Отцентровать блок по горизонтали и вертикали
body { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; } .item { width: 100px; height: 100px; background-color: red; }
box-sizing
Свойство box-sizing: border-box; указывает, что рамку надо вписать внутрь блока.
Обработка web-страницы браузером
- Формируется DOM дерево из HTML
- Загружаются стили
- На основе DOM и CSS формируется дерево рендеринга
- Рассчитывается положение каждого элемента на странице
- Отрисовка в браузере
Отличие border от outline
Border - граница, являющаяся частью элемента. Outline - граница за пределами элемента, не являющейся элементом, для него нельзя сделать скругление.
Адаптивная верстка
Варианты адаптивной верстки:
- Резиновая верстка (указываем размеры в относительных единицах - % / rem / em)
- Flex, grid layout (разметка по сетке)
- Медиазапросы под разные размеры экранов
Что такое БЭМ
Методология веб-разработки созданная в Яндексе. Расшифровывается, как Блок - Элемент - Модификатор.
Открытие ссылки в новом окне
Достаточно добавить атрибут target тегу А. Например, <a href="/blog/" target="_blank">Ссылка в новом окне</a>.
Различие строчных и блочных элементов
Строчные элементы расположены в одну строку. Блочные - занимают всю свободную ширину.
margin и padding
Margin - внешний отступ, padding - внутренний отступ.
Для чего нужны семантические элементы
Семантические теги определяют конкретную часть страницы. Созданы для улучшения SEO оптимизации сайта. Введены в HTML5. Например, <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>
Свойство overflow
Если есть длинная строка текста и ее не надо переносить на новую строку и убрать полосу прокрутки. Ставим overflow:hidden; и текст будет идти в одну строку.
vh и vw
Относитеьный размер экрана. vh - 1% высоты окна браузера, vw - 1% ширины окна браузера.
Как визуально изменить курсор
Элементу можно указать свойство cursor и сменить его вид. Например, pointer или grab.
Изменение направления оси контейнера Flexbox
Если в элементу со свойством flex добавить flex-direction: column; то элементы будут расположены в столбик.
Размер элемента
Ширина и высота содержимого, внутренние отступы, рамка и внешние отступы. content + padding + border + margin.
z-index
Вертикальный порядок расположения элементов, по аналогии со слоями.
Виды input
Input - это элемент формы.
button - кнопка
checkbox - флаг
file - поле выбора файла
hidden - скрытое поле
image - поле с изображением (при нажатии на изображение форма отправляется)
password - текстовое поле для ввода пароля, где символы не показываются.
radio - переключатель
reset - кнопка сброса формы, возвращает исходные значения
submit - кнопка отправки формы
text - текстовое поле
Что делают justify-content и align-tiems у контейнера flexbox?
justify-content - выравнивают элементы фнутри flex блока. По умолчанию по оси X. С помощью flex-direction можно изменить ось. Для управления расположением на оси Y используется align-items. Так, если поставить justify-content:center; и align-items:center; - элементы будут выровнены по центру экрана (или flex блока).
Как убрать маркер у списка?
list-style: none;
О приоритете селекторов
Приоритет от меньшего к большему:
Селектор тега: 1
Селектор класса: 10
Селектор ID: 100
Inline-стиль: 1000
Псевдоклассы
Псевдоклассы добавляют характеристики элементов. Например, :active, :any, :hover, :first, :focus
Значения у background-size
При использовании свойства background: url("img.jpg") картинку можно лучше позиционировать свойством background-size.
cover - пропорции картинки сохраняются, но она влезает в весь блок. Однако, если картинка квадратная, а блок - нет (или наоборот), часть изображения может быть все равно скрыта.
contain - сжимает картинку до таких размеров, пока она не влезет полностью. Если картинка прямоугольная, а блок квадратный, то картинка будет повторена, что не всегда красиво. Чтобы этого избежать, надо добавить в свойстве background: url("img.jpg") no-repeat;
Псевдоэлементы
Всевдоселекторы позвлдяют стилизовать определенную часть выбранного элемента. Примеры элементов - ::after, ::before, ::first-letter.
Свойство Flexbox для переноса элементов на новую строку при переполнении
flex-wrap: wrap;
!important
Для повышения приоритета селектора при изменении стилей.
Разница между <script> <script async> <scrypt defer>
Async/defer - позволяют загружать скрипт js асинхронно, т.е. html загружается не дожидаясь загрузки скрипта js.
defer - используют для сохранения порядка загрузки скриптов, и скрипт в defer будет загружен только тогда, когда html страница будет загружена полностью.
Увеличение элемента при наведении, не сдвигая соседние
Обычный .btn:hover приводит к увеличению кнопки, но сдвигает соседнюю. Однако, если использовать transform: scale(2); то кнопка увеличивается не сдвигая соседние.
Медиа-запросы под мобильные приложения
@media screen and (max-width: 400px){}
Свойство для перевода текста в заглавные или строчные буквы
text-transform: uppercase;
Для чего атрибуты data?
Аттрибуты data позволяют хранить какие-то значения без применения js.
// CSS div { height: 100px; width: 100px; background-color: green; position: relative; } div:hover::after { content: attr(data-description); position: absolute; top: 100%; background-color: lightgray; } //HTML
Стилизация input для загрузки файлов
// CSS input { display: none; } label { padding: 20px; border: 2px black dashed; } //HTML <input id="file" type="file"> <label for="file">Нажмите для загрузки</label>
Селектор атрибутов
// CSS input[type=password] { border:3px solid red; } //HTML <input type="text"> <input type="password"> // оформление изменится только у поля password
Изменение стилей для кнопок с атрибутом disable
button[disabled]{ padding: 20px; background-color: red; }
Изменение стиля элемента span, следующего за input
input + span{ color: red; font-size: 50px; } // применится только для span после кнопки input
Каким селектором можно добавить стиль на каждый элемент страницы?
* { color: red; }
Спрятать элемент, но сохранить его пространство на странице
// вариант 1 - прозрачность opacity: 0; // вариант 2 - скрыть visibility: hidden; // вариант 3 - не работает, элемент пропадет совсем display: none;
Тень от блока
box-shadow: 4px 4px 4px black;
Тень от текста
text-shadow: 2px 2px 4px black;
Поворот блока на 45 градусов
transform: rotateZ(45deg);
Сделать вращения по осям Х и Y заметными
body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; perspective: 500px; } div { height: 200px; width: 200px; background-color: green; transition: 1s all; } div:hover { transform: rotateY(45deg); }
Сделать анимацию бесконечно повторяющейся
animation-duration: infinite;
Для чего препроцессоры
Препроцессор - надстройка над css расширяющая возможности стандартного css, так как добавляются свои переменные, вложенные селекторы, миксины и т.д.
Миксины в препроцессорах
Кусочек кода с css свойствами, которые потом можно использовать в других селекторах.
Bootstrap
Набор инструментов, включающий HTML и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.