belarusweb.net - веб-программирование для новичков: HTML,CSS, JavaScript, PHP, MySQL и др.

# §2. Свойства CSS для текста, шрифта, списков, таблиц и форм.

2.1. Оформление внешнего вида текста. В процессе изучения языка гипертекстовой разметки HTML мы учились форматировать текст, разбивая его на логические блоки, например, абзацы, или выделяя особенность и важность отдельных слов, например, названий или терминов. Конечно, внешний вид форматируемых фрагментов при этом мог несколько изменяться, например, выделяться подчеркиванием или отображаться курсивом, но повлиять на общий формат внешнего вида текста по своему усмотрению мы не могли. Однако HTML для этих целей и не используется, поскольку существует CSS, который обладает достаточным арсеналом свойств, способных изменить не только внешний вид текста, но и общее оформление страницы или всего сайта. В данном пункте нас будут интересовать только свойства, отвечающие за оформление внешнего вида текста. К ним можно отнести расстояния между буквами, словами и строками, выравнивание и направление текста, отступ первой строки, различные виды подчеркивания и т.д. Сюда, конечно же, следует отнести и шрифт, но о свойствах шрифтов мы поговорим в следующем пункте.

Для того, чтобы изменить интервал между словами или отдельными символами текста используются наследуемые свойства word-spacing и letter-spacing, которые в качестве значений принимают числа в любых доступных единицах измерения, использующихся в CSS (смотреть). Более того, разрешается использовать отрицательные значения, но в этом случае слова и символы могут заходить друг на друга или вести себя непредсказуемым образом, так что нужно быть внимательным и следить за сохранением читабельности текста. Значения в процентах не допускаются, но кроме числовых значений свойства могут принимать значение normal, которое используется по умолчанию и задает обычные для данного шрифта интервалы, а также значение inherit, которое указывает, что для элемента наследуется значение аналогичного свойства родительского элемента. Использование этих и некоторых других свойств форматирования текста показано в примере 2.1.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Работа с текстом</title>
    	<style>
    		.p_1{
    		letter-spacing: 0.6em;
    		word-spacing: 10px;
    		line-height: 1.5;
    		text-indent: 30px;
    		}

    		.p_2{
    		letter-spacing: 0.2em;
    		word-spacing: 3px;
    		line-height: 1;
    		text-indent: 1%;
    		}
    	</style>
    </head>
    <body>
    	<p class="p_1">
    		Первая строка этого абзаца.<br>
    		Вторая строка этого абзаца.<br>
    		Третья строка этого абзаца.
    	</p>
    	<p class="p_2">
    		Первая строка этого абзаца.<br>
    		Вторая строка этого абзаца.<br>
    		Третья строка этого абзаца.
    	</p>
    </body>
    </html>

Пример 2.1. Использование свойств letter-spacing, word-spacing, line-height, text-indent

Читабельность текста можно также улучшить за счет увеличения межстрочного интервала (расстояния между строками). Для этих целей используется наследуемое свойство line-height, которое может принимать следующие значения:

- normal – используется стандартный в данной ситуации межстрочный интервал, который в зависимости от браузера составляет около 120-125% от текущего размера шрифта; значение используется браузером по умолчанию;
- множитель – представляет собою число, на которое будет умножен текущий размер шрифта для определения межстрочного интервала (см. пример 2.1);
- размер – задает расстояние между строк в любых единицах измерения, использующихся в CSS;
- проценты – размер межстрочного интервала определяется в процентах от текущего размера шрифта;
- inherit – указывает, что для элемента наследуется значение аналогичного свойства родительского элемента.

Следует отметить, что отрицательные значения межстрочного интервала не допускаются, а его отсчет ведется от базовой линии шрифта (подробнее об этом будет рассказано в следующем пункте).

Установка красной строки (отступ первой строки в абзаце) задается при помощи наследуемого свойства text-indent. Допускается использование любых доступных единиц измерения, использующихся в CSS, а также проценты, которые определяют размер отступа первой строки относительно ширины родительского элемента, а не размеров текущего шрифта (см. пример 2.1).

Здесь и далее мы будем практически всегда опускать значение свойств inherit, т.к. его могут принимать все свойства CSS. Оно указывает, что для элемента наследуется значение аналогичного свойства родительского элемента.

Имеются в CSS и возможности для выравнивания текста. Делается это при помощи наследуемого свойства text-align (см. пример 2.2), которое применяется к блочным элементам, определяя выравнивание его строчного содержимого. Отметим, что применять его к строчным элементам не имеет смысла, т.к. ширина таких элементов определяется их содержимым. Возможные значения свойства:

- left – текст будет выравниваться по левому краю; значение используется браузером по умолчанию;
- right – текст будет выравниваться по правому краю;
- center – текст будет выравниваться по центру;
- justify – текст будет растягиваться на всю ширину родительского элемента;
- start – аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево;
- end – аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Работа с текстом</title>
    	<style>
    		/* Задаем ширину всех абзацев */
    		p{width: 400px;}

    		/* Задаем выравнивание текста абзацев */
    		.p_1{text-align: right;}
    		.p_2{text-align: center;}
    		.p_3{text-align: justify;}
    	</style>
    </head>
    <body>
    	<p class="p_1" style="background-color: yellow">
    		Текст выравнивается по правому краю.<br>
    		Вторая строка этого абзаца.<br>
    	</p>

    	<p class="p_2" style="background-color: blue">
    		Текст выравнивается по центру.<br>
    		Вторая строка этого абзаца.<br>
    	</p>

    	<p class="p_3" style="background-color: green">
    		Текст растягивается по ширине абзаца.
    		Чтобы эффект был виден, первое предложение
    		должно быть длинее, чем ширина абзаца.
    	</p>
    </body>
    </html>

Пример 2.2. Пример использования свойства text-align

В некоторых языках возникает необходимость смены направления письма. Если у нас принято направление письма слева направо, то во многих арабских языках это делается наоборот, т.е. справа налево. Для таких случаев предусмотрено специальное наследуемое свойство direction, значение ltr которого задает направление текста слева направо, а значение rtl, соответственно, справа налево (см. пример 2.3). Если же нужно изменить еще и направление символов, то следует воспользоваться наследуемым свойством unicode-bidi, которое используется только совместно с direction и может принимать значения:

- normal – право выбора направления остается за браузером, который использует собственный алгоритм для определения направления текста на основе стандартов Unicode; значение используется браузером по умолчанию;
- embed – направление текста будет задаваться, как указано в свойстве direction;
- bidi-override – направление текста, опять же, будет задаваться свойством direction, но в дополнение к этому изменится и направление символов в тексте.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Работа с текстом</title>
    	<style>
    		/* Задаем ширину всех абзацев */
    		p{width: 400px;}

    		/* Задаем направление текста абзацев */
    		.p_1{
    		direction: rtl;
    		unicode-bidi: normal;
    		}

    		.p_2{
    		direction: rtl;
    		unicode-bidi: bidi-override;
    		}

    	</style>
    </head>
    <body>
    	<p class="p_1" style="background-color: yellow">
    		Направление записи текста идет<br>
    		справа налево.
    	</p>

    	<p class="p_2" style="background-color: violet">
    		Направление записи текста <br>
    		и букв идет справа налево.
    	</p>
    </body>
    </html>

Пример 2.3. Пример использования свойств direction, unicode-bidi

Отметим, что по умолчанию, если задано направление текста слева направо (как принято у нас), браузеры выравнивают текст по левому краю. Если же задано выравнивание текста справа налево, то браузеры по умолчанию выравнивают текст по правому краю.

Как мы уже упоминали в процессе изучения HTML, браузеры по умолчанию игнорируют большинство пробельных символов в html-коде, заменяя символы табуляции, подряд идущие пробелы и автоматические переносы строк одним пробелом. Однако такое положение не всегда устраивает пользователей, а применение элемента 'pre', в котором сохраняются все пробелы и переносы строк, также не всегда удовлетворяет их потребностям. Поэтому в CSS для определения способа обработки пробельных символов предусмотрено специальное наследуемое свойство white-space (см. пример 2.4). Перечислим значения свойства:

- normal – все пробельные символы и переносы строк в коде HTML преобразуются в один пробел, а разрывы строк добавляются браузером автоматически; значение используется браузером по умолчанию;
- pre – текст форматируется аналогично содержимому элемента 'pre', т.е. отображается так, как вводит его пользователь: сохраняются все подряд идущие пробельные символы и переносы строк, автоматические переносы не добавляются;
- nowrap – текст отображается одной строкой, подряд идущие пробельные символы заменяются одним пробелом, переносы строк в коде HTML игнорируются, автоматические переносы строк не добавляются, действительны только принудительные разрывы строк, сделанные при помощи элементов 'br';
- pre-wrap – все подряд идущие пробельные символы и переносы строк сохраняются, но разрывы строк добавляются браузером автоматически;
- pre-line – все подряд идущие пробельные символы заменяются одним пробелом, но переносы строк в коде HTML сохраняются, а также по необходимости браузером добавляются автоматические переносы.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Работа с текстом</title>
    	<style>
    		/* Задаем ширину всех абзацев */
    		p{width: 400px;}

    		.p_1{white-space: normal;}
    		.p_2{white-space: pre;}
    		.p_3{white-space: nowrap;}
    		.p_4{white-space: pre-wrap;}
    		.p_5{white-space: pre-line;}
    	</style>
    </head>
    <body>
    	<p class="p_1" style="background-color: red">
    normal:	используется    значение браузера по умолчанию, т.е. все пробельные
    		символы и переносы строк    в коде HTML преобразуются в один пробел,
    		        а разрывы строк добавляются браузером автоматически.
    	</p>

    	<p class="p_2" style="background-color: blue">
    pre: текст форматируется аналогично содержимому элемента 'pre', т.е.
    	отображается так, как вводит его пользователь: сохраняются все подряд идущие
    пробельные символы и переносы строк, автоматические переносы не добавляются.
    	</p>

    	<p class="p_3" style="background-color: green">
    nowrap: текст отображается одной строкой, подряд идущие пробельные символы <br>
    		заменяются одним пробелом, переносы строк в коде HTML игнорируются  , <br>
    	автоматические переносы строк не добавляются, действительны только 	<br>
    	принудителььные разрывы строк, сделанные <br>
    		при помощи элементов 'br'.
    	</p>

    	<p class="p_4" style="background-color: yellow">
    pre-wrap: все подряд идущие пробельные символы и переносы строк сохраняются  , но
    	разрывы    строк добавляются 	браузером автоматически.
    	</p>

    	<p class="p_5" style="background-color: violet">
    pre-line: все подряд идущие пробельные символы заменяются одним пробелом, но переносы
       строк в коде HTML сохраняются     , а также по необходимости браузером добавляются
    			автоматические переносы.
    	</p>
    </body>
    </html>

Пример 2.4. Пример использования свойства white-space

Присутствует в CSS и возможность управления преобразованием текста в прописные (заглавные) или строчные буквы. Делается это при помощи наследуемого свойства text-transform (см. пример 2.5), которое может принимать следующие значения:

- capitalize – прописной (заглавной) становится первая буква каждого слова;
- uppercase – все буквы преобразуются в прописные;
- lowercase – все буквы преобразуются в строчные;
- none – текст отображается стандартным образом; значение используется браузером по умолчанию.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Работа с текстом</title>
    	<style>
    		/* Задаем ширину всех абзацев */
    		p{width: 400px;}

    		.p_1{text-transform: capitalize;}
    		.p_2{text-transform: uppercase;}
    		.p_3{text-transform: lowercase;}
    		.p_4{text-transform: none;}
    	</style>
    </head>
    <body>
    	<p class="p_1" style="background-color: yellow">
    		Все первые буквы текста отображаются прописными.
    	</p>

    	<p class="p_2" style="background-color: blue">
    		У моего текста ВСЕ буквы ОТОБРАЖАЮТСЯ прописными.
    	</p>

    	<p class="p_3" style="background-color: green">
    		У моего текста ВСЕ буквы ОТОБРАЖАЮТСЯ строчными.
    	</p>

    	<p class="p_4" style="background-color: red">
    		А вот так выглядит ТЕКСТ в стандартном режиме.
    	</p>
    </body>
    </html>

Пример 2.5. Пример использования свойства text-transform

Также при использовании CSS отпадает необходимость использования элементов HTML для выделения текста подчеркиванием, т.к. для этого имеется ненаследуемое свойство text-decoration, которое может принимать соответствующие значения:

- none – используется в качестве значения по умолчанию, отменяет все эффекты, включая подчеркивание у ссылок, что бывает очень полезно при формировании меню;
- overline – оформляет текст надчеркнутым;
- underline – оформляет текст подчеркнутым;
- line-through – отображает текст перечеркнутым.

2.2. Определение характеристик шрифтов. Говоря о внешнем виде текста нельзя не затронуть тему шрифтов, которые самым прямым образом влияют на восприятие текста и его читабельность.

Шрифт – набор символов определенного размера и рисунка, презназначенных для набора текста.

Как следует из определения, изменяя рисунок символов, а также их размер, можно получать различные виды шрифтов, которые будут соответствовать общему дизайну сайта, делая его более уникальным и неповторимым. Взгляните на пример 2.6, на котором представлено применение к одному и тому же фрагменту текста нескольких видов шрифта.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Шрифты</title>
    	<style>
    		.f_1{font-family: arial, tahoma, sans-serif;}
    		.f_2{font-family: gabriola;}
    		.f_3{font-family: "high tower text", sans-serif;}
    		.f_4{font-family: "monotype corsiva", serif;}
    		.f_5{font-family: verdana, arial;}
    	</style>
    </head>
    <body>
    	<p class="f_1">
    		Ко мне применяется шрифт Arial.
    	</p>

    	<p class="f_2">
    		Ко мне применяется шрифт Gabriola.
    	</p>
    	<p class="f_3">
    		Ко мне применяется шрифт семейства sans-serif.
    	</p>

    	<p class="f_4">
    		Ко мне применяется шрифт Monotype Corsiva.
    	</p>
    	<p class="f_5">
    		Ко мне применяется шрифт Verdana.
    	</p>
    </body>
    </html>

Пример 2.6. Использование различных видов шрифта

Разновидностей шрифтов довольно много, одни из них получили широкое распространение и по умолчанию входят в состав большинства операционных систем и различного рода программ, другие нужно устанавливать из сторонних источников в зависимости от потребностей и желания пользователей. Что касается браузеров, то они используют шрифты операционной системы, т.к. свои встроенные шрифты у них отсутствуют.

Для того, чтобы указать шрифт, который будет использоваться внутри требуемого элемента, необходимо использовать наследуемое свойство font-family, в качестве значения которого нужно указать через запятую имена шрифтов или названия семейства шрифтов (см. пример 2.6). Если в названии шрифта содержатся пробелы, то его нужно указывать в кавычках. Также при выборе шрифтов необходимо учитывать тот факт, что в операционных системах разных пользователей могут быть установлены собственные наборы шрифтов. Поэтому, если хочется применить к элементу какой-нибудь экзотический шрифт, нужно обязательно учитывать эту особенность. В таких случаях обычно первыми указывают редкие шрифты, затем более распространенные, а в конце указывают семейство шрифтов. Если браузер не находит первого шрифта на компьютере пользователя, он начинает искать второй шрифт и так до конца списка указанных в качестве значения шрифтов. Это повышает вероятность того, что хотя бы один и указанных шрифтов будет на компьютере пользователя. Если указанных шрифтов не обнаружено, браузер начинает самостоятельно подбирать шрифты из указанного списка семейств шрифтов. В любой операционной системе по умолчанию доступны следующие стандартные семейства шрифтов:

- serif – шрифты с засечками;
- sans-serif – шрифты без засечек (рубленые шрифты);
- cursive – курсивные шрифты (часто напоминают рукописный текст);
- fantasy – декоративные (художественные) шрифты;
- monospace – моноширинные шрифты (все буквы одинаковой ширины).

Если указанные в качестве значения свойства font-family шрифты не будут найдены браузером на компьютере пользователя, а название семейства шрифтов будет отсутствовать, то браузер использует шрифт, установленный по умолчанию. Обычно это шрифт Times New Roman.

CSS позволяет также задать ряд других характеристик шрифта: размер, начертание, насыщенность. Так размер задается наследуемым свойством font-size, которое в качестве значений принимает все доступные в CSS единицы измерения, проценты, которые считаются относительно размера шрифта родительского элемента, и ряд специальных значений: xx-small, x-small, small, medium (по умолчанию), large, x-large, xx-large, smaller, larger, где последние два значения определяют, соответственно, размер меньший или больший, чем у родительского элемента (см. пример 2.7).

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Шрифты</title>
    	<style>
    		.size_1{font-size: medium;}
    		.size_2{font-size: large;}
    		.size_3{font-size: x-large;}
    		.size_4{font-size: 100%;}
    		.size_5{font-size: 1em;}
    	</style>
    </head>
    <body>
    	<p class="size_1">
    		{font-size: medium;}
    	</p>

    	<p class="size_2">
    		{font-size: large;}
    	</p>
    	<p class="size_3">
    		{font-size: x-large;}
    	</p>

    	<p class="size_4">
    		{font-size: 100%;}
    	</p>
    	<p class="size_5">
    		{font-size: 1em;}
    	</p>
    </body>
    </html>

Пример 2.7. Определение размера шрифта

Кстати, не стоит забывать, что установка размера шрифта родительского элемента может повлиять на рамеры других элементов-потомков, которые будут заданы в относительных единицах, например, в em. Ведь такие относительные единицы прямым образом зависят от размера шрифта родительского элемента.

Насыщенность (жирность) шрифта устанавливается при помощи наследуемого свойства font-weight, принимающего ряд значений, определяющих степень жирности: normal (по умолчанию), bold, bolder, lighter и числа от 100 до 900 с шагом 100, где bolder и lighter определяют, соответственно, жирность меньшую или большую, чем у родительского элемента (см. пример 2.8).

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Шрифты</title>
    	<style>
    		.weight_1{font-weight: normal;}
    		.weight_2{font-weight: bold;}
    		.weight_3{font-weight: bolder;}
    		.weight_4{font-weight: lighter;}
    		.weight_5{font-weight: 600;}
    	</style>
    </head>
    <body>
    	<p class="weight_1">
    		normal соответствует значению 400,<br>
    		значения 100, 200, 300 не будут работать.
    	</p>
    	<p class="weight_2">
    		bold соответствует значению 600.
    	</p>
    	<p class="weight_3">
    		У родительского элемента, т.е. у тела документа,<br>
    		по умолчанию браузер использует жирность normal,<br>
    		поэтому значение bolder повышает ее до bold.
    	</p>
    	<p class="weight_4">
    		 lighter не сработает, т.к. браузеры на данный <br>
    		 момент поддерживают только значения 400 и 600.
    	</p>
    	<p class="weight_5">
    		600 соответствует bold.
    	</p>
    </body>

Пример 2.8. Установка насыщенности шрифта

На данный момент значения 100 – 500 свойства font-weight соответствуют нормальному начертанию шрифта, а 600 – 900, соответственно, жирному начертанию. В дальнейшем возможно станут доступны и остальные числовые значения.

Кроме насыщенности, конечно же, нас интересует и возможность выделять слова и фрагменты текста курсивом. CSS дает нам такую возможность за счет применения наследуемого свойства font-style, которое определяет начертание шрифта и может принимать следующие значения:

- normal – шрифт отображается стандартным способом; значение используется браузером по умолчанию;
- italic – шрифт отображается курсивом;
- oblique – шрифт отображается наклонным.

Следует отметить, что понятия курсивного и наклонного начертания несколько различаются, поскольку курсивное начертание предусматривает наличие специального шрифтового набора символов со скругленными формами штрихов, что делает его похожим на рукописный текст, а наклонное начертание представляет собою всего лишь обычный прямой шрифт слегка наклоненный вправо. Более того, не всякий шрифт предусматривает курсив, поэтому даже в случае указания в свойстве font-style значения italic, символы в них будут отображаться просто наклонными.

Также хотелось бы напомним, что все свойства CSS могут принимать значение inherit, которое сообщает браузеру о том, что значение свойства должно быть унаследовано от родителя.

Иногда на сайтах можно увидеть, что вместо строчных букв используются прописные, но малого размера. Такой прием в типографике называют капителью. Делается это при помощи наследуемого свойства font-variant, которое может принимать значения normal (браузер будет отображать символы стандартным способом) и small-caps (браузер будет конвертировать символы в капитель).

Итак, чтобы изменять различные характеристики шрифта можно воспользоваться одним из доступных свойств: font-family, font-size, font-weight, font-style, font-variant. Однако в CSS имеется возможность задать через пробел несколько характеристик шрифта одновременно в одном универсальном наследуемом свойстве font. При этом размер шрифта и его семейство должны указываться обязательно. Также имеет значение порядок указания значений свойств: первыми, если они конечно будут указываться, должны записываться значения свойств font-style, font-variant или font-weight в любом порядке, затем необходимо указывать значение свойства font-size, а также при необходимости через слэш '/' значение свойства line-height, в конце указывается значение свойства font-family (см. пример 2.9). В случае отсутствия значения какого-нибудь свойства браузер использует значение по умолчанию.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Шрифты</title>
    	<style>
    		.font_1{font: 1.2em/25px serif;}
    		.font_2{font: bold italic 0.9em "courier new", serif;}
    		.font_3{font: normal small-caps 1em/1.2em verdana;}
    	</style>
    </head>
    <body>
    	<p class="font_1">
    		font_1{font: 1.2em/25px serif;}.<br>
    		Здесь указаны размер, высота строки и семейство.
    	</p>
    	<p class="font_2">
    		font_2{font: bold italic 0.9em "courier new", serif;}.<br>
    		Здесь &ndash; насыщенность, начертание, размер, шрифт + семейство.
    	</p>
    	<p class="font_3">
    		font_3{font: normal small-caps 1em/1.2em verdana;}<br>
    		Значение normal будет применено сразу к насыщенности<br>
    		и начертанию, т.к. оно присутствует у обоих свойств.
    	</p>
    </body>
    </html>

Пример 2.9. Одновременная установка нескольких характеристик шрифта

Вместо использования в качестве значений характеристик шрифта в свойстве font допускается указывать специальные ключевые слова, которые задают шрифт, использующийся в соответствующих элементах операционной системы пользователя:

- caption – шрифт текста элементов управления;
- icon – шрифт текста под иконками;
- menu – шрифт, использующийся в меню;
- message-box – шрифт диалоговых окон;
- small-caption – шрифт, использующийся для небольших элементов управления;
- status-bar – шрифт, использующийся для строки состояния окон.

2.3. Оформление внешнего вида списков. В процессе изучения HTML мы научились создавать списки, но оформление внешнего вида оставили за CSS, который позволяет выбрать нужный тип и расположение маркеров, а также использовать в качестве маркеров изображения (см. пример 2.10).

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Оформление списков</title>
    	<style>
    		.list_1	{
    		list-style-type: decimal;
    		list-style-position: outside;
    		}
    		.list_2{
    		list-style-type: none;
    		}
    		.list_3{
    		list-style-type: square;
    		list-style-position: inside;
    		}
    	</style>
    </head>
    <body>
    	<ul>
    		<li class="list_1">
    			Маркер размещаем вне списка.<br>
    			Стандартный маркер.<br><br>
    		</li>
    		<li class="list_2">
    			Второй пункт списка.<br>
    			Не используем маркер вообще.<br><br>
    		</li>
    		<li class="list_3">
    			Маркер размещаем внутри списка.<br>
    			Стандартный маркер другого типа.
    		</li>
    	</ul>
    </body>
    </html>

Пример 2.10. Примеры оформления маркеров списка

Тип маркера задается при помощи наследуемого свойства list-style-type. Перечислим его значения:

- disc – маркер в виде диска; значение используется браузером по умолчанию для маркированных списков;
- circle – маркер в виде круга;
- square – маркер в виде квадрата;
- decimal – арабские цифры, т.е. 1, 2, 3 и т.д.; значение используется браузером по умолчанию для нумерованных списков;
- decimal-leading-zero – те же арабские цифры, только с нулем впереди для всех цифр, которые меньше десяти, т.е. 01, 02,...09, 10, 11 и т.д.;
- lower-roman – римские цифры в нижнем регистре, т.е. i, ii, iii, iv и т.д.;
- upper-roman – римские цифры в верхнем регистре, т.е. I, II, III, IV и т.д.;
- lower-greek – строчные греческие буквы, т.е. α, β, γ и т.д.;
- lower-latin или lower-alpha – строчные латинские буквы, т.е. a, b, c и т.д.;
- upper-latin или upper-alpha – прописные латинские буквы, т.е. A, B, C и т.д.;
- armenian – армянские цифры;
- georgian – грузинские цифры;
- none – отменяет маркеры вообще, т.е. список идет без маркеров.

Расположение маркеров относительно текста пунктов списка определяется при помощи наследуемого свойства list-style-position, значение outside которого используется по умолчанию и указывает браузеру на размещение маркеров за границей пунктов списка, а значение inside указывает браузеру на размещение маркеров вместе с содержимым пунктов списка (см. пример 2.10).

В CSS имеется также возможность использовать вместо маркеров изображения. Для этого применяется наследуемое свойство list-style-image, которое может принимать значения:

- url – относительный или абсолютный путь к файлу изображения, указываемый в скобках с использованием одиночных или двойных кавычек или без них, например, {list-style-image: url("http://www.belarusweb.net")};
- none – используется по умолчанию и указывает браузеру, что следует применять стандартный маркер вместо изображения.

Кстати, в данном списке маркеры представляют собой не что иное, как изображения в виде кружков.

Можно задать значения всех трех свойств одновременно посредством наследуемого универсального свойства list-style. Опять же, значения должны разделяться пробелом, но могут идти в любом порядке или отсутствовать, тогда браузер заменит их значениями по умолчанию (см. пример 2.10).

Все свойства, перечисленные в данном пункте, применяются к элементам, у которых {display: list-item}, в частности, к элементам 'ul', 'ol', 'li', 'dl', 'dd', 'dt'.

2.4. Оформление внешнего вида таблиц. После создания таблицы стандартными средствами HTML внешний вид можно изменить при помощи CSS. Так для того, чтобы расположить заголовок сверху или снизу таблицы, нужно всего лишь воспользоваться наследуемым свойством caption-side, которое может принимать соответствующие значения:

- top – заголовок располагается над таблицей; значение используется браузером по умолчанию;
- bottom – заголовок располагается под таблицей.

Также на внешний вид таблицы очень сильно влияет способ отображения границ ячеек таблицы. Дело в том, что по умолчанию каждая ячейка имеет собственную границу (рамку), в результате чего пользователь видит у смежных ячеек не общую границу, а две границы, которые находятся на определенном расстоянии друг от друга (см. пример 2.11). Для того, чтобы изменить такое поведение браузера, нужно воспользоваться наследуемым свойством border-collapse, принимающим следующие значения:

- separate – каждая ячейка имеет свою отдельную границу (рамку), а в местах соприкосновения смежных ячеек пользователь будет видеть две линии; значение используется браузером по умолчанию;
- collapse – границы смежных ячеек в местах соприкосновения сливаются в одну.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Таблицы</title>
    	<style>
    		.table_1{
    		caption-side: bottom;
    		border-collapse: collapse;
    		}
    	</style>
    </head>
    <body>
    	<table class="table_1" border="1">
    		<caption>Таблица №1</caption>
    		<tr>
    			<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
    		</tr>
    		<tr>
    			<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
    		</tr>
    	</table>
    </body>
    </html>

Пример 2.11. Форматирование внешнего вида таблицы (пример №1)

Если значение свойства border-collapse установлено, как separate, то возникает необходимость регулирования расстояния между границами смежных ячеек. В этом случае используется наследуемое свойство border-spacing, которое принимает в качестве значения любые единицы измерения длины, используемые в CSS, т.е. px, em и т.д. При чем, если указано только одно значение, то оно определяет расстояние между ячейками как по вертикали, так и по горизонтали, а если указывается два значения, то первое устанавливает расстояние по вертикали, а второе – по горизонтали (см. пример 2.12).

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Таблицы</title>
    	<style>
    		.table_1{
    		caption-side: top;
    		border-collapse: separate;
    		empty-cells: hide;
    		border-spacing: 15px;
    		}
    	</style>
    </head>
    <body>
    	<table class="table_1" border="1">
    		<caption>Таблица №1</caption>
    		<tr>
    			<td></td><td>Ячейка 1.2</td>
    		</tr>
    		<tr>
    		<!-- Неразрывный пробел считается символом -->
    			<td>Ячейка 2.1</td><td>&nbsp;</td>
    		</tr>
    	</table>
    </body>
    </html>

Пример 2.12. Форматирование внешнего вида таблицы (пример №2)

Также имеется возможность регулировать отображение границ и фона ячеек, у которых отсутствует содержимое, т.е. пустых ячеек, при помощи наследуемого свойства empty-cells. Данное свойство может принимать следующие значения:

- hide – фон и границы пустых ячеек не отображаются;
- show – фон и границы пустых ячеек отображаются; значение используется браузером по умолчанию.

Опять же, это возможно только, если значение свойства border-collapse установлено, как separate. Отметим, что ячейка считается браузером пустой, если у нее отсутствуют любые символы, за исключением пробельных, либо значение свойства visibility установлено, как hidden (это свойство мы рассмотрим далее).

Имеется в CSS и возможность управления процессом формирования браузером макета таблицы, точнее ширины ячеек. Для этого используется ненаследуемое свойство table-layout (см. пример 2.13). Свойство может принимать следующие значения:

- auto – браузер будет загружать всю таблицу, затем анализировать ее содержимое для определения размеров ячеек и только потом отображать ее на странице; значение используется браузером по умолчанию;
- fixed – данное значение правильно срабатывает только, если задана ширина таблицы, позволяя быстрее сформировать ее макет; действует оно следующим образом: если ширина колонки или ячейки не задана, то браузер будет вычислять ширину на основе первой строки таблицы, при чем вычисленная ширина будет уже фиксированной, и если содержимое ячейки не будет помещаться в указанную ширину, то в зависимости от браузера оно будет либо обрезано, либо будет отображаться поверх таблицы (налезать на соседние ячейки или выходить за пределы таблицы); если браузер по каким-то причинам не сможет получить информацию о размерах колонок первой строки таблицы, он просто разделит таблицу на колонки равной ширины.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Таблицы</title>
    	<style>
    		.table_1{
    		caption-side: top;
    		border-collapse: collapse;
    		table-layout: fixed;
    		width: 100px;
    		}
    	</style>
    </head>
    <body>
    	<table class="table_1" border="1">
    		<caption>Таблица №2</caption>
    		<tr>
    			<td>Начальная ячейка</td><td>Ячейка 1.2</td>
    		</tr>
    		<tr>
    			<td>Ячейка 2.1aaaaaa</td><td>Ячейка 2.2bbbbb</td>
    		</tr>
    	</table>
    </body>
    </html>

Пример 2.13. Форматирование внешнего вида таблицы (пример №3)

В конце хотелось бы опять напомнить, что все перечисленные свойства могут принимать значение inherit, которое указывает браузеру, что для элемента наследуется значение аналогичного свойства родительского элемента.

Контрольные вопросы и задания

1. Какие свойства используются для определения интервала между словами и отдельными символами? Допустимы ли значения в процентах?
2. Опишите свойство, при помощи которого задается высота строки.
3. Относительно чего рассчитывается значение, заданное в процентах, в свойстве text-indent?
4. Перечислите значения свойства text-align. Имеет ли смысл применять его к строчным элементам?
5. Перечислите значения свойства white-space. Как поступает браузер по умолчанию?
6. С какими еще свойствами для форматирования текста вы познакомились в данном параграфе?
7. Что такое шрифт? Перечислите основные семейства шрифтов, используемых в CSS.
8. Каков синтаксис перечисления имен шрифтов в свойстве font-family? Как должны записываться имена шрифтов состоящих из нескольких слов?
9. Какие свойства позволяют задать размер, насыщенность и стиль шрифта? Перечислите их значения.
10. Как задается стандартный вид и расположение маркеров списка относительно содержимого пунктов списка?
11. Опишите, как при помощи свойства list-style-image можно использовать в качестве маркеров списка изображения.
12. Как задать расположение заголовка таблицы?
13. Имеется ли в CSS возможность слияния соответствующих границ смежных ячеек?
14. Если границы смежных ячеек раздельны, можно ли задать расстояние между ними по своему усмотрению?

Словарь новых английских слов

word [ˈwɜːd] – слово.
letter [ˈlɛtə] – буква, литера.
spacing [ˈspeɪsɪŋ] – интервал, расстояние.
inherit [ɪnˈhɛrɪt] – наследовать.
indent [ɪnˈdɛnt] – отступ, абзац.
justify [ˈdʒʌstɪfʌɪ] – выровнять строку.
center [ˈsentər] – центр.
direction [dɪˈrɛkʃ(ə)n] – направление.
embed [ɪmˈbɛd] – вставлять, внедрять.
override [ˌəʊvəˈraɪd] – перебивать, не принимать во внимание.
space [speɪs] – пробел, интервал, место.
wrap [ræp] – перенос на строку, обертывать.
line [laɪn] – линия, строка.
capitalize [ˈkapɪt(ə)lʌɪz] – писать прописными буквами.
uppercase [ˈʌpəkeɪs] – верхний регистр.
lowercase [ˈləʊəkeɪs] – нижний регистр.
overline [ˈəʊvəlaɪn] – надчеркивание.
underline [ˌʌndəˈlaɪn] – линия подчеркивающая слово.
through [θruː] – прохождение через.
font [fɒnt] – комплект шрифта.
family [ˈfamɪli] – семья, семейство.
serif [ˈsɛrɪf] – засечка, шрифт с засечками.
sans [sænz] – без (предлог).
cursive [ˈkəːsɪv] – курсив, рукописный текст.
fantasy [ˈfantəsi] – воображение, фантазия.

monospace [ˈmɒnəʊspeɪs] – моноширинный шрифт.
size [saɪz] – размер, величина, объем.
small [smɔːl] – маленький, небольшой.
medium [ˈmiːdɪəm] – средний, умеренный.
large [lɑːdʒ] – большой, крупный.
bold [bəʊld] – жирный (шрифт).
light [lʌɪt] – светлый.
weight [weɪt] – вес.
italic [ɪˈtalɪk] – курсивный.
oblique [əˈbliːk] – косой, наклонный.
variant [ˈvɛːrɪənt] – вариант, модификация.
caption [ˈkapʃ(ə)n] – заголовок.
icon [ˈaɪkɒn] – иконка.
message [ˈmɛsɪdʒ] – сообщение.
box [bɒks] – коробка, ящик.
circle [ˈsəːk(ə)l] – круг, кольцо.
square [skwɛː] – квадрат, квадратный.
decimal [ˈdɛsɪm(ə)l] – десятичный.
separate [ˈseprət] – раздельный, разделять.
collapse [kəˈlaps] – сплющивание.
border [ˈbɔːdə] – граница.
hide [haɪd] – прятать.
show [ʃəʊ] – показывать.
fixed [fɪkst] – закрепленный, фиксированный.

belarusweb.net © Петр Романовский, Минск, 2016.