+7(495)643-49-40
+7(926)583-63-64
if-group@narod.ru

IF-GROUP


создание сайта
 

Дальнейшие шаги программирования на языке HTML. Страница 3.


На, этой странице мы узнаем как управлять стилями с помощью таблицы стилей. Эта таблица предназначена для того чтобы один раз описать в ней стили, присвоить им краткие имена, а затем для вызова этих стилей не прописывать их полностью всё снова и снова в различных ячейках или абзацах, а лишь указывать их краткие имена. Для ясности напишем такую таблицу и сохраним. И так, напишите как всегда в редакторе "Блокнот" такую табличку:

<style type="text/css">
<!--

body
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-widht: 0;
margin-heigth: 0;
}

p
{
font-size: 100%;
color: black;
text-indent: 20;
text-align: justify;
padding-top: 0px;
padding-bottom: 0px;
}

p.l
{
padding-top: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
text-indent: 0;
font-size: 100%;
text-align: left;
text-decoration:none; text-underline:none;
}

p.c
{
padding-top: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
text-indent: 0;
text-align: center;
font-size: 100%;
text-decoration:none; text-underline:none;
}

p.c70
{
padding-top: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
text-indent: 0;
text-align: center;
font-size: 70%;
text-decoration:none; text-underline:none;
}

p.j
{
padding-top: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
text-indent: 0;
text-align: justify;
font-size: 100%;
text-decoration:none; text-underline:none;
}

.c
{
text-indent: 0;
text-align: center;
font-size: 100%;
}

.menu
{
font-size: 80%;
font-weight: bold;
}

.big
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-indent: 0;
text-align: left;
font-size: 200%;
color: #FFFFFF;
}

.100
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-indent: 0;
text-align: left;
font-size: 100%;
color: #FFFFFF;
}

.150
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-indent: 0;
text-align: left;
font-size: 150%;
color: #FFFFFF;
}

.warning
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: red;
font-weight: bold;
}

td.l
{
text-align: left;
}

td.l80
{
text-align: left;
font-size: 80%;
}

td.ls
{
text-align: left;
BackGround: #555555;
}

td.r
{
text-align: right;
}

td.c
{
text-align: center;
}

a
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

a:visited
{
color: #000000;
text-decoration: underline;
}

a:link
{
color: #000000;
text-decoration: underline;
}

a:active
{
color: #00FF00;
text-decoration: underline;
}

a:hover
{
color: #44BB22;
text-decoration: underline;
}

input
{
border-width: 1;
}

button
{
border-width: 1;
}

textarea
{
background: url("images/leftbg.gif");
font-family: tahoma,arial,verdana;
font-size: 10pt;
font: bold;
border-width: 1;
}

input
{
background: url("images/leftbg.gif");
font-family: tahoma,arial,verdana;
font-size: 10pt;
font: bold;
border-width: 1;
}

-->
</style>

    ПОЯСНЕНИЯ:

    Просто скопируйте этот текст (программу) с помощью редактора "Блокнот" и сохраните в виде файла с именем style.css

    Этот файл должен находиться в той же папке, где находится ваша главная страница.

    Собственно говоря, имя может быть любым. Сдесь главное - точно указать расширение: .css

    Как видно из таблицы стилей, в ней сначала идёт название того элемента, стиль которого следует описать (н.п. body, p, td и т.д.), за тем открывается фигурная скобка, потом следует само описание стиля, и, наконец, закрывается фигурная скобка.

    Итак, рассмотрим элементы выше приведённой таблицы стилей по порядку.

body
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-widht: 0;
margin-heigth: 0;
}

    Здесь в общих чертах описывается стиль тела страницы.
    "font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;" описывает шрифт тела страницы. Если в вашем компьютере есть шрифт Verdana, он выберет этот шрифт, если нет - шрифт Geneva, ну и т.д.
    "margin-top: 0;" означает что отступ сверху равен 0 пикселов (т.е. его нет). То же самое справидлливо и для отступов снизу, слева и справа.
    "margin-widht: 0;" - ширина краёв (просветов) = 0 пикселов. То же справедливо для высоты краёв.


p
{
font-size: 100%;
color: black;
text-indent: 20;
text-align: justify;
padding-top: 0px;
padding-bottom: 0px;
}

    Это описание стиля обзацев вводимых в текст вашего сайта с помощью тегов <p> и </p>
    Размер шрифта = 100% от стандартного значения (font-size: 100%;)
    Цвет шрифта - чёрный (color: black;)
    Отступ слева для красной строки = 20 пикселов (text-indent: 20;)
    Расположение текста - по всей ширене страницы, начиная с левого края (text-align: justify;)
    Остальное уже знаем.


p.l
{
padding-top: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
text-indent: 0;
font-size: 100%;
text-align: left;
text-decoration:none; text-underline:none;
}

    Это описание стиля обзацев вводимых в текст вашего сайта с помощью тегов <p class=l> и </p>
    Здесь всё тоже самое, что и для предыдущего элемента. Разница в следующем:
    text-align: left; означает, что тескт просто будет прижиматься к левому краю.
    text-decoration:none; text-underline:none; означает, что у текста не дожно быть оформления и подчёркивания.

    Подбным же образом описываюся стили абзацев вводимых в текст вашего сайта с помощью тегов <p class=c> и </p>, <p class=c70> и </p>, <p class=j> и </p>


.150
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-indent: 0;
text-align: left;
font-size: 150%;
color: #FFFFFF;
}

.warning
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: red;
font-weight: bold;

}
    Эти строки описывают стиль любого элемента, вводимого тегом, внутри которого есть запись типа: class=150, class=warning и т.д.
    font-weight: bold; означает жирный шрифт.


a:visited
{
color: #000000;
text-decoration: underline;
}

    Эти строки означают, что после клика по ссылке, она изменит свой цвет на 000000 в кодировке RGB (чёрный).


a:link
{
color: #000000;
text-decoration: underline;
}

    Эти строки описывают цвет ссылок по которым ещё не кликали.


a:active
{
color: #00FF00;
text-decoration: underline;
}
    Эти строки описывают изменение цвета ссылки при наведении на неё курсора.

    Последние строки таблицы стилей описывают стиль форм. Сейчас мы об этом говорить не будем. Но в будующем эти записи будут вам очень полезны.

    После того, как вы сохранили эту таблицу стилей, напишите такую вот страницу и сохраните ей под любым именем с раширением .html (например 007.html):

<html>

    <head>
       <meta content="text/html; charset=windows-1251" http-equiv=Content-Type>
       <meta name="keywords" content="таблица, стиль">
       <meta name="description" content="Эта страница рассказывает о том, как использовать таблицу стилей">
       <link rel="stylesheet" href="style.css">
    <title>Использование таблицы стилей</title>
    </head>

    <body>

    <table width=100% height=100% cellpadding=0 cellspacing=0 border=0>
       <tr height=60>
          <td class=l style='padding-left:10pt; background:#55CC33; font-size:150%; color:#FFFFFF'>
             <b>IFG</b>
          </td>
          <td class=l style='padding-left:20pt; background:#55CC33; font-size:150%; color:#FFFFFF'>
             <i><b>Использование таблицы стилей</b></i>
          </td>
       </tr>
       <tr>
          <td class=l valign=top width=130 style='padding-top:5pt; padding-left:10pt; padding-right:10pt; background:#99FF55; font-size:90%'>
             <hr size=2 color=#44BB22>
             <a href=007.html>Страница 1</a>
             <hr size=2 color=#44BB22>
             <a href=007.html>Страница 2</a>
             <hr size=2 color=#44BB22>
             <a href=007.html>Страница 3</a>
             <hr size=2 color=#44BB22>
          </td>
          <td class=l valign=top style='padding-top:5pt; padding-left:10pt; background:#CCFF99; font-size:90%'>
&nbsp &nbsp &nbsp Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей".<br><br>

&nbsp &nbsp &nbsp Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей".<br><br>

&nbsp &nbsp &nbsp Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей".<br><br>

&nbsp &nbsp &nbsp Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей". Содержание страницы "Использование таблицы стилей".<br><br>

          </td>
       </tr>
    </table>

    </body>

</html>

    Затем пересохраните отредактированную страницу 007.html в той же папке, в которой находится таблица стилей и откройте её (новую страницу конечно). Сами увидете, что получилось.

    Переход к страницам: 1 | 2 | 3 |


Наверх
Нашим Заказчикам:
Услуги и цены
Контактная информация
Начинающим WEB-програмистам:
Введение
Самый простой способ
Первые шаги программирования на языке HTML
Дальнейшие шаги программирования на языке HTML
Как разместить сайт на бесплатном сервере
Книга отзывов