Официальный сайт Федерации Альпинизма и Скалолазания с функцией разграничения доступа к контенту

Министерство образования и науки РФ ФГБОУ ВПО «Сибирский государственный индустриальный университет»

Институт дополнительного профессионального образования ПОЯСНИТЕЛЬНАЯ ЗАПИСКА к выпускной квалификационной работе:

Официальный сайт Федерации Альпинизма и Скалолазания с функцией разграничения доступа к контенту Слушатель Рассомахин Вячеслав Петрович Новокузнецк 2013 г.

Содержание Определения, обозначения и сокращения

1. Теоретическая часть

1.1 Основные этапы разработки Web-сайта

1.2 Классификация сайтов

1.3 Язык разметки HTML

1.4 Каскадные таблицы стилей (CSS)

1.5 Основы программирования на языке PHP

1.6 Системы управления сайтом (CMS)

2. Практическая часть

2.1 Задачи Web-сайта

2.2 Программное обеспечение для реализации сайта

2.3 Выбор концепции дизайна сайта

2.4 Построение базы данных сайта

2.5 Построение основной части сайта

Заключение

Список использованных источников

Приложение, А ER-диаграмма базы данных

Определения, обозначения и сокращения В настоящей ВКР применяют следующие термины с соответствующими определениями:

1. WWW — (англ. World Wide Web) — это единство информационных ресурсов, которые связаны между собой средствами телекоммуникаций и основаны на гипертекстовом представлении данных, разбросанных по всему миру.

2. HTML — (англ. HyperText Mark-up Language) — язык разметки гипертекста, описывающий форму отображения информации на экране компьютера.

3. HTTP — (англ. Hypertext Transport Protocol) — протокол передачи гипертекста. Основой HTTP является технология «клиент-сервер». Обмен сообщениями идёт по схеме «запрос-ответ». Основные методы — GET и POST.

4. URL — (англ. Uniform Resource Locator) — унифицированный адрес ресурса. URL состоит из доменного имени, пути к странице на сайте и имени файла страницы.

5. DNS-сервер — (англ. Domain Name System server) — специальные компьютеры, известные серверы системы доменных имен. Хранят таблицы имен машин с ассоциированными с ними IP-адресами и переводят их в друг в друга для человеческих и компьютерных нужд.

6. FAQ — (англ. Frequently Asked Question (s)) — собрание часто задаваемых вопросов по какой-либо теме и ответов на них.

7. SEO — (англ. Search Engine Optimization) — Поисковая оптимизация. комплекс мер для поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам пользователей.

8. ФАиС — Федерация Альпинизма и Скалолазания

Введение

Интернет для современного человека — это неотъемлемая часть жизни, практически неиссякаемый источник информации, а кроме того и среда максимально ориентированная на покупателя. Практически все товары и услуги можно заказать, не выходя из-за компьютера. А также это огромное рекламное пространство.

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

Предметом исследования данной выпускной квалификационной работы является процесс разработки на основе современных технологий информационного web-сайта для организации занимающейся альпинизмом и скалолазанием.

Целью является разработка Официального сайта Федерации Альпинизма и Скалолазания с разграниченным доступом к контенту, а также функцией форума.

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

1. проанализировать информацию по видам веб-сайтов и способах их создания для выбора наиболее оптимального варианта применительно к цели нашего исследования;

2. осуществить обзор существующих web-технологий на предмет их использования;

3. разработать сайт ФАиС.

1. Теоретическая часть

1.1 Основные этапы разработки Web-сайта Любой сайт, как впрочем, и любой проект, проходит по определенным этапам своего жизненного цикла. Перечислим их:

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

2. На второй стадии проекта разрабатываются:

· дизайн (2 макета)

· HTMLверстка

· программная часть и создание панели управления

· наполнение сайта содержимым

· происходит запуск сайта.

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

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

На рисунке 1 показаны шаги, которые способствуют достижению цели. Определенные этапы могут идти одновременно.

Рассмотрим подробнее этапы создания сайта.

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

Рисунок 1 — Этапы разработки Web-сайта Для достижения всей перечисленных целей первого этапа так же надо определиться с командой. Очень правильно, когда со стороны компании разработчика есть проект-менеджер — человек, который отвечает за проект и является посредником между клиентом и командой разработчиков. Проект-менеджер должен заниматься координацией технических специалистов, в то время как общение с регистратором доменных имен и хостинговой компанией клиент ведет самостоятельно.

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

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

Начать нужно с разработки базового макета. Этот этап можно начать с посещения сайтов конкурентов. Первая задача — изучить лучшие образцы сайтов по аналогичной (или близкой теме) и отметить для себя достоинства и недостатки каждого из них. Учитывая опыт конкурентов, нужно определить общую концепцию дизайна, базовые элементы, цвета, шрифты и прочее. При этом, конечно же, необходимо учитывать пожелания заказчика. Последняя стадия проектирования — создание наброска, каркаса. Его можно сделать на бумаге, можно с помощью специальных программ и сервисов. После обсуждения с заказчиком, можно переходить к разработке дизайна.

Разработка дизайна — это этап определения с формой, в которую облачится содержимое сайта, это детализация макета. Обычно такой дизайн создается в Photoshop или другом графическом редакторе. Готовый дизайн должен практически полностью соответствовать конечному продукту (элементы, цвета, картинки, шрифты). Разработка дизайна включает в себя не только основную страницу, но и разработку также подстраниц, а может быть и «дополнительные версии» для мобильных устройств или каких-то других специальных целей.

Далее можно переходить непосредственно к самому созданию сайта. На этом этапе необходимо «картинку» (детализированный дизайн) превратить в живой сайт. Этот этап начинается с верстки страниц. В зависти от того как, на основе чего и для какой CMS (если она предусмотрена) пишется код. После «нарезки» нужных элементов в Photoshop, происходит процесс разметки. Далее сайт наполняют необходимой информацией.

После написания, отладки, тестирования в различных браузерах и исправления ошибок, наступает следующий этап: запуск сайта. Запуск сайта заключается в публикации его в Интернете. После закачивания сайта на хостинг по ftp, еще раз тщательно все тестируется.

Третий этап — продвижение сайта.

Продвижение сайта — это процесс поднятия его рейтинга в поисковых системах. В России основной поисковой системой считается Яndex, Rambler, и Google. Не так важно, какой поисковой системой будет пользоваться потенциальный клиент — процесс продвижения сайтов одинаков для всех поисковых систем. Для этого осуществляется процедура регистрации в поисковых системах, каталогах, рейтингах и т. д. А для увеличения вероятности нахождения его заинтересованным пользователем, используется оптимизация сайта с применением различных средств раскрутки и продвижения его в сети. Результатом данного этапа является то, что сайт начинает приносить прибыль и работать на имидж компании-владельца.

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

1.2 Классификация сайтов Сейчас в Интернете — глобальной, всемирной компьютерной сети существует огромное количество сайтов. Эти сайты самые разные и отличаются друг от друга по очень большому числу параметров. Но можно ли построить определённую классификацию сайтов, свести всё это многообразие сайтов к определённым их типам и видам? Мы здесь попытаемся сделать это.

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

Статические сайты и веб-страницы. Статические сайты и веб-страницы — это сайты, сделанные по классической технологии html. Веб-страницы таких сайтов написаны полностью на языке html и имеют расширение .htm или .html. Статическими они называются потому, что, набирая определённый адрес (URL), соответствующий сайту или его определённой странице, вы всегда будете видеть одно и то же содержание. Это потому, что статические html-страницы лежат на сервере в неизменном виде и по вашему запросу сервер просто берёт их и отправляет вам в браузер. С динамическими страницами, которые не существуют в заранее предопределённом виде на сервере, а формируются при помощи серверных скриптов, ситуация иная, и, набирая один и тот же адрес, вы, в зависимости от разных условий, можете получать совершенно разное содержание.

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

Динамические сайты и веб-страницы. Как уже было упомянуто, динамические страницы не существуют в неизменном виде на сервере, а формируются при помощи скриптов. Содержание и вид динамической страницы с одним и тем же адресом может быть совершенно различным в зависимости от разных условий — например, в зависимости от времени, от конкретного пользователя, от введённого пользователем запроса и т. п. Скрипты, которые используются для формирования динамических веб-страниц, могут быть написаны на разных языках. Распространёнными языками веб-программирования являются, например, php, perl, asp и т. д. Такие сайты могут предоставлять пользователям интерактивность — например, вводить разные запросы и осуществлять поиск по сайту, отправлять на сайт и сохранять свою собственную информацию и осуществлять общение с другими пользователями (как, например, в гостевых книгах, форумах и т. п.) и многие другие функциональные возможности. Кроме того, ведение и обновление этих сайтов гораздо проще. Минусы динамических сайтов в том, что они требуют поддержку дополнительных технологий, создают повышенную нагрузку на сервер, их сложнее оптимизировать, а ещё использование на сайте скриптов означает потенциальную угрозу для безопасности.

Флэш-сайты. Технология флэш (flash) позволяет создавать очень красивые, интерактивные, со звуком и анимацией, сайты, которые выглядят на порядок эффектнее, чем обычные html-сайты. Однако сложность и трудоёмкость их изготовления, а также то, что страницы, созданные на флэш, имеют, как правило, большой вес и долго загружаются, что отпугивает часть пользователей, приводит к тому, что флэш-сайты не получили пока слишком широкого распространения.

Также достаточно просто построить классификацию сайтов, исходя из того, чьим является сайт, кто его владелец и создатель. Таким образом, вторая классификация сайтов — классификация сайтов по их принадлежности:

Личные (персональные) сайты. Таким сайтом владеет и осуществляет его поддержку один человек. Такие сайты сейчас составляют большинство. Спектр этих сайтов весьма широк — от маленьких домашних страничек (home page), где есть немного информации о владельце и его увлечениях до очень известных и популярных ресурсов.

Сайты коммерческих организаций. Этих сайтов тоже сейчас очень много. По мере того, как интернет набирает популярность (а в западных странах к нему приобщены уже более половины населения), всё больше фирм и компаний рассматривают интернет как удобную среду если не для прямого ведения бизнеса и продажи товаров в онлайн-магазинах, то, по крайней мере, для рекламы своих товаров и услуг. По степени развитости, присутствия коммерческой организации в интернете среди коммерческих сайтов можно выделить несколько подвидов: сайты-визитки, содержащие лишь небольшую общую информацию о фирме, такие сайты обычно не обновляются; т. н. промо-сайты, которые предназначены для презентации и продвижения различных товаров и услуг, на таких сайтах обычно оставляют контактные данные — адреса, телефоны, схемы проезда, предназначенные для потенциальных покупателей; и, наконец, полноценные сайты электронной коммерции, на которых можно заказать услуги или купить товар, не вставая с кресла перед монитором.

Сайты некоммерческих организаций. Разнообразные некоммерческие организации также стремятся заявить о своём существовании в сети интернет. Многообразие подобных сайтов огромно. Тут и сайты какого-нибудь регионального отделения пенсионного фонда, и сайты политических партий и общественных движений, и сайты научно-исследовательских институтов и т. д. и т. п. Весьма популярны в интернете новостные ресурсы, ресурсы, представляющие онлайновые версии различных СМИ. Для двух особых категорий сайтов некоммерческих организаций, а именно сайтов государственных и образовательных учреждений в интернете даже выделены специальные доменные зоны: .gov и .edu. Причём, в отличие от популярных доменных зон .com, .org, национальных доменных зон и т. п., попасть туда может далеко не каждый желающий. Таким образом, расположение сайта в зоне .edu, например, — это гарантия солидности образовательного учреждения.

Следующая классификация будет, наверно, самой разнообразной и с ней будет труднее всего разобраться. Большинство сайтов предназначено для обычных пользователей сети, и спектр целей, с которыми тот или иной пользователь может прийти в интернет, очень широк. Это могут быть и поиск информации, причём по самым различным темам и самого различного свойства, и общение, и использование онлайн-сервисов и т. п. Для достижения этих целей пользователь должен найти подходящий сайт (или сайты), а владелец или владельцы сайта должны каким-то образом привлечь на свой сайт целевую аудиторию, т. е. тех, кому этот сайт был бы интересен. Итак, четвёртая классификация — это попытка выделить виды сайтов по типу информации и возможностей, которые они предоставляют пользователям сети:

Сайты, предоставляющие контент. В этой группе, в свою очередь, можно выделить множество разных типов сайтов по разным признакам. Во-первых, сам вид контента может быть различным — т. е. это может быть как текст, так и фотографии, рисунки, всякие звуковые файлы, например, музыка популярных исполнителей, и видео. По характеру предоставляемого контента можно выделить сайты информационно-тематические, новостные, развлекательные, сайты-библиотеки, сайты-базы определённого рода документов, например, база рефератов, разнообразные сайты-справочники, онлайн-энциклопедии и словари, сайты-каталоги, обобщающие информацию о других сайтах и т. д. Ну и, конечно же, по тематике. Однако список возможных тематик был бы настолько большим, что мы не будем приводить его на этом сайте. Хорошая классификация различных сайтов по тематикам представлена в Яндекс-каталоге.

Сайты для онлайн-контактов и общения. Список типов сайтов в этой группе также очень велик. Сюда можно отнести и «классические» формы организации общения, такие как форумы, чаты, доски объявлений, так и новые, которые можно условно отнести к группе т. н. «веба 2.0». Среди эти новых — популярные в последнее время «социальные сети», всякие блоги-сообщества в одном флаконе, «вопрос-ответные» проекты и т. п. Сюда нужно отнести и такие сайты, как службы знакомств, сайты, организующие общение между людьми, ищущими в сети работу и работодателями, например, всякие биржи фрилансеров, сайты, на которых можно принять участие в онлайн-играх, некоторые сайты, предназначенные для поддержки общения пользователей между собой, с равной долей отнести и к онлайн-сервисам, например, это относится к сайтам icq или skype. Потенциал развития этого сектора очень велик, и не исключено, что новые интересные возможности для организации контактов и общения через интернет будут придуманы в самое ближайшее время.

Сайты электронной коммерции. Какие типы сайтов выделяются в этой группе? Конечно, самым многочисленным видом будут всякие интернет-магазины, через которые сейчас можно продавать практически всё, что угодно. Также велик список сайтов, предоставляющих различные платные услуги, сейчас с помощью интернета можно оплатить и мобильную связь, и консультацию психолога, и хостинг для сайта. В эту группу войдут и сайты электронных платёжных систем, сайты банков, предоставляющих возможность управления счетами через интернет, сайты обменных пунктов различных валют, сайты, дающие возможность играть на Форексе и т. п. В особую категорию здесь можно вынести сайты, построенные на основе т. н. партнёрских программ, т. е., проще говоря, клоны известных интернет-магазинов, продающие в интернете те же товары той же торговой структуры, и получающие на этом без особых усилий какой-то процент с продаж.

Сайты, предоставляющие онлайн-сервисы. Тут мы обнаружим также большое разнообразие. Некоторые сервисы можно отнести и к другим группам, например, сервисы, предоставляющие хостинг (как хостинг для сайтов, так и хостинг для гостевых, форумов, чатов, блогов, файлов и т. п.) Весьма распространёнными ещё со времён зарождения интернета являются сервисы бесплатной электронной почты. Вообще, многие онлайн-сервисы трудно классифицировать потому, что при всей их огромной популярности и значимости для интернета, главные сайты, предоставляющие их, существуют всего в нескольких экземплярах. Например, одними из важнейших сервисов, необходимость в которых возникла ещё на заре развития интернета, являются поисковые сервисы. Но при этом достаточно популярных среди них (в Рунете) всего три. Самым первым поисковиком Рунета был Рамблер. Сегодня лучшим и крупнейшим из поисковых сервисов в Рунете является Яндекс, а в мировом интернете лидерство держит Гугл (Google). Другие интересные сервисы — это, например, сервисы, предоставляющие онлайн-перевод веб-страниц (скажем, translate.ru), сервисы, помогающие вам проверить текст на орфографические ошибки (скажем, orfo.ru), сервисы, позволяющие собирать закладки на интересные вам сайты (скажем, memori.ru или Яндекс. Закладки) и т. д. и т. п. В последнее время, особенно в западном интернете появилась тенденция пытаться создавать онлайн-версии популярных оффлайновых программ, таких, как Word, Excel и т. п. Насколько успешной будет эта попытка переноса в онлайн работы с приложениями, покажет время.

1.3 Язык разметки HTML

Основой любой web-страницы является разметка. Технологии разметки, такие как HTML, XHTML и XML, определяют структуру и возможное значение содержимого страницы.

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа, в удобной для человека форме.

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989—1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.

Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег

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

Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome и Opera.

Структура HTML-документа.

HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки

). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:

Текст между двумя тегами — открывающим и закрывающим.

Здесь элемент содержит атрибут href.

А вот пример пустого элемента:

Регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет (в отличие от XHTML). Элементы могут быть вложенными. Например, следующий код:

Этот текст будет полужирным,

а этот — ещё и курсивным.

даст такой результат:

Этот текст будет полужирным, а этот — ещё и курсивным.

Кроме элементов, в HTML-документах есть и сущности (англ. entities) — «специальные символы». Сущности начинаются с символа амперсанда и имеют вид &имя; или &#NNNN;, где NNNN — код символа в Юникоде в десятичной системе счисления.

Например, (c) — знак авторского права ((c)). Как правило, сущности используются для представления символов, отсутствующих в кодировке документа, или же для представления «специальных» символов: & — амперсанда (&), < — символа «меньше» (<) и > — символа «больше» (>), которые некорректно записывать «обычным» образом, из-за их особого значения в HTML.

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML

, которая обычно выглядит примерно так:

" http://www.w3.org/TR/html4/strict.dtd" >

Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

Далее обозначается начало и конец документа тегами и

соответственно. Внутри этих тегов должны находиться теги заголовка () и тела () документа.

1.4 Каскадные таблицы стилей (CSS)

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

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

Наследование. Каскадирование. Приоритеты стилей CSS.

Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками. Но, естественно, не все свойства CSS наследуются — например, если для тега параграфа p средствами CSS задана рамка, то она не будет наследоваться ни одним тегом, содержащимся в данном теге p, а вот если для параграфа p средствами CSS задан цвет шрифта (например, color: green;), то это свойство будет унаследовано каждым элементом-тегом, находящимся в параграфе.

Принцип каскадирования применяется в случае, когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты вводятся правила приоритета.

1. Наиболее низким приоритетом обладает стиль браузера;

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

3. И наиболее высоким приоритетом обладает стиль, заданный непосредственно автором страницы. И далее, уже в этом авторском стиле приоритеты расставляются следующим образом:

4. Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;

5. Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;

6. Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов, содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей. При расчёте специфичности селектора принимается во внимание:

1. количество идентификаторов (#id) в селекторе —- ((1,0,0) за каждый объявленный идентификатор в селекторе правила CSS);

2. количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе —- ((0,1,0) за каждый объявленный класс и псевдокласс в селекторе правила CSS);

3. количество тегов в селекторе —- ((0,0,1) за каждый объявленный тег в селекторе правила CSS). (Принцип расчёта таков, что, например, (1,0,0) будет иметь большую специфичность, соответственно — бомльший приоритет, чем даже (0,10,0), а (0,1,0) будет иметь большую специфичность, больший приоритет, чем (0,0,10). Если же рассчитанные таким образом специфичности окажутся одинаковыми, то к элементу будет применено правило, описанное селектором, расположенным в документе ниже других.)

7. Ещё более высоким приоритетом обладают стили, объявленные непосредственно в теге данного элемента посредством атрибута style этого тега;

8. И наконец самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного слова! important. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным пользователем, а для остальных свойств (которые будут являться задаваемыми автором страницы) потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих их специфичностей.

Пример таблицы стилей Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css, либо же обрамлена тегами