IZONE - http://www.izcity.com/ - бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

Основы CSS. Вставка описания

Описание стилей вставляется тремя способами. Отметим сразу, что приоритетным является то описание, что ближе к обьекту.

первый способ.
Описание стиля вставляется непосредственно в обьект.Например для текста:

<FONT style="font-family: Sans Serif,tahoma,
Verdana, Arial;  SIZE: 14px;
 FONT-WEIGHT: bold;
 color: #00A400; ">Пример стиля</FONT>

Пример стиля

Для формы:

<INPUT TYPE=TEXT
NAME=ooo
style="font-family: Sans Serif,
tahoma,Verdana, Arial;
SIZE: 14px; FONT-WEIGHT: bold;
color: #00F0FF;
background-color: #00007B;"
VALUE= пример ALIGN= пример
size=20 MAXLENGTH=20>

Примерно так-же описываются и другие обьекты: таблицы, ячейки, кнопки, рисунки, параграфы, DIV-ы, почти все. Разница только в параметрах, указываемых в описании.

Пишем прямо в ТЭГ:

style="font-family: Sans Serif,
tahoma,Verdana, Arial;  SIZE: 14px;
FONT-WEIGHT: bold; 
color: #00F0FF; background-color: #00007B;

Или по русски:
пишем style=" описание стиля 1; описание стиля 2; "
Новички! Не пугайтесь. Какому обьекту что можно прописать смотрите в следующих статьях.

 

второй способ.
Этот способ наиболее часто встречается в оформлении страниц так как дает возможность указать стилевые спецификации для всех обьектов страницы.
Вставляем между HEAD и /HEAD:

<style type=text/css>

</style>

В "описание стилей" вставляем все описания, которые нам нужны на данной странице. Обратите внимание на синтаксис - значки комментариев ставятся для броузеров не поддерживающих CSS.

 

третий способ.

Этот способ наиболее соответствует всей концепции CSS. Именно он позволяет указать стили для многих страниц сразу.
Описание стилей размещается в отдельном файле.
В HEAD вставляем:

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

Это ссылка на файл со стилями, указывающая браузеру на использование стилей. При встрече такой ссылки браузер обращается к вашему файлу со стилями, размещенному по адресу:"styl.css". Файл можно назвать как угодно, главное, чтобы он был в формате "css" и имена в ссылке и файла совпадали.
Например:

<link rel="stylesheet" type="text/css"
href="petrovich.css">
для файла "petrovich.css"

Файл CSS изготовить очень просто. В файле пишем то-же самое, что было между "style type=text/css" и "/style" во втором способе. Можно использовать простой стандартный "БЛОКНОТ", установленный на всех WIN. Открываем блокнот и пишем, например:

<!- -
body{background-color:#000000;
font-family: MS Sans Serif, tahoma, Verdana, Arial;
FONT-SIZE: 10px; color:#00EFFF}
A { color :#00E1FF;
FONT-FAMILY:  Verdana, Arial;
text-decoration:underline; FONT-SIZE: 8pt;}
A:Hover { color :#FF0000;
text-decoration: underline;}
- ->

Вот прямо так и пишем. Больше ничего. Не вдавайтесь в подробности написанного, поймите саму схему! Написали что хотели. Теперь находим у "БЛОКНОТА" кнопку "ФАЙЛ" и выбираем "СОХРАНИТЬ КАК,,,". Выбираем "ВСЕ ФАЙЛЫ" и пишем в строке для названия файлов:natali.css natali - это имя Вашего файла. Обязательно ставим точку и пишемcss маленькими буквами. Теперь осталось только нажать на кнопку "СОХРАНИТЬ". (Не забудте перед нажатием найти ту папку, в которой будет этот файл.) Вот и все!

Файл в HEAD будет выглядеть так: <link rel="stylesheet" type="text/css" href="natali.css">
Файл CSS, как Вы понимаете сами, может размещаться и в другой папке. Тогда в "link" указываем тот адрес, по которому он находится.

 

Обратите внимание!

Если вы задали описание одной характеристики стиля одного обьекта двумя или тремя способами(например, в самом обьекте и в отдельном CSS-файле), то выполняться будет то описание, которое ближе к обьекту(в данном случае - стиль в самом обьекте)!

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

Дополнение
В CSS2 принят несколько иной метод включения описаний стилей из внешнего файла:

@import "subs.css";

Броузеры, понимающие CSS2 отлично работают и с CSS1, пока, во всяком случае, так что можно пользоваться и более традиционными методами. Однако, подобный способ можно применить для вставки тех описаний стилей, которые будут понятны только при поддержке CSS2.

Источник: A-design studio http://mtk.on.ufanet.ru

 


Copyright © "Internet Zone"info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.