Основные команды CSS.
1. Введение
CSS—Cascading Style Sheets—каскадные таблицы стилей—язык, применяемый для описания всего того, что относится к презентации, а не к логической структуре гипертекстового документа как таковой. Все эти многочисленные параметры: цвет текста и фона, гарнитура, начертание и размер шрифта, межстрочный интервал, отступы от краев, рамки и т. п. составляют стиль.
Следует помнить, что, с точки зрения визуальной презентации (помним о возможности звуковой презентации или презентации в виде азбуки Брайля), элементы документа, размеченного при помощи HTML, делятся на две категории: блочные и строчные. Никакое стилевое оформление не в силах превратить блочные элементы в строчные и обратно.
Начало и конец блочных элементов визуально маркируются разрывом строки. Примеры: <h3>…</h3>, , <li>…</li>, строчных элементов не маркируются разрывом строки. Примеры: <a href="…">…</a>, <em>…</em>,
Здесь описаны только самые общеупотребительные команды и приемы. Полное описание CSS см. на https://www.w3.org/Style/CSS/
2. Чему можно приписать информацию о стиле?
Информацию о стиле можно приписать:
1) любому элементу области <body>…</body>, включая и сам контейнер <body>…</body>, из описанных в памятке об основных командах html. Кроме того, существуют два специальных стилевых контейнера: блочный <div>…</div> и строчный <span>…</span>.
2) Классу элементов. Имена классов вы определяете сами в контейнере <style>…</style> или в отдельном файле с таблицей стилей. Имя класса может состоять из маленьких латинских букв и цифр, не должно начинаться с цифры и содержать пробелы.
3. Где можно указать информацию о стиле?
Стилевая информация может быть указана в трех местах:
1) в качестве значения параметра style (этот параметр может быть приписан любому тэгу-контейнеру области <body>…</body>, объекту <img> и двум специальным стилевым контейнерам—блочному <div>…</div> и строчному <span>…</span>)—только для данного элемента;
2) в пределах тэга-контейнера <style type="text/css">…</style> области <head>…</head>—для однородных элементов и классов элементов в пределах данного документа;
3) в отдельном файле—таблице стилей—текстовом файле с расширением .css—для однородных элементов и классов элементов во всех документах, ссылающихся на данную таблицу стилей как на источник информации о визуальной презентации.
4. Синтаксис команд CSS
4.1. Общий вид
Команда CSS состоит из параметра стиля и значения этого параметра, разделенных двоеточием. Когда команд, определяющих стиль какого-либо элемента много, их отделяют друг от друга точкой с запятой.
Пример: color: #000; background-color: #ccc
color и background-color—параметры стиля: цвет текста и цвет фона. #000 и #ccc—значения этих параметров (черный и серый, соответственно).
4.2. Как выглядит описание стиля элемента при помощи параметра style?
Пример: <p style="color: red; font-weight: bold">…</p>
4.3. Как выглядит описание стилей элементов и классов элементов документа в пределах <style type="text/css">…</style> или в таблице стилей filename.css?
<head>
…
<style type="text/css">
body {margin: 0px; color: #000; background-color: #ffc; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif}
h1 {color: #036; font-size: 150%; font-weight: normal;}
p, li {font-size: 100%}
a {text-decoration: none}
a:hover {text-decoration: underline}
.alert {color: #f00; font-weight: bold}
</style>
</head>
Обратите внимание (1) на обязательный параметр type тэга style; (2) на фигурные скобки, в которые заключены параметры стиля, (3) на то, что a (гиперссылка), a:hover(гиперссылка в момент нахождения курсора мыши над ней), a:visited ("посещенная" ссылка) и a:active (активная ссылка)—это, с точки зрения стилевого оформления, разные элементы; (3) на то, что перед именем класса элементов (в нашем случае: alert) ставится точка.
Все элементы данного документа, упомянутые в таблице стилей будут выглядеть так, как это описано в таблице. Для представления других браузер будет использовать значения по умолчанию. Для того, чтобы приписать элементу класс (тогда свойства элемента будут определяться наложением свойств класса на свойства элемента, причем свойства класса имеют приоритет), надо воспользоваться параметром class. Например:
<p class="alert">…</p> Обратите внимание, что здесь (в отличие от самой таблицы стилей) перед именем класса точка не ставится.
Как таблица стилей выглядела бы в отдельном файле filename.css? В файл filename.cssпопало бы без изменений все содержимое контейнера <style type="text/css">…</style>. Чтобы связать файл filename.css с гипертекстовым документом, в области <head>…</head> документа необходимо указать адрес таблицы стилей. Адрес таблицы стилей указывается следующим образом:
<link rel="stylesheet" type="text/css" href="path/filename.css">
5. Команды CSS, необходимый минимум
5.1. Определение цвета элементов и свойств фона:
color—цвет текста в пределах данного элемента; значение: цвет. Пример: color: #f00;
background-color—цвет фона в пределах данного элемента; значение: цвет. Пример:background-color: #ffc;
background-image—фоновое изображение в пределах данного элемента; значение:url(path/filename.ext). Пример: background-image: url(../bgr.gif);
background-repeat—повторение фонового изображения в пределах данного элемента; значения: no-repeat, repeat, repeat-x, repeat-y (не повторять (изображение появится только один раз), замостить всю площадь, повторять только по горизонтали, повторять только по вертикали).
Пример: background-repeat: no-repeat;
5.2. Определение свойств шрифта:
font-family—гарнитура; значения: названия шрифтов. Для обеспечения совместимости следует завершать список возможных гарнитур родовым названием группы шрифтов (serif, sans-serif или monospace), например: font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
или "Times New Roman", Times, serif; или "Courier New", Courier, monospace;
font-size—кегль; значения: относительный размер в процентах или абсолютный размер в пикселях или пунктах. Для стабильного воспроизведения относительного размера шрифтов разных элементов документа необходимо (1) определить размеры шрифта для всех элементов, (2) определить их единообразно. Пример: font-size: 16pt
font-style—"стиль" шрифта; значения: italic (наклонный или курсив) или normal Пример:font-style: normal
font-weight—жирность; значения: bold (полужирный) или normal Пример: font-style:normal
5.3. Определение свойств отображения текста:
text-align—выравнивание; значения: left, right, center или justify (по левому, по правому краю, по центру, по обоим краям). Пример: text-align: center
text-decoration—подчеркивание; значения: underline или none Пример: text-decoration:underline
text-indent—абзацный отступ; значения: относительный размер в процентах или в долях ширины литер m или x данного шрифта или абсолютный размер в пикселях или пунктах. Пример: text-indent: 1em;
5.4. Определение свойств текстового бокса:
margin-top, margin-bottom, margin-left, margin-right—отступ от краев окна. Значения:относительный размер в процентах или в долях ширины литер m или x данного шрифта или абсолютный размер в пикселях или пунктах. Пример: margin-left: 40px;
padding-top, padding-bottom, padding-left, padding-right—отступ от зоны рамки текстового блока (самой рамки может и не быть). Значения: относительный размер в процентах или в долях ширины литер m или x данного шрифта или абсолютный размерв пикселях или пунктах. Пример: padding-left: 3px;
border-width—ширина рамки. Значения абсолютный размер в пикселях или пунктах. Пример: border-width: 1px;
border-color—цвет рамки. Значение: цвет. Пример: border-color: #f00;
border-style—стиль рамки. Отображается довольно неоднозначно, здесь приводятся только однозначно отображающиеся значения. Значения: none, solid, double (нет, цельная, двойная). double работает когда border-width не менее 3px. Пример:border-style: double;
border-top, border-bottom, border-left, border-right—рамка сверху, снизу, слева, справа. Используется вместе с –width, -color, -style для определения свойств разных частей рамки текстового бокса. Значения описаны выше. Пример: border-left-style: none;
float—расположение элементов. Значения: left, right, none (прижать влево, прижать вправо, по умолчанию). Удобен, например, для верстки текста в несколько колонок без применения таблицы: все <div> шириной менее экрана, у которых выставлен float:left, будут заполнять экран друг за другом, начиная слева. Используется также для позиционирования картинок. Пример: float: left;