Краткий справочник по CSS

• 4 марта
• admin
• css

display

keyframes

кастомный 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-страницы браузером

1. Формируется DOM дерево из HTML
2. Загружаются стили
3. На основе DOM и CSS формируется дерево рендеринга
4. Рассчитывается положение каждого элемента на странице
5. Отрисовка в браузере

Отличие border от outline

Border - граница, являющаяся частью элемента. Outline - граница за пределами элемента, не являющейся элементом, для него нельзя сделать скругление.

Адаптивная верстка

Варианты адаптивной верстки:

1. Резиновая верстка (указываем размеры в относительных единицах - % / rem / em)
2. Flex, grid layout (разметка по сетке)
3. Медиазапросы под разные размеры экранов

Что такое БЭМ

Методология веб-разработки созданная в Яндексе. Расшифровывается, как Блок - Элемент - Модификатор.

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

Достаточно добавить атрибут 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-расширения.