Интерактивное меню навигации средствами CSS

Честно говоря, я понятия не имею что именно тут требуется сказать, поэтому рассмотрим, что такое CSS и, как создать меню навигации с использованием CSS.

 

CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. Это не язык разметки - это язык таблицы стилей. Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать все элементы абзаца на HTML странице и изменить текст внутри них с чёрного на красный, вы должны написать этот CSS:

p { color: red; }

CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web». В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML, и стандарт CSS.

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

Термин «каскадные таблицы стилей» был предложен Хоконом Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.

В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определённых ранее стилях.

 

Теперь как создать интерактивное меню навигации используя HTML и CSS:

Для создания самих ссылок, по которым пользователь сможет переместиться на другую страницу сайта, мы будем использовать списки HTML (ul, li):

<ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">News</a></li> <li><a href="#">Contacts</a></li> </ul>     Результат:

ul – объявление начала списка

li – элемент списка

a – ссылка

 

Подключив к нашему HTML документу CSS, можно задать стили нашему меню навигации:

.menu {  List-style-type: none; // Убирает маркеры с элементов списка  padding-left: 0; // Убирает padding с левой стороны списка (Пустое пространство внутри элемента)  margin-left: 0; // Убирает отступ с левой стороны списка. } .menu a { Text-decoration: none; // Убирает подчеркивание с ссылок font-family: sans-serif; // Задает основным шрифтом sans-serif color: gray; // Задает цвет ссылок display: inline-block; // Отображение в линию padding: 10px 20px; // Добавляет пустое пространство внутри ссылки: 10px сверху и снизу; 20px слева и справа. background-color: #fff2bc; // Задает цвет фона ссылки border-bottom: 5px solid gray; // Добавляет и задает ширину, тип и цвет рамки (снизу) } .menu li { float: left; // Задает способ отображения элементов списка, чтобы они отображались в линию слева на право и занимали свободное место }   Результат:

 

 

Каскадные таблицы стилей

Для чего используется:

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

 

Способы подключения CSS к документу:

Правила CSS могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и во внешних файлах, имеющих расширение.css. Формат CSS — это текстовый файл, в котором содержится перечень правил CSS и комментариев к ним.

Стили CSS могут быть подключены или внедрены в описываемый ими веб-документ четырьмя способами:

· когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента <link>, включённого в элемент <head>:

<html> <head> ..... <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> ..... </body> </html>

· когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу инструкцией @import в элементе<style>:

<!DOCTYPE html> <html> <head> ..... <style media="all">     @import url(style.css); </style> </head> </html>

· когда стили описаны внутри документа, они могут быть включены в элемент <style>, который, включается в элемент <head>:

<!DOCTYPE html> <html> <head> ..... <style>     body {        color: red;     } </style> </head> <body> ..... </body> </html>

· когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента

<html> <head> ..... </head> <body> <p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">    ..... </p> </body> </html>

 

В первых двух случаях, использовались «ВНЕШНИЕ» стили, а в последних двух «ВНУТРЕННИЕ». Разница в том, под внешними понимается отдельный файл, а внутренние это описание стилей внутри документа и/или внутри тэга. Внешний файл стилей можно применить и к другим документам HTML, в то время как Внутренний, только внутри того документа, в котором эти стили были описаны.

 

Правила построения CSS стилей

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

селектор, селектор { свойство: значение; свойство: значение; свойство: значение; }

 

Селектор, расположенный в левой части правила до знака «{» определяет, на какие части документа (возможно, специально обозначенные) распространяется правило стиля.

Виды селекторов: