Привет всем! Решил сделать пост, содержащий основные селекторы и параметры в 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-модель, что бы более наглядно показать что-как и где используется:
На этом — спасибо за внимание. Надеюсь, пригодится 🙂 Как всегда — в случае возникновения вопросов пишите на почту или в Телеграм.
