Кормораздатчик мобильный электрифицированный: схема и процесс работы устройства...
Поперечные профили набережных и береговой полосы: На городских территориях берегоукрепление проектируют с учетом технических и экономических требований, но особое значение придают эстетическим...
Топ:
Процедура выполнения команд. Рабочий цикл процессора: Функционирование процессора в основном состоит из повторяющихся рабочих циклов, каждый из которых соответствует...
Установка замедленного коксования: Чем выше температура и ниже давление, тем место разрыва углеродной цепи всё больше смещается к её концу и значительно возрастает...
Теоретическая значимость работы: Описание теоретической значимости (ценности) результатов исследования должно присутствовать во введении...
Интересное:
Финансовый рынок и его значение в управлении денежными потоками на современном этапе: любому предприятию для расширения производства и увеличения прибыли нужны...
Инженерная защита территорий, зданий и сооружений от опасных геологических процессов: Изучение оползневых явлений, оценка устойчивости склонов и проектирование противооползневых сооружений — актуальнейшие задачи, стоящие перед отечественными...
Искусственное повышение поверхности территории: Варианты искусственного повышения поверхности территории необходимо выбирать на основе анализа следующих характеристик защищаемой территории...
Дисциплины:
2021-03-17 | 100 |
5.00
из
|
Заказать работу |
|
|
Введение- история-перспективы.
Гипертекст – это клей который соединяет различные информационные ресурсы.
Предшественники. История
Г. – Международная организация по стандартам ISO стандарт
ISO -8879 «Standard Generalized Markup Language» (SGML) – в нем определен лишь синтаксис записи элементов разметки, называемых «тегами».
Язык SGML – явился основой не только будущих языков HTML, XML, но ряда специализированных языков. На его основе построены современные международные системы передачи таможенной информации EDIFACK и системы передачи банковской информации SWIFT.
Г. появилась Windows 3.0 и в ней присутствовал специальный Browser для HTML версии 1, он назывался lynx (рысь). Однако он мог интерпретировать только статическую разметку документа и предъявлять его на экране.
Сотрудники Европейского института физики частиц CERN, занимая c ь созданием системы передачи гипертекстовой информации через интернет, предлагают HTML (HyperTextMarkupLanguage) – язык разметки гипертекста.
Г. – появилась первая устойчивая версия операционной среды Windows 3.1 и почти одновременно с ней появляется стандарт HTML 2.
Г. Netscape Navigator
Г. MS Internet Explorer
Г. стандарт HTML 3.2
1999 г. стандарт HTML 4.0 Одновременно с данным стандартом появилась спецификация CSS – Cascading Style Sheets – каскадируемые таблицы стилей (иногда их переводят как таблицы каскадных стилей или каскадные таблицы стилей). Появление данной спецификации было попыткой отделить собственно разметку документа от ее внешнего шрифтового и цветового оформления.
Практически все броузеры Internet Explorer (начиная с версии 4.0 и выше) и Netscape Navigator (начиная с версии 4.0) в настоящий момент успешно поддерживают эту технологию.
|
В настоящий момент на рынок выпущены версии 6.0 двух основных броузеров. MSIE начиная с версии 5.х и Netscape Navigator версии 6.0 почти на 100% поддерживают стандарт HTML 4.0. Кроме того сейчас начинает набирать вес программа Opera 4. Последняя тоже весьма корректно обрабатывает стандарт 4.0.
Проверить любой документ на соответствие действующему стандарту можно при помощи специального сервиса, предоставляемого всем желающим консорциумом по стандартизации интернет W 3 C. На официальном сервере данного консорциума http://www.w3.org существует ссылка HTML - validator. Указав URI проверяемой страницы и подождав несколько секунд Вы увидите подробный список всех ошибок и несоответствий. Если таковых не имеется, то Вы получите сообщение “ This document is HTML 4.0 Strict ”.
Основные правила:
Каждый тег начинается с угловой открывающей скобки < и заканчивается угловой закрывающей скобкой >.
Парные теги образуют контейнеры. При этом к имени закрывающего тега обязательно добавляется специальный символ – правый слэш.
Например:
<тег1> </тег1>
Существуют специальные теги, которые интерпретируются как комментарии в языке разметки HTML.
Однострочный комментарий:
<! Комментарий >
Многострочный комментарий:
<!— восклицательный знак и два подряд идущих символа дэфис
Строка 1 комментария
Строка 2 комментария
>
Группы тегов HTML можно условно разбить на следующие функциональные группы:
· Группа тегов, определяющих структуру документа
· Группа тегов, определяющих оформление блоков документа
· Группа тегов, задающая гипертекстовые ссылки в документе
· Группа тегов, определяющая диалоговые формы в документе
· Группа тегов, определяющая вызовы внешних программ
· Группа тегов, определяющая метаданные документа
· Группа тегов, определяющая возможность включения модулей, написанных на специальных скриптовых языках и работающих на стороне клиента.
Теги, определяющие структуру документа
|
Любой документ HTML состоит из 3-х частей
Строки, содержащей информацию о версии HTML
Блока заголовка документа
Тела документа, которое содержит либо непосредственнно обрабатываемую информацию либо определяющего набор фреймов.
HTML 4.0 Strict – указывает на то, что такой документ не должен содержать отмененных элементов и атрибутов и не должен быть контейнером для фреймов.
HTML 4.0 Traditional – более «мягкое определение». Может содержать все то, что и HTML 4.0 Strict, а также ряд отмененных элементов и атрибутов.
HTML 4.0 Frameset - указывает на то, что данный документ является контейнером для набора фреймов.
Примеры
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Strict//EN ”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Traditional//EN ”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Frameset//EN ”>
Элемент HTML
< HTML >
< HEAD >
< TITLE >заголовок документа </ TITLE >
</ HEAD >
< BODY >
тело документа
</ BODY >
</ HTML >
или для документа, определяющего набор фреймов
<HTML>
<HEAD>
<TITLE> заголовок документа </TITLE>
</HEAD>
< FRAMESET >
определение набора фреймов
</FRAMESETT>
</HTML>
Атритуты:
Собственные:
Атрибут VERSION – указывает версию докумнта – отменен в новом стандарте.
Общие:
Ru – русский
En – английский
" en - US ": американская версия английского.
И др.
Двухбуквенные первичные коды зарезервированы для сокращений языков по стандарту [ISO639]. Сюда входят коды fr (французский), de (немецкий), it (итальянский), nl (голландский), el (греческий), es (испанский), pt (португальский), ar (арабский), he (иврит), ru (русский), zh (китайский), ja (японский), hi (хинди), ur (урду) и sa (санскрит).
Ltr слева -направо
rtl справо-налево
Элемент HEAD
Содержит инофрмацию о текущем документе, такую как заголовок документа, ключевые слова, и иную информацию, которая напрямую не отражается в документе, но может быть эффективно использована различными поисковыми системами.
Пример:
<HEAD>
<TITLE> заголовок <TITLE>
<META NAME=”Keywords” CONTENT=”expert systems,
database systems”>
</HEAD>
Собственные атрибуты:
PROFILE указывает расположение одного или нескольких файлов, содержащих определения META.
Общие атрибуты:
LANG – информация о языке
|
DIR – направление текста
Элемент TITLE
Каждый действительный документ HTML должен обязательно иметь элемент TITLE. Большинство броузеров отображают строку, находящуюся внутри контейнера TITLE в заголовке окна. Хотя явных ограничений на длину строки не задано, следует ограничиться 40-50 символами. И еще одно замечание при формировании этой строки Вы должны четко представлять контингент Ваших пользователей, поэтому иногда желательно заголовок представить на том языке, на котором работает большинство Ваших пользователей.
Пример:
<TITLE> My first HTML page </Title>
Элемент META
Этот элемент используется для включения различной информации о самом документе, о авторе и т.д. Кроме того этот элемент позволяет передать клиентской части (броузеру) и Web-серверу некоторые инструкции. Этот элемент используется в формате «свойство-значение».
Например для указания автора нужно указать инструкцию
<META NAME = “Author” CONTENT =”Tatiana Karpova ”>
В общем случае можно определить любые свойства и задать им значения, но часть свойств является общепринятыми:
· Author – автор документа
· Copyright - информация об авторском праве.
· Description – описание документа для поисковых машин
· Generator – название программы, с помошью которой создан документ.
· Keywords - ключевые слова для поисковых машин.
Собственные атрибуты:
NAME – имя свойства
CONTENT – значение свойства
Общие атрибуты LANG, DIR
Элемент BODY
Устаревший способ
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Traditional//EN ”>
< HTML >
< HEAD >
< TITLE > Оформление документа устаревшим </ TITLE >
</HEAD>
<BODY BGCOLOR=”#FFFFC4” TEXT=”#000000” LINK= “#FF0000”
VLINK=”#800000” ALINK=”#00FF00”>
тело документа
</ BODY >
</ HTML >
LANG, DIR
TITLE – заголовок элеимента
Элементы уровня блока могут содержать внутри себя как встроенные элементы, так и другие элементы уровня блока. Иными словами элементы уровня блока образуют более глобальную структуру, нежели встроенные.
LANG, DIR
TITLE – заголовок элеимента
LANG, DIR
TITLE – заголовок элемента
LANG, DIR
ФРЕЙМОСОДЕРЖАЩИЕ ДОКУМЕНТЫ
Элемент FRAMESET
Общие атрибуты
|
LANG, DIR
TITLE – заголовок элеимента
BORDERCOLOR – цвет рамки.
Элемент NOFRAMES
Задается как альтернатива если броузер не поддерживает фреймы.
Это контейнер.
Элемент IFRAME
Позволяет встроить один фрем в другой наподобии матрешки. Такие фреймы известны под названием плавающих.
<IFRAME HEGGHT=250 SRC=”test.html” NAME=”iframe1”>
текст, кот покажется если не поддерживается плавающий фрейм.
</ IFRAME >
(поддерживается MSIE 3.0 Nc 6.0)
Собственные атрибуты
SRC
NAME
LONGDESC
WIDTH – ширина
HEIGHT – высота
SCROLLING
FRAMEBORDER
Общие атрибуты
LANG, DIR
TITLE – заголовок элеимента
ССЫЛКИ
Элемент A
Во вложенном каталоге
< A HREF =” CAT / g 2. html ”> оглавление </ A >
Если отличается то
http:// www. anyhost. ru:8080/ hiddendir / foo. html
URL (Universal Resource Locator) – это часть адреса
Собственные атрибуты:
name = cdata [CS]
Этот атрибут дает якорю имя, так что он может служить целью другой ссылки. Значением этого атрибута должно быть уникальное имя. Область действия имени - текущий документ. Обратите внимание, что этот атрибут использует общее пространство имен с атрибутом id.
href = uri [CT]
Этот атрибут определяет местоположение ресурса Web, определяя связь между текущим элементом (исходным якорем) и целевым якорем, определяемым этим атрибутом.
hreflang = langcode [CI]
Этот атрибут задает базовый язык ресурса, назначаемого атрибутом href, и может использоваться, только если указан атрибут href.
type = content-type [CI]
Если этот атрибут задан, он определяет тип части содержимого, например, результат обратного действия ссылки на ресурс. Типы содержимого определены в разделе [MIMETYPES].
rel = link-types [CI]
Этот атрибут описывает отношение из текущего документа к якорю, заданному атрибутом href. Значением этого атрибута является разделенный пробелами список типов ссылок.
Типы ссылок
Alternate | |
Stylesheet | Внешняя таблица стилей |
Start | |
Next | |
Prev | |
Contents | |
Index | |
Glossary | |
Copyright | |
Chapter | |
Section | |
Subsection | |
Appendix | Приложение для данного док |
Help | |
Bookmark | Закладка. |
rev = link-types [CI]
Этот атрибут используется для описания обратной ссылки из якоря, задаваемого атрибутом href, в текущий документ. Значением этого атрибута является разделенный пробелами список типов ссылок.
charset = charset [CI]
Этот атрибут задает кодировку символов назначаемого ссылкой ресурса.
Общие атрибуты:
TABINDEX – порядок навигации
ACCESSKEY горячая клавиша
TARGET – имя целевого окна
Целевые имена кадров
Целевые имена кадров (%FrameTarget; в DTD) должны начинаться с алфавитных символов (a-zA-Z). Агенты пользователей должны игнорировать все остальные имена.
Следующие target names зарезервированы и имеют специальные значения.
|
_blank
Агенты пользователей должны загружать документ в новое окно без имени.
_self
Агенты пользователей должны загружать документ в тот же кадр, в котором находится ссылающийся на него документ.
_parent
Агенты пользователей должны загружать документ в непосредственный родительский кадр этого кадра во FRAMESET. Это значение эквивалентно _self, если текущий кадр не имеет родительского кадра.
_top
Агенты пользователей должны загружать документ в полное окно (закрывая все остальные кадры). Это значение эквивалентно _self, если у текущего кадра нет родительского кадра.
Элемент LINK
Может располагаться только внутри элемента < HEAD >
HREF – базовый URI
Списки.
Использование списков позволяет более удобно и наглядно представлять текст в окне браузера. Язык HTML поддерживает ненумерованные и нумерованные списки, списки определений.
Ненумерованный список определяется метками <UL></UL>. Нумерованный - метками <OL></OL>. Элементы списка отмечаются метками <LI>. В нумерованном списке элементы нумерует сам браузер. Примеры:
<UL>Список коней: <LI>Сивка <LI>Бурка <LI>вещая Каурка </UL> | <OL>Список коней: <LI>Сивка <LI>Бурка <LI>вещая Каурка </OL> |
Это дает на экране следующие списки: | |
Список коней:
| Список коней:
|
Заметим, метка <LI> непарная - т.е. метки </LI> не существует.
Список определений ограничивается метками <DL></DL>. Элементы списка отмечаются следующим образом: меткой <DT> - определяемое слово или выражение, меткой <DD> - само определение. Пример:
<DL>Расшифровка меток:
<DT>UL<DD>unordered list - ненумерованный список
<DT>OL<DD>ordered list - нумерованный список
<DT>LI<DD>list item - элемент списка
<DT>DL<DD>definition list - список определений
<DT>DT<DD>definition term - определяемый термин
<DT>DD<DD>definition description - описание определения
</DL>
Результат на экране:
Расшифровка меток:
UL
OL
LI
List item - элемент списка
DL
DT
DD
definition description - описание определения
Обратите внимание, метки <DT> и <DD> также, как и <LI>, не имеют парных закрывающих меток. В метке <DL> можно использовать аттрибут COMPACT, если его применить в предыдущем примере (<DL COMPACT>), то результат выглядел бы так:
Расшифровка меток:
UL
OL
LI
List item - элемент списка
DL
DT
DD
definition description - описание определения
Списки могут быть произвольно вложены (разумно ограничиться тремя уровнями вложения). Каждый элемент списка может содержать несколько абзацев.
В списках могут использоваться следующие аттрибуты:
TYPE - определяет стиль представления элементов списка (для меток <UL> и <OL>), подробнее ниже;
START - (только для нумерованного списка <OL>) определяет значение первого элемента списка. По умолчанию 1. Обратите внимание, что несмотря на то, что значение аттрибута - всегда числовое значение, элемент списка может быть быть нечисловым - в зависимости от значения аттрибута TYPE;
VALUE - (только для метки <LI>) устанавливает номер текущего элемента списка. Как и в предыдущем случае элемент списка может быть нечисловым, хотя его значение - всегда число.
Значение аттрибута TYPE для ненумерованного списка может быть следующим:
|
|
|
Для нумерованного списка значение аттрибута TYPE может быть одним из следующих:
Значение TYPE | Стиль представления элемента списка | |
1 | арабские цифры | 1,2,3,... |
a | строчные буквы | a,b,c,... |
A | прописные буквы | A,B,C,... |
i | римские цифры | i,ii,iii,... |
I | римские цифры | I,II,III,... |
По умолчанию значения TYPE устанавливаются в зависимости от степени вложенности списка.
ТАБЛИЦЫ
Таблица 1. | |
Ячейка 1 | Ячейка 2 |
Ячейка 3 | Ячейка 4 |
Такая табличка реализуется следующим кодом:
<TABLE BORDER="1" BGCOLOR="#A0DDA0"> <CAPTION>Таблица 1.</CAPTION> <TR> <TD>Ячейка 1</TD> <TD>Ячейка 2</TD> </TR> <TR> <TD>Ячейка 3</TD> <TD>Ячейка 4</TD> </TR> </TABLE>Таблица начинается с метки <TABLE> и заканчивается </TABLE>. Метка <TABLE> может включать следующие аттрибуты:
Таблица может иметь заголовок - метки <CAPTION> и </CAPTION>. Располагаться он должен непосредственно после метки <TITLE... >. Заголовок может иметь аттрибут ALIGN, определяющий положение заголовка относительно таблицы:
TOP | - значение по умолчанию, заголовок над таблицей по центру; |
LEFT | - заголовок над таблицей слева; |
RIGHT | - заголовок над таблицей справа; |
BOTTOM | - заголовок под таблицей по центру. |
Строки таблицы начинаются тэгом <TR> и заканчиваются </TR>. Могут иметь аттрибуты:
Каждая ячейка таблицы начинается меткой <TD> и заканчивается </TD>. Может иметь следующие ттрибуты:
Кроме того любая ячейка таблицы может быть определена не метками <TD></TD>, а метками <TH></TH> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри выделен полужирным шрифтом и отцентрирован.
Ряды таблицы могут быть объединены в группы. Для этого служат следующие метки:
<THEAD>...</THEAD> - здесь объединяются ячейки верхнего заголовка таблицы;
<TFOOT>...</TFOOT> - ячейки нижнего заголовка таблицы;
<TBODY>...</TBODY> - а здесь объединяются ряды собственно содержимого таблицы (может быть несколько групп TBODY).
Каждая группа должна содержать хотя бы один ряд TR. Группа TFOOT должна находиться до TBODY, хотя на экране она будет располагаться внизу таблицы (Netscape не поддерживает это). Все гуппы должны содержать одинаковое количество столбцов. Использование групп рядов: в идеале они предназначены для просмотра (скроллинга) больших таблиц независимо от заголовков. К сожалению, большинство браузеров пока не поддерживают эту функцию. Можно использовать группы рядов для рисования линий только между ними (а не между всеми рядами), или выборочного форматирования частей таблицы (горизонтальное, вертикальное выравнивание содержимого ячеек).
Столбцы таблицы также могут быть объединены в группы при помощи меток <COLGROUP> и <COL>. Метка COLGROUP позволяет объединить столбцы в группы, которые могут выделяться, например, использованием аттрибута RULES элемента TABLES. Метка COL позволяет применить какие-либо аттрибуты (выравнивание и т.п.) к нескольким столбцам не объединяя их в структурную группу.
<COLGROUP> может содержать следующие аттрибуты:
<COL> содержит те же аттрибуты, что и <COLGROUP>. Если ширина столбцов задана и в COL, и в COLGROUP, то выбирается значение метки COL. Метка <COL> непарная, т.е. закрывающего тэга у нее нет.
Пример. Будет создана таблица шириной в 20 столбцов. Первый столбец будет 40 пикселов шириной с выравниванием влево. Второй - минимально возможной ширины с выравниванием по центру. Остальные 18 - шириной в 20 пикселов и выравниванием по центру.
<TABLE> <COLGROUP ALIGN="CENTER"> <COL ALIGN="LEFT"> <COL WIDTH="0*"> <COL SPAN="18"> </COLGROUP> <TR>.....Содержимое таблицы...... </TABLE>К сожалению, браузеры Netscape поддерживают далеко не все возможности таблиц. В результате таблица, которая отлично выглядит в Microsoft Explorer, в Netscape может оказаться вообще без рамок.
Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет ( - обязательно должен набираться строчными буквами и закрываться точкой с запятой).
Любая ячейка таблицы может содержать в себе еще одну таблицу.
Возможные ошибки в таблицах:
Рисунки.
В свою страничку можно вставить рисунок. Для этого нужен сам рисунок - обычно используют изображения в формате GIF (файлы с расширениями.gif) и JPEG (файлы с расширениями.jpg и.jpeg) и строчка HTML-тексте, указывающая браузеру, где этот рисунок находится:
<IMG SRC="picture.gif"> - рисунок "picture.gif" находится в том же каталоге, что и текущий документ;
<IMG SRC="images/picture.gif"> - перейти в подкаталог "images" текущего каталога и взять файл оттуда;
<IMG SRC="../images/picture.gif"> - подняться вверх на один шаг, перейти в каталог "images" и взять рисунок оттуда;
<IMG SRC="http://www.fortunecity.com/business/fax/339/artics/practic/myphoto.gif"> - указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере, или используется картинка с другого сайта.
У данного тэга могут быть следующие аттрибуты:
Значения n перечисленных выше атрибутов по умолчанию равны нулю.
Рисунок может быть ссылкой. Для этого <IMG SRC="..."> разместите между тэгами <A HREF="..."> и </A>. Вокруг рисунка появится рамка, показывающая, что он является ссылкой. Если рамка портит внешний вид документа, то укажите в атрибутах рисунка BORDER="0".
Что такое CSS и для чего это нужно? CSS - Cascading Style Sheets, что означает дословно "каскадные таблицы стилей". Смысл - описывается стиль всего документа или сайта в целом, либо отдельных его элементов. Т.е. вы можете один раз определить, что, например, на всех страницах вашего сайта все заголовки будут красного цвета, абзацы выровнены по центру, а ссылки останутся неподчеркнутыми (то-то посетители помучаются, пока найдут их!). И к тому же вы сможете изменить стиль вашей страницы или даже всего сайта, подправив в тексте лишь пару строк!
Чтобы сразу объяснить суть таблиц стилей, рассмотрим пример. Допустим, у вас есть такая страница:
<HTML><HEAD><TITLE>Изучим таблицы стилей!</TITLE></HEAD><BODY><H1>Большой заголовок</H1><H2>Заголовок поменьше</H2><P>А это уже абзац - самый обычный абзац.</P></BODY></HTML>А теперь где-нибудь в заголовке страницы (т.е. в секции HEAD) разместим тэг <STYLE>:
<STYLE TYPE="text/css"><!--H1 { font-size: 40px; background: red; text-align: right;font-family: helvetica, arial, sans-serif }H2 { font-size: 20px; font-style: italic; font-family: helvetica, arial, sans-serif }P { background: silver; text-align: center; font-family: courier, fixed,monospace }--></STYLE>Можете набрать этот пример в каком-либо текстовом редакторе и сохранить затем с расширением htm или html (хорошая практика!), а можете сразу посмотреть этот пример в действии.
Теперь разберем этот пример подробнее. Аттрибут TYPE="text/css" и информация в комментарии (между "<!--" и "-->") как раз и определяют стиль нашей страницы. Метки комментария здесь используются для совместимости со старыми версиями браузеров - они просто проигнорируют незнакомый тэг <STYLE> и содержимое комментария, и ваша страница будет показана как самая обычная HTML-страница. Строка H1 указывает браузеру, что всякий текст, находящийся между метками <H1> и </H1>, должен отображаться шрифтом helvetica, arial или sans-serif высотой в 40 пикселов на красном фоне и быть выровнен вправо. Строка H2 определяет, что шрифт в заголовках <H2> должен быть наклонным и высотой в 20 пикселов из семейства helvetica. И, наконец, строка P определяет поведение всех абзацев на странице: на сером фоне, выровнены по центру, шрифт - courier, fixed или monospace.
Вот и все. Как говорится, просто и со вкусом. Таким образом вы можете управлять проактически всем, что появляется на вашей странице. Т.е. практически любому тегу можно придать новые свойства. А теперь подробнее.
Font-family - шрифт, используемый для отображения данного элемента. В идеале, конечно, было бы неплохо, если бы у всех ваших посетителей были одинаковые наборы шрифтов. На практике же такого не бывает. Поэтому указывайте список шрифтов. Браузер просматривает этот список пока не встретит имеющийся в наличии шрифт. Например, компьютер с ОС Windows как правило имеет шрифт Arial, в компьютерах Macintosh наиболее похож на него шрифт Helvetica. В конце списка желательно иметь один из следующих: serif, sans-serif, monospace, fantasy или cursive. Пример: "P { font-family: arial, helvetica, sans-serif }"
Font-size - размер шрифта. Может указываться в точках (pt), пикселах (px).
Font-style: italic - курсив (наклонный шрифт).
Font-weight: bold - жирный шрифт. Значение может быть также числовым, только различные браузеры реагируют на это по-разному.
Text-transform - преобразование текста: допустимые значения: uppercase (все буквы будут заглавные), lowercase (все буквы будут строчные), capitalize (каждое слово будет начинаться с заглавной буквы) и none (т.е. никаких действий).
Text-decoration - выделение текста, допустимые значения: underline (подчеркнутый), line-through (перечеркнутый), blink (мигающий) и none(ничего). Например, чтобы ссылки в тексте не выделялись подчеркиванием, можно включить в заголовок документа следующий текст:
<STYLE TYPE="text/css"><!--a:link {text-decoration: none}a:visited {text-decoration: none}a:active {text-decoration: none}--></STYLE>Color - изменение цвета текста, линий, рамок. Скажем, в предыдущем примере мы сделали так, что ссылки на странице не подчеркиваются. Чтобы они не выделялись еще и цветом, сделаем одинаковым цвет ссылок и текста (для краткости здесь и далее метки STYLE TYPE...будут опускаться):
body {color: black}a:link {color: black; text-decoration: none}a:visited {color: black; text-decoration: none}Т.е. цвет текста на странице - черный (1-я строчка), ссылки (обычно голубого цвета) - неподчеркнутые черного цвета (2-я строчка), посещенные ссылки (обычно фиолетовые) - также черного цвета и неподчеркнутые (3-я строчка).
Background-color - определяет цвет фона для какого-либо элемента. Например:
strong {background-color: yellow}
Текст между метками <STRONG> и </STRONG> будет показан на желтом фоне.
Background-image - позволяет сделать фон в виде рисунка. Пример:
blockquote {background-image: url(../pictures/million.jpg)}
В результате цитаты (т.е. текст между метками <BLOCKQUOTE> и </BLOCKQUOTE>) будет размещен на фоне рисунка "million.jpg". Примером служит данный абзац.
Text-align - выравнивание текста. Применяется только в абзацах, заголовках и списках. А также для выравнивания картинок на страничке (несмотря на слово "text"). Например:
IMG {text-align: center}
Text-indent - позволяет делать отступ в первой строке абзаца (красная строка - как мы привыкли видеть в книгах). Ширина отступа измеряется в пикселах (px) или точках (pt). Может быть также величиной отрицательной, тогда первая строка будет выступать влево от остального текста. Пример (он же и применен к этому абзацу):
p {text-indent: 10pt}
Margin - устанавливает отступ текста. Пример использования:
body {margin-left: 10pt; margin-right: 15pt}
В результате текст на странице будет отступать слева на 10 точек от края страницы, справа - на 15 точек. Также возможны варианты: margin-top (отступ сверху) и margin-bottom (отступ снизу).
Рамки. Каждый элемент может заключен в рамку. Рамка может иметь следующие свойства:
Значение | Описание | Вид рамки (в вашем браузере!) |
dashed | пунктирная - в виде черточек | dashed |
dotted | пунктирная - в виде точек | dotted |
double | двойная линия | double |
inset | с эффектом вдавленности | inset |
outset | с эффектом выпуклости | outset |
ridge | выпуклая рамка | ridge |
groove | врезанная рамка | groove |
solid | непрерывная линия | solid |
Можно определить каждую сторону рамки отдельно. Для ширины рамки это выглядит так: border-top-width (ширина верхней стороны), border-right-width (правая сторона), border-bottom-width (нижняя сторона) и border-left-width (левая сторона). Для определения цвета и стиля достаточно просто перечислить свойства в таком порядке: верх-право-низ-лево. Пример:
blockquote {border-top-width: 3px; border-right-width: 5px; border-bottom-width: 3px; border-left-width: 5px; border-color: red green navy green; border-style: double double solid double }
Здесь определена рамка со следующими границами: верхняя - красная двойная в 3 пиксела шириной, правая и левая - зеленые двойные в 5 пикселов шириной, нижняя - синяя сплошная шириной в 3 пиксела.
А что, если захочется изменить стиль только одного абзаца? Или каждому абзацу определить свой стиль? Можно! В таком случае надо использовать аттрибут STYLE с необходимыми свойствами. Например:
<P STYLE="text-indent: 15pt; color: red; background-color: white">
или
<H3 STYLE="background-color: silver; border-width: 3px; border-style: groove;
border-color: #F0F0F0; text-align: center">
Теперь представим такую ситуацию: у вас на странице 25 абзацев, из них 15 вы хотите выдержать в каком-то определенном стиле. Чтобы не писать аттрибут STYLE каждый раз, можно поступить следующим образом: определить в заголовке док
|
|
Кормораздатчик мобильный электрифицированный: схема и процесс работы устройства...
Семя – орган полового размножения и расселения растений: наружи у семян имеется плотный покров – кожура...
Архитектура электронного правительства: Единая архитектура – это методологический подход при создании системы управления государства, который строится...
Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!