[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / Разное /

Создание оригинальных стилей

Internet Explorer предлагает вам свой стиль, называемый по умолчанию. Этот стиль предполагает белый чистый фон, черный цвет шрифта, все ссылки подчеркнутые и синего цвета и т. д. Что если вам не нравится все это? Вы уже умеете менять различные аттрибуты напрямую. Даже если одинаковых по значению объектов и много, вы уже умеете применять классы. Но существует еще одна возможность. Для задания всего стиля документа целиком применяются так называемые Иерархические Стилевые Таблицы (Cascade Style Sheets - CSS), которые представляют собой набор установок свойств различных объектов. Чем-то они напоминают классы, но если класс сохдается внутри документа и может быть применен, а может быть и нет, то CSS, если он подключен, то установки в нем влияют непосредственно на все объекты в документе.

Далее будут рассматриваться следующие темы:

  • Введение в CSS
  • CSS, описываемые в странице
  • CSS, подключаемые из файла
  • Динамическое изменение стилей с помощью CSS

Так что такое CSS?

 CSS очень похожи на классы, только с той разницей, что в них описывается стиль для уже известного объекта. Для наглядного примера, осмотрите сейчас свой комнату (офис, зал...) в которой вы  находитесь. Наверняка, вы увидите множество различных предметов (стол, кресло, окно, компьютер). У каждого из этих предметов-объектов есть характеристики, и вам надо составить список этих предметов и их характеристик. Может быть у вас получится нечто следующее:

стол:
    цвет - коричневый
    материал - деревянный
компьютер:
    цвет - белый
    материал - пластмасса
    назначение - для работы

Конечно, вы можете пойти другим путем, но только CSS составляются именно так, где вместо предметов выступают объекты, да и их характеристики немножко другие. Для примера, вот вам отрывок такого документа:

body
{
   background-color: rgb(255,255,153);
   color: rgb(51,51,153);
}

h1
{
   color: rgb(255,0,0);
   font-family: arial, helvetica;
}

Здесь задается каким будет стиль элемента BODY и H1. Те параметры, которые не заданы, остаются по умолчанию.

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

Стилевая таблица в документе

Существует два способа подключения CSS. Первый - задать ее в элементе STYLE в начале документа, как класс. Это делается так:

<HTML>
<HEAD>
<STYLE>
H1 {color: red}
H2 {color: red; font-style: italic}
</STYLE>
</HEAD>
<BODY>
<H1> Этот документ</H1>
<H2>использует стилевые таблицы</H2>
</BODY>
</HTML>

В данном примере, на экране вы увидите две строки, состоящие из двух объектов: H1 и H2. Посмотрите, во что превратился стиль по умолчанию Internet Explorer. А ведь мы не делали никаких указаний в самом объекте насчет его стиля. Таким образом, сколько бы вы ни наделали объектов H1 и H2, их стиль всегда будет таким, каким вы его указали в стилевой таблице.

Стилевая таблица в отдельном файле

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

Второй способ подключения CSS к Web-странице - это создание CSS в отдельном файле, а в самой странице делается ссылка на этот файл. Тогда, вы можете написать в странице только одну строчку и все равно стиль ее будет таким, каким он определен в стилевой таблице во внешнем файле. Думаю не надо долго говорить о преимуществах такого способа.

Итак, сперва вы создаете таблицу, следуя указанным выше правилам. Затем, вы добавляете в элемент <HEAD> для включения таблицы стилей строку подобную следующей:

<LINK REL="stylesheet" TYPE="text/css" HREF="MyStyle.css">

LINK означает, что к текущей странице подключается элемент, REL и TYPE описывают элемент, как стилевую таблицу, ну а HREF содержит адрес, по которому находится файл с вашей CSS.

Динамическое изменение CSS?

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

function change_style() {
     if (document.styleSheets.href != null)
         document.styleSheets.href = "newStyle.css";
}

Если стилевая таблица определена внутри HTML-страницы, вы можете добавлять новые определения с помощью функции addRule (object, style). Где object - объект, а style, соответственно, стилевые установки. Вот пример, в котором после щелчка на кнопку, происходит изменение стилевой таблицы:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JScript">
function newRule() {   
      document.styleSheets.MyStyles.addRule("P","color:blue");
}
</SCRIPT>
<STYLE ID="MyStyles">
H1 {color:red}
H2 {color:red;font-style:italic}
</STYLE>
</HEAD>
<BODY>
<H1>Это Заголовок 1</H1>
<H2>Это Заголовок 2</H2>
<P>Это абзац. Щелкни на кнопку для изменения его стиля</P>
<BUTTON onclick="newRule()">Нажми меня</BUTTON>
</BODY>
</HTML>

Просмотрев страничку с таким кодом, вы увидите, как происходит изменение стиля, путем добавления установки в таблицу стилей.




Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / Разное /

Учебное пособие по CGI-программированию Страница 30. Счётчик посещений
08-04-2010   

Наверное тоже одним из часто встречающихся приложений CGI являются счетчики посещений. Они стоят практически на каждой страничке, возможно даже и у вас. Но иногда вас не устраивает тот факт, что счетчик лежит где-то в другом месте... подробнее

Кол. просмотров: общее - 4176 сегодня - 0

Учебное пособие по CGI-программированию Страница 28. Кто посещает мою страничку?
08-04-2010   

Вам иногда хотелось наверное узнать,кто же смотрит на вашу страничку,откуда и когда ваша страничка посещалась. Бывают такие вопросы? Кто-то считает,что ответить на них нельзя. Но вы не верьте этому расхожему мнению... подробнее

Кол. просмотров: общее - 3869 сегодня - 0

Учебное пособие по CGI-программированию Страница 27. Trics and traps
08-04-2010   

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

Кол. просмотров: общее - 4075 сегодня - 1

Учебное пособие по CGI-программированию Страница 26. Несколько слов об отладке
08-04-2010   

CGI-программы -не самые простые в отладке,по сложности отладки они способны сравнится лишь с отладкой драйверов. Вся сложность заключается в том,что скрипт выполняется не как обычная программа. Он выполняется в специальной среде сервера,которая создается при клиентском запросе... подробнее

Кол. просмотров: общее - 4083 сегодня - 0

Учебное пособие по CGI-программированию Страница 25. Анимация
08-04-2010   

Когда говорят о каком-то популярном сайте,то частенько к преимуществам относят и анимацию. Действительно,когда изображение изменяется (и особенно к месту ;)),то это смотрится и пользователю нравится... подробнее

Кол. просмотров: общее - 3835 сегодня - 0



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects