Технология CSS

CSS - технология оформления веб-страниц, элемент концепции DHTML. Таблицы (точнее - списки) CSS служат для оформления преимущественно HTML- и XHTML-документов, но иногда используются и для других документов, структурированных с помощью XML (например, в браузере «Mozilla» для оформления элементов графического интерфейса, XUL).

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

CSS при отображении страницы может быть взята из различных источников: Авторские стили (информация стилей, предоставляемая автором страницы) в виде: Внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе. Встроенных стилей - блоков CSS внутри самого HTML документа. Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style. Пользовательские стили Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам. Стиль браузера Стандартный стиль, используемый браузером по умолчанию для представления элементов. Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно. Это называется "каскадом", в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.

Метод 1: В строке/In-line (атрибут style)

Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:

<html>

<head>

<title>Пример</title>

</head>

<body style="background-color: #00FF00;">

<p /> Страница документа зеленого цвета

</html>

Метод 2: Внутренний (тэг style)

Второй способ вставки CSS-кодов - HTML-тэг <style>. Например:

<html>
  <head>
    <title>Пример</title>
    <style type="text/css">
      body {background-color: #00FF00;}
    </style>
  </head>
  <body>
    <p>Страница документа зеленого цвета</p>
  </body>
</html>

Метод 3: Внешний (ссылка на таблицу стилей)

Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. В дальнейшем рекомендую использовать именно этот метод во всех заданиях.

Внешняя таблица стилей это текстовый файл с расширением .css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.

Например, скажем, ваша таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:

 

Создать ссылку из HTML-документа (index.html) на таблицу стилей (style.css).

<link rel="stylesheet" type="text/css" href="style/style.css" />

Эту строку кода необходимо вставлять в разделе header HTML, то есть между тэгами <head> и </head>. Например, так:

<html>

<head>

<title>Мой документ</title>

<link rel="stylesheet" type="text/css" href="style/style.css" />

</head>

</html>

Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.

Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.

Это поможет вам сэкономить время и силы. Например, для изменения цвета фона web-сайта из 100 страниц, таблица стилей избавит вас от необходимости вручную изменять все сто HTML-документов. Используя CSS, эти изменения можно сделать за несколько секунд, просто изменив один код в центральной таблице стилей.

 

© gruppa-43im2009

Конструктор сайтов - uCoz