![]() Обратная связь ТОР 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-страницы своей студенческой группы с использованием различных способов связывания документов и таблиц стилей. Не нашли, что искали? Воспользуйтесь поиском:
|