Отправляет email-рассылки с помощью сервиса Sendsay

Программирование на JavaScript: просто о сложном.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Всё о работе в Интернет" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июль 2005   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Владимир

Статистика

1.761 подписчиков
0 за неделю
←   Все выпуски   →

Программирование на JavaScript: просто о сложном.


Информационный Канал Subscribe.Ru

ГЛАВНАЯ     УЧЕБНИК     СКРИПТЫ     1000 СКРИПТОВ    



Внимение покупателям диска "1000 яваскриптов": в июне Почта России ввела новые правила почтовых отправлений, согласно которым компакт-диски можно отправлять только посылкой. В связи с этим сумма почтовых расходов составляет 35% от стоимости заказа.

ВЫПУСК 11

Каскадные таблицы стилей (Cascad Style Sheets)

Каскадные таблицы стилей были предложены w3c(WWW Consorcium) в рамках разработки спецификации HTML 3.0. Однако, реализованы в реально действующих навигаторах они были только в 1997 году. Фактически, в качестве применяемой HTML-разметки они стали доступны только с версий Netscape Navigator 4.0 и Internet Explorer 4.0.

Идея положенная в основу таблиц достаточно проста. К версии 4.0 HTML превращется в язык разметки, опирающийся на контейнерное представление документа, т.е. документ - это множество вложенных в друг друга контейнеров, каждый из которых имеет свои свойства по представлению информации. Многие контейнеры можно сгруппировать в классы однотипных контейнеров, например, заголовки или параграфы. Свойства контейнера, перечисляются в качестве атрибутов тага начала контейнера. При этом у большинства контейнеров, начиная с версии HTML 3.0 набор этих атрибутов типизирован.

Контейнеры во многом походят на блоки в универсальный языках программирования. При этом свойства контейнеров можно интерпретировать как переменные, которые принимают определенные значения в пределах каждого из контейнеров. Как и в языках программирования, например в Паскаль, описание свойств можно вынести в специальную секцию данных в начале документа. Такой секцией и является секция описания каскадных стилей. Обычно стиль описывается внутри контейнера STYLE: 

  <style type="text/css">  <!-- Описание стилей -->  </style>
Вообще говоря, в Netscape поддерживают еще одну нотацию описание таблиц стилей - нотация JavaScript: 
  <style type="text/javascript">  <!-- Описание стилей -->  </style>

При описании таблиц стилей мы будем опираться на документацию Netscape, т.к. - это наиболее популярный браузер Internet. Internet Explorer поддерживает только спецификацию w3c.

Начнем с простого примера. Нужно описать стили отображения текста в параграфе и заглавии документа:

Пример 

 
 <html> 


 <head>


  style type="text/css"> 


 p {color:blue; font-family: times; font-size:10pt;} 


 h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;} 


 </style> 


 </head> 


 <body> 


 <h1>Test Style Shits in Communicator</h1> 


 <p> This is a first part of the document  </body> 


 </html>

То же самое но в JavaScript-нотации будет выглядеть следующим образом:

Пример 

  <html> 


 <head> 


 <style type="text/javascript">


 tags.p.color="blue"; 


 tags.p.fontFamily="times"; 


 tags.p.fontSize="10pt"; 


 tags.h1.color="black"; 


 tags.h1.fontSize="12pt"; 


 tags.h1.fontstyle="Arial"; 


 tags.h1.textAlign-"center"; 


 </style>


  </head> 


 <body>


  <h1>Test Style Shits in Communicator</h1> 


 <p> This is a first part of the document  </body> 


 </html>

Разберем теперь описатели стилей более подробно. Определим область их применения и способы встраивания в документ.

Новые HTML-контейнеры

С появлением таблиц стилей в языке появилось три новых контейнера: STYLE, LINK, SPAN. Вообще говоря LINK - это не новый таг, а новое применение старого тага.

Контейнер STYLE(<style type="...">......</style>) служит для определения таблицы описания стилей. Хотя в спецификации CSS прямо не говорится, в каком контейнере документа следует применять STYLE, тем не менее, в примерах чаще всего приводится этот контейнер внутри контейнера HEAD.

Контейнер LINK в контексте описателей стилей применяется для определения внешнего файла с описаниями стилей для данного документа. Например, внешний файл может содержать следующее описание стилей: 

  /* CONTENTS OF THE EXTERNAL STYLE SHEETS FILE  CSS.HTM*/ 


 p {color:blue; font-family: times; font-size:10pt;} 


 h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;} 

 /* the end of style sheets definition */

Для применения этого описателя стилей в заголовок документа необходимо включить следующий таг:

Пример 

  <html>


  <head> 


 <link REL=STYLESHEET TYPE="text/css" HREF=HTTP://LOCALHOST/CSS.HTM> 


 </head> 


 <body>  The body of the document should be here.  </body> 


 </html>

Из данного примера видно, что писание стилей в фале CSS.HTM полностью совпадает с описанием в контейнере STYLE. В тексте файла описания стилей не нужно указывать таги контейнера STYLE.

Контейнер SPAN применяется для переопределения стиля отображения текущего фрагмента текста и в некотором смысле аналогичен контейнеру FONT. Часто SPAN применяют для достижения типографских эффектов, таких например, как выделение заглавной буквы абзаца:

Пример 

  <HTML> 


 <!--  Author: Paul Khramtsov  Date: September 19, 1997 

 URL:HTTP://POLYN.KIAE.SU/INTERNET/INTRO.HTMl  --> 


 <HEAD> 


 <style TYPE="text/css"> 


 FS.all { color:red; font-size: 24pt; font-family: times;} 


 H1 {color:navy; text-transform: uppercase;font-size: 18pt;   font-weight: bold; font-family: times;} 


 H2 {color:navy; font-size: 14pt; font-weight: bold; font-style: italic;   font-family: times;}  


H3 {color:navy; font-size: 10pt; font-weight: bold; font-family: times;}  


P  {color:navy; font-size: 12pt; font-family: times; text-align: justify} 


 P.HELP {color:darkgreen; font-size: 10pt; font-family: times;   text-align: justify;}  


P.LEFT {color:navy; font-size: 12pt; font-family: times; text-align: right;} 


 </style> 


 </HEAD> 


 <BODY bgcolor=lightyellow>  <center> 


 <h3>Центр информационных технологий</h3> 

 <h1>Информационные Ресурсы Internet</h1> 


 
 <hr> 


 </center> 


 <p><span class=FS>C</span>обществу глобальных компьютерных 

сетей   Internet в 1995 году исполнилось 25 лет. 

На настоящий момент - это самый  большое 

информационный ресурс мира. Одновре-менно Internet - 

это самая   популярная и массовая компьютерная 

сеть планеты. По оценкам международного   центра 

координации сетевой деятельности в рамках Internet

(Internic-Internet   Information Center) на 1997 год в сети 

насчитывалось несколько десятков
  миллионов постоянно зарегистрированных 

компьютеров-серверов, которые   откликаются 

на запросы пользователей 365 дней в году

 и 24 часа в сутки. Этот   огромный информационный 

ресурс полностью децентрализован и не подчиняется

 ни   одному правительству или крупной финансовой 

компании мира.  </BODY> 


 </HTML>

Кроме новых контейнеров таблицы описания стилей привнесли еще и новые атрибуты в известные таги.

Новые свойства контейнеров HTML

Перечень новых атрибутов у тагов HTML следует начать с атрибута STYLE. Этот атрибут используется для определения стиля отображаемого контейнера непосредственно внутри тага начала контейнера: 

  <h3 style="line-hieght:24pt; font-weight:bold; color: blue">The blue text 


 <h3 style="lineHeight='24pt'; fontWeght='bold'; color='blue'">The blue text

Можно также определить класс стилей и использовать его при помощи атрибута CLASS: 
  <style type="text/css"> 


 h3.class1 {font-size:12pt;color=blue} 


 </style>  ..... 


 <h3 class="class1">This is a blue text
В данном случае мы определили класс заголовков третьего уровня, но можно определить класс, который можно будет применять к любым контейнерам, а не только к заголовкам: 
  <style type="text/css"> 


 all.class1 {font-size:12pt;color=blue} 


 </style>
Kроме определения классов существует еще возможность создания поименованных стилей. Поименованный стиль создается как уточнение какого-либо класса: 
  <style type="text/css"> 


 all.class1 {font-size:12pt;color=blue} 


 #C1 { font-size: 20;}  </style>  .... 


 <h3 class="class1">This is a blue text 


 <h3 class="class1" id="C1">This is a blue text

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

Свойства контейнеров, управляемые описателями стилей

Первую группу свойств составляют свойства шрифтов:


font-size, font-family, font-weight, font-style.

Вторую группу свойств составляют свойства текста:


line-height, text-decoration, text-transform, text-align, text-indent.

Третью группу свойств составляют свойства блоков текста:


margin-left, margin-right, margin-top, margin-bottom, margin, padding-top, padding-right, padding-bottom, padding-left, paddings, border-top-width, border-bottom-width, border-left-width, border-right-width, border-width, border-style, border-color

Четвертую группу составляют описатели цвета фона и цвета текста:


color, background-image, background-color.

Кроме того, существуют свойства определяющие тип пульки у элементов списка и ряд других свойств элементов HTML-разметки.



А сейчас - новый скрипт:

Распечатка страницы. 

   

<html>
<meta http-equiv="Content-Language" content="ru">
<head>

</head>

<BODY>
<script language="Javascript1.2">
<!--


var message = "Print this Page";

function printpage() {
window.print(); 
}

document.write("<form><input type=button "
+"value=\""+message+"\" onClick=\"printpage()\"></form>"); 
document.write("<a href=\"#\" onClick=\"printpage()\">"+message+"</a>"); 
//-->
</script> 


</body>
</html>

Этот скрипт взят из "Сборника 1000 яваскриптов".

На этом на сегодня все.
До встречи в следующих выпусках.

javascript05@narod.ru


Уважаемые читатели. Специально для всех интересующихся JAVASCRIPT я подготовил электронную книгу "Сборник 1000 яваскриптов -демонстрационная версия". Скачать эту книгу Вы сможете отсюда -
СКАЧАТЬ ДЕМОНСТРАЦИОННУЮ ВЕРСИЮ СБОРНИКА    

Приобрести сборник "1000 яваскриптов" Вы сможете:

1) по почте наложенным платежем. Стоимость диска - 10$ ( или 280 рублей ) + 35 % за почтовые расходы по пересылке посылки с диском. Диск оплачиваете при получении на почте. Заказы направляйте по адресу - javascript05@narod.ru. В заявке обязательно указываете свои ФИО и почтовый адрес ПОЛНОСТЬЮ.
Всем, заказавшим сборник "1000 яваскриптов" - в подарок бесплатный бонус - "Сборник электронных книг."    

2) произвести предоплату - 10$ ( или 280 рублей ) через Webmoney, Яндекс-деньги, Сбербанк, E-GOLD, и получить диск по почте - почтовые расходы - 35 % - в этом случае Вы НЕ ОПЛАЧИВАЕТЕ.
 Посмотреть мои реквизиты Вы сможете здесь.

 3) произвести предоплату - 7$ ( или 195 рублей ) через Webmoney, Яндекс-деньги, Сбербанк, E-GOLD, и в этот же день скачать сборник "1000 яваскриптов" и "Сборник электронных книг" с моего сайта. Посмотреть мои реквизиты Вы сможете здесь.



Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора 		Подписан адрес:
Код этой рассылки: inet.webbuild.javascript05 		Отписаться
Вспомнить пароль
В избранное