Рецепты CSS
CSS - Таблицы Каскадных Стилей
Cascading Style Sheets (Таблицы Каскадных Стилей) - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов.
Внутренние Таблицы Стилей
Использование Внутренних стилей мало чем отличается от использования обычных HTML тегов. Они задают стиль только одному элементу документа при помощи атрибута style в HTML теге.
Пример
<span style="color:red; font-size:12pt; font-family:Arial">
текст
</span>
Глобальные Таблицы Стилей
Глобальные стили задают вид элементов всего документа.
Для этого используется
<style type="text/css">
Он размещается в заголовке документа.
<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ранятся в отдельном файле.
Открываем блокнот вписываем нужный стиль css и сохраняем, как style.css
В HTML файлах делается ссылка на этот файл при помощи тега <link>
Выглядит
это так:
<link rel="stylesheet" type="text/css" href="путь к файлу css">
Пример
<html>
<head>
<title>пример </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Контент
</body>
</html>
Все шаблоны, заготовки шаблонов и "рецепты" - это полуфабрикаты, над которыми надо еще поработать, подогнать под стиль который Вам больше нравится. Меняйте цвета, картинки, стили рамок и текста, изменяйте размеры, и вообще, не бойтесь экспериментировать.
Вертикальное меню 1
Вертикальное меню 2
Вертикальное меню 3
Вертикальное меню 4
Вертикальное меню 5
Вертикальное выпадающее меню
Меняющаяся кнопка меню (rollover) на CSS
Горизонтальное меню 1
Горизонтальное меню 2
Горизонтальное меню 3
Заготовки фотоальбомов и галерей
Фотоальбом на css 1
Фотоальбом на css 2
Фотоальбом на css 3
Фотоальбом на css 4
Автор стилей для фотоальбомов: cssplay.co.uk
Выделение цитаты в тексте
Рамка для фотографий и описание
Прокрутка
Форма поиска - Яндекс и Народ.Ру
Форма обратной связи
Блок с закругленными краями
Подсказка с всплывающей картинкой
CSS
------------
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;
}
------------
HTML
------------
Сегодня на ужин мы приготовим <a class="thumbnail" href="URL">
плов<span><img src="images/palov.jpg" width="220" height="165" />
Настоящий узбекский плов</span></a>
Просмотр
Всплывающее описание картинки
HTML
-------------
<a class="thumbnail" href="URL">
<img src="images/mypaint.jpg" width="307" height="226" alt="мой рисунок">
<br /><span>Эту картинку я делал с помощью стандартной программы «Paint» и вот теперь когда картинка готова, я выложил ее на своем сайте </span></a>
CSS
--------------
Стиль CSS тот же, что и у всплывающей подсказки с картинкой
Просмотр
Все последующие рецепты CSS выкладываются на сайт HTML-pedia.
