Разработка лидирующих и эксклюзивных WEB-приложений на чистом коде(HTML,CSS,JS,PHP). Гарантия высокого качества!

css для программиста

Хочу поделиться шпаргалочкой css для программиста. Если что-то подзабудете - можете в неё заглянуть. Всё же я считаю, что программист должен знать почти все самые часто-используемые CSS. Изучайте и практикуйтесь, и всё прийдёт сао собой, с опытом и со временем!

Работа с текстом

@font-face{font-family:название шрифта;src:url(путь к шрифту);} /*Подключение стороннего шрифта*/ color:#fff; /*код цвета,или слово цвета*/
font-size:17px; /*Размер шрифта*/
font-family:MuseoSansRegular; /*Шрифт*/
font-style: normal | italic | oblique | inherit; /*начертание шрифта*/
  • normal - Обычное начертание текста.
  • italic - Курсивное начертание.
  • oblique - Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.
text-transform: capitalize | lowercase | uppercase | none | inherit; /*Регист текста*/
  • capitalize - Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют.
  • lowercase - Все символы текста становятся строчными (нижний регистр).
  • uppercase - Все символы текста становятся прописными (верхний регистр).
  • none - Не меняет регистр символов.
  • inherit - Наследует значение родителя.
text-indent:7px; /* "Красная" строка*/
line-height:значение /*Устанавливает межстрочный интервал текста*/
text-decoration:none | underline; /*Подчеркивает текст.*/
word-spacing:5px; /*Отступ между словами*/
word-wrap:break-word; /*Разбивает длинное слово текста, если оно вылазит за границу родительского элемента*/
columns:2; /*Разбивает текст на нужное к-ство колонок.Применяется для div*/ text-shadow:0px 0px 7px #000; /*Тень текста. Сдвижение по X, Y, размер размытия, цвет тени. */

Display. Тип поведения/отображения элементов.

display:block; /*Устанавливает тип элемента блочным. Блочный элемент принимает все размеры и отступы блока.*/
display:inline; /*Устанавливает тип элемента строковым. В строку*/
display:inline-block; /*Устанавливает тип элемента строковым и блочным*/
display:table-cell; /*Делает элемент ячейкой таблицы. Можно в ней выравнивать по центру элементы. Например выровнить по центру содержимое элемента vertical-align:middle; */
display:list-item; /*Устанавливает элементу точичку(как в списке)*/
display:flex; /*Используется для выравнивания элементов,в разные направления и с одинаковым расстаяниям между ними*/
  • flex-direction:значение; – направление главной оси
    • row (значение по умолчанию) - слева направо (в rtl справа налево)
    • row-reverse - справа налево (в rtl слева направо)
    • column - сверху вниз
    • column-reverse - снизу вверх
  • justify-content:значение; – выравнивание по главной оси.
    • flex-start (значение по умолчанию) - блоки прижаты к началу главной оси
    • flex-end: блоки прижаты к концу главной оси
    • center: блоки располагаются в центре главной оси
    • space-between: первый блок располагается в начале главной оси, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве.
    • space-around: все блоки равномерно распределены вдоль главной оси, разделяя все свободное пространство поровну.
  • align-items:значение; – выравнивание по поперечной оси. определяет то, как будут выровнены элементы вдоль поперечной оси.
    • flex-start: блоки прижаты к началу поперечной оси
    • flex-end: блоки прижаты к концу поперечной оси
    • center: блоки располагаются в центре поперечной оси
    • baseline: блоки выровнены по их baseline
    • stretch (значение по умолчанию) : блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываются min-width/max-width, если таковые заданы.

POSITION. Позиционирование элементов

position: Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице
  • absolute /*Позиционирует элемент самым верхним слоем относительно всего документа*/
  • fixed /*Фиксированная позиция элемента. Всегда ее видят.*/
  • relative /*Позиционирует элемент относительно в том элементе, где он находится*/
  • static /*Элементы отображаются как обачно,по умолчанию*/

Работа с бордерами(рамками)

outline:#f00 solid 1px; /*Выставляет цветовую границу во внутрь элемента */
border:1px solid #f00; /*Выставляет цветовую границу с наружи элемента*/

Работа с изображениями.

background-image:url(css/fon.jpg); /*Путь к фоновому изображению*/
background-attachment:fixed; /*Фиксируем фон веб-страницы */
background-clip:border-box; /*фон под рамкой*/
  • padding-box - Фон отображается внутри границ.
  • border-box - Фон выводится под границами.
  • content-box - Фон отображается только внутри контента.
background-color:#ddd; /* Цвет фона веб-страницы */
background-origin:content-box; /*Фон позиционируется относительно содержимого элемента.*/
background-size:300px 200px; /* /*Делает размер фоновой картинки фона блока. Если фоновая картинка малая. Приставки к браузеру.*/
background-position:center top; /* Положение фона */
background-repeat:no-repeat; /* Отменяем повторение фона */
  • repeat-x; - Повторение по х
  • repeat-y; - Повторение по y
image-orientation:flip; /*Применяется к тегу img. Вращает изображения в самом теге, или отражает*/
- flip – отразить
- 90deg – градус вращения

Транформация. webkit, moz, o, ms – приставки

transform:rotate(30deg); /*Приставки для браузеров. Вращает элемент*/
transform:translate(10px,30px); /*Перемещает элемент. Первый параметр перемещает по x, второй перемещение по y. Приставки для браузеров прописывать.*/
transform:scale(1,1); /*Увеличивает размеры элемента. Первый параметр по x, второй по y . В параметрах задается, на сколько раз увеличить размеры. Если 1 в первом – то на один раз. Приставки прописывать*/
transform:skew(10deg,5deg); /*Наклоняет элемент. По вертикали первый параметр и по горизонтали. Минусовые значение указываются. Приставки прописывать*/
transform:rotateX(30deg); /*Вращает элемент на оси x . Приставки прописывать.*/
transform:rotateY(30deg); /*Вращает элемент на оси y . Приставки прописывать.*/
transform:rotateZ(30deg); /*Элемент делает оборот. Крутится.*/
transform-origin:20% 30%; /*Задает ось вращение элемента. По умолчанию стоит 50% на 50% */

Псевдоклассы

Чётные и нечётные элементы. Счет идет с верху.

:nth-child(odd){} /*Обращение к нечётным элементам. Обращение через родителя к конкретным элементам*/
:nth-child(even){} /*Обращение к чётным элементам. Обращение через родителя к конкретным элементам*/

Чётные и нечётные элементы. Счет идет с низу.

:nth-last-child(odd){} /*Обращение к нечётным элементам. Обращение через родителя к конкретным элементам*/
:nth- last-child(even){} /*Обращение к чётным элементам. Обращение через родителя к конкретным элементам*/
:first-child{} /*Обращение к первому элементу, в родительском элементе*/
:last-child{} /*Обращение к последнему элементу, в родительском элементе*/

Анимация(2 способа анимации на азные случаи)

@keyframes myanimation{
from{width:300px;}
to{width:330px;}
}


@keyframes myanimation{
0%{color:#f00;}
20%{color:#000;}
}
animation:myanimation 5s;
/*Вызов анимации*/

Другое(общее)

box-shadow:0px 0px 10px #000; /*тень рамки. Сдвиг по X-Y, размытие, цвет*/
border-radius:5px; /*закругление углов */
vertical-align:baseline | bottom | middle | sub | super | text-bottom | text-top | top | inherit | значение | проценты; /*Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.*/
text-align:center; /*текст в окне по горозонтале в центе*
box-sizing:border-box | content-box; /*Делает блок таким размером, каким задали. Не берет во внимания внутренние отступы. */ overflow: auto; /*управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.*/
  • visible - Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
  • hidden - Отображается только область внутри элемента, остальное будет скрыто.
  • scroll - Всегда добавляются полосы прокрутки.
  • auto - Полосы прокрутки добавляются только при необходимости.
  • inherit - Наследует значение родителя.
pointer-events:none; /*Отмена реагирования элемента на клик мыши(используется для активного пункта меню)*/