- •Уральский государственный педагогический университет
- •Введение
- •1.1. Информационные ресурсы Интернет. Основные понятия.
- •1.2. Решение поисковых задач. Электронная почта.
- •Электронная почта
- •1.3. Информационная технология www.
- •Существует множество редакторов html-файлов, которые автоматически генерируют код html, но с точки зрения минимального объема и быстродействия они уступают страницам, созданным в блокноте.
- •Ip address (ip-адрес) – номер хоста, выраженный 32-разрядным числом, записанным четырьмя байтами, разделенными точкой (например, 234.049.123.101).
- •1.4. Работа с графикой.
- •2. Язык разметки html.
- •2.1. Синтаксис языка html, структура документа.
- •Все теги нтмl по их назначению и области действия можно разделить на следующие основные группы:
- •2.2. Основные теги и их атрибуты. Разметка текста. Гиперссылки.
- •2.3. Графика, звук и видео. Активные изображения.
- •2.4. Таблицы. Оформление таблиц. Формы на странице. Создание форм.
- •2.5. Каскадные листы стилей. Файлы css.
- •3. Размещение страниц в Интернете.
- •3.1. Цели, основные этапы проектирования сайта.
- •3.2. Требования, предъявляемые к представлению информации и Web-дизайну
- •3.2 Анализ основных требований к дизайну web-ресурсов.
- •Основные типы серверов и предоставляемые ими услуги
- •Список поисковых серверов и каталогов
- •Основные возможности программы Internet Explorer 5.0
- •Escape-последовательности cer (Character Entity Reference)
- •Основные цвета
- •Базисные элементы html
- •Основные атрибуты и их значения
- •Единицы измерения значений свойств
- •Глоссарий
- •Литература
2.5. Каскадные листы стилей. Файлы css.
CSS Cascading Style Sheets (Таблицы каскадных стилей) – это набор правил оформления и форматирования, который может быть применен к различным элементам HTML- страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходится каждый раз описывать эти свойства. Применяя CSS, Вы можете один раз описать свойства элементов и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами. Это напоминает использование стилей в текстовом процессоре типаWord, но имеет более широкие возможности. Главное, это позволяет значительно уменьшить объем результирующего файла, легко вносить изменения в оформление документа и придать единый стиль вашему сайту. Разработчики стандартаHTMLконсорциумW3Cсоздали новый стандартCSS–CascadingStyleSheets. Описания стилей могут размещаться несколькими способами: внутри тегов с атрибутом style, между тэгами заголовка <head></head>в тегах </style>… </style>или в отдельном файле с расширением.css.Селекторы.синтаксис записи стиля: название элемента {свойство: значение;} напр.h1 {color:blue;font-size: 20pt;} – данная директива, управляющая внешней формой отображения объектов на странице, называется селектором. То, что находится внутри фигурных скобок – определение селектора. В случае одинаковых свойств в определениях, селекторы можно группировать, т.е. перечислять через запятую,
напр. h1,h2,h3,h4 {color:red;font-size: 16pt;} Принцип наследования свойств – вложенные теги имеют те же свойства, что и родительские теги. Напр., если стиль задан в теге <body>, то он действует на весь документ.Классы.Класс – уникальное имя какого-либо перечня свойств, начинающееся с точки.Синтаксис записи класса:название.имя класса {свойство: значение;}p.rclass{text-align:right;} Обращение к данному стилю - <pclass=”rclass”>текст</p> Есть возможность не привязывать класс к определенным элементам, тогда допустим синтаксис .gr{color:green;}
Идентификаторы.Это кодовые объектыCSS, позволяющие назначать свойства отдельным компонентамHTML. Обозначение - # в файле .css, или атрибутidв тегах. Синтаксис записи идентификатора: название#имя идентификатора {свойство: значение;}. Также допустим синтаксис типа #iden{color: #FF0000;} для создания идентификатораiden, который может использовать любой элементHTML. Напр. <h1id=”iden”>красный текст</h1> Поскольку стандартCSSпоявился позжеHTML, то не все браузеры поддерживают его в полном объеме. Рекомендуется применять ограниченный набор элементов, называемый безопасным. Стили можно использовать несколькими способами.Первый способ - Вы можете определить стиль для любого тэга отдельно. Для этого нужно в тэг добавить атрибут style и описать его стиль в кавычках. Следующий пример отображает слово "Пример" шрифтом Verdana, размером 150 процентов и красным цветом.
<h3style="font-family:Verdana;font-size:150%;color:red"> Пример </h3>Второй способ –включение тегов <style></style> между тэгами заголовка <head></head> Приведем пример использования стилей, где слово "Пример" отображается шрифтом Comic Sans MS, если такого нет на машине пользователя, используется шрифт Tahoma, жирным шрифтом, размером 25 процентов и темно-зеленым цветом:
|
Описываем стили под именем example : <style><!-- .example{font-family: Comic Sans MS, Tahoma; font-weight: bolder; font-size: 25pt; color: darkgreen;} --></style> Здесь вызываем описания стилей : <div class="example"> Пример </div> |
Третий способ –Если Вы располагаете стили в отдельном файле, тогда между тэгами <head></head> каждого HTML документа нужно добавить ссылку на CSS файл:
<link rel=stylesheet type="text/css" href="example.css">
example.css - это Ваш CSS файл, содержащий описание применяемых стилей. Если он находится в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS. В CSS файле не должны указываться тэги <style></style>. Удобно текст в файле CSS снабжать комментариями, которые записываются в виде /*текст комментария*/.
|
У нас есть файл example.css, содержащий такие параметры (подчеркиваем ссылки только при наведении на них курсором): a { text-decoration: none; } a:hover { color: #FF0000; text-decoration: underline; } |
|
Ссылка на него в HTML документе будет выглядеть так:<link rel=stylesheet type="text/css" href="example.css"> |
CSSможно применять на всех типах серверов без исключения. Чтобы не было проблем с работойCSSна различных клиентских машинах, надо спрятать встроенные директивыCSSвнутрь комментариев. Для расположения в документеHTMLэто будет <!-- --> В таблице приведены некоторые свойства элементов, управляемых с помощью CSS.
|
Свойства шрифта: | |
|
font-family |
Используется для указания шрифта, которым будет отображаться элемент. Пример: p {font-family: Verdana, sans-serif;} |
|
font-weight |
Определяет степень жирности шрифта: lighter (обычный), bold (жирный), bolder (очень жирный) Пример: b {font-weight: bolder;} |
|
font-size |
Устанавливает размер шрифта. Параметр может указываться в %, пикселях или сантиметрах. h1 {font-size: 200%;} или h2 {font-size: 150px;} или h3 {font-size: 400pt;} |
|
Свойства текста: | |
|
text-decoration |
Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркивание текста h4 {text-decoration: underline;} (подчеркивание) h4 {text-decoration: line-through;} (зачеркивание) |
|
text-align |
Определяет выравнивание элемента. Примеры: p {text-align: left} (выравнивание по левому краю) p {text-align: right} (выравнивание по правому краю) p {text-align: justify} (выравнивание по ширине) p {text-align: center} (выравнивание по центру) |
|
text-indent |
Устанавливает отступ первой строки текста в параграфе. Пример использования для тэга h1: h1 {text-indent: 60pt;} |
|
line-height |
Управляет интервалами между строками текста. Пример: p {line-height: 50 %} |
|
Цвет элемента и свойства фона: | |
|
color |
Определяет цвет элемента I {color: yellow;} Пример использования для тэга h3: h3 {color: #0000FF;} |
|
background-color |
Устанавливает цвет фона для элемента. <h3 style=”background-color:gold; color:brown;”> Пример </h3> |
|
background-image |
Использование в качестве фона картинки Пример: background-image: url(fon1.jpg) |
|
background-attachment |
Используется в том случае, если задано фоновое изображение scroll - будет перемещаться вместе с документом в процессе его прокрутки. fixed - данное свойство определяет, будет ли оно фиксироваться относительно окна просмотра. |
|
background-repeat |
Позволяет управлять способом размножения изображения фона. repeat - изображение будет размножена по всему экрану. repeat-x - изображение дублируется в вертикальной плоскости. repeat-y - изображение дублируется в горизонтальной плоскости. no-repeat - изображение не дублируется: отображается только одна копия изображения. |
|
Свойства границ: | |
|
margin-left (слева) margin-right (справа) margin-top (сверху) margin-bottom (снизу) |
Устанавливают значения отступов вокруг элемента. Пример использования для рисунка: img { margin-left: 20pt} img { margin-right: 20pt} img { margin-top: 20pt} img { margin-bottom: 20pt} |
|
Свойства списков: | |
|
list-style-type list-style-image list-style-position |
Вид маркера: none; disk; circle; square – для маркированного списка decimal; lower-roman; upper-roman; lower-alpha; upper- alpha – для нумерованного списка метка в виде картинки из файла, напр. LI {list-style-image: URL(images/marker.gif);} позиционирование outside – по умолчанию, inside – без отступа слева |
|
Вспомогательные свойства | |
|
height width float white-space display |
высота в px, mm, sm % ширина в px, mm, sm % none; left; right – расположение объекта относительно других объектов normal; pre; nowrap – разрешен 1 пробел, несколько пробелов, запрет переноса строки block; list-item; inline; none – управляет взаиморасположением текста и других объектов |