HTML5 все теги
Служебные теги
Синтаксис Описание
<!DOCTYPE> Определяет тип документа
<head></head> Контейнер в начале страницы для служеб. тегов и подгружаемых функций
<title></title> Заголовок документа отображаемый во вкладке браузера
<meta> Метаданные страницы
<link> Подключает внешние сервисы и таблицы стилей
<script></script> Подключает скрипты к станице
<style></style> Подключает глобальные стили к странице
<base> Базовый URL-адрес — домен
<noscript></noscrip> Блок не поддерживающий скрипты
Структурные блоки
<body></body> Тело html документа
<main><main> Контейнер для всего содержимого страницы
<nav></nav> Контейнер для навигационного меню
<header><header> Шапка сайта
<article></article> Блок основного контента
<section></section> Часть контента с заголовком
<aside></aside> Часть контента, имеющая косвенное отношение к основному
<footer></footer> Подвал страницы
<div> Применяется для создания блочных контейнеров
<span></span> Применяется для создания встроенных контейнеров
<figure></figure> Независимый контейнер. Преимущественно для изображений
<figcaption></figcaption> Заголовок для figure
<details></details> Контейнер с дополнительной информацией, который можно свернуть или развернуть
<summary></summary> Заголовок для details которому можно щёлкать, чтоб свернуть или развернуть
Текст
<h1></h1>…<h6></h6> Заголовки шесть уровней
<p></p> Абзац
<br> Перенос строки
<wbr> Возможное место разрыва строки
<hr> Прямая линия
<blockquote></blockquote> Цитата
<q></q> Краткая цитата
<cite></cite> Источник цитирования
<code></code> Фрагмент кода
<pre></pre> Неформатированнй код
<kbd></kbd> Текст моноширным шрифтом
<samp></samp> Результат выполнения скрипта
<var></var> Выделяет переменные из программ
<del></del> Зачёркнутый текст помечается как удалённый
<s></s> Зачёркнутый текст
<ins><ins> Подчёркивает изменения в тексте
<u></u> Подчёркнутый текст
<dfn></dfn> Выделяет термин курсивом
<em></em> Выделяет курсивом важные фрагменты текста
<i></i> Выделяет текст курсивом
<strong></strong> Выделяет важный текст полужирным
Служебные теги
Синтаксис Описание
<!DOCTYPE> Определяет тип документа
<head></head> Контейнер в начале страницы для служеб. тегов и подгружаемых функций
<title></title> Заголовок документа отображаемый во вкладке браузера
<meta> Метаданные страницы
<link> Подключает внешние сервисы и таблицы стилей
<script></script> Подключает скрипты к станице
<style></style> Подключает глобальные стили к странице
<base> Базовый URL-адрес — домен
<noscript></noscrip> Блок не поддерживающий скрипты
Структурные блоки
<body></body> Тело html документа
<main><main> Контейнер для всего содержимого страницы
<nav></nav> Контейнер для навигационного меню
<header><header> Шапка сайта
<article></article> Блок основного контента
<section></section> Часть контента с заголовком
<aside></aside> Часть контента, имеющая косвенное отношение к основному
<footer></footer> Подвал страницы
<div> Применяется для создания блочных контейнеров
<span></span> Применяется для создания встроенных контейнеров
<figure></figure> Независимый контейнер. Преимущественно для изображений
<figcaption></figcaption> Заголовок для figure
<details></details> Контейнер с дополнительной информацией, который можно свернуть или развернуть
<summary></summary> Заголовок для details которому можно щёлкать, чтоб свернуть или развернуть
Текст
<h1></h1>…<h6></h6> Заголовки шесть уровней
<p></p> Абзац
<br> Перенос строки
<wbr> Возможное место разрыва строки
<hr> Прямая линия
<blockquote></blockquote> Цитата
<q></q> Краткая цитата
<cite></cite> Источник цитирования
<code></code> Фрагмент кода
<pre></pre> Неформатированнй код
<kbd></kbd> Текст моноширным шрифтом
<samp></samp> Результат выполнения скрипта
<var></var> Выделяет переменные из программ
<del></del> Зачёркнутый текст помечается как удалённый
<s></s> Зачёркнутый текст
<ins><ins> Подчёркивает изменения в тексте
<u></u> Подчёркнутый текст
<dfn></dfn> Выделяет термин курсивом
<em></em> Выделяет курсивом важные фрагменты текста
<i></i> Выделяет текст курсивом
<strong></strong> Выделяет важный текст полужирным
Изображения
<img> Изображение html
<>map</map> Активные области на карте
<area></area> Активная область с гиперссылкой
<canvas></canvas> Холст контейнер для
динамического отображения изображений созданных с помощью JavaScript
Формы HTML
<form></form> Формы HTML
<input></input> Многофункциональные поля формы
<textarea></textarea> Многострочное поле формы
<label></label> Обычно текст формы
<datalist></datalist> Создаёт список вариантов, из которых можно сделать выбор
<option></option> Опция в раскрывающемся списке
<optgroup></optgroup> Контейнер с заголовком для группы <option>
<select></select> Контейнер для создания раскрывающегося списка
<fieldset></fieldset> Группирует связанные элементы формы
<legend></legend> Заголовок элементов формы, связанных <fieldset>
<button></button> Интерактивная кнопка
<keygen></keygen> Генератор ключей
<progress></progress> Отображает процесс выполнения в числовых значениях
<meter></meter> Используется для отображения
числовых значений таких показателей как количество посетителей, величина давления и т.п.
<output></output> Поле для вывода результатов вычислений
Встраиваемые элементы
<audio></audio> Аудио файл
<video></video> Видео файл
<source></source> Указывает местоположениеи тип альтернативных файлов для <video> и <audio>
<track></track> Субтитры
<embed></embed> Встроенный внешний элемент
<object></object> Контейнер для встраиваемого внешнего элемента
<param> Параметры встраиваемого внешнего элемента
<iframe></iframe> Встроенный фрейм
Списки
<ol></ol> Упорядоченный нумерованный список
<ul></ul> Маркированный список
<li></li> Элемент списка
<dl></dl> Список с описаниями
<dt></dt> Строка списка с описаниями
<dd></dd> Описание строки, списка с описаниями
Ссылка
<a></a> Гипер ссылка
<img> Изображение html
<>map</map> Активные области на карте
<area></area> Активная область с гиперссылкой
<canvas></canvas> Холст контейнер для
динамического отображения изображений созданных с помощью JavaScript
Формы HTML
<form></form> Формы HTML
<input></input> Многофункциональные поля формы
<textarea></textarea> Многострочное поле формы
<label></label> Обычно текст формы
<datalist></datalist> Создаёт список вариантов, из которых можно сделать выбор
<option></option> Опция в раскрывающемся списке
<optgroup></optgroup> Контейнер с заголовком для группы <option>
<select></select> Контейнер для создания раскрывающегося списка
<fieldset></fieldset> Группирует связанные элементы формы
<legend></legend> Заголовок элементов формы, связанных <fieldset>
<button></button> Интерактивная кнопка
<keygen></keygen> Генератор ключей
<progress></progress> Отображает процесс выполнения в числовых значениях
<meter></meter> Используется для отображения
числовых значений таких показателей как количество посетителей, величина давления и т.п.
<output></output> Поле для вывода результатов вычислений
Встраиваемые элементы
<audio></audio> Аудио файл
<video></video> Видео файл
<source></source> Указывает местоположениеи тип альтернативных файлов для <video> и <audio>
<track></track> Субтитры
<embed></embed> Встроенный внешний элемент
<object></object> Контейнер для встраиваемого внешнего элемента
<param> Параметры встраиваемого внешнего элемента
<iframe></iframe> Встроенный фрейм
Списки
<ol></ol> Упорядоченный нумерованный список
<ul></ul> Маркированный список
<li></li> Элемент списка
<dl></dl> Список с описаниями
<dt></dt> Строка списка с описаниями
<dd></dd> Описание строки, списка с описаниями
Ссылка
<a></a> Гипер ссылка
starper55plys.ru
Шпаргалки HTML, CSS, спец. символы, псевдоклассыБлог Старого Перца
Шпаргалки html, шпаргалки css, спец. символы, псевдоклассы
Шпаргалки CSS, все свойства
Текст
text-align: center; Выравнивание текста по центру;
text-align: left; Выравнивание текста по левому краю;
text-align:right; Выравнивание текста по правому краю;
text-decoration: none; Текст без подчёркивания;
text-decoration: underline; Подчёркнутый текст;
text-decoration: overline; Черта над текстом;
text-decoration: line-through; Зачёркнутый текст;
text-decoration: blink; Мигающий текст;
text-transform: uppercase; Делает все буквы заглавными;
text-transform: capitalize; Делает все первые буквы заглавными;
text-indent: 30px; Красная строка;
word-spacing: 30px; Задаёт расстояние между словами;
letter-spacing:2px; Задаёт расстояние между буквами;
line-height: 10px; Задаёт фиксированную высоту строки;
direction: rtl; Задаёт направление; текста справа налево.
color: #00ff00; Цвет текста;
text-schadow: Тень текста;
Шрифт
font-style: italic; Шрифт курсив;
font-weight: bold; Жирный шрифт;
font-weight: lighter; Тонкий шрифт;
font-size: 16px; Размер шрифта;
font-family: Georgia Название шрифта;
font-variant: small-caps; Делает все буквы прописными;
font:italic bold 16px Georgia; Сокращение записи для свойства font
Внешние и внутренние отступы
margin-top: 20px; Внешний отступ сверху;
margin-right: 20px; Внешний отступ справа;
margin-bottom: 20px; Внешний отступ снизу;
margin-left: 20px; Внешний отступ слева;
margin: 20px 20px 20px 20px; Сокращённая запись для внешних отступов, первая цифра отступ сверху, и далее по часовой стрелке;
padding-top: 10px; Внутренний отступ сверху;
padding-right:10px; Внутренний отступ справа;
padding-bottom: 10px; Внутренний отступ снизу;
padding-left: 10px; Внутренний отступ слева;
padding: 10px 10px 10px 10px; Сокращение записи для свойства padding, расположение аналогично margin
Свойства фона
background-color: #00ff00; Цвет фона элемента;
background-position: center; Размещает фоновое изображение по центру;
background-position: 100px 150px; Размещает фоновое изображение, первая цифра — отступ сверху (top), вторая — отступ слева left;
background-repeat:repeat; Изображение повторяется пока не займёт всё пространство блока;
background-repeat: no-repeat Изображение не повторяется;
background-repeat:repeat-y Изображение повторяется по вертикали;
background-repeat:repeat-x; Изображение повторяется по горизонтали;
background-attachment: fixed; Изображение фиксируется и остаётся на месте при прокрутке страницы;
background-image:url(images/im.png) Вставляет изображение в элемент;
background: #00ff00 url(images/im.png) no-repeat fixed center; Сокращение записи для background;
background-size: Масштабирует фоновое изображение;
Ширина и высота
width: 100px; Ширина элемента;
min-width: 100px; Минимальная ширина элемента;
max-width: 100px; Максимальная ширина элемента;
height: 100px; Высота элемента;
min-height: 100px; Минимальная высота элемента;
max-height: 100px; Максимальная высота элемента;
Рамки
border: 3px; Рамка элемента;
border-color:#ff0000; Цвет рамки;
border-style: solid; Стиль рамки;
border: 5px solid #ff0000; Сокращение записи для рамки;
outline: 5px solid #00FF00; Задаёт рамку за внешней границей элемента;
border-radius: #00FF00 25px; Создаёт рамку с закруглёнными углами вокруг элемента;
Текст
text-align: center; Выравнивание текста по центру;
text-align: left; Выравнивание текста по левому краю;
text-align:right; Выравнивание текста по правому краю;
text-decoration: none; Текст без подчёркивания;
text-decoration: underline; Подчёркнутый текст;
text-decoration: overline; Черта над текстом;
text-decoration: line-through; Зачёркнутый текст;
text-decoration: blink; Мигающий текст;
text-transform: uppercase; Делает все буквы заглавными;
text-transform: capitalize; Делает все первые буквы заглавными;
text-indent: 30px; Красная строка;
word-spacing: 30px; Задаёт расстояние между словами;
letter-spacing:2px; Задаёт расстояние между буквами;
line-height: 10px; Задаёт фиксированную высоту строки;
direction: rtl; Задаёт направление; текста справа налево.
color: #00ff00; Цвет текста;
text-schadow: Тень текста;
Шрифт
font-style: italic; Шрифт курсив;
font-weight: bold; Жирный шрифт;
font-weight: lighter; Тонкий шрифт;
font-size: 16px; Размер шрифта;
font-family: Georgia Название шрифта;
font-variant: small-caps; Делает все буквы прописными;
font:italic bold 16px Georgia; Сокращение записи для свойства font
Внешние и внутренние отступы
margin-top: 20px; Внешний отступ сверху;
margin-right: 20px; Внешний отступ справа;
margin-bottom: 20px; Внешний отступ снизу;
margin-left: 20px; Внешний отступ слева;
margin: 20px 20px 20px 20px; Сокращённая запись для внешних отступов, первая цифра отступ сверху, и далее по часовой стрелке;
padding-top: 10px; Внутренний отступ сверху;
padding-right:10px; Внутренний отступ справа;
padding-bottom: 10px; Внутренний отступ снизу;
padding-left: 10px; Внутренний отступ слева;
padding: 10px 10px 10px 10px; Сокращение записи для свойства padding, расположение аналогично margin
Свойства фона
background-color: #00ff00; Цвет фона элемента;
background-position: center; Размещает фоновое изображение по центру;
background-position: 100px 150px; Размещает фоновое изображение, первая цифра — отступ сверху (top), вторая — отступ слева left;
background-repeat:repeat; Изображение повторяется пока не займёт всё пространство блока;
background-repeat: no-repeat Изображение не повторяется;
background-repeat:repeat-y Изображение повторяется по вертикали;
background-repeat:repeat-x; Изображение повторяется по горизонтали;
background-attachment: fixed; Изображение фиксируется и остаётся на месте при прокрутке страницы;
background-image:url(images/im.png) Вставляет изображение в элемент;
background: #00ff00 url(images/im.png) no-repeat fixed center; Сокращение записи для background;
background-size: Масштабирует фоновое изображение;
Ширина и высота
width: 100px; Ширина элемента;
min-width: 100px; Минимальная ширина элемента;
max-width: 100px; Максимальная ширина элемента;
height: 100px; Высота элемента;
min-height: 100px; Минимальная высота элемента;
max-height: 100px; Максимальная высота элемента;
Рамки
border: 3px; Рамка элемента;
border-color:#ff0000; Цвет рамки;
border-style: solid; Стиль рамки;
border: 5px solid #ff0000; Сокращение записи для рамки;
outline: 5px solid #00FF00; Задаёт рамку за внешней границей элемента;
border-radius: #00FF00 25px; Создаёт рамку с закруглёнными углами вокруг элемента;
starper55plys.ru
CSS ШпаргалкиБлог Старого Перца
Свойства CSS
Продолжение Свойста CSS
Свойства списка
list-style-type: Определяет вид маркера в списке. Применяемые значения:
none — без маркера;
circle — круг;
disc — заполненный круг;
square — квадрат;
upper-alpha — A B C D …;
upper-roman — I II III IV V …;
lower-alpha — a b c d …;
decimal-leading-zero — 01 02 03 04 …;
none — отменяет маркер
list-style-image: url(images/im.png) Устанавливает маркер-изображение;
list-style-position: inside; Размещает маркер-изображение внутри блока списка;
list-style:square inside url(images/im.png); Сокращение записи для list-style, square указывается на случай недоступности картинки;
Позиционирование
position: absolute; Размещает элемент относительно границ экрана монитора. Применяется со свойствами: top:, left:, right:, bottom:, в которых указываются координаты позиционирования
position: relative; Применяется к элементу, относительно которого позиционируется другой элемент;
position: fixed; Фиксирует элемент в указанной части экрана. Элемент не реагирует на прокрутку
x-index: ; Накладывает элементы друг на друга по оси х;
y-index: ; Накладывает элементы друг на друга по оси у;
z-index: ; Накладывает элементы друг на друга по оси z;
float: right; Задаёт обтекание слева;
float: left; Задаёт обтекание справа;
clear: both; Запрещает обтекание;
clip: rect(10px,50px); Обрезает изображение квадратом;
Видимость
visibility: hidden; Делает элемент невидимым, но сохраняет занимаемое им место;
display: none; Временно удаляет элемент со страницы, и другие элементы могут занять его место;
display: block; Делает элемент блочным;
display: inline; Делает элемент встроенным;
display: inline-block; Делает элемент встроенным, но с ддоступными свойствами блочного;
overflow: auto; При необходимости добавляет полосу прокрутки в блок с контентом;
opacity: 0; Делает элемент полностью прозрачным. Прозрачность уменьшается до значения 1;
Трансформация и анимация
transform поворачивает, сдвигает, наклоняет и масштабирует элемент.
transform: scale(); Масштабирует элемент по горизонтали и вертикали. Число в скобках больше единицы увеличивает; элемент, а меньше единицы — уменьшает
transform: scaleX(); Масштабирует элемент по горизонтали;
transform: scaleY(); масштабирует элемент по вертикали
transform: skewX(); Наклоняет элемент на заданный угол в скобках по вертикали влево, отрицательное значение — вправо
transform: skewY(); Наклоняет элемент на заданный угол по горизонтали;
transform: translateX(); Сдвигает элемент по горизонтали
transform: translateY(); Сдвигает элемент по вертикали
transform: rotate(); Поворот элемента вокруг центра на заданный угол
transform: rotateY(360deg); Поворот элемента вокруг вертикальной оси. Применяется в 3D
transform: rotateX(360deg); Поворот элемента вокруг горизонтальной оси. Применяется в 3D
transform: matrix() Создаёт эффект отражения элемента
transform-style: preserve-3d Создаёт 3D эффект
transform-origin: x y z; Задаёт координаты точки относительно центра, вокруг которой будет вращаться элемент
transition-property: Определяет свойство, которое будет анимироваться
transition-duration: Продолжительность эффекта перехода
transition-timing-function: Скорость эффекта перехода
transition-delay: Задержка начала анимации
transition: left 3s ease; Сокращение записи для transition
animation Pадаёт параметры действия для анимации — длительность анимации, повторение, направление, тип движения, шаги. Работает со свойством @keyframes
animation-name Имя анимации
animation-duration Длительность анимации
animation-timing-function Определяет вид анимации
animation-iteration-count Задаёт число повторений анимации
animation-direction Задаёт направление движения
animation-delay Задаёт задержку анимации перед началом воспроизведения
animation: nev 5s infinite alternate; Сокращение записи для animation
@keyframes Правило, записывается как селектор, внутрь которого помещаются селекторы последовательно определяющие состояние элемента в определённый момент
Свойства списка
list-style-type: Определяет вид маркера в списке. Применяемые значения:
none — без маркера;
circle — круг;
disc — заполненный круг;
square — квадрат;
upper-alpha — A B C D …;
upper-roman — I II III IV V …;
lower-alpha — a b c d …;
decimal-leading-zero — 01 02 03 04 …;
none — отменяет маркер
list-style-image: url(images/im.png) Устанавливает маркер-изображение;
list-style-position: inside; Размещает маркер-изображение внутри блока списка;
list-style:square inside url(images/im.png); Сокращение записи для list-style, square указывается на случай недоступности картинки;
Позиционирование
position: absolute; Размещает элемент относительно границ экрана монитора. Применяется со свойствами: top:, left:, right:, bottom:, в которых указываются координаты позиционирования
position: relative; Применяется к элементу, относительно которого позиционируется другой элемент;
position: fixed; Фиксирует элемент в указанной части экрана. Элемент не реагирует на прокрутку
x-index: ; Накладывает элементы друг на друга по оси х;
y-index: ; Накладывает элементы друг на друга по оси у;
z-index: ; Накладывает элементы друг на друга по оси z;
float: right; Задаёт обтекание слева;
float: left; Задаёт обтекание справа;
clear: both; Запрещает обтекание;
clip: rect(10px,50px); Обрезает изображение квадратом;
Видимость
visibility: hidden; Делает элемент невидимым, но сохраняет занимаемое им место;
display: none; Временно удаляет элемент со страницы, и другие элементы могут занять его место;
display: block; Делает элемент блочным;
display: inline; Делает элемент встроенным;
display: inline-block; Делает элемент встроенным, но с ддоступными свойствами блочного;
overflow: auto; При необходимости добавляет полосу прокрутки в блок с контентом;
opacity: 0; Делает элемент полностью прозрачным. Прозрачность уменьшается до значения 1;
Трансформация и анимация
transform поворачивает, сдвигает, наклоняет и масштабирует элемент.
transform: scale(); Масштабирует элемент по горизонтали и вертикали. Число в скобках больше единицы увеличивает; элемент, а меньше единицы — уменьшает
transform: scaleX(); Масштабирует элемент по горизонтали;
transform: scaleY(); масштабирует элемент по вертикали
transform: skewX(); Наклоняет элемент на заданный угол в скобках по вертикали влево, отрицательное значение — вправо
transform: skewY(); Наклоняет элемент на заданный угол по горизонтали;
transform: translateX(); Сдвигает элемент по горизонтали
transform: translateY(); Сдвигает элемент по вертикали
transform: rotate(); Поворот элемента вокруг центра на заданный угол
transform: rotateY(360deg); Поворот элемента вокруг вертикальной оси. Применяется в 3D
transform: rotateX(360deg); Поворот элемента вокруг горизонтальной оси. Применяется в 3D
transform: matrix() Создаёт эффект отражения элемента
transform-style: preserve-3d Создаёт 3D эффект
transform-origin: x y z; Задаёт координаты точки относительно центра, вокруг которой будет вращаться элемент
transition-property: Определяет свойство, которое будет анимироваться
transition-duration: Продолжительность эффекта перехода
transition-timing-function: Скорость эффекта перехода
transition-delay: Задержка начала анимации
transition: left 3s ease; Сокращение записи для transition
animation Pадаёт параметры действия для анимации — длительность анимации, повторение, направление, тип движения, шаги. Работает со свойством @keyframes
animation-name Имя анимации
animation-duration Длительность анимации
animation-timing-function Определяет вид анимации
animation-iteration-count Задаёт число повторений анимации
animation-direction Задаёт направление движения
animation-delay Задаёт задержку анимации перед началом воспроизведения
animation: nev 5s infinite alternate; Сокращение записи для animation
@keyframes Правило, записывается как селектор, внутрь которого помещаются селекторы последовательно определяющие состояние элемента в определённый момент
Добавление элементов без html
content: Выводит на страницу элементы, которых нет в html коде. Применяется с псевдоклассами ::after и ::before
content:"" В кавычки можно добавить текст и он будет выведен на страницу
content:attr(); В скобки обычно добавляется спецсимвол html, изображение которого и выводится в начале или в конце элемента
content: url(images/1.png); Выводит картинку в начале или в конце элемента. Обычно маркер списка.
Колончатая вёрстка страницы
columns: Разделяет поле страницы на колонки
column-count: 3; Количество колонок
column-width: 200px; Ширина колонок
column-gap: 1-px; Ширина пробела между колонками
column-span: all; Указывает количество колонок, которые пересечёт элемент. Применяется обычно для заголовка.
column-rule-style: solid; Создаёт вертикальную разделительную линию между колонками.
column-rule-width: 2px; Ширина разделительной линии
column-rule-color: #999; Цвет разделительной линии
column-rule: 2px solid #999; Краткая запись разделительной линии
Медиа запросы
@media all{Таблица стилей} Селекторы и свойства css заносятся в фигурные скобки и применяется ко всем типам носителей
@media screen and (){} Экран монитора. В круглых скобках указываются дополнительные требования, например размер экрана
@media tv and (){} Телевизор
@media print and (){} Принтеры
@media handheld and (){} Смартфоны
@media screen, handheld and (){} Монитор и смартфон
@media screen and (max-width: 600px){} Для моноторов с разрешением менее 600px
Другие @ правила
@charset «кодировка»; Устанавливает кодировку для css файла
@import «имя файла» [типы носителей]; Импортирует содержимое CSS-файла в текущую стилевую таблицу
Цветовые и визуальные фильтры
filter: blur(3px); Размытие
filter: brightness(70%); Яркость
filter: contrast(50%); Контрастность
filter: drop-shadow(2px 3px 5px blue); Добавляет тень ко всем элементам
filter: grayscale(50%); Обесцвечивание
filter: hue-rotate(70deg); Изменяет цвета в зависимости от заданного угла в цветовом круге
filter: invert(100%); Негатив изображения
filter: opacity(30%); Прозрачность
filter: saturate(300%); Насыщенность цвета. Меньше 100% — уменьшает насыщенность, больше 100% —увеличивает
filter: sepia(120%); Ретро
Шпаргалки CSS, все свойства
content: Выводит на страницу элементы, которых нет в html коде. Применяется с псевдоклассами ::after и ::before
content:"" В кавычки можно добавить текст и он будет выведен на страницу
content:attr(); В скобки обычно добавляется спецсимвол html, изображение которого и выводится в начале или в конце элемента
content: url(images/1.png); Выводит картинку в начале или в конце элемента. Обычно маркер списка.
Колончатая вёрстка страницы
columns: Разделяет поле страницы на колонки
column-count: 3; Количество колонок
column-width: 200px; Ширина колонок
column-gap: 1-px; Ширина пробела между колонками
column-span: all; Указывает количество колонок, которые пересечёт элемент. Применяется обычно для заголовка.
column-rule-style: solid; Создаёт вертикальную разделительную линию между колонками.
column-rule-width: 2px; Ширина разделительной линии
column-rule-color: #999; Цвет разделительной линии
column-rule: 2px solid #999; Краткая запись разделительной линии
Медиа запросы
@media all{Таблица стилей} Селекторы и свойства css заносятся в фигурные скобки и применяется ко всем типам носителей
@media screen and (){} Экран монитора. В круглых скобках указываются дополнительные требования, например размер экрана
@media tv and (){} Телевизор
@media print and (){} Принтеры
@media handheld and (){} Смартфоны
@media screen, handheld and (){} Монитор и смартфон
@media screen and (max-width: 600px){} Для моноторов с разрешением менее 600px
Другие @ правила
@charset «кодировка»; Устанавливает кодировку для css файла
@import «имя файла» [типы носителей]; Импортирует содержимое CSS-файла в текущую стилевую таблицу
Цветовые и визуальные фильтры
filter: blur(3px); Размытие
filter: brightness(70%); Яркость
filter: contrast(50%); Контрастность
filter: drop-shadow(2px 3px 5px blue); Добавляет тень ко всем элементам
filter: grayscale(50%); Обесцвечивание
filter: hue-rotate(70deg); Изменяет цвета в зависимости от заданного угла в цветовом круге
filter: invert(100%); Негатив изображения
filter: opacity(30%); Прозрачность
filter: saturate(300%); Насыщенность цвета. Меньше 100% — уменьшает насыщенность, больше 100% —увеличивает
filter: sepia(120%); Ретро
Шпаргалки CSS, все свойства
starper55plys.ru
CSS ШпаргалкиБлог Старого Перца
Свойства CSS
Flexbox
.flex-container{} Преобразует любой элемент во флекс-контейнер, а все дочерние элементы во флекс-элементы. Обязательное свойство display: flex;
justify-content: flex-start; Дочерние элементы позиционируются от начала контейнера
justify-content: flex-end; Дочерние элементы позиционируются от конца контейнера (справа)
justify-content: center; Дочерние элементы позиционируются по центру контейнера
justify-content: space-between; Элементы выравниваются по главной оси. Первый элемент располагается в начале контейнера, последний в конце, а все остальные равномерно располагаются на свободном пространстве между ними
justify-content: space-around; Свободное пространство делится поровну между элементами, добавляя им отступы
justify-content: inherit; Наследует родительское свойство
align-items: stretch; Флекс элементы занимают всё пространство по высоте.
align-items: flex-start; Все дочерние элементы выравниваются по левому краю и верхней границе flex-бокса
align-items: flex-end; Элементы выравниваются по нижнему краю, относительно нижней границы flex-бокса
align-items: center; Выравнивание по центру
align-items: baseline; Выравнивание по базовой линии
align-items: inherit; Наследует значение родителя
flex-direction: row; Направление главной оси слева направо
flex-direction: row-reverse; Направление главной оси справа налево
flex-direction: column; Направление главной оси сверху вниз
flex-direction: column-reverse;Направление снизу вверх
flex-wrap: nowrap; Flex-элементы не переносятся и располагаются в одну строку слева направо
flex-wrap: wrap; Элементы переносятся и располагаются в несколько рядов слева на право
flex-wrap: wrap-reverse; Элементы переносятся и располагаются в обратном порядке. Перенос осуществляется снизу вверх
align-content: stretch; Строки равномерно растягиваются, заполняя всё доступное пространство
align-content: flex-start; Строки выравниваются по левому краю,относительно верхней границы
align-content: flex-end; Строки выравниваются по левому краю, относительно нижней границы
align-content: center; Выравнивание по центру
align-content: space-between; Строки выравниваются по высоте, свободное пространство распределяется между ними
align-content: inherit; Наследует значение родителя
order: -1 или 1; Ставит любой flex-элемент в начало строки или в конец строки
flex-basis: 200px; Ширина элемента задаётся во всех доступных в веб размерах
flex-basis: auto; Элемент получает базовую ширину, соответствующую ширине контента
flex-grow: 1.0 ….; Устанавливает коэффициент увеличения элемента
flex-shrink: 1.0 …; Устанавливает коэффициент уменьшения элемента
align-self: auto; Выравнивание отдельного элемента. По умолчанию задаётся выравнивание родителя
align-self: flex-start; Отдельный элемент выравнивается по левому краю, относительно верхней границы
align-self: flex-end; Выравнивается по левому краю, относительно нижней границы
align-self: center; Выравнивается по центру
align-self: baseline; Выравнивается по базовой линии слева
align-self: stretch; Элемент растягивается на всю высоту flex-контейнера
Шпаргалки CSS, все свойства
.flex-container{} Преобразует любой элемент во флекс-контейнер, а все дочерние элементы во флекс-элементы. Обязательное свойство display: flex;
justify-content: flex-start; Дочерние элементы позиционируются от начала контейнера
justify-content: flex-end; Дочерние элементы позиционируются от конца контейнера (справа)
justify-content: center; Дочерние элементы позиционируются по центру контейнера
justify-content: space-between; Элементы выравниваются по главной оси. Первый элемент располагается в начале контейнера, последний в конце, а все остальные равномерно располагаются на свободном пространстве между ними
justify-content: space-around; Свободное пространство делится поровну между элементами, добавляя им отступы
justify-content: inherit; Наследует родительское свойство
align-items: stretch; Флекс элементы занимают всё пространство по высоте.
align-items: flex-start; Все дочерние элементы выравниваются по левому краю и верхней границе flex-бокса
align-items: flex-end; Элементы выравниваются по нижнему краю, относительно нижней границы flex-бокса
align-items: center; Выравнивание по центру
align-items: baseline; Выравнивание по базовой линии
align-items: inherit; Наследует значение родителя
flex-direction: row; Направление главной оси слева направо
flex-direction: row-reverse; Направление главной оси справа налево
flex-direction: column; Направление главной оси сверху вниз
flex-direction: column-reverse;Направление снизу вверх
flex-wrap: nowrap; Flex-элементы не переносятся и располагаются в одну строку слева направо
flex-wrap: wrap; Элементы переносятся и располагаются в несколько рядов слева на право
flex-wrap: wrap-reverse; Элементы переносятся и располагаются в обратном порядке. Перенос осуществляется снизу вверх
align-content: stretch; Строки равномерно растягиваются, заполняя всё доступное пространство
align-content: flex-start; Строки выравниваются по левому краю,относительно верхней границы
align-content: flex-end; Строки выравниваются по левому краю, относительно нижней границы
align-content: center; Выравнивание по центру
align-content: space-between; Строки выравниваются по высоте, свободное пространство распределяется между ними
align-content: inherit; Наследует значение родителя
order: -1 или 1; Ставит любой flex-элемент в начало строки или в конец строки
flex-basis: 200px; Ширина элемента задаётся во всех доступных в веб размерах
flex-basis: auto; Элемент получает базовую ширину, соответствующую ширине контента
flex-grow: 1.0 ….; Устанавливает коэффициент увеличения элемента
flex-shrink: 1.0 …; Устанавливает коэффициент уменьшения элемента
align-self: auto; Выравнивание отдельного элемента. По умолчанию задаётся выравнивание родителя
align-self: flex-start; Отдельный элемент выравнивается по левому краю, относительно верхней границы
align-self: flex-end; Выравнивается по левому краю, относительно нижней границы
align-self: center; Выравнивается по центру
align-self: baseline; Выравнивается по базовой линии слева
align-self: stretch; Элемент растягивается на всю высоту flex-контейнера
Шпаргалки CSS, все свойства
starper55plys.ru
CSS ШпаргалкиБлог Старого Перца
Свойства CSS
Спецсимволы
Знаки пунктуации
неразрывный пробел
– – тире
— — длинное тире
¦ ¦ вертикальное тире
" " двойная кавычка
‘ ‘ левая одиночная кавычка
’ ’ правая одиночная кавычка
‚ ‚ нижняя одиночная кавычка
“ “ левая двойная кавычка
” ” правая двойная кавычка
„ „ нижняя двойная кавычка
« « левая двойная угловая скобка
» » правая двойная угловая скобка
° ° градус
´ ´ ударение
± ± плюс-минус
≈ ≈ приблизительно
≠ ≠ не равно
√ √ квадратный корень
∞ ∞ бесконечность
¼ ¼ дробь одна четверть
½ ½ дробь одна вторая
¾ ¾ дробь три четверти
× × знак умножения
÷ ÷ знак деления
Ø Ø диаметр
⊗ ⊗ лампочка
< < знак «меньше»
> > знак «больше»
… … многоточие
& & амперсанд
@ @ собака
] ] правая квадратная скобка
[ [ левая квадратная скобка
} } правая фигурная скобка
{ { левая фигурная скобка
µ µ микро
¶ ¶ абзац
§ § параграф
‰ ‰ промиле
∠ ∠ угол
⊥ ⊥ перпендикуляр
※ ※ сноска
∫ ∫ интеграл
Знаки валют
£ £ фунт стерлингов
¢ ¢ цент
¥ ¥ йена
$ $ доллар
₴ ₴ гривна
圓 圓 юань
₸ ₸ теньге
€ € знак евро
Стрелки
← ← стрелка влево
→ → стрелка вправо
↑ ↑ стрелка вверх
↓ ↓ стрелка вниз
↔ ↔️ стрелка влево-вправо
↵ ↵ стрелка возврата
⇐ ⇐ двойная стрелка влево
⇒ ⇒ двойная стрелка вправо
⇑ ⇑ двойная стрелка вверх
⇓ ⇓ двойная стрелка вниз
⇔ ⇔ двойная стрелка влево-вправо
➠ ➠ стрелка
➤ ➤ стрелка
➥ ➥ стрелка
➦ ➦ стрелка
➳ ➳ стрела с оперением
↺ ↺ круглая стрелка
↻ ↻ круглая стрелка
⇧ ⇧ стрелка
↩ ↩️ стрелка
➫ ➫ стрелка
Знаки пунктуации
неразрывный пробел
– – тире
— — длинное тире
¦ ¦ вертикальное тире
" " двойная кавычка
‘ ‘ левая одиночная кавычка
’ ’ правая одиночная кавычка
‚ ‚ нижняя одиночная кавычка
“ “ левая двойная кавычка
” ” правая двойная кавычка
„ „ нижняя двойная кавычка
« « левая двойная угловая скобка
» » правая двойная угловая скобка
° ° градус
´ ´ ударение
± ± плюс-минус
≈ ≈ приблизительно
≠ ≠ не равно
√ √ квадратный корень
∞ ∞ бесконечность
¼ ¼ дробь одна четверть
½ ½ дробь одна вторая
¾ ¾ дробь три четверти
× × знак умножения
÷ ÷ знак деления
Ø Ø диаметр
⊗ ⊗ лампочка
< < знак «меньше»
> > знак «больше»
… … многоточие
& & амперсанд
@ @ собака
] ] правая квадратная скобка
[ [ левая квадратная скобка
} } правая фигурная скобка
{ { левая фигурная скобка
µ µ микро
¶ ¶ абзац
§ § параграф
‰ ‰ промиле
∠ ∠ угол
⊥ ⊥ перпендикуляр
※ ※ сноска
∫ ∫ интеграл
Знаки валют
£ £ фунт стерлингов
¢ ¢ цент
¥ ¥ йена
$ $ доллар
₴ ₴ гривна
圓 圓 юань
₸ ₸ теньге
€ € знак евро
Стрелки
← ← стрелка влево
→ → стрелка вправо
↑ ↑ стрелка вверх
↓ ↓ стрелка вниз
↔ ↔️ стрелка влево-вправо
↵ ↵ стрелка возврата
⇐ ⇐ двойная стрелка влево
⇒ ⇒ двойная стрелка вправо
⇑ ⇑ двойная стрелка вверх
⇓ ⇓ двойная стрелка вниз
⇔ ⇔ двойная стрелка влево-вправо
➠ ➠ стрелка
➤ ➤ стрелка
➥ ➥ стрелка
➦ ➦ стрелка
➳ ➳ стрела с оперением
↺ ↺ круглая стрелка
↻ ↻ круглая стрелка
⇧ ⇧ стрелка
↩ ↩️ стрелка
➫ ➫ стрелка
starper55plys.ru
Шпаргалки спецсимволыБлог Старого Перца
Спецсимволы
Знаки портфилио
☃ ☃️ снеговик
† † крестик
✖ ✖️ крест
✘ ✘ крест
✚ ✚ крест
☦ ☦️ православный крест
⚓ ⚓️ якорь
✆ ✆ телефон
☎ ☎️ телефон
☕ ☕️ горячие напитки
✑ ✑ перо
✒ ✒️ перо
⚜ ⚜️ геральдическая лилия
❤ ❤️ сердце
☀ ☀️ солнце
☁ ☁️ облако
☂ ☂️ зонт
✔ ✔️ галочка
☑ ☑️ чекбокс с галочкой
☒ ☒ чекбокс с крестиком
☭ ☭ серп и молот
⚑ ⚑ флаг
⚐ ⚐ флаг
✿ ✿ цветок
❀ ❀ цветок
✾ ✾ цветок
❁ ❁ цветок
❂ ❂ цветок
✉ ✉️ конверт
❦ ❦ вишня
⌇ ⌇ волнистая линия
⚛ ⚛️ атом
⌨ ⌨️ клавиатура
♺ ♺ переработка
❑ ❑ квадрат с тенью
❒ ❒ квадрат с тенью
◈ ◈ алмаз в оправе
◐ ◐ круг с тенью
◑ ◑ круг с тенью
© © знак copyright
® ® знак зарегистрированной торговой марки
™ ™ знак торговой марки
ƒ ƒ знак функции
✍ ✍️ рука
✎ ✎ карандаш вниз
✐ ✐ карандаш вверх
◊ ◊ ромб
Цифры
❶ ❶ один
❷ ❷ два
❸ ❸ три
❹ ❹ четыре
❺ ❺ пять
❻ ❻ шесть
❼ ❼ семь
❽ ❽ восемь
➒ ➒ девять
➓ ➓ десять
Звёздочки и снежинки
⚝ ⚝ звезда
★ ★ звезда
☆ ☆ звезда
✪ ✪ звезда
✫ ✫ звезда
✯ ✯ звезда
⍟ ⍟ звезда
❄ ❄️ снежинка
❅ ❅ снежинка
❆ ❆ снежинка
❉ ❉ снежинка
❋ ❋ снежинка
✲ ✲ снежинка
⁂ ⁂ три снежинки
Знаки зодиака
♈ ♈️ овен
♉ ♉️ телец
♊ ♊️ близнецы
♋ ♋️ рак
♌ ♌️ лев
♍ ♍️ дева
♎ ♎️ весы
♏ ♏️ скорпион
♐ ♐️ стрелец
♑ ♑️ козерог
♒ ♒️ водолей
♓ ♓️ рыбы
Знаки карточные масти
♤ ♤ знак масти пики
♧ ♧ знак масти трефы
♡ ♡ знак масти червы
♢ ♢ знак масти бубны
♠ ♠️ знак масти пики
♣ ♣️ знак масти трефы
♥ ♥️ знак масти червы
♦ ♦️ знак масти бубны
Спецсимволы
Знаки портфилио
☃ ☃️ снеговик
† † крестик
✖ ✖️ крест
✘ ✘ крест
✚ ✚ крест
☦ ☦️ православный крест
⚓ ⚓️ якорь
✆ ✆ телефон
☎ ☎️ телефон
☕ ☕️ горячие напитки
✑ ✑ перо
✒ ✒️ перо
⚜ ⚜️ геральдическая лилия
❤ ❤️ сердце
☀ ☀️ солнце
☁ ☁️ облако
☂ ☂️ зонт
✔ ✔️ галочка
☑ ☑️ чекбокс с галочкой
☒ ☒ чекбокс с крестиком
☭ ☭ серп и молот
⚑ ⚑ флаг
⚐ ⚐ флаг
✿ ✿ цветок
❀ ❀ цветок
✾ ✾ цветок
❁ ❁ цветок
❂ ❂ цветок
✉ ✉️ конверт
❦ ❦ вишня
⌇ ⌇ волнистая линия
⚛ ⚛️ атом
⌨ ⌨️ клавиатура
♺ ♺ переработка
❑ ❑ квадрат с тенью
❒ ❒ квадрат с тенью
◈ ◈ алмаз в оправе
◐ ◐ круг с тенью
◑ ◑ круг с тенью
© © знак copyright
® ® знак зарегистрированной торговой марки
™ ™ знак торговой марки
ƒ ƒ знак функции
✍ ✍️ рука
✎ ✎ карандаш вниз
✐ ✐ карандаш вверх
◊ ◊ ромб
Цифры
❶ ❶ один
❷ ❷ два
❸ ❸ три
❹ ❹ четыре
❺ ❺ пять
❻ ❻ шесть
❼ ❼ семь
❽ ❽ восемь
➒ ➒ девять
➓ ➓ десять
Звёздочки и снежинки
⚝ ⚝ звезда
★ ★ звезда
☆ ☆ звезда
✪ ✪ звезда
✫ ✫ звезда
✯ ✯ звезда
⍟ ⍟ звезда
❄ ❄️ снежинка
❅ ❅ снежинка
❆ ❆ снежинка
❉ ❉ снежинка
❋ ❋ снежинка
✲ ✲ снежинка
⁂ ⁂ три снежинки
Знаки зодиака
♈ ♈️ овен
♉ ♉️ телец
♊ ♊️ близнецы
♋ ♋️ рак
♌ ♌️ лев
♍ ♍️ дева
♎ ♎️ весы
♏ ♏️ скорпион
♐ ♐️ стрелец
♑ ♑️ козерог
♒ ♒️ водолей
♓ ♓️ рыбы
Знаки карточные масти
♤ ♤ знак масти пики
♧ ♧ знак масти трефы
♡ ♡ знак масти червы
♢ ♢ знак масти бубны
♠ ♠️ знак масти пики
♣ ♣️ знак масти трефы
♥ ♥️ знак масти червы
♦ ♦️ знак масти бубны
Спецсимволы
Знаки греческого алфавита
Α Α греческая заглавная буква альфа
Β Β греческая заглавная буква бета
Γ Γ греческая заглавная буква гамма
Δ Δ греческая заглавная буква дельта
Ε Ε греческая заглавная буква эпсилон
Ζ Ζ греческая заглавная буква дзета
Η Η греческая заглавная буква эта
Θ Θ греческая заглавная буква тэта
Ι Ι греческая заглавная буква йота
Κ Κ греческая заглавная буква каппа
Λ Λ греческая заглавная буква лямбда
Μ Μ греческая заглавная буква мю
Ν Ν греческая заглавная буква ню
Ξ Ξ греческая заглавная буква кси
Ο Ο греческая заглавная буква омикрон
Π Π греческая заглавная буква пи
Ρ Ρ греческая заглавная буква ро
Σ Σ греческая заглавная буква сигма
Τ Τ греческая заглавная буква тау
Υ Υ греческая заглавная буква ипсилон
Φ Φ греческая заглавная буква фи
Χ Χ греческая заглавная буква хи
Ψ Ψ греческая заглавная буква пси
Ω Ω греческая заглавная буква омега
α α греческая строчная буква альфа
β β греческая строчная буква бета
γ γ греческая строчная буква гамма
δ δ греческая строчная буква дельта
ε ε греческая строчная буква эпсилон
ζ ζ греческая строчная буква дзета
η η греческая строчная буква эта
θ θ греческая строчная буква тэта
ι ι греческая строчная буква йота
κ κ греческая строчная буква каппа
λ λ греческая строчная буква лямбда
μ μ греческая строчная буква мю
ν ν греческая строчная буква ню
ξ ξ греческая строчная буква кси
ο ο греческая строчная буква омикрон
π π греческая строчная буква пи
ρ ρ греческая строчная буква ро
ς ς греческая строчная буква сигма
τ τ греческая строчная буква тау
υ υ греческая строчная буква ипсилон
φ φ греческая строчная буква фи
χ χ греческая строчная буква хи
ψ ψ греческая строчная буква пси
ω ω греческая строчная буква омега
Спецсимволы
Α Α греческая заглавная буква альфа
Β Β греческая заглавная буква бета
Γ Γ греческая заглавная буква гамма
Δ Δ греческая заглавная буква дельта
Ε Ε греческая заглавная буква эпсилон
Ζ Ζ греческая заглавная буква дзета
Η Η греческая заглавная буква эта
Θ Θ греческая заглавная буква тэта
Ι Ι греческая заглавная буква йота
Κ Κ греческая заглавная буква каппа
Λ Λ греческая заглавная буква лямбда
Μ Μ греческая заглавная буква мю
Ν Ν греческая заглавная буква ню
Ξ Ξ греческая заглавная буква кси
Ο Ο греческая заглавная буква омикрон
Π Π греческая заглавная буква пи
Ρ Ρ греческая заглавная буква ро
Σ Σ греческая заглавная буква сигма
Τ Τ греческая заглавная буква тау
Υ Υ греческая заглавная буква ипсилон
Φ Φ греческая заглавная буква фи
Χ Χ греческая заглавная буква хи
Ψ Ψ греческая заглавная буква пси
Ω Ω греческая заглавная буква омега
α α греческая строчная буква альфа
β β греческая строчная буква бета
γ γ греческая строчная буква гамма
δ δ греческая строчная буква дельта
ε ε греческая строчная буква эпсилон
ζ ζ греческая строчная буква дзета
η η греческая строчная буква эта
θ θ греческая строчная буква тэта
ι ι греческая строчная буква йота
κ κ греческая строчная буква каппа
λ λ греческая строчная буква лямбда
μ μ греческая строчная буква мю
ν ν греческая строчная буква ню
ξ ξ греческая строчная буква кси
ο ο греческая строчная буква омикрон
π π греческая строчная буква пи
ρ ρ греческая строчная буква ро
ς ς греческая строчная буква сигма
τ τ греческая строчная буква тау
υ υ греческая строчная буква ипсилон
φ φ греческая строчная буква фи
χ χ греческая строчная буква хи
ψ ψ греческая строчная буква пси
ω ω греческая строчная буква омега
Спецсимволы
starper55plys.ru
Шпаргалки спецсимволыБлог Старого Перца
Единицы измерения в web
Абсолютные единицы
px Пиксель. Базовая, абсолютная единица измерения
cm Сантиметр 1cm = 38px
mm Миллиметр 1mm = 3.8px
in Дюйм 1in = 96px
pt Пункт 1pt = 4/3px
pc Пика 1pc = 16px
Относительные единицы
% Значение в процентах, от значения свойства родительского элемента
em 1em — это размер шрифта по умолчанию
rem Задаётся относительно размера в шрифта в корневом документе
ch Ширина символа
ex Высота символа
Относительно экрана (viewport)
vw 1vw = 1% от ширины экрана
vh 1vh = 1% от высоты экрана экрана
vmin Минимально допустимая ширина и высота
vmax Максимально допустимая ширина и высота
Единицы измерения в web
Абсолютные единицы
px Пиксель. Базовая, абсолютная единица измерения
cm Сантиметр 1cm = 38px
mm Миллиметр 1mm = 3.8px
in Дюйм 1in = 96px
pt Пункт 1pt = 4/3px
pc Пика 1pc = 16px
Относительные единицы
% Значение в процентах, от значения свойства родительского элемента
em 1em — это размер шрифта по умолчанию
rem Задаётся относительно размера в шрифта в корневом документе
ch Ширина символа
ex Высота символа
Относительно экрана (viewport)
vw 1vw = 1% от ширины экрана
vh 1vh = 1% от высоты экрана экрана
vmin Минимально допустимая ширина и высота
vmax Максимально допустимая ширина и высота
Единицы измерения в web
starper55plys.ru
Единицы измерения в webБлог Старого Перца
Шпаргалки псевдоэлементы и псевдоклассы
Псевдоэлементы
:after добавляет стили в начале элемента
:before добавляет стили в конце элемента
:first-letter добавляет стили для первой буквы абзаца
first-line добавляет стили для первой строки абзаца
Пседоклассы
:link стили не посещённых ссылок
:active стили активных ссылок
:hover стили при наведении курсора
:visited стили посещённых ссылок
::-moz-placeholder стили окна подсказок в Firefox
::-webkit-input-placeholder стили окна подсказок в Chrome
:checked стили чекбоксов и флажков
:first-child стили первого элемента родителя
:first-of-type стили первого элемента в списке дочерних элементов
:last-child стили последнего элемента родителя
:last-of-type стили последнего элемента в списке дочерних элементов
:only-child стили единственного элемента родителя
:only-of-type стили единственного дочернего элемента указанного типа
:not стили для элементов не содержащих указанный селектор
:nth-child добавляет стили к элементам на основе нумерации в дереве элементов
:nth-last-child то же что и :nth-child
:nth-of-type то же что и :nth-child и :nth-last-child
:optional стили полей формы у которых не задан атрибут required
:read-only стили полей формы у которых задан атрибут required
:read-write стили полей формы, доступных для изменения
:valid стили полей формы, проходящей проверку
:default стили элементов форм установленных по умолчанию
:disabled стили заблокированных элементов форм
:enabled стили не заблокированных элементов форм
:target стили идентификатора указанного в адресной строке браузера
:focus стили для элемента получающего фокус
Шпаргалки псевдоэлементы и псевдоклассы
Псевдоэлементы
:after добавляет стили в начале элемента
:before добавляет стили в конце элемента
:first-letter добавляет стили для первой буквы абзаца
first-line добавляет стили для первой строки абзаца
Пседоклассы
:link стили не посещённых ссылок
:active стили активных ссылок
:hover стили при наведении курсора
:visited стили посещённых ссылок
::-moz-placeholder стили окна подсказок в Firefox
::-webkit-input-placeholder стили окна подсказок в Chrome
:checked стили чекбоксов и флажков
:first-child стили первого элемента родителя
:first-of-type стили первого элемента в списке дочерних элементов
:last-child стили последнего элемента родителя
:last-of-type стили последнего элемента в списке дочерних элементов
:only-child стили единственного элемента родителя
:only-of-type стили единственного дочернего элемента указанного типа
:not стили для элементов не содержащих указанный селектор
:nth-child добавляет стили к элементам на основе нумерации в дереве элементов
:nth-last-child то же что и :nth-child
:nth-of-type то же что и :nth-child и :nth-last-child
:optional стили полей формы у которых не задан атрибут required
:read-only стили полей формы у которых задан атрибут required
:read-write стили полей формы, доступных для изменения
:valid стили полей формы, проходящей проверку
:default стили элементов форм установленных по умолчанию
:disabled стили заблокированных элементов форм
:enabled стили не заблокированных элементов форм
:target стили идентификатора указанного в адресной строке браузера
:focus стили для элемента получающего фокус
Шпаргалки псевдоэлементы и псевдоклассы
starper55plys.ru
Шпаргалки псевдоэлементы и псевдоклассыБлог Старого Перца
Шпаргалки горячие клавиши на клавиатуре
F5 Перезагрузка страницы
Ctrl + R Перезагрузка страницы
Ctrl + F5 Перезагрузка станицы с очисткой кэша браузера
F11 Во весь экран
Alt + Home Начать с домашней страницы
Alt + D Фокус на адресную строку
Ctrl + A Выделить все
Ctrl + B Вызвать панель закладок
Ctrl + C Копировать (При работе с содержимым)
Ctrl + D Добавить страницу в закладки
Ctrl + E Очистка адресной строки для поиска в ПС
Ctrl + F Поиск по странице
Ctrl + G Тоже поиск по странице
Ctrl + H Открыть историю (Журнал)
Ctrl + J Открыть страницу загрузок
Ctrl + N Открытие нового окна
Ctrl + O Открыть файл
Ctrl + P Распечатать страницу
Ctrl + S Сохранить страницу на компьютере
Ctrl + T Открыть пустую вкладку
Ctrl + U Смотреть исходный код страницы
Ctrl + V Вставить (При работе с содержимым)
Ctrl + W Закрыть вкладку на которой находитесь
Ctrl + X Вырезать (При работе с содержимым)
Ctrl + Tab Перейти на следующую вкладку
Ctrl + Page Up Перейти на предыдущую вкладку
Ctrl + + Увеличить масштаб страницы
Ctrl + — Уменьшить масштаб страницы
Ctrl + 0 Масштаб страницы по умолчанию
Home В начало страницы
End В конец страницы
Ctrl + Shift + N Режим инкогнито (Хром и Опера)
Ctrl + Shift + W Закрыть браузер
Ctrl + Shift + T Открыть последнюю закрытую вкладку (IE)
Горячие клавиши
F5 Перезагрузка страницы
Ctrl + R Перезагрузка страницы
Ctrl + F5 Перезагрузка станицы с очисткой кэша браузера
F11 Во весь экран
Alt + Home Начать с домашней страницы
Alt + D Фокус на адресную строку
Ctrl + A Выделить все
Ctrl + B Вызвать панель закладок
Ctrl + C Копировать (При работе с содержимым)
Ctrl + D Добавить страницу в закладки
Ctrl + E Очистка адресной строки для поиска в ПС
Ctrl + F Поиск по странице
Ctrl + G Тоже поиск по странице
Ctrl + H Открыть историю (Журнал)
Ctrl + J Открыть страницу загрузок
Ctrl + N Открытие нового окна
Ctrl + O Открыть файл
Ctrl + P Распечатать страницу
Ctrl + S Сохранить страницу на компьютере
Ctrl + T Открыть пустую вкладку
Ctrl + U Смотреть исходный код страницы
Ctrl + V Вставить (При работе с содержимым)
Ctrl + W Закрыть вкладку на которой находитесь
Ctrl + X Вырезать (При работе с содержимым)
Ctrl + Tab Перейти на следующую вкладку
Ctrl + Page Up Перейти на предыдущую вкладку
Ctrl + + Увеличить масштаб страницы
Ctrl + — Уменьшить масштаб страницы
Ctrl + 0 Масштаб страницы по умолчанию
Home В начало страницы
End В конец страницы
Ctrl + Shift + N Режим инкогнито (Хром и Опера)
Ctrl + Shift + W Закрыть браузер
Ctrl + Shift + T Открыть последнюю закрытую вкладку (IE)
Горячие клавиши
starper55plys.ru
Горячие клавиши на клавиатуреБлог Старого Перца
Код сайта на чистом HTML
Вам срочно нужно сделать сайт, используя только HTML, и выложить его в интернет? Тогда вам не составит труда скопировать готовый код и следовать моим инструкциям.
Вам срочно нужно сделать сайт, используя только HTML, и выложить его в интернет? Тогда вам не составит труда скопировать готовый код и следовать моим инструкциям.
starper55plys.ru
Шаблон сайта на чистом HTML. Готовый код сайтаБлог Старого Перца
Вам срочно нужно сделать сайт, используя только HTML, и выложить его в интернет? Тогда вам не составит труда скопировать готовый код и следовать моим инструкциям