Добавлен: 03.07.2023
Просмотров: 292
Скачиваний: 3
Но, кроме того, нам ещё нужно добавить в секцию HTML-заголовка (тег <HEAD>) нашей страницы ссылку на таблицу стиля, чтобы Web-обозреватель смог её найти. Эта ссылка будет иметь следующий вид:
<LINK REL="stylesheet" HREF=".../styles.css" TYPE="text/css">.
В зависимости от расположения таблиц стилей различают следующие разновидности:
- встроенные;
- внутренние;
- внешние.
Встроенная таблица стилей определяется в теге <style type="text/css">, который обычно располагается в разделе страницы <head>. Внутри этого раздела <style> находится список имён тегов, называемых селекторами, которым присваивают объявления стилей (свойства и значения). Когда эти объявления сделаны, они автоматически применяются к определённым тегам.
Пример формы встроенной таблицы стилей:
<style type="text/css">
selector {property:value [; property:value] ...}
</style>
Селектор является именем тега (без охватывающих символов "<" и ">"). Свойства и значения стиля тега представлены в виде списка объявлений стиля, разделённом точками с запятой и помещённом внутри пары фигурных скобок «{ }». Например, следующий код определяет объявления стиля для тега <hr/>, задавая такие же параметры стиля, как и предыдущая линейная таблица стилей.
Пример применения встроенной таблицы стилей:
<head>
<title>Пример встроенной таблицы стилей</title>
<style type="text/css">
hr {height:10px; width:50%; color:red; text-align:center}
</style>
</head>
При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый лёгкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега. Этот способ не слишком отличается, к примеру, от прямого описания внешнего вида при помощи тега <font>.
Таблица стилей, заданная внутри элемента HTML при помощи атрибута style, называется внутренней.
Пример формы внутренней таблицы стилей:
<H1 style=”color: green”> Зелёный заголовок </H1>
Определение стилей происходит при помощи классов, которые представляют собой списки с определением всех необходимых параметров оформления.
При использовании этого метода описание стилей необходимо разместить в секции заголовка:
<head> ....
<style type="text/css">
<!--
.header {
text-align :left;
font-size : 18pt;}
.green {color : green; }
-->
</style>
</head>
Теперь эти стили можно применять в любом месте html-кода. Для этого используется следующая конструкция:
<p class=header>Текст написан стилем header<p>
<p class=green>Текст написан зелёным цветом<p>
Кроме определения новых классов мы также имеем возможность переопределять стандартные теги. Например, тег <p>:
<style type="text/css">
p { text-align : center; font-size :12pt;}
</style>
Теперь весь текст, заключённый в теги <p> </p>, будет выглядеть так, как определено данным стилем. Это очень удобно и позволяет легко адаптировать уже существующие странички к использованию стилей. Кроме того, это несколько уменьшает объём файла за счёт отсутствия лишних атрибутов class.
Недостаток внутренних таблиц стилей заключается в их неуниверсальности. В результате использования атрибута style только один заголовок в документе станет зелёным. Для остальных придётся точно так же задавать атрибут style либо следует создать встроенную таблицу стилей.
Бывают случаи, когда создаваемый сайт состоит из десятков страниц и каждая страница должна иметь свою таблицу стилей. Обычно все страницы сайта выглядят одинаково и имеет одну таблицу стилей, описывающую её элементы. Чтобы не дублировать эту страницу между тегами <style> и </style> на каждой странице, её можно поместить в отдельный файл с расширением .css и подключить к html-документу при необходимости. Такие таблицы называются внешними.
Преимущество внешних таблиц заключается в том, что, однажды загрузив её, браузер кэширует информацию и при повторной загрузке берет её не с web-cepвepa, а с локального диска. Таким образом, при загрузке страниц wеb-сайта с одной таблицей стилей экономят на времени загpузки внешней таблицы стилей, то есть содержащего её файла css. Второе преимущество опять же удобство редактирования таких страниц. Достаточно исправить стиль оформления элемента в одном месте в файле, содержащем таблицу стилей, и на всех НТМL-страницах, использующих эти стили, внешний вид элементов изменится.
Таким образом, главное условие выживания сайта - юзабилити. Причиной тому является тот простой факт, что сегодня в интернете содержится очень большое количество сайтов, поэтому если пользователь наткнулся на проблемы на одном сайте, он может очень быстро уйти с него и найти более приятный и понятный для него сайт. Статистика показывает, что сегодня приблизительно 10% бюджета всего сайта тратится именно на юзабилити.
Юзабилити невозможен без привлекательного дизайна. За дизайн сайта отвечают CSS – каскадные таблицы стилей. В следующей части работы рассмотрим сам процесс создания сайта средствами HTML и CSS.
2. Создание и оформление web-приложения
2.1 Выбор и обоснование средств реализации
Для создания сайта использовались следующие средства:
- HTML;
- CSS;
- JavaScript.
HTML (Hypertext Markup Language) - язык разметки гипертекста. Был изобретён в 1990 году учёным Тимом Бёрнсом-Ли.
Каждый HTML-документ должен отвечать какой-либо версии спецификации HTML, в свою очередь документ необходимо начать со строки декларации версии HTML <!DOCTYPE>, если этого не указать, то добиться от браузера корректного отображения документа становиться более труднее.
Пример
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN>
В данном примере указывается, что HTML соответствует международной спецификации версии 1.0.
Основные понятия языка HTML - тег и атрибуты.
Тег - оформленная единица HTML-кода. Например, <html>, <body>, <h1>, <h2> и т.д. Все тэги имеют одинаковый формат: они начинаются знаком «<» и заканчиваются знаком «>» [10, 12].
Атрибут - это своего рода дополнительная информация. Атрибуты всегда записываются внутри тега, затем следует знак равенства и детали атрибута, заключённые в двойные кавычки.
Пример
<h1> Крупный заголовок </h1>
<h2 align="center"> Заголовок чуть поменьше </h2>
Рассмотрим процесс создания сайта с использованием html.
Весь код помещается в тег <html>, </html>. Знаками < > обозначаются все теги, <html> означает, что начинается код, а </html> - закрывает код.
Тег <head> - «голова документа», отвечает за заголовок страницы в окне браузера.
Teг <title > - отвечает за заголовок страницы.
Тело документа находится в парном тeгe <body>. Внутри угловых скобок написано не только название тeгa, но и его атрибуты. Написав данный атрибут bgcolor="#000000" означает, что фон страницы будет чёрного цвета.
Существует ещё множество тегов для форматирования текста, абзаца, таблиц, списков и т.д. Рассматривать их не входит в поставленные задачи, так как целью работы является разработка стилей, поэтому приступим к рассмотрению каскадных таблиц стилей.
Каскадные таблицы стилей - CSS (англ. Cascading Style Sheets) - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента web-страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов. Приведём пример: нам нужно создать жирный красный подчёркнутый текст.
Пример HTML:
<font color="red"><strong><u> Текст </u></strong>
</font>
Если подобный стиль нужно использовать несколько раз, тут нам и поможет СSS.
Каскадность заключается в том, что стили могут переопределяться. Например, мы определили во внешнем стилевом файле, что текст в теге <p> должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге <p> должен быть написан шрифтом в 12 пунктов, то текст будет выведен именно таким кеглем - т.е. стиль в заголовке странички переопределил стиль во внешнем файле.
Структура и правила
Селекторы.
Синтаксис селектора: selektors {свойства 1: значение; свойство 2: значение; ...}
Любой тег HTML - по сути может выступать селектором CSS. Стиль элемента определяет свойства селектора, для которого он определён.
Пример
H5 {color:blue; size:25pt;}
Все элементы H5 в документе будут синего цвета, размером в 25 точек (pt, point).
Классовые селекторы.
Классовые селекторы можно описать двумя способами.
Синтаксис классовых селекторов: selektors.class {свойства 1: значение; свойство 2: значение; ...}
CLASS - атрибут элемента в HTML, определяющий его класс. В CSS можно описать собственные стили для различных классов одних и тех же элементов.
Пример
H1.blue {color:blue; size:20pt;}
Все элементы H1 с атрибутом CLASS="blue" станут синими.
Классы могут так же быть описаны без привязывания их к определённым элементам.
Синтаксис: .klass {свойства 1: значение; свойство 2: значение; ...}
Пример
.green {color:green;}
В данном варианте все элементы с атрибутом CLASS=«green» станут зелёными.
ID селекторы.
Cинтакс ID селектора: #id {свойства 1: значение; свойство 2: значение; ...}
ID - индивидуально именованный стиль. C его помощью можно создавать стилистические исключения cреди элементов одного класса.
Идентификаторы используются в основном для придания одному или нескольким элементам одного класса индивидуальных свойств. Скажем, мы создали класс blue - синий курсив. Но нам понадобился жирный подчёркнутый текст синим курсивом. Конечно, можно создать новый класс, но проще описать ID. Например "bold-line". И все элементы класса blue с значением ID «bold-line» станут жирным подчёркнутым синим курсивом. Произойдёт как бы синтез свойств класса blue и идентификатора boldunderline.
Пример
<html>
<head>
<title> Первые шаги в CSS </title>
</head>
<style>
.blue {color:blue; font-style:italic}
#bold-line {text-decoration:underline; font-weight:bold}
</style>
<body>
<p class="blue"> Первая работа. </p>
<p class="blue" id=«boldunderline»> Пока ещё в стадии разработки ... </p>
<p id="bold-line">... Но скоро откроется </p>
</body>
</html>
Как видно из примера, атрибут ID может быть использован без указания класса.
Контекстуальные селекторы.
Контекстные селекторы (англ. Contextual Selectors) - это сочетания нескольких обыкновенных селекторов. Стиль задаётся только элементам в заданной последовательности в зависимости от каскадного порядка.
Пример
P EM {color:silver;}
В данном примере все элементы в теге <EM> внутри элементов тега <P> будут иметь заданный стиль.
Придание нескольким элементам одинаковых свойств.
Скажем нам нужно придать нескольким элементам страницы одинаковые свойства. В этом случае при определении селекторы перечисляются через запятую перед блоком свойств.
Пример
h1,h2,h3,p,strong {color:green; font-style:italic;}
Все элементы h1, h2, h3, p и strong будут зелёными.
Псевдоклассы и псевдоэлементы.
Синтаксис: selectors: pseudo class {свойства 1: значение; свойство 2: значение; ...}
selectors.klass: pseudo class {свойства 1: значение; свойство 2: значение; ...}
selectors: pseudo element {свойства 1: значение; свойство 2: значение; ...}
selectors.klass: pseudo element {свойства 1: значение; свойство 2: значение; ...}
Псевдоклассы и псевдоэлементы - это особые классы и элементы, присущие CSS и автоматически определяемые поддерживающими CSS браузерами. Псевдоклассы – это атрибуты, назначаемые строго к селекторам с намерением определить реакцию или состояние для данного селектора. в основном псевдоклассы используют для задания стилей ссылок. Например: link для непосещённой ссылки, :hover для ссылки при наведении, :active для нажатой и удерживаемой ссылки и :visited для посещенной. Псевдоэлементы - это особый вид свойств CSS, которые позволяют работать не над самим элементом, а над его отдельной частью. Например: стиль первой буквы или первой строки в текстовом блоке, добавляет содержимое до или после элемента, стиль выделенного пользователем текста.
Все параметры, используемые для определения стиля, условно можно разделить на несколько больших групп:
- управляющие видом шрифта (гарнитура, кегль, цвет, наклон, жирность)
- управляющие форматированием абзаца (выравнивание, интерлиньяж, расстояние между словами, отступ красной строки)
- управляющие свойствами блока (отступы слева-сверху-справа-снизу, местоположение блока на страничке, видимость блока)