Уроки CSS

Для того, чтобы начать использовать CSS вам следует запомнить или записать набор свойств, которые можно применять к html тегам. Лучше всего иметь под рукой какой-нибудь справочник, например, "справочник по CSS" написанный Владом Мержевичем, я и сам как-то покупал у него на сайте эту книгу. Однако, вы можете не спешить за покупкой, есть и бесплатная версия справочника, которую вы можете скачать c нашего сайта. Размер файла 171kb.

Как начать использовать CSS

Внутренние Таблицы Стилей

Использование внутренних таблиц стилей мало чем отличается от использования обычных HTML тегов. Они задают стиль только одному элементу документа при помощи атрибута style в HTML теге. Например, вы захотели выделить слово или фразу в тексте, тогда достаточно просто окружить нужное тегом span с нужным стилем.

Выделение <span style="color:red;">части текста</span> красным цветом.

Применить внутренние таблицы стилей можно практически ко всем тегам. Для этого достаточно добавить к тегу параметр style="" с нужными свойствами внутри

Пример

<html>
<head>
<title>Пример</title>
</head>
<body>
<span style="color:red;">текст</span>
<p style="color:orange;font-weight:700;">текст</p>
<h1 style="color:green;font-size: 16px;">текст</h1>
<em style="color:brown;font-style: italic;">текст</em>
<i style="color:blue;font-family: georgia, arial, sans-serif; ">текст</i>
</body>
</html>

Глобальные Таблицы Стилей

Глобальные стили задают вид элементов всего документа.
Для этого используется тег style:

<style type="text/css"> ... </style>

Размещается тег style в заголовке документа, между тегами head

Пример

<html>
<head>
<title>Пример</title>
<style type="text/css">
h1{color:red; font-style:italic; font-size:32px}
</style>
</head>
<body>
<h1>Заголовок красным курсивом </h1>
</body>
</html>>

Связанные Таблицы Стилей

Связанные таблицы стилей используются для придания нескольким документам одного стиля и xранятся в отдельном файле.

В HTML файлах делается ссылка на этот файл при помощи тега <link>

Выглядит это так:

<link rel="stylesheet" type="text/css" href="путь к файлу css">

Размещать тег <link> надо в заголовке документа, между тегами head.

Пример

<html>
<head>
<title>пример </title>
<link rel="stylesheet" type="text/css" href="http://ваш-сайт.ru/style.css">
</head>
<body>
Контент
</body>
</html>

Материал собран по крупицам в сети Интернет

HTML-pedia
Уроки CSS

Навигация

Уроки CSS

Уроки CSS

Как начать использовать CSS

HTML-pedia Уроки CSS

Навигация

Уроки CSS

Уроки CSS

Как начать использовать CSS

HTML-pedia
Уроки CSS