На протяжении этой серии уже несколько раз указывалось на таблицы стилей. Эти таблицы стилей позволяют строго разделять макет и дизайн. Благодаря CSS, HTML-элементы предназначены исключительно для логического или семантического описания веб-документа.
По опыту, в начале полезно знать, как на самом деле выглядит таблица стилей. Посмотрите на первый пример.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>В браузере документ выглядит следующим образом:
В body части HTML-файла определены два элемента:
• заголовок
• абзац текста
С помощью CSS эти два элемента форматируются. Для этого в области head определяется область таблицы стилей с помощью style. Внутри этой области происходит форматирование элементов.
Вот определение заголовка h1:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Показанное синтаксическое обозначение определяет два аспекта:
• Определяется семейство шрифта.
• Определяется размер шрифта.
На этом этапе мы сначала подойдем к используемому синтаксису в общем. Каждая инструкция CSS в основном состоит из двух частей - селектора и CSS-объявления. С помощью селектора определяется элемент, который должен быть отформатирован. Как будет выглядеть это форматирование, определяет CSS-объявление. Селектор находится слева, а CSS-объявление – справа в фигурных скобках.
Само CSS-объявление в свою очередь состоит из двух элементов, а именно свойства и значения. Свойство и значение разделяются двоеточием. После значения следует точка с запятой.
Selector {
Property: Value;
}Интеграция таблиц стилей
Существует множество различных способов включения таблиц стилей в веб-страницы. Во-первых, вы можете непосредственно назначить стиль HTML-тегу. Пример:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
В этом примере заголовок отображается синим цветом.
Вы также можете добавить несколько стилевых инструкций к HTML-тегу одновременно.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Затем просто запишите их друг за другом, разделяя точкой с запятой.
В общем, эти так называемые встроенные стили имеют смысл только в том случае, если отдельные области страницы должны быть отформатированы индивидуально. Однако обычно следует избегать такого типа прямого форматирования, так как это делает HTML-код менее читаемым.
Центральное определение в области head
Вы можете определить центральный стилевой лист в области заголовка HTML-файла. В нем определяются все стили, которые должны применяться к этому файлу.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Преимущество этого варианта: в отличие от встроенного варианта определенные форматы могут быть использованы несколько раз в документе. В предыдущем примере был определен класс CSS text (Подробная информация о селекторах, таких как класс, используемый здесь, следует в следующем уроке). Этот класс теперь можно использовать столько раз, сколько нужно в документе.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
Такое определение, в отличие от встроенного, также обладает преимуществом, что изменения можно вносить очень быстро.
Внешние таблицы стилей
Самый практичный способ определения CSS - это вынос стилей во внешний файл. Это позволяет любому количеству HTML-файлов обращаться к одному и тому же CSS-файлу. Таким образом обеспечивается простое однородное форматирование всех файлов, принадлежащих веб-проекту. Позднее изменения, которые должны повлиять на все страницы, можно легко реализовать.
<link rel="stylesheet" type="text/css" href="css/styles.css">
В верхней части HTML-файла определяется элемент link. Внутри link сначала указывается комбинация атрибут-значение rel="stylesheet". Затем следует type="text/css". Атрибуту href назначается соответствующий CSS-файл. Здесь, подобно вставке изображений, важно указать правильный путь. В данном примере предполагается, что файл CSS styles.css находится в директории css, которая, в свою очередь, находится на том же уровне, что и сам HTML-файл.
Ссылочный CSS-файл является обычным текстовым файлом с расширением css. Во внешнем CSS-файле определены соответствующие инструкции CSS.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
В качестве альтернативы показанному варианту с использованием link также можно импортировать таблицы стилей. Здесь также действует синтаксис CSS, где инструкции CSS находятся во внешнем файле. Для этого используется следующий синтаксис:
<style type="text/css">
@import url("css/styles.css");
</style>
Внутри скобок указывается путь к импортируемому файлу CSS. @import кстати представляет собой синтаксис CSS. Поэтому инструкцию @import также можно использовать в файлах CSS. Это позволяет вызывать другие таблицы стилей из одной таблицы стилей, что обеспечивает более хорошее упорядочение таблиц стилей.
link или @import. В принципе я предпочитаю link, так как этот вариант работает быстрее, а производительность страницы лучше.
Специфические для медиа таблицы стилей
Можно определять таблицы стилей для различных медиа, таких как принтеры или экраны. Для этого используется атрибут media. При этом таблицу стилей можно назначить нескольким медиа, разделённым запятыми.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
В данном случае были вызваны две таблицы стилей, одна для экрана, другая для случая, если страница будет напечатана. Файл CSS druck.css будет загружен при вызове функции печати браузера. В общей сложности доступны следующие значения атрибута media:
• all – Действует для всех выходных медиа.
• aural – CSS файл используется для систем озвучивания.
• braille – CSS файл предназначен для точечных принтеров с тактильной обратной связью, которые могут создавать так называемый "шрифт для слепых".
• embossed – Обращается к печатающим устройствам, создающим преобразованные печатные издания.
• handheld – Предназначено для портативных устройств.
• print – CSS файл применяется для печати на бумаге. Браузеры должны автоматически обращаться к этому файлу, когда вызывается функция печати.
• projection – Предназначено для проецируемых презентаций.
• screen – Предназначено для отображения на экране.
• tty – Действует для медиа, использующих фиксированную сетку символов. Это могут быть, например, телетайпы и терминалы.
• tv – Обращается к устройствам, похожим на телевизоры. Предполагается, что устройства имеют низкое разрешение и ограниченную прокрутку.
Помимо показанного HTML синтаксиса с помощью элемента link существуют также специальные варианты CSS. Используется @import или @media.
<style type="text/css">
@media screen, projection {
/* Форматы для экрана */
}
@media print {
/* Форматы для печати */
}
</style>
Внутри элемента style через @media определяется область для определения форматов, предназначенных для конкретного выходного медиа. При этом за @media должен следовать один из описанных ранее типов медиа, разделённый пробелом. Несколько типов медиа указываются через запятую.
