Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная Свойства CSS CSS по шагам О CSS. Стили CSS Синтаксис CSS. Селектор

О технологии CSS. Стили CSS

Введение в CSS. Стили
Способы применения стилей: Внутренние стили Глобальный стили Связанные/внешние стили


Вы приступили к изучению каскадных таблиц стилей CSS. Значит Вы уже знакомы с языком разметки гипертекста HTML, так как приступать к 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>, который размещается в голове документа (тег <head>) и может быть использован несколько раз.

Этот способ назван глобальным не случайно. Дело в том, что оформление, заданное в голове документа для конкретного тега HTML, будет единым для всех аналогичных тегов (и их содержимого), встречающихся в текущем документе, если для них не задано иное оформление при помощи параметра style (см. I способ).

Пример

Фрагмент кода:

<!DOCTYPE ...>
<html>
<head>
<meta http-...>
<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 нужно связать. Связь осуществляется с помощью тега <link>, который располагается в голове документа index.html (между тегами <head> и </head>), и  в котором необходимо прописать следующее:

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

Эта строка указывает на то, что правила оформления для файла index.html берутся из файла со стилями style.css.

С помощью атрибута href тега <link> делается ссылка на файл со стилями (указывается абсолютный или относительный путь к файлу (подробнее здесь...)) . Таким образом к любому html-документу можно применить стили из файла, находящегося даже на другом сайте.

Пример

Фрагмент кода:

<!DOCTYPE ...>
<html>
<head>
<meta http-...>
<title> Внешние стили </title>

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

</head>
<body>

<p>
Для абзацев и заголовков второго уровня </p>
<h2>
Задано стилевое оформление. </h2>
<p>
Стили описаны в файле style.css, </p>
<h2>
который связан с данным файлом с помощью тега &lt;link&gt;. </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-код одного файла. Что очень удобно!

Еще несколько свойств... О CSS. Стили CSS Синтаксис CSS. Селектор
CSS по шагам
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru