Подключение
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;
Комментариев нет:
Отправить комментарий