Привет всем! Решил сделать пост, содержащий основные селекторы и параметры в CSS. Такая себе css шпаргалка.

Селекторы:

• div — все div-теги
• div, span — все div и span-теги
• div span — все теги span внутри div
• #content — элемент, содержащий ID #content
• .box — все элементы с классом «box»
• ul#box — ul-тэг с классом «box»
• span.box — все span-тэги с классом «box»
• * — все элементы
• #box* — все элементы, содержащие #box
• a:link, a:active, a:visited — ссылки в нормальном виде, кликнутом, и уже посещенном
• a:hover — ссылка в случае, когда подвели мышку
• div > span — все span´s на одном уровне в div

Текст:

• font-family — используемый шрифт
• font-size — размер используемого шрифта
• color — цвет используемого шрифта
• font-weight — толщина используемого шрифта
• font-style — стиль используемого шрифта
• text-decoration — варианты эффектов используемого текста. Например — подчеркивание, перечеркивание и прочее
• text-align — расположение текста
• line-height — промежуток между строками
• letter-spacing — промежуток между буквами текста
• text-indent — отступ первой строки
• text-transform — применяемое форматирование к тексту. Например — большие-маленькие буквы, и прочее
• vertical-align — расположение текста по вертикали

Границы и списки:

• border — настройки стиля границ: тип границы, толщина, цвет. Используется следующий формат: border:(solid, dashed, dotted, double) (width) (color). Например:

  border:solid 1px #000
  

• border-top — настройки верхней границы
• border-bottom — настройки нижней границы
• border-left — настройки левой границы
• border-right — настройки правой границы
• list-style-type — настройки стиля блока
• list-style-position — установка отображения рамок блока — внутри или снаружи
• list-style-image — установка фоновой картинки блока. Указывается в виде:

  list-style-image: url(block.png)
  

Позиционирование:

• position — размещение элементов на экране. Например: absolute, fixed, relative
• float — размещение элементов по горизонтали
• top, left, right, bottom — специфическое расположение элементов. Например:

  top: 10px;left:10px
  

• display — настройка стиля отображения элементов
• z-index — установка стилистики наложения элементов друг на друга. Важно: это можно сделать только для элементов, у которых значение position задано как absolute, fixed или relative.
• overflow — настройка отображения єлемента блока в случае, если он не помещается на экране целиком и выходит за рамки указанных размеров

Все остальное:

• background — настройки отображения фона. Можно использовать до пяти характеристик одновременно — через запятую. Например — цвет, какая картинка, стилистика расположения картинки
• cursor — настройка стилистики курсора
• outline — настройка, которая позволяет одновременно установить цвет, стиль и толщину внешней границы на всех сторонах элемента. Важно подчеркнуть, что в отличие от свойств, используемых в border — эта настройка не влияет на положение нужного блока и его ширину. И увы — нельзя указать параметры отдельных линий по тем или иным сторонам. Т.е. используется эта настрока только в случае, если можно и нужно указать параметры сразу всех сторон.
• border-collapse — позволяет настроить стилистику наложения границ блоков и ячеек
• clear — настройка, благодаря которой можно указать — с какой стороны нужного элемента запрещено его обтекание другими элементами. Важно: если у объекта указано обтекание float, то clear отменяет его действие для указанных сторон.

И в конце — css-модель, что бы более наглядно показать что-как и где используется:

На этом — спасибо за внимание. Надеюсь, пригодится 🙂 Как всегда — в случае возникновения вопросов пишите на почту или в Телеграм.