9.2. Применение таблиц стилей css
Способы применения стилей:
1. Создание и применение стилей может быть локальным, то есть стили могут использоваться для форматирования части документа. Для применения внутренних стилей используются атрибут STYLE, теги <DIV>, <SPAN>.
Атрибут STYLE применяется для определения стиля определенного элемента HTML – документа, его можно использовать в разных тегах.
Например,
<P STYLE="text-align:justify; border-style: dotted; border-width: thin"> Текст абзаца … </P>
Выравнивание для текста абзац установлен по ширине, абзац отображается в рамке в виде маленьких точек.
Тег <DIV> предоставляет возможность применить определенный стиль для группы элементов документа, которые расположены внутри контейнера <DIV>.
Например, фрагмент кода документа определяет, что все фрагменты (заголовок и элементы списка) выводятся с отступлением первой строки абзаца 40 пунктов.
<DIV STYLE="text-indent:40pt"> <H2> Документы HTML могут помещать: </H2> <P ALIGN=LEFT> <UL TYPE=square> <LI> нумерованные списки, <LI> маркированные списки, <LI> списки определений. </UL> </P> </DIV> |
|
Тег <SPAN> используется для применения определенного в нем стиля на фрагмент документа.
Например,
<SPAN STYLE="color:red"> Сегодня </SPAN>
<SPAN STYLE="color:green"> мы </SPAN>
<SPAN STYLE="color:blue"> хорошо </SPAN>
<SPAN STYLE="color:black"> поработали </SPAN>
2. Глобальные стили могут многократно использоваться для форматирования разных частей HTML – документа. Глобальные силе задаются в контейнере <STYLE> в заглавной части документа внутри контейнера <HEAD>. Стили можно описывать так:
Тег.имя_стиля{свойство1:значение1; … свойствоN:значениеN;}
Если стиль предполагается использовать для разных тегов, то имя тега можно не определять.
.имя_стиля{свойство1:значение1; … свойствоN:значениеN;}
Для применения описанных стилей используются атрибуты CLASS и ID, которые определяют имя стиля.
Пример использования глобальных стилей:
<HTML>
<HEAD>
<STYLE>
.stred{font-style:italic; font-size:xx-large; color:red; border-style:double;}
.stblue{font-style:oblique; font-size:x-large; color:blue; border-style:solid;}
</STYLE>
<TITLE>
Пример использования глобальных стилей
</TITLE>
</HEAD>
<BODY BGCOLOR=Yellow TOPMARGIN=50 BOTTOMMARGIN=50 LEFTMARGIN=70 RIGHTMARGIN=70>
<P CLASS="stred"> Солнце низко, </P>
<P CLASS="stblue"> Вечер близко, </P>
<P CLASS="stred"> Спешу к тебе, </P>
<P CLASS="stblue"> Лечу к тебе,</P>
<P CLASS="stred"> Мое сердечко!</P>
</BODY>
</HTML>
Рис.6.1 – Пример использования глобальных таблиц стилей
3. Связанные таблицы стилей – это отдельные файлы, в которых описаны разные стили, доступные из разных HTML – документов. Файл стилей создается в любом текстовом редакторе (например, в программе Блокнот), содержит описание стилей по общей схеме:
Тег.имя_стиля{свойство1:значение1; … свойствоN:значениеN;}
.имя_стиля{свойство1:значение1; … свойствоN:значениеN;}
Такой файл обязательно должен иметь расширение CSS.
Прежде чем использовать стили в документе, в контейнере <HEAD> нужно определить связь между файлами. Для этого применяется тег <LINK>.
<LINK HREF=” имя_файла.css ” REL=”stylesheet” TYPE=”text/css”>.
Пример использования таблицы стилей – сайт туристической компании:
Таблица стилей – файл tablest.css:
BODY {background:url(Фон.jpg); COLOR:#0000FF;font-family:"Times New Poman", "serif"; }
.stblue {font-style:oblique; font-size:xx-large;letter-spacing: 10; text-align:center; color:blue; border-style:dashed;}
.stz1 {font-style:italic; font-size:32; text-align:center; color:blue;}
.sttext {font-family:"Arial"; font-style:normal; font-size:18; font-weight:bold; text-align:justify; color:Purple;}
Стартовая страница index.htm содержит описание фреймов, на которые делится страница:
<HTML>
<HEAD>
<TITLE>
Пример использования фреймов
</TITLE>
</HEAD>
<FRAMESET ROWS="20%, 80%">
<FRAME SRC="Firm.htm">
<FRAMESET COLS="200, *">
<FRAME SRC="Menu.htm">
<FRAME SRC="Page.htm" NAME="Inform">
</FRAMESET>
</FRAMESET>
</HTML>
Рисунок 2 – Пример использования связанных таблиц стилей – главная страница
Файл Firm.htm – заголовок сайта:
<HTML>
<HEAD>
<LINK HREF="tablest.css" REL="stylesheet" TYPE="text/css">
</HEAD>
<BODY LEFTMARGIN=60 RIGHTMARGIN=60>
<P CLASS=stblue> Туристическая фирма "Вселенная" </P>
</BODY>
</HTML>
Рисунок 3 – Пример использования связанных таблиц стилей –страница с информацией о фирме
Файл Menu.htm – меню в левом фрейме:
<HTML>
<HEAD>
<LINK HREF="tablest.css" REL="stylesheet" TYPE="text/css">
</HEAD>
<BODY>
<DIV CLASS=sttext>
<P> <A HREF="Page.htm" target="Inform"> Главная страница </A> </P>
<P> <A HREF="About.htm" target="Inform"> О нас </A> </P>
<P> <A HREF="Service.htm" target="Inform"> Услуги </A> </P>
</DIV>
</BODY>
</HTML>
Файл Page.htm – стартовая страница:
<HTML>
<HEAD>
<LINK HREF="tablest.css" REL="stylesheet" TYPE="text/css">
</HEAD>
<BODY>
<P CLASS=stz1>
<MARQUEE BEHAVIOR=ALTERNATE SCROLLAMOUNT=10 LOOP=5> Горячее предложение! Тур к Италии - 560 у.о. </MARQUEE> </P>
<P ALIGN=CENTER> <IMG SRC="Italy.jpg" ALT="Прага"> </P>
</BODY>
</HTML>
Файл About.htm – информация о фирме:
<HTML>
<HEAD>
<LINK HREF="tablest.css" REL="stylesheet" TYPE="text/css">
<STYLE>
.stund{text-decoration:underline;}
</STYLE>
</HEAD>
<BODY LEFTMARGIN=20 RIGHTMARGIN=20>
<DIV CLASS=sttext>
<P CLASS=stz1> О нас </P>
<DIV CLASS=sttext>
<P> Фирма «Вселенная» созданная в 1997 году. </P>
<P> Как туроператор, мы самостоятельно формируем туры, которые предлагаем своим клиентам. Это означает прямые контакты с партнерами,
совершенное знание туристического продукта, возможность создать тур «под клиента». В компании прямые контакты с крупнейшими
мировыми оптовыми поставщиками отелей – лидеров глобального рынка, которые предоставляют наиболее конкурентные цены в
масштабе планеты.
Это дает возможность нашим клиентам получить бесспорные преимущества в стоимости и оперативности</P>
<HR SIZE=3 ALIGN=CENTER NOSHADE>
<UL STYLE="list-style-image:url(list.jpg);">
<LI>
<P> <SPAN CLASS="stund"> Наш адрес</SPAN>: 83015, г. Донецк, бул. Шевченко, 75</P>
<LI>
<P><SPAN CLASS="stund""> Телефоны</SPAN>: (062) 338-45-21, 335-78-05</P>
<LI>
<P><SPAN CLASS="stund"> Факс</SPAN>: (062) 338-45-21</P>
<LI>
<P><SPAN CLASS="stund"> E-mail</SPAN>: vsesvit@donbas.com.ua</P>
</UL>
</DIV>
</BODY>
</HTML>
Рисунок 4 – Пример использования связанных таблиц стилей –страница с информацией об услугах фирмы
Файл Service.htm – информация об услугах, которые предоставляются (пример таблицы):
<HTML>
<HEAD>
<LINK HREF="tablest.css" REL="stylesheet" TYPE="text/css">
</HEAD>
<BODY>
<P CLASS=stz1> Мы предоставляем такие услуги: </P>
<TABLE BORDER=1 CLASS=sttext STYLE="font-size:14;border-color:blue;border-style:double; text-indent:10" ALIGN=CENTER>
<TR>
<TD ROWSPAN=7>Лечение в санаториях Украины</TD>
<TD ROWSPAN=3> Моршин</TD>
<TD>санаторий "Моршинський" </TD> </TR>
<TR>
<TD> санаторий "Подснежник"</TD> </TR>
<TR>
<TD> санаторий "Весна"</TD>
</TR>
<TR>
<TD ROWSPAN=2> Трускавец </TD>
<TD>санаторий "Донбасс" </TD>
</TR>
<TD> санаторий "Карпаты"</TD>
</TR>
<TD ROWSPAN=2> Миргород </TD>
<TD>санаторий "Полтава" </TD>
</TR>
<TD> санаторий им. М.В.Гоголя</TD>
</TR>
<TR>
<TD ROWSPAN=3>Автобусные туры по Европе</TD>
<TD COLSPAN=2> Венгрия, Италия </TD>
</TR>
<TD COLSPAN=2> Италия </TD> </TR>
<TD COLSPAN=2> Австрия, Германия</TD>
</TR>
<TD ROWSPAN=4>Отдых в Украине</TD>
<TD ROWSPAN=3> Крым</TD>
<TD>санаторий "Военный", Алушта </TD>
</TR>
<TR>
<TD> санаторий "Марат", Мисхор</TD>
</TR>
<TR>
<TD> санаторий "Ай-Петри", Алупка</TD>
</TR>
<TD COLSPAN=2> Азовское побережье </TD>
</TR>
<TD ROWSPAN=6>Отдых за границей</TD>
<TD COLSPAN=2> Египет </TD>
</TR>
<TD COLSPAN=2> Турция </TD> </TR>
<TD COLSPAN=2> Кипр </TD> </TR>
<TD COLSPAN=2> Испания</TD> </TR>
<TD COLSPAN=2> Италия </TD> </TR>
<TD COLSPAN=2> Венгрия </TD> </TR>
</TABLE>
</BODY>
</HTML>