ТОР 5 статей: Методические подходы к анализу финансового состояния предприятия Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века Характеристика шлифовальных кругов и ее маркировка Служебные части речи. Предлог. Союз. Частицы КАТЕГОРИИ:
|
Представление текстаФорматирование текста играет особую роль при создании сайта. В этом разделе даны основные свойства, необходимые для представления текста. Text-indent Определяет величину отступа первой строки блока текста в единицах длины или процентах. По умолчанию отступ первой строки равен 0. Пример: p {text-indent: 3em} Text-align Выравнивает текст в блоке содержимого элемента. Значениями свойства могут быть: left – текст выравнивается по левому краю; right – текст выравнивается по правому краю; center – текст выравнивается по центру; justify – текст выравнивается по обоим краям. Пример: p {text-align: justify} Vertical-align Определяет вертикальное положение блока. По умолчанию базовая линия блока выравнивается по базовой линии родительского блока. Значениями свойства могут быть:
величина смещения блока по вертикали в единицах длины или процентах; baseline – базовая линия блока выравнивается по базовой линии родительского блока; middle – средняя точка блока выравнивается на уровне базовой линии родительского блока в сумме с половиной ширины родительского блок; sub – базовая линии блока смещается вниз для представления нижних индексов; super – базовая линии блока смещается вверх для представления верхних индексов; text-top – верхняя граница блока выравнивается с верхом шрифта родительского элемента; text-bottom – нижняя граница блока выравнивается с низом шрифта родительского элемента; top – верхняя граница блока выравнивается по наиболее высокому элементу строки; bottom – нижняя граница блока выравнивается по самому низкому элементу строки. Пример: p {vertical-align: middle} Line-height Задает высоту строки. Пример: div {line-height: 1.2em} Text-decoration Определяет оформление текстового элемента в виде подчеркивания, надчеркивания или перечеркивания текста. По умолчанию никакого оформления текста не производится. Значениями свойства могут быть:
underline – каждая строка текста подчеркнута; overline – каждая строка текста обрамляется чертой над ней; none – оформления текста не производится; line-through – каждая строка текста отображается перечеркнутой. Пример: p {text-decoration: underline} Text-shadow Указывает набор теневых эффектов, разделенных запятой, которые нужно применить к тексту элемента. По умолчанию теневые эффекты не применяются. Каждый теневой эффект должен задавать смещение тени, величину размытости или радиус пятна, а также цвет тени. Смещение тени определяется двумя величинами, указывающими отступ от текста. Первое значение задает горизонтальное смешение вправо относительно текста. Второе значение определяет вертикальное смешение вниз относительно текста. Пример: p {text-shadow: 3px 3px 5px red} Letter-spacing Определяет расстояние между текстовыми символами. По умолчанию используется стандартный интервал для текущего шрифта. Значениями свойства могут быть: normal – стандартный интервал для текущего шрифта; величина, на которую увеличивается межсимвольное расстояние в дополнение к заданному по умолчанию. Пример: p {letter-spacing: 0.1em} Word-spacing Указывает расстояние между словами. По умолчанию используется обычный интервал, определяемый текущим шрифтом. Значениями свойства могут быть: normal – стандартный интервал для текущего шрифта; величина, на которую увеличивается расстояние между словами в дополнение к заданному по умолчанию. Пример: p {word-spacing: 1em} Text-transform Управляет преобразованием регистра букв. По умолчанию регистр букв не преобразуется. Значениями свойства могут быть: capitalize – первая буква каждого слова преобразуется в прописную: uppercase – все буквы преобразуются в прописные; lowercase – все буквы преобразуются в строчные; none – преобразования регистра не производятся. Пример: p {text-transform: capitalize} White-space Определяет форматирование пустых символов при отображении элементов. По умолчанию пустые символы исключаются по мере необходимости при заполнении строк текста. Значениями свойства могут быть: pre – запрещает браузеру исключать пустые символы из текста; normal – позволяет браузеру исключать пустые символы по мере необходимости при заполнении строк текста. Дополнительные переводы строк могут вставляться в местах, обозначенных в контексте; nowrap – позволяет браузеру исключать пустые символы по мере необходимости при заполнении строк текста. Запрещает все переводы строк, кроме тех, что непосредственно обозначены в контексте. Пример: p {white-space: pre} Таблицы Свойства, необходимые для работы с таблицами. Caption-side Указывает положение табличного заголовка относительно таблицы. По умолчанию заголовок отображается сверху таблицы. Значениями свойства могут быть: left – заголовок расположен слева от таблицы; right – заголовок отображается справа от таблицы; top – заголовок расположен сверху таблицы; bottom – заголовок отображается снизу таблицы. Пример: caption {caption-side: bottom} Table-layout Определяет алгоритм, который используется для размещения ячеек, столбцов и рядов таблицы. По умолчанию применяется автоматический алгоритм раскладки таблицы. Значениями свойства могут быть: fixed – фиксированный алгоритм раскладки таблицы. В этом алгоритме горизонтальная раскладка таблицы не зависит от ее содержимого, а определяется шириной столбцов, границ и отступов в ячейках; auto – автоматический алгоритм раскладки таблицы, которая задается размерами содержимого ячеек. Empty-cells Указывает, отображаются ли рамки вокруг пустых ячеек. По умолчанию рамки выводятся вокруг пустых ячеек. Значениями свойства могут быть: hide – рамки не отображаются вокруг пустых ячеек; show – рамки выводятся вокруг пустых ячеек. Пример: table {empty-cells: hide} Border-collapse Определяет модель рамки таблицы. По умолчанию рамка является общей для всех ячеек таблицы. Значениями свойства могут быть: separate – каждая ячейка таблицы обладает собственной рамкой; collapse – рамка является общей для всех ячеек таблицы. Пример: table {border-collapse: separate} Border-spacing Задает расстояние между рамками смежных ячеек таблицы в случае индивидуальных рамок в ячейках. По умолчанию интервал между рамками равен 0. Если указано одно значение, то оно применяется к горизонтальному и вертикальному расстояниям. Если заданы два значения, то первое устанавливает горизонтальный интервал, а второе – вертикальное расстояние. Пример: table {border-spacing: 10pt}
Проектное задание Отформатируйте разработанные на предыдущем этапе (модуль 1) Web-страницы своей студенческой группы с использованием различных способов связывания документов и таблиц стилей. Не нашли, что искали? Воспользуйтесь поиском:
|