Просмотр архива WM_BY


<?php  
include '../../config.php';
$title='Учебник HTML';
aut();
head();

 ?>
<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-страниц, которые 
будут использовать стили из этого файла, нужно будет сделать ссылку 
на него. Делается это с помощью тега &lt;LINK&gt;, располагающегося 
внутри тега &lt;BODY&gt; ваших страниц:</P>
<DIV align=center>
<CENTER>
<TABLE border=0>
  <TBODY>
  <TR>
    <TD><PRE>&lt;LINK REL=STYLESHEET TYPE="text/css" HREF="URL"&gt;</PRE></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>Первые два параметра этого тега являются 
зарезервированными именами, требующимися для того, чтобы сообщить 
броузеру, что на этой страничке будет использоваться CSS. Третий 
параметр – HREF= «URL» – указывает на файл, который содержит 
описания стилей. Этот параметр должен содержать либо относительный 
путь к файлу – в случае, если он находится на том же сервере, что и 
документ, из которого к нему обращаются – или полный URL 
(«http://...») в случае, если файл стилей находится на другом 
сервере.</P>
<P>Второй вариант, при котором описание стилей 
располагается в коде Web&shy;странички, внутри тега &lt;BODY&gt;, в 
теге &lt;STYLE type="text/css"&gt;... &lt;/STYLE&gt;. В этом случае 
вы можете использовать эти стили для элементов, располагающихся в 
пределах странички. Параметр type="text/css" является обязательным и 
служит для указания броузеру использовать CSS.</P>
<P>И третий вариант, когда описание стиля 
располагается непосредственно внутри тега элемента, который вы 
описываете. Это делается с помощью параметра STYLE, используемого 
при применении CSS с большинством стандартных тегов HTML. Этот метод 
нежелателен, и понятно почему: он приводит к потере одного из 
основных преимуществ CSS – возможности отделения информации от 
описания оформления информации. Впрочем, если необходимо описать 
лишь один элемент, этот вариант расположения описания стилей также 
вполне применим.</P>
<P>Давайте рассмотрим механизм, с помощью которого 
стили присваиваются элементам Web&shy;страниц. Самый простой случай 
присвоения какому-либо элементу определенного стиля выглядит 
так:</P>
<DIV align=center>
<CENTER>
<TABLE border=0>
  <TBODY>
  <TR>
    <TD><PRE>НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;},</PRE></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTML&shy;тега (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, используют механизм наследования: т. е. если вы располагаете 
изображение внутри тега &lt;P&gt;...&lt;/P&gt;, оформленного с 
помощью 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>  &lt;P CLASS="b-с"&gt;Текст параграфа&lt;/P&gt;
– параграфу присвоен стиль класса b-с.  &lt;TD CLASS="b-c"&gt;текст&lt;/TD&gt;
– ячейке таблицы присвоен стиль класса b-c.</PRE></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>Содержащийся в ячейке текст будет отображаться 
согласно описанию класса.</P>
<P>Таким образом, вы можете присвоить описанный стиль 
любым текстовым элементам страниц. Обратите внимание, что при 
написании названия классов необходимо соблюдать регистр символов, 
согласно тому, как вы назвали класс в описании стиля!</P>
<P>Присвоение стилей с помощью идентификаторов 
применяется в случае, если данному идентификатору соответствует 
только один элемент на странице. Если элементов, которым необходимо 
присвоить такой стиль, несколько – это уже класс.</P>
            
  </td></tr></table>

 



</body></html>
<?php
echo gb.'<a href="../../ycheb">Учебники</a>'.div;
echo gb.'<a href="'.H.'enter">Прихожая</a>'.div;
foot(); ?>