Файл: work/html_teach/33.php
Строк: 43
<?
require '../../config.php';
$title = 'Учебник HTML';
include '../../style/head.php';
aut();
who_add(0, 'servise');
?><html><head>
<title> HTML учебник / Основы CSS / Практическое освоение CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="HTML учебник Основы CSS Практическое освоение CSS">
<meta name="description" content="HTML учебник: Основы CSS Практическое освоение CSS">
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" text="#333333" link="#333333" vlink="#333333" bgcolor="#f0f7ef">
<table width="80%" align="center"><tr><td>
<!--заголовок--><table width="100%" cellpadding=1 cellspacing=0 border=0 bgcolor=#647062><tr><td><table width="100%" cellpadding=3 cellspacing=0 border=0 bgcolor=#ffffff><tr><td class=r align=middle><A href="index.php">Содержание</a> / Основы CSS / Практическое освоение CSS </td></tr></table></td></tr></table><!--//-->
<H2>Практическое освоение CSS</H2>
<P>Как вам уже известно, информация о стилях может
располагаться либо в отдельном файле, либо непосредственно в коде
Web-странички. Расположение описания стилей в отдельном файле имеет
смысл в случае, если вы планируете применять эти стили к большему,
чем одна, количеству страниц. Для этого нужно создать обычный
текстовый файл, описать с помощью языка CSS необходимые стили,
разместить этот файл на Web-сервере, а в коде Web-страниц, которые
будут использовать стили из этого файла, нужно будет сделать ссылку
на него. Делается это с помощью тега <LINK>, располагающегося
внутри тега <BODY> ваших страниц:</P>
<DIV align=center>
<CENTER>
<TABLE border=0>
<TBODY>
<TR>
<TD><PRE><LINK REL=STYLESHEET TYPE="text/css" HREF="URL"></PRE></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>Первые два параметра этого тега являются
зарезервированными именами, требующимися для того, чтобы сообщить
броузеру, что на этой страничке будет использоваться CSS. Третий
параметр – HREF= «URL» – указывает на файл, который содержит
описания стилей. Этот параметр должен содержать либо относительный
путь к файлу – в случае, если он находится на том же сервере, что и
документ, из которого к нему обращаются – или полный URL
(«http://...») в случае, если файл стилей находится на другом
сервере.</P>
<P>Второй вариант, при котором описание стилей
располагается в коде Web­странички, внутри тега <BODY>, в
теге <STYLE type="text/css">... </STYLE>. В этом случае
вы можете использовать эти стили для элементов, располагающихся в
пределах странички. Параметр type="text/css" является обязательным и
служит для указания броузеру использовать CSS.</P>
<P>И третий вариант, когда описание стиля
располагается непосредственно внутри тега элемента, который вы
описываете. Это делается с помощью параметра STYLE, используемого
при применении CSS с большинством стандартных тегов HTML. Этот метод
нежелателен, и понятно почему: он приводит к потере одного из
основных преимуществ CSS – возможности отделения информации от
описания оформления информации. Впрочем, если необходимо описать
лишь один элемент, этот вариант расположения описания стилей также
вполне применим.</P>
<P>Давайте рассмотрим механизм, с помощью которого
стили присваиваются элементам Web­страниц. Самый простой случай
присвоения какому-либо элементу определенного стиля выглядит
так:</P>
<DIV align=center>
<CENTER>
<TABLE border=0>
<TBODY>
<TR>
<TD><PRE>НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;},</PRE></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTML­тега (H1, P,
TD, A и т. д.), а параметры в фигурных скобках – список свойств
элемента и присвоенных им значений. Более подробно команды языка CSS
мы рассмотрим чуть позже.</P>
<P>Пример:</P>
<DIV align=center>
<CENTER>
<TABLE border=0>
<TBODY>
<TR>
<TD><PRE>H1 {font-size: 30pt; color: blue;}</PRE></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>В этом примере всем заголовкам на странице,
оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий
цвет.</P>
<P>Также элементы страниц, созданные с использованием
CSS, используют механизм наследования: т. е. если вы располагаете
изображение внутри тега <P>...</P>, оформленного с
помощью CSS, с отступами, так, чтобы параграф занимал только
определенную часть ширины страницы, изображение также унаследует
значения отступов, указанные для этого параграфа. </P>
<P>CSS реализует возможность присваивать стили не
всем одинаковым элементам страницы, а избирательно – для этого
используется параметр CLASS = "имя класса" или идентификатор ID=«имя
элемента», присваивающиеся любому элементу страницы. Рассмотрим эти
возможности подробнее.</P>
<P>Параметр CLASS применяется в случае, если
необходимо создать одинаковый стиль для нескольких, но не всех
элементов страницы (одинаковых или разных).</P>
<P>Пример:</P>
<DIV align=center>
<CENTER>
<TABLE border=0>
<TBODY>
<TR>
<TD><PRE> .b-с {font-weight: bold; text-align: center}
– описание стиля для класса b-с</PRE></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>Все элементы класса b-с будут отображаться жирным
шрифтом с выравниванием по центру страницы (или ячейки таблицы).</P>
<DIV align=center>
<CENTER>
<TABLE border=0>
<TBODY>
<TR>
<TD><PRE> <P CLASS="b-с">Текст параграфа</P>
– параграфу присвоен стиль класса b-с. <TD CLASS="b-c">текст</TD>
– ячейке таблицы присвоен стиль класса b-c.</PRE></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>Содержащийся в ячейке текст будет отображаться
согласно описанию класса.</P>
<P>Таким образом, вы можете присвоить описанный стиль
любым текстовым элементам страниц. Обратите внимание, что при
написании названия классов необходимо соблюдать регистр символов,
согласно тому, как вы назвали класс в описании стиля!</P>
<P>Присвоение стилей с помощью идентификаторов
применяется в случае, если данному идентификатору соответствует
только один элемент на странице. Если элементов, которым необходимо
присвоить такой стиль, несколько – это уже класс.</P>
</td></tr></table>
</body></html>
<?php echo '« <a href="/work/?">В Раздел</a>';
include '../../style/foot.php'; ?>