Далее на странице...
Вы приступили к изучению каскадных таблиц стилей CSS. Значит Вы уже знакомы с языком разметки гипертекста , так как приступать к CSS без знания HTML не имеет смысла.
CSS (Cascading Style Sheets - каскадные таблицы стилей) - технология, использующаяся для оформления веб-страниц с помощью стилей.
Основная идея CSS состоит в том, чтобы разделить структуру и содержание веб страниц от их оформления:
- c помощью HTML создается страница - ее каркас, а также вносится ее содержимое.
- с помощью CSS создается дизайн - задается оформление для элементов страницы.
Стили - это набор правил форматирования, применяемых к элементам страницы для изменения их свойств и параметров представления на странице: в основном это касается их внешнего вида и занимаемого положения.
Стили представлены свойствами CSS. Каждое свойство по своему влияет на оформление того или иного элемента страницы. Некоторые свойства не применимы к некоторым элементам.
Элементы страницы - это теги HTML или их содержимое.
Существует три способа применения стилей к элементам страницы:
I способ - Внутренние стили
Стилевое оформление задается при помощи параметра style, который может быть добавлен к любому тегу HTML, влияя при этом на оформление только этого тега и его содержимого.
<p style="font-size:20px; color:#3366CC;"> При помощи параметр style задано стилевой оформление для текста данного абзаца, установлен его размер и цвет. </p>
При помощи параметр style задано стилевое оформление для текста данного абзаца: установлен его размер и цвет.
Этот способ оформления элементов страницы применяется редко. Ведь, согласитесь, что задавать одно и тоже оформление, скажем, для каждого абзаца страницы, во-первых, трудоемко, а, во-вторых, не практично, так как с увеличением объема исходного кода, будет расти и время загрузки страницы.
II способ - Глобальные стили
Стилевое оформление задается при помощи тега <style>, который размещается в голове документа (тег ) и может быть использован несколько раз.
Этот способ назван глобальным не случайно. Дело в том, что оформление, заданное в голове документа для конкретного тега HTML, будет единым для всех аналогичных тегов (и их содержимого), встречающихся в текущем документе, если для них не задано иное оформление при помощи параметра style (см. I способ).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Глобальные стили </title>
<style type="text/css">
p {font-size:16px; font-style:italic; color:#339999}
</style>
</head>
<body>
<p> В голове документа задано единое стилевое оформление </p>
<p> для всех абзацев текущей странички! </p>
<p style="font-size:24px; font-style:italic; color:red;"> А для этого абзаца оформление задано индивидуально. </p>
<p> Единое оформление. </p>
</body>
</html>
В голове документа задано единое стилевое оформление
для всех абзацев текущей странички!
А для этого абзаца оформление задано индивидуально.
Единое оформление.
Этот способ оформления страниц применяется в тех случаях, когда их не много, или когда возникает необходимость задать оригинальное оформление какой-либо одной страничке сайта из остального множества его однотипных станиц.
III способ - Связанные или внешние стили
Стили описаны в отдельном файле с расширением .css, который может быть связан как с одним, так и с несколькими html-файлами, влияя при этом на их оформление.
Если Вы еще не знакомы с визуальным HTML-редактором Dreamweaver, то для создания css-файла можно воспользоваться простым текстовым редактором, который является частью ОС Windows - Блокнотом.
Например, мы имеем html-документ - файл index.html, к оформлению которого необходимо применить стили, описанные в файле style.css.
Для этого файлы index.html и style.css нужно связать. Связь осуществляется с помощью тега , который располагается в голове документа index.html (между тегами и ), и в котором необходимо прописать следующее:
<link rel="stylesheet" type="text/css" href="style.css">.
Эта строка указывает на то, что правила оформления для файла index.html берутся из файла со стилями style.css.
С помощью атрибута href тега делается ссылка на файл со стилями (указывается абсолютный или относительный путь к файлу (подробнее здесь...) . Таким образом к любому html-документу можно применить стили из файла, находящегося даже на другом сайте.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Внешние стили </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p> Для абзацев и заголовков второго уровня </p>
<h2> Задано стилевое оформление. </h2>
<p> Стили описаны в файле style.css, </p>
<h2> который связан с данным файлом с помощью тега <link>. </h2>
</body>
</html>
p {border:#FF0000 solid 2px; color:#33CC99; padding:5px}
h2 {border:#33CC99 solid 2px; background-color:#FF0066; color:#FFFFFF; padding:5px}
Для абзацев и заголовков второго уровня
Задано стилевое оформление.
Стили описаны в файле style.css,
который связан с данным файлом с помощью тега <link>.
Применение этого способа позволяет связать файл со стилями style.css с любым количеством html-файлов и работать над их дизайном, редактируя лишь css-код одного файла. Что очень удобно!
