Таблицы стилей CSS в языке HTML

⇐ ПредыдущаяСтр 2 из 16Следующая ⇒

В языке HTML часто применяются таблицы стилей CSS (Cascading Style Sheet), задающие общие правила оформления документов HTML: цвет текста и фона, размеры шрифта для разных частей документа, размер, цвет и расположение заголовков. Выполнение этих правил придает документам единый стиль оформления.

Правила оформления CSS устанавливают стиль для каждого тега в отдельности. Стиль записывается весьма непривычно. Он начинается с селектора (selector), чаще всего это просто имя тега (р) или несколько имен через запятую. После селектора через пробел в фигурных скобках записываются объяв ления (declarations) (text-indent: 2em;). Каждое объявление состоит из свойства (property) (text-indent) и его значения (value) (2em), записанного через двоеточие. Одно объявление отделяется от другого точкой с запятой.

Например, большинство браузеров разделяет абзацы пустой строкой, не оставляя красной строки. Если вы хотите оформить абзацы в классическом стиле с отступом в первой строке (свойство text-indent), не увеличивая расстояние (margin) перед (margin-top) и после (margin-bottom) абзаца, то можете записать стиль тега <р> следующим образом:

р {text-indent: 2em; margin-top: 0; margin-bottom: 0;}

Если нужно выделить какой-то текст красным полужирным шрифтом, то достаточно заключить его в тег <strong>, установив для этого тега следующий стиль:

strong {color: red; font-weight: bold;}

Если нужно один и тот же тег оформить разными стилями, чтобы применять их в разных ситуациях, то после имени тега через точку нужно указать класс стиля. Класс стиля – это просто какое-то имя. Например, если задан общий стиль заголовка <h2> синим:

h2 {margin-top: 8em; margin-bottom: 3em; color: blue}

а нужно, чтобы другой заголовок был черным, то нужно указать еще для этого заголовка класс (например, subsection):

h2.subsection {margin-top: 8em; margin-bottom: 3em; color: black }

Теперь, чтобы заголовок был черным, надо писать тег <h2> с указанием класса:

<h2 class="subsection">3aголовок подраздела</ h2>

Если требуется задать класс стиля общий для любых тэгов, то он записывается:

.subsection {margin-top: 8em; margin-bottom: 3em; color: black }

Вызывается аналогично:

Другой способ задания стиля тэгу – задание ID (идентификатор - уникальное имя стиля):

#help {…}

Вызывается:

Некоторые свойства тэгов (текста, полей, отступов, границ и шрифтов) в HTML:

Свойства текста:

text-align (или left, right, center) – выравнивание текста по горизонтали (по левому краю, по правому краю и по центру соответственно);

text-indent – задает отступ первой строки в текстовом блоке в пикселях;

text-decoration – добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом или мигания (blink – мигающий текст, line-through – перечеркнутый текст, overline – создает линию над текстом, underline – подчеркивание, none – отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию, inherit – наследует значение родителя);

text-transform – управляет стилем прописных букв текста;

line-height – данное свойство определяет высоту строки в пикселях. Может принимать другие значения (normal – расстояние между строк вычисляется автоматически, Inherit – наследует значение родителя);

letter-spacing – отвечает за расстояние между буквами в пикселях;

color – задает цвет текста элемента в 16-ричной системе счисления;

display – свойство управляет основным способом отображения текста. Имеет значения: block – текст элемента отображается в отдельном "блоке" с предшествующим текстом выше и последующим текстом ниже; inline (по умолчанию) – браузер не вставляет пустую строку перед или после текста элемента. Он будет вставлять пустые строки внутри текста элемента только с целью уместить текст в окне. Текст элемента, таким образом, может быть размещен в той же строке, что и предыдущий или последующий текст; none – браузер не отображает элемент. Вы можете использовать эту установку для элементов, несущих информацию, которую вы не хотели бы помещать на экране.

Свойства полей и отступов:

Если слово «CSS» поместить в рамку:

CSS

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

padding – задает все свойства полей в пикселях и в одной строке (padding-top – верхнее поле, padding-right – правое поле, padding-left – левое поле, padding-bottom — нижнее поле, padding – одинаковое значение полей для всех сторон);

margin – задаются одинаковые отступы в CSS для всех сторон одновременно, а также margin-top – верхний отступ, margin-right – правый отступ, margin-bottom – нижний отступ, margin-left – левый отступ.

Свойства границ (рамки):

border – задаются свойства рамки в CSS в пикселях (border-width – ширина (толщина) рамки для всех четырех сторон. Чтобы задать ширину отдельно для каждой стороны применяются свойства border-top-width, border-bottom-width, border-left-width и border-right-width для верхней, нижней, левой и правой границы соответственно;

border-style – устанавливает стиль границы вокруг элемента для каждой стороны (border-top-style, border-bottom-style, border-left-style и border-right-style для каждой стороны соответственно);

border-color – задает цвет рамки.

Свойства шрифтов:

font-size – отвечает за размер шрифта в пикселях. Задавать можно также ключевыми словами (smaller или larger) или в процентном отношении;

font-weight – толщина символов в тексте (bold – полужирное начертание, bolder – жирное начертание, lighter – светлое начертание, normal – нормальное начертание);

font-style – определяет начертание шрифта (normal – обычное начертание текста, italic – курсивное начертание, oblique – наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт, имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо, inherit – наследует значение родителя);

font-family – задает семейство шрифта (serif – шрифты с засечками (антиквенные), типа Times; sans-serif – рубленные шрифты (шрифты без засечек или гротески), типичный представитель – Arial; cursive – курсивные шрифты; fantasy – декоративные шрифты; monospace – моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier); inherit – наследует значение родителя);

font-variant – определяет, как нужно представлять строчные буквы – оставить их без модификаций или делать их все прописными уменьшенного размера. Такой способ изменения символов называется капителью. Свойство может принимать следующие значения: normal – оставляет регистр символов исходным, заданным по умолчанию, small-caps – модифицирует все строчные символы как заглавные уменьшенного размера, inherit – наследует значение родителя;

vertical-align – для создания верхних или нижних индексов (надстрочных и подстрочных символов).

Свойства фона:

background-color – задаёт цвет фона;

background-image – устанавливает для элемента фоновый рисунок;

background-repeat – позволяет управлять повторами изображения;

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

Спецификация CSS поддерживает ряд и других свойств.

Пример 1 (файл text_01.html):

<!DOCTYPE html>

<html>

<head>

<title> блоки </title>

<style>

div {

border: 1px solid black; /* Параметры рамки */

padding: 5px; /* Поля вокруг текста */

margin-bottom: 5px; /* Отступ снизу */

}

#left { text-align: left; }

#right { text-align: right; }

#center { text-align: center; }

.content {

width: 75%; /* Ширина слоя */

background: #fc0; /* Цвет фона */

}

</style>

</head>

<body>

<div id="left"><div class="content">Выравнивание по левому краю</div></div>

<div id="center"><div class="content">Выравнивание по центру</div></div>

<div id="right"><div class="content">Выравнивание по правому краю</div></div>

</body>

</html>

Результат данного примера показан в Internet Explorer на рис. 1.1.

Рис. 1.1. Выравнивание текста в браузере Internet Explorer 7

Пример 2 (файл text_02.html):

<!DOCTYPE html>

<html>

<head>

<title> цитата </title>

<style>

h1 {font-family: Geneva, Arial, Helvetica, sans-serif;}

p {font-family: Georgia, 'Times New Roman', Times, serif;}

</style>

</head>

<body>

<h1> Конфуций </h1>

<p> Побороть дурные привычки легче сегодня, чем завтра..</p>

</body>

</html>

Результат данного примера показан на рис. 1.2

Рис. 1.2. Применение свойства font-family

Существуют несколько способов задания стилей тегов HTML документа.

Первый способ задания стилей тегов HTML документа.

Список всех стилей (stylesheet) можно записать в отдельном файле, например, contract . css:

body {

margin-left: 10%;

margin-right: 10%;

font-family: sans-serif

}

p {text-indent: 2em; margin-top: 0; margin-bottom: 0}

p.remark {

padding-left: 0.2em;

border-left: solid;

border-right: none;

border-top: none;

border-bottom: none;

border-left-width: thin;

border-color: red

}

strong {color: red; font-weight: bold}

h2 {margin-top:8em; margin-bottom:3em;

color:blue}

h2.subsection {margin-top:8em; margin-bottom:3em;

color: black}

Затем этот файл следует подключать к каждому HTML документу, который вы хотите оформить в данном стиле, с помощью тега <link>, (Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега <a>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку), как показано в файле text _03. html:

<html>

<head>

charset=windows-1251" http-equiv="Content-Type">

<titlе> Документ HTML со стилями </titlе>

href="contract.css">

</head>

<body>

<h2> 0бычный заголовок </h2>

<р>

Это абзац обычного для данного документа стиля с

<strong> выделенным текстом </strong> .

</p>

<h2 class="subsection"> 3aголовок подраздела </h2>

<р class="remark">Это замечание, оформленное как особый абзац</р>

</body>

</html>

Второй способ задания стилей тегов HTML документа — запись стиля прямо в документе HTML, в теге <style>…</style> HTML документа, как показано в файле text _04. html:

<html>

<head>

http-equiv="Content-Type">

body {

margin-left: 10%;

margin-right: 10%;

font-family: sans-serif

}

p {text-indent: 2em; margin-top: 0; margin-bottom: 0;}

p.remark {

padding-left: 0.2em;

border-left: solid;

border-right: none;

border-top: none;

border-bottom: none;

border-left-width: thin;

border-color: red; }

strong { color: red; font-weight: bold; }

h2 {margin-top: 8em; margin-bottom: 3em; color: blue}

h2.subsection {margin-top: 8em; margin-bottom: 3em;

color: black}

</style>

</head>

<body>

<h2> 0бычный заголовок </h2>

<р> Это абзац обычного для данного документа стиля с

<strong> выделенным текстом </strong> .

</p>

<h2 class="subsection"> 3aголовок подраздела </h2>

<р class="remark">Это замечание, оформленное как особый абзац.</р>

</body>

</html>

Третий способ задания стиля тегу HTML документа - указать его свойства прямо в теге:

Все эти способы можно комбинировать, при этом стиль, указанный непосредственно в теге, оказывается предпочтительнее стиля, указанного в теге <style>, а тот предпочтительнее стиля, записанного в файле стилей.

⇐ Предыдущая 123 4 5 6 7 8 9 10 Следующая ⇒

Последнее изменение этой страницы: 2019-05-08; Просмотров: 270; Нарушение авторского права страницы