15 февр. 2015 г.

CSS шпаргалка

Подключение

 CSS кодирует внешний вид HTML-элементов. CSS-стили можно прописывать разными способами. Можно прямо внутри тега:

<span style="background: red; color: blue;">Текст на красном фоне</span>

А можно в отдельном файле стилей (файл.css), который присоединен к HTML-файлу строкой <link rel="stylesheet" href="файл.css">

Тогда в теге прописывается только класс:

<span class="pumpurum">Текст на красном фоне</span>

А внутри файла стилей:

.pumpurum { background: red; color: blue; }

Самые популярные CSS-свойства:

 color  — цвет текста.
Возможные значения: red, orange, yellow, green, blue и многие другие.
Пример использования: color: blue;


 display  — способ отображения.
Возможные значения: none (не отображать), block (как блочный элемент) и некоторые другие.
Пример использования: display: none;


 width  — ширина элемента. По-умолчанию в px (pixel, точка экрана).
Возможные значения: 100px, 200, 5px и другие.
Пример использования: width: 1000;


 height  — высота элемента.
Возможные значения: 100px, 200, 5px и другие.
Пример использования: height: 30;


 background  — цвет фона.
Возможные значения: red, orange, yellow, green, blue и многие другие.
Пример использования: background: gray;


 position  — способ позиционирования. По-умолчанию элементы выстраиваются сверху вниз, слева направо (static). То есть, позиция элемента зависит от того, куда его вставили и какие элементы расположены перед ним. Использование значения absolute позволяет точно указывать позицию элемента с помощью свойств top и left.
Возможные значения: static, absolute, relative, fixed.
Пример использования: position: absolute;


 top  — расположение элемента относительно верха страницы. Работает только со значением position: absolute (или position: relative — тогда позиционирует относительно того места, куда вставлен элемент и зависит от предыдущих элементов).
Возможные значения: 100px, 200, 5% и другие.
Пример использования: top: 100;


 left  — расположение элемента относительно левого края страницы. Работает аналогично свойству top.
Возможные значения: 100px, 200, 5px и другие.
Пример использования: left: 30;

Комментариев нет:

Отправить комментарий