лекцию - WordPress.com
реклама
Урок 7. Внедрение CSS
CSS (Cascading Style Sheets) - каскадные таблицы стилей.
Стиль - набор параметров, задающий внешнее представление объекта.
Например, пусть мы хотим, чтобы все заголовки первого уровня (теги <h1>)
на одной странице имели красный цвет, размер - 24 и были написаны
курсивом, а на другой странице были бы синего цвета, размера - 12. Наш
заголовок - это объект, а цвет, размер и начертание - это параметры. Просто
параметры нашего объекта для разных страниц разные, т.е. они отличаются
стилем.
Каждый элемент на странице может иметь свой стиль (параграфы, заголовки,
линии, текст...). Набор стилей всех элементов называют таблицей стилей.
Если для одного элемента задано несколько стилей (как в примере с
заголовками), то применяется каскадирование, которое определяет приоритет
того или иного стиля.
В чём разница между CSS и HTML?
HTML используется для структурирования содержимого страницы. CSS
используется для форматирования, этого структурированного содержимого.
Согласен, это звучит как-то заумно. Но, пожалуйста, читайте дальше. Вскоре
всё начнёт проясняться.
Давным-давно, когда Мадонна была девой, а парень по имени Tim Berners Lee
изобрёл World Wide Web, язык HTML использовался только для вывода
структурированного текста. Автор мог только размечать текст: "это заголовок" или "это - параграф", используя HTML-тэги, такие как <h1> и <p>.
По
мере
развития
Web
дизайнеры
начали
искать
возможности
форматирования онлайновых документов. Чтобы удовлетворить возросшим
требованиям потребителей, производители браузеров (тогда - Netscape и
Microsoft) изобрели новые HTML-тэги, такие, например, как <font>, которые
отличались от оригинальных HTML-тэгов тем, что они определяли внешний
вид, а не структуру.
Это также привело к тому, что оригинальные тэги структурирования, такие как
<table>, стали всё больше применяться для дизайна страниц вместо
структурирования текста. Многие новые тэги дизайна, такие как <blink>,
поддерживались только одним браузером. "Вам необходим браузер X для
просмотра этой страницы" - такой отказ стал обычным явлением на webсайтах.
CSS был создан для исправления этой ситуации путём предоставления webдизайнерам
возможностей
браузерами.
Одновременно
точного
дизайна,
произошло
поддерживаемых
разделение
всеми
представления
и
содержимого документа, что значительно упростило работу.
Появление CSS стало революцией в мире web-дизайна. Конкретные
преимущества CSS:
управление отображением множества документов с помощью одной
таблицы стилей;
более точный контроль над внешним видом страниц;
различные представления для разных носителей информации (экран,
печать, и т. д.);
сложная и проработанная техника дизайна.
Рассмотрим, как работает CSS.
Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны
свойствам HTML. Посмотрим на конкретном примере.
Базовый синтаксис CSS
Скажем, нам нужен красный цвет фона web-страницы:
В HTML это можно сделать так:
<body bgcolor=”#FF0000”>
С помощью CSS того же самого результата можно добиться так:
body {background-color:#FF0000;}
Эти коды более или менее идентичны в HTML и CSS. Этот пример также
демонстрирует фундаментальную модель CSS:
Но где размещать CSS-код? Именно этот вопрос мы сейчас и рассмотрим.
Есть три способа применить правила CSS к HTML-документу. Ниже мы
рассмотри эти три метода. Чаще всего используется третий способ - то есть
внешней/external таблице стилей.
Метод 1: Инлайн/In-line (атрибут style)
Можно применять CSS к HTML с помощью HTML-атрибута style. Красный
цвет фона можно установить так:
<html>
<head>
<title>Моя первая страничка!</title>
</head>
<body style="background-color: #FF0000;">
<p>Это красная страница</p>
</body>
</html>
Метод 2: Внутренний (тэг style)
Второй способ вставки CSS-кодов - HTML-тэг <style>. Например:
<html>
<head>
<title> Моя первая страничка! </title>
<style type="text/css">
body {background-color:#FF0000;}
</style>
</head>
<body>
<p>Эта страница так же будет красной</p>
</body>
</html>
Метод 3: Внешний (ссылка на таблицу стилей)
Рекомендуемый метод - создание ссылки на так называемую внешнюю
таблицу стилей. В данном учебнике мы будем использовать именно этот метод
во всех примерах.
Внешняя таблица стилей — это просто текстовый файл с расширением .css.
Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск,
как и другие файлы.
Например, скажем, ваша таблица стилей называется style.css и находится в
папке style. Это можно проиллюстрировать так:
Весь фокус состоит в том, чтобы создать ссылку из HTML-документа
(default.html) на таблицу стилей (style.css). Это можно сделать одной строчкой
HTML-кода:
<link rel="stylesheet" type="text/css" href="/style/style.css"/>
Обратите внимание, как указан путь к вашей таблице стилей атрибутом href.
Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами
<head> и </head>. Например, так:
<html>
<head>
<title>Моя первая страничка!</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" />
</head>
<body>
Эта ссылка указывает браузеру, что он должен использовать правила
отображения HTML-файла из CSS-файла.
Самое важное здесь то, что несколько HTML-документов могут ссылаться на
одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для
управления отображением множества HTML-документов.
Это поможет сэкономить нам уйму времени и сил. Если вы, например, хотите
изменить цвет фона web-сайта из 100 страниц, таблица стилей избавит вас от
необходимости вручную изменять все сто HTML-документов. Используя CSS,
эти изменения можно сделать за несколько секунд, просто изменив один код в
центральной таблице стилей.
Давайте посмотрим, как это сделать.
Попытайтесь сделать это сами
Откройте Блокнот (или другой ваш текстовый редактор) и создайте два файла
- HTML-файл и CSS-файл - такого содержания:
default.htm
<html>
<head>
<title>Моя первая страничка!</title>
<link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
<h1>Моя первая таблица стилей</h1>
</body>
</html>
style.css
body{
background-color:#FF0000;
}
Разместите эти файлы в одной папке. Не забудьте сохранить файлы с
правильными расширениями (".css" и ".html")
Откройте default.html в вашем браузере, и вы увидите, что страница имеет
красный фон. Поздравляем! Вы создали вашу первую таблицу стилей!
