Каскадные таблицы стилей CSS. Верстка

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Каскадные таблицы стилей CSS. Верстка

Введение

Актуальность темы. Под термином CSS понимаем фразу «Каскадные Таблицы Стилей». Они внедряются в HTML-код и не требуют никаких специальных редакторов и компиляторов, ведь интерпретируются оные обычным броузером.

Каскадные таблицы стилей представляют собой описания различных HTML-элементов и созданы они для расширения свойств последних. Впервые стили были предложены WWW Consorcium'ом в рамках разработки спецификации HTML 3.0, однако реально эту шнягу стали поддерживать только в 1997 году. Насладиться CSS имели возможность лишь счастливые обладатели таких броузеров, как Netscape Navigator 4.0 и Internet Explorer 4.0.

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

Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят свойства нескольких правил одновременно (или, в редких случаях, в одном правиле есть одноименные свойства). Это называется «каскадом», в котором для свойств рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.

Целью исследования является изучение каскадных таблиц стилей CSS и изучение верстки.

В рамках достижения поставленной цели мною были поставлены следующие задачи:

1. Изучить теоретические основы каскадных таблиц стилей и верстки, а именно: HTML - язык разметки гипертекста, каскадные таблицы стилей, верстка: страницы как мы их видим;

2. Рассмотреть современные типы каскадных таблиц стилей CSS и современная верстка, в частности: новые технологии - HTML5 и CSS3, современная верстка, LESS: динамический язык стилевой разметки, технологии упрощенной разметки HAML и SASS.

Структура работы. Работа включает в себя введение, основную часть, заключение и список использованной литературы.

1. Теоретические основы каскадных таблиц стилей и верстки

1.1 HTML - язык разметки гипертекста

гипертекст разметка верстка стилевой

Свое начало World Wide Web положил в марте 1989 г., когда Тим Бернерс-Ли из CERN предложил руководству этого международного европейского научного центра концепцию новой распределенной информационной системы, которую назвал World Wide Web (WWW или W3).

Программное обеспечение WWW предусматривало наличие двух основных составляющих: WWW-сервера и WWW-клиента. Последний называется «браузером».

В начале 1992 г. Марк Андрессен из Национального Центра Суперкомпьютерных Приложений (NCSA) построил на принципах W3 программу MOSAIC - мультипротокольный переносимый интерфейс, который обеспечил бурный рост популярности этого вида сервиса.

К 1995 году были разработаны программы-браузеры Netscape, Arena, Chimera. В последствии к ним добавилась Microsoft Internet Explorer. С начала 1995 г. практически все компьютерные издания обратили внимание на этот вид сервиса: наконец появился удобный интерфейс для работы в Internet.

При создании новых браузеров цель их создания была расширена - они должны были реализовать многопротокольную работу: не только в WWW, но и в FTP, Telnet, Gopher, WAIS и др. Благодаря этому в более поздних браузерах, работая в WWW, можно использовать практически все сервисы Internet.

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

Для реализации гипертекстовой технологии был выбран язык HTML. В WWW программа-клиент - это интерпретатор HTML. В зависимости от команд HTML программа выполняет различные функции: размещение текста на экране; обмен информацией с сервером по мере анализа полученного HTML-текста или графических образов; запуск внешних программ для работы с документами в форматах, отличных от HTML (GIF, JPEG, MPEG, Postscript и др.).

Наибольшее распространение получили Web-браузеры Microsoft Internet Explorer и Netscape Navigator (Netscape Communicator).

Сервер в WWW работает по протоколу HTTP. Он обеспечивает работу WWW, управляет имеющимися базами данных документов в формате HTML и программным обеспечением, разработанным в стандарте CGI. Получили известность такие серверы HTTP, как Netsite (Netscape), Apache (Apache Group), Open Market Secure Web Server (Open Market), NCSA HTTP (NCSA), Netscape Enterprise Server (Netscape), O`Reilly Website (O`Reilly), Internet Information Server (Microsoft), Personal Web Server (Microsoft).

Сервис WWW позволяет организовать огромное количество информации в компактное хранилище с легким доступом к имеющимся материалам.

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

Совокупность Web-страниц, объединенных единой темой и организованных для совместной работы, образует Web-сайт, или Web-представительство, или просто «Web».

Каждая Web-страница хранится в файле, имя которого имеет расширение «htm» (для MS DOS и Windows - платформ) или «html» (для Unix - платформ). По этому расширению находят Web-страницы программы-клиенты сервиса WWW-браузеры (просмотрщики Web-страниц). Причем, браузеры понимают оба эти расширения.

Web-страницы делятся на два вида: пассивные и активные. Пассивные Web-страницы содержат только информационное наполнение (текст, графику). Причем для хранения в ЭВМ графика оформляется в виде отдельных файлов (в основном - в формате GIF, JPEG или PNG). Сама же Web-страница (т.е. файл с расширением «htm») содержит только размеченный текст.

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

Web-сайт кроме информационных страниц обязательно содержит корневую страницу - home page («домашнюю страницу»). Она имеет в Интернет стандартное имя: index. html или index.htm.

Web-сайт, который кроме домашней страницы не имеет информационных страниц, а вместо домашней страницы создана только ее заготовка, называется «пустой Web».

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

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

Важнейшими элементами Web-страниц являются информационная часть и гиперссылки.

Каждая гиперссылка состоит из двух частей: названия и адреса. Названием гиперссылки может быть текст или рисунок. При наведении курсора мыши на название гиперссылки, курсор меняет форму на указательный палец. Адресная часть гиперссылки становится видна, если после изменения формы курсора нажать правую кнопку мыши. Щелчок левой кнопкой приводит к переходу по адресу, указанному в гиперссылке.

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

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

В сети Internet объединено множество компьютеров различных типов. Эти компьютеры могут использовать разные операционные системы, но все они должны поддерживать принятый для обмена данными в Internet стандарт реализованный на базе стека протоколов TCP/IP (Transmission Control Protocol / Internet Protocol - Протокол управления передачей / Протокол Internet). Стек протоколов - разделенный на уровни набор протоколов, которые работают совместно, реализуя определенную коммуникационную архитектуру. Обычно задачи того или иного уровня реализуются одним или несколькими протоколами. Стеком протоколов TCP/IP называют набор сетевых протоколов, используемых в технологии интернет. В этом стеке различают несколько уровней, и протоколы высокого уровня всегда базируются на протоколах более низких уровней. Нижними являются протоколы физического и канального уровней. Например, протокол Ethernet, описывающий передачу данных витой паре.

Выше идёт сетевой уровень, где находится протокол IP, описывающий структуру сети и доставку пакетов. Ещё выше - транспортный уровень, где находится протокол TCP, использующийся для передачи данных. На самом верху находится множество протоколов прикладного уровня, выполняющих конкретные прикладные задачи. Обычно они программируются в отдельных приложениях. Например: HTTP, FTP, Telnet и т.д.

Язык гипертекстовой разметки HTML был предложен Тимом Бернерсом-Ли в 1989 г. К моменту создания HTML существовал стандарт языка разметки печатных документов - SGML (Standart Generalised Markup Language), который и был взят в качестве основы HTML. Предполагалось, что такое решение поможет использовать существующее программное обеспечение для интерпретации нового языка.

В качестве элемента гипертекстовой базы данных для HTML был выбран обычный текстовый файл, который хранится средствами файловой системы операционной среды ЭВМ.

Таким образом, гипертекстовая база данных в концепции WWW - это набор текстовых файлов, написанных на языке HTML, который определяет:

- форму представления информации (разметка);

- структуру связей файлов между собой (гипертекстовые ссылки).

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

В 1990 г. появилась нулевая версия HTML 0.

Первая версия (HTML 1.0) была направлена на представление языка как такового, где описание его возможностей носило скорее рекомендательный характер.

Вторая версия (HTML 2.0) фиксировала практику использования конструкций языка и явилась стандартом для построения WWW.

Версия ++HTML++ представляла новые возможности по представлению научной информации и таблиц, улучшения стиля компоновки текста и изображений.

Третья версия (HTML 3.0) упорядочила все нововведения и формализовала интерфейс пользователя гипертекстовой распределенной системы.

В 1996 г. выпущена новая версия языка HTML 3.2, включающая средства для создания таблиц, конструкции языка Java, карты-изображения (располагающиеся на машине-клиенте) и новые типы форматирования текста.

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

Тэги HTML - это последовательности символов, начинающиеся знаком «меньше» (<) и заканчивающиеся знаком «больше» (>).

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

Браузеры WWW при анализе предложений HTML работают по следующим правилам:

- пробелы и другие «невидимые» символы игнорируются;

- все тэги могут быть разделены на группы: базовые тэги, тэги форматирования, структурные тэги, указатели и т.д.;

- тэги форматирования могут быть написаны строчными и / или прописными буквами;

- большинство тэгов форматирования пишутся парами. Открывающий тэг активирует данный эффект, а закрывающий выключает его. Пара тэгов иногда называется контейнером, поскольку эффект, который они включают и выключают проявляется на тексте, расположенном внутри них. Например, для того, чтобы указать, что строка должна быть напечатана жирными символами, надо написать: <В> Эта строка будет напечатана жирным текстом </В> - текст, находящийся внутри закрывающего тэга, всегда предваряется символом «обратная косая черта». Среди базовых тэгов HTML исключением из этого правила являются: <BASE> (основная информация), <BR> (конец строки), <HR> (горизонтальная линейка), и <IMG> (изображение). Эти тэги существуют в единичном экземпляре, т.е. не требует закрывающего тэга.

Каждый документ HTML имеет граничные тэги: <HTML> и </HTML>. Эта пара тэгов заключает в себе все другие тэги Web-страницы и все информационное содержание документа. Фактически они декларируют, что все содержимое контейнера является кодом HTML. Тэг <HTML> должен располагаться в первой строке файла, а тэг </HTML> - в последней.

Каждый HTML-документ содержит заголовок документа и его тело.

Заголовок документа идентифицирует документ. Он должен идти сразу после тэга <HTML> и начинаться с <HEAD>. Заканчивается заголовок тэгом </HEAD>.

В заголовке документа обязательно должны присутствовать название документа и его базовый URL-адрес.

Название документа располагается между тэгами <TITLE> и </TITLE>. Оно используется браузером и Web-сервером. Длина названия не должна превышать 40 символов. Название документа должно быть информативным, отражать содержание документа. Название встречается в строке заголовка Internet Explorer, в списках журнала (History) и «Избранных страницах» (Favorites).

Базовый URL должен быть полным (абсолютным) и содержать протокол, адрес компьютера в Internet и имя файла. Он указывается в тэге <BASE HREF = «6a30Bbifi_URL»>. Все остальные URL в документе могут указываться относительно базового. Например, если базовый URL имеет адрес: http://www.microsoft.com/products/office/word/datesheets.html и необходимо указать URL файла features.html, расположенного в каталоге /products/office/excel на том же сервере, можно указать:../excel/features.html, а не набирать полный адрес.

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

Наличие базового адреса облегчает перенос документа на другой сервер, так как если все остальные URL в документе относительные, то при переносе необходимо изменить только имя сервера в базовом URL.

Тело документа содержит весь текст, несущий информацию и все тэги HTML, используемые для форматирования текста. Тело документа начинается сразу же после заголовка и ограничивается тэгами <BODY> и </BODY>.

Пример HTML-документа:

<HTML>

<HEAD>

<TITLE> Название документа </TITLE> <BASE HREF = «6a30Bbra_URL» > </HEAD> <BODY>

</BODY> </HTML>

Тэги, используемые в теле документа, позволяют указывать следующие элементы разметки текста:

- начало абзаца и конец строки,

- стили заголовков,

- физические стили,

- логические стили,

- списки,

- специальные символы.

Гипертекстовые ссылки состоят из двух частей: указателя и URL. Указатель - это текст, по которому пользователь должен щелкнуть для того, чтобы куда-то переместиться. URL указывает адрес, с которого браузер будет загружать документ, когда пользователь щелкнет по указателю.

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

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

Формат указателя:

<А HREF = «URL»> текст указателя </А>, где буква А в тэге <А HREF> означает указатель (anchor), a HREF - гипертекстовую ссылку (Hypertext REFerence). Все, что находится между тэгами <А HREF = «URL»> и </А> является текстом указателя, который выводится на экран подчеркнутым или жирным шрифтом.

Вместе с гипертекстовыми указателями могут быть использованы другие форматирующие коды. Например:

<А HREF = «URL»> <1> Переход к более подробному изложению </1> </А> или

<I> <А HREF = «URL»> Переход к более подробному изложению </А> </1>.

Для облегчения создания многостраничного сайта в HTML введена конструкция каскадные таблицы стилей (CSS).

Для правильного использования таблиц стилей необходимо:

- четко представить себе структуру форматируемого материала,

- выделить состав структурных элементов,

- решить вопрос о том, как должны будут выглядеть структурные элементы на создаваемых Web-страницах,

- с помощью любого текстового редактора создать CSS-файл, в котором дать описание каждого структурного элемента,

- при создании HTML-страниц каждую страницу связать с созданным CSS-файлом. Пример создания Web-страницы и внедрения в нее таблицы стилей (пример построен на основе материалов http://www.omen.ore.ги и http://www. izone.com.uaf).

1. Откроем Web-редактор Notepad и создадим файл с будущим названием styles.ess. Опишем в этом файле стиль параграфа <Р>, который будет использоваться на всех страничках нашего сайта:

Р {

font-family: Times New Roman, serif; color: #000000; margin-left: 15%;

margin-right: 15%; margin-top: lpt; margin-bottom: lpt; text-indent: 1cm; text-align: justify;}

Внутри описания стиля для удобства форматирования можно использовать любое количество пробелов и переносов строк - при чтении стиля браузер просто отбросит все лишние пробелы.

В этом стиле мы задали, что параграфы <Р> на всех страниц, которые используют это описание, будут отображаться шрифтом Times New Roman или в случае, если этот шрифт на машине не установлен, другим шрифтом, но из этого семейства (serif). Цвет шрифта мы установили черный, выравнивание - полное (по обеим сторонам).

Также мы установили для параграфа ряд значений отступов. Это было сделано со следующей целью: по умолчанию параграф в HTML отображается равным практически 95% страницы и с интервалами между параграфами, равными 180% межстрочного интервала. Читать такие параграфы не очень удобно, так как интервалы между ними слишком велики, а ширина параграфа слишком большая. В стиле параграфа, который мы создали, установлены боковые отступы в 15% ширины окна и вертикальные отступы в 1 пункт - так текст будет гораздо читабельнее.

2. Создадим стиль для заголовков второго уровня: Н2 {

font-family: Verdana, Arial Cyr, Arial;

font-weight: bold;

font-size: 14pt;

color: black;

margin-left: 20%;

margin-top: 1cm;

text-align: left;

}

Все заголовки наших страниц, оформленные тэгом <Н2>, будут отображаться жирным шрифтом Verdana или, если этот шрифт не установлен, шрифтом Arial. Размер заголовка мы установили равным 14 пунктам, цвет черный, отступ слева равен 20% ширины страницы, а отступ сверху - 1 см. Заголовок будет выравниваться относительно левого края страницы.

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

3. Для того чтобы «привязать» созданные нами стили к нашим страничкам, во все html-файлы в разделе <HEAD> мы должны поместить строку со ссылкой на файл стилей и с указанием об использовании CSS:

<LINK REL=STYLESHEET TYPE= «text/css» HREF= «styles.css»> Поскольку файл со стилями будет находиться в том же каталоге сервера, что и остальные странички, параметр HREF= «URL» в нашем случае просто имя нашего файла стилей (styles.ess).

4. С помощью блокнота создадим html-файл «l.htm» следующего содержания:

<HTML>

<head>

</head>

<body>

<p> Всю самую полную и свежую информацию по использованию CSS можно найти на сайте WWW-консорциума по адресу: www.w3c.org/style/. Таблицы совместимости элементов CSS с различными версиями браузеров находятся по адресу: http://style.webreview.com/ </р>

<h2> Пример оформления таблицы стилей </h2>

<р> (пример построен на основе материалов http://www.omen.orc.ru и http://www.izone.com.ua/).

Откроем Web-редактор Notepad и создадим файл с будущим названием styles.ess. Опишем в этом файле стиль параграфа <Р>, который будет использоваться на всех страничках нашего сайта

</р>

</body>

</html>_

4. Просмотрим содержимое созданного файла с помощью браузера (рис. 1).



Рис. 1. Содержимое файла «l.htm» при просмотре его с помощью браузера

Текст занимает всю ширину экрана и выглядит необработанным.

5. Внесем в файл «l.htm» строку в контейнер <head>… </head>

<LINK REL=STYLESHEET TYPE= «text/css» HREF= «styles.css»> и снова включим просмотр файла через браузер (рис. 2).

Рис. 2. Тот же текст с использованием таблицы стилей

6. Другой пример можно найти по адресу http://design.gossoudarev.com/info/lr-3.doc.

Стили в Word. В Word стили бывают двух типов: стиль абзаца (используется для заголовков, основного текста) и стиль символа (используется для выделений в тексте). Основное их различие в том, что стиль абзаца действует сразу на весь абзац, а стиль символа - только на произвольное количество символов.

Чтобы изменить стиль, нужно воспользоваться раскрывающимся списком с именами стилей, расположенным на панели инструментов «форматирование». Если выделен фрагмент текста, то изменение стиля коснется именно его; если же выделенного фрагмента нет, то изменение стиля будет применяться к абзацу, где находится курсор (или к вновь вводимому тексту).

Для создания своего собственного стиля необходимо воспользоваться пунктом меню Формат -> Стиль. В появившемся запросе нужно выбрать исходный стиль, на основе которого создается новый (поле стили), далее нужно щелкнуть по кнопке Создать. На экран будет выдан дополнительный запрос, в котором необходимо указать тип стиля и его имя, а затем с помощью кнопки Формат задать непосредственно формат текста (в случае стиля абзаца - и формат абзаца). Заканчивается создание стиля щелчком по кнопке ОК или Применить.

Для изменения уже существующего стиля выполняются действия аналогично созданию нового стиля (пункт меню Формат -> Стиль) - но вместо кнопки Создать надо нажать кнопку Изменить. Все фрагменты, оформленные изменяемым стилем, поменяют свое оформление на новое.

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

гипертекст разметка верстка стилевой

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

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

Так возникли каскадные таблицы стилей, созданные для облегчения работы веб-дизайнеров. В настоящее время приняты CSS1 и CSS2. CSS третьего уровня (CSS3) еще находится в стадии разработки. Но даже после ее выпуска браузеры только через несколько лет начнут ее поддерживать. Самым важным отличием CSS3 от предыдущих версий станет масштабируемая векторная графика. То есть все преимущества векторной графики будут доступны теперь и в интернете.

Но даже таблицы стилей первого уровня (CSS1) предлагают удивительные возможности. Куда там HTML с его примитивным форматированием!

Каскадные (многоуровневые) таблицы стилей - cascading style sheets (CSS) - это мощный стандарт на основе текстового формата, определяющий представление данных в броузере.

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

Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице.

CSS разрабатывались так, чтобы обеспечить больший уровень контроля над размещением текста и графики.

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

CSS предполагает 3 типа таблиц стилей - встроенные, внедренные (внутренние) и связанные (внешние).

Впервые идея форматирования HTML-документов с помощью CSS была рекомендована Консорциумом W3C в 1996 году. Эта рекомендация, которая была обновлена в 1998 году, используется Web-разработчиками и по сей день.

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

Другой аспект каскадирования - наследование (inheritance). Наследование означает, что если не указано иное, то конкретный стиль будет унаследован другими элементами страницы HTML. Например, если вы примените определенный цвет текста в теге <р>, то все теги внутри этого абзаца наследуют этот цвет, если не оговорено иное.

Методы и синтаксис

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

Методы

Существует три метода для применения таблицы стилей к документу HTML:

Встроенный (Inline). Этот метод позволяет взять любой тег HTML и добавить к нему стиль. Использование встроенного метода предоставляет максимальный контроль над всеми свойствами Web-страницы. Предположим, вы хотите задать внешний вид отдельного абзаца. Вы можете просто добавить атрибут style к тегу абзаца, и броузер отобразит этот абзац с помощью параметров стиля, добавленного в код.

Внедренный (Embedded). Внедрение позволяет контролировать всю страницу HTML. При использовании тега <style>, помещенного внутри раздела <head> страницы HTML, в код вставляются детализированные атрибуты стиля, которые будут применяться ко всей странице.

Связанный (Linked или External). Связанная таблица стилей - мощный инструмент, который позволяет создавать образцы стилей (master styles), которые можно затем применять ко всему узлу. Основной документ таблицы стилей (расширение.css) создается Web-дизайнером. Этот документ содержит стили, которые будут едиными для всего Web-узла (неважно, содержит одну страницу или тысячи страниц). Любая страница, связанная с этим документом, будет использовать указанные стили.

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

Таблицы стилей строятся в соответствии с определенным порядком (синтаксисом), в противном случае они не могут нормально работать.

Синтаксис всех методов, используемых для применения стилей к документа HTML, практически одинаков. Таблицы стилей составляются из определенных частей. Эти части включают следующие элементы:

Указатель (Selector). Указатель является элементом, к которому будут применяться назначаемые вами атрибуты. Это может быть просто тег типа заголовка (H1) или абзаца (Р). Таблицы стилей позволяют использовать различные объекты, включая классы, которые будут кратко обсуждаться далее.

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

Значение (Value). Значения определяют свойства. Предположим, что у вас есть заголовок первого уровня H1 (указатель) и вы включаете свойство type family (семейство шрифта). Шрифт, который на самом деле будет применен к указанному фрагменту, задается значением этого свойства.

Определение правил CSS

Итак, какскадная таблица стилей - это набор правил форматирования тегов HTML. Например, для того, чтобы цвет фона Web-страницы сделать черным, необходимо объявить следующее правило форматирования:

body {background:black}

Будьте внимательны! По умолчанию цвет шрифта - черный! Не следует претендовать на лавры Малевича! Ваш «Черный квадрат» Эрмитаж не купит!

Свойства CSS должны находиться в фигурных скобках.

Для каждого тега HTML можно указать не одно, а несколько свойств стиля.

Изменим с помощью CSS не только цвет фона Web-страницы, но и цвет шрифта (на белый).

body {background:black; color:white}

Формат самого правила не имеет значения, главное - правило должно читаться удобно и легко. Например, вышеприведенное правило можно записать и так:

body {

background:black;

color:white}

Одно и то же правило стиля можно применить сразу к нескольким различным тегам HTML-страницы. Например:

body, td, h1 {

background:black;

color:white}

Встроенный стиль

Встроенный стиль применяется к любому тегу HTML с помощью атрибута style следующим образом:

<P style= «font: 12pt Courier New»> The text in this line will

display as 12 point text using the Courier New font.

</P>

Или:

<p style= «font: 12pt Arial»>

The text in this line will display as 18 point text using the

Arial font.

</p>

Посмотрим на результат:

The text in this line will display as 12 point text using the Courier New font.

The text in this line will display as 18 point text using the Arial font.

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

Существуют два тега, которые помогают применять встроенные стили к разделам страницы. Это теги <div> (division - раздел) и <span> (промежуток). Эти теги определяют диапазон текста, так что все, находящееся между ними, будет оформлено с помощью нужного стиля. Единственное различие между <div> и <span> состоит в том, что <div> создает принудительный разрыв строки, a <span> - нет.

Следовательно, нужно использовать <span> для изменения стиля любой части текста, меньшей абзаца.

Вот пример работы тега <div>:

<div style=«font-family: Garamond; font-size: 18 pt;>«AII of the

text within this section is 18 point Garamond.

AII of the text within this section is 18 point Garamond.

и тега <span>:

<span style= «color:#ff3300;»> This text appears in the color red,

with no line break after the closing span tag </span> and the rest of

the text.

This text appears in the color red, with no line break after the closing span tag and the rest of the text.

Внедренный стиль

Внедренные стили используют тег <style>, расположенный между тегами </head> и <bodу> в стандартном документе HTML.

Рассмотрим пример внедренного стиля:

<html>

<head>

<title>Embedded Style Sheet Example </title>

</head>

<style>

BODY {

background: #FFFFFF;

color: #000000;

}

H1 {

font: 14pt verdana; color: #CCCCCC;}

P {font: 12pt times;}

A {color: #FFOOOO; text-decoration: none}

</style>

Как видно из примера, приведенного выше, таблица стилей теперь отличается от кода стандартной страницы HTML, но все же логику проследить нетрудно. В нашем случае для основной части страницы (body) указаны цвет фона, цвет текста и верхнее, левое и правое поля в дюймах.

Для заголовка первого уровня (HI) указывается шрифт (название шрифта и размер в пунктах). В этом и состоит удобство каскадных таблиц стилей - вы можете задавать размеры не только в пунктах, но и пикселях (рх), процентах (75%) и сантиметрах (cm).

Существует и несколько новых единиц измерения, самой примечательной из которых является m.

В отличие от пунктов или пикселов, представляющих абсолютные размеры различных объектов, 1m - ширина строчной буквы m в том шрифте о котором идет речь. Правда, большинство броузеров об этом не догадываются и поэтому определяют 1m просто как размер, заданный по умолчанию. Например, в Internet Explorer 4.0 и выше для гарнитуры Verdana размер 1m соответствует 12 пунктам. Точнее сказать «соответсвует значению, которое пользователь установил в качестве размера шрифта по умолчанию. Таким образом, если установить в броузере размер шрифта по умолчанию 16 пунктам, то и 1m тоже станет равна 16 пунктам, и все остальные размеры будут соответственно увеличены.

Другой интересный момент этой таблицы стилей - различие стилей шрифтов заголовка и абзаца. Они отличаются цветом, отступом и гарнитурой.

В теге якоря (А) можно увидеть еще один очень удобный элемент синтаксиса. Строка text-decoration: none удаляет подчеркивание ссылок, так что результат выглядит чисто и привлекательно.

Связанные таблицы стилей

Связанные (linked), или внешние (external), таблицы стилей являются расширением понятия внедренных стилей. Используется тот же самый код, что и для внедренной таблицы стилей, но он помещается в отдельный документ (файл с расширением.css). После этого с этим документом (файлом) связываются все страницы, к которым необходимо применить данный стиль.

Вот как выглядит пример связанной таблицы стилей:

<style>

BODY {

background: #ffffcc;

color: #000000;

}

P {

font-family: sans-serif;

font-style: italic;

font-size: 16pt;

color: #006633;

}

H1 {

font-family: Arial, Helvetica, sans-serif;

font-size: 24pt;

color: #996633;

}

</style>

Теперь сохраним этот документ как отдельный файл. Назовем его style-l.css и поместим в папку таблиц стилей с именем style.

С этим документом любое количество страниц HTML. Для этого нужно использовать между тегами </title> и </head> следующую конструкцию:

<link rel=stylesheet href= «style-1.css» type= «text/css»>

Любая страница, содержащая такую связь, будет оформлена в соответствии со стилями, указанными в файле style_1.css.

Поддержка шрифтов в таблицах стилей

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

Практическая реализация поддержки шрифтов в таблицах стилей аналогична проблемам, с которыми пользователи сталкиваются при использовании тегов <font> и соответствующих атрибутов. Конкретный шрифт должен быть установлен на том компьютере, где происходит просмотр страницы. Как и тег <font>, таблицы стилей позволяют указывать любое число шрифтов, чтобы увеличить вероятность того, что броузер клиента подберет нужный шрифт из списка. Например, если у них не будет шрифта Century Schoolbook, то, возможно, найдется Garamond и т.д. Хотя сами эти шрифты различаются довольно значительно, их семейства достаточно похожи, чтобы считать, что они выполняют сходные дизайнерские задачи.

Таблицы стилей распознают пять семейств шрифтов: Serif (С засечками), Sans Serif (Рубленые), Script (Рукописные), Monospace (Моноширинные), Decorative (Декоративные).

Задание свойств и значений шрифта

У шрифтов есть очень много свойств, которые можно изменять, и очень много значений, которые могут принимать эти свойства.

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

Цвет

Таблицы стилей используют стандартные методы работы с цветами броузера. Другими словами, для получения оптимальных результатов используйте шестнадцатиричный (и лучше всего, поддерживаемый броузерами) цвет. Вы можете добавлять цвет, как и другие свойства стиля, в любой подходящий тег HTML для встроенных, внедренных и связанных стилей. Например, при описании цвета заголовка первого уровня указоно значения color:#333399;, в результате мы видим заголовок «Каскадные таблицы стилей» темно-синего цвета.

Насыщенность

Насыщенность (weight) показывает толщину шрифта. Например, для гарнитуры Arial существуют такие разновидности: жирный (black), полужирный (bold), светлый (light) и т.д.

Размер

Размер шрифта в таблицах стилей можно определять, используя пункты (points), пиксели (pixels), дюймы (inches), сантиметры (centimeters), миллиметры (millimeters) и пики (picas), а также используя новые единицы измерения. Для Web-дизайнеров естественно выбирать пункты или пиксели, хотя все будет зависеть от ваших вкусов.

Другие параметры шрифта

Text-decoration. Этот параметр полезен для отключения подчеркивания ссылок. Для этого нужно просто задать для параметра text-decoration значение none (отсутствует). Другие возможные значения - underline (подчеркивание), italic (курсив) и strikethrough (перечеркивание).

Line-height. Это то же самое, что интерлиньяж (leading). Данный параметр определяет высоту каждой строки текста - по существу, расстояние между строками.

Background. Этот параметр помещает текст на цвет или изображение. Здесь используются атрибуты color или url (адрес), где адрес указывает расположение файла изображения. Внимание! Этот параметр может быть назначен не только тегу <body>, но и любому тегу или фрагменту текста, чтобы выделить нужную область на странице.

Классы и группировка

Два других интересных аспекта таблиц стилей - это классы и группировка.

Классы (class) определяют способ разбиения стилей на очень точные части. Всякий раз, когда вы хотите, чтобы определенный фрагмент текста как-то отличался от остальных, вы можете создать собственный тег HTML. Каждый тип форматирования текста, который вы определяете, называется стилевым классом (style class).

За стилевым классом в таблице стилей закрепляется имя. Это имя задается как обычное имя, но с точкой в качестве первого символа.

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

<style>

Н1.serif {font: 34pt «Times New Roman», Times, serif;

color: #DC143C;}

H1.sans {font:18pt Arial;

color: #FF8C00;

text-align: center;}

</style>

Для выбора между двумя стилями класса в теге <hl> (аналогичные правила действуют и для других тегов, имеющих описание а таблице стилей) используется атрибут class=имя_стиля.

Обратите внимание - здесь имя стиля употребляется без точки.

Например:

Wisdom

«Do not fear your enemies. The worst they can do is kill you. Do not fear friends. At worst, they may betray you. Fear those who do not care; they neither kill nor betray, but betrayal and murder exists because of their silent consent.» - Bruno Jasienski.

More Wisdom

«Young love is a flame; very pretty, often very hot and fierce, but still only light and flickering. The love of the older and disciplined heart is as coals, deep burning, unquenchable.» - Henry Ward Beecher.

Слово Wisdom отображается шрифтом Times New Roman, 34 пункта темно-красного цвета (на тех компьютерах, где есть поддержка таблиц стилей броузерами), а слова More Wisdom отображаются шрифтом Arial, 18 пунктов темно-оранжевого цвета (при этом задано выравнивание заголовка посередине страницы). Для текста в промежутках между этими заголовками по умолчанию используетcя шрифт Times, поскольку явно не указал шрифт для этих фрагментов. Поэтому броузер выбирает собственный заданный по умолчанию основной шрифт.

Краткий обзор способов размещения элементов страницы

Таблицы стилей могут помогать в создании макета страницы, предоставляя широкие возможности выравнивания элементов страницы и управления полями. Выравнивание текста выполняется с помощью свойства text-align. Возможные значения left, right, center и justify.

Посмотрим, как это выглядит.

Конечно, для примера можно было не приводить все стихотворение, но я мне так нравятся стихи Окуджавы…

Создадим и подключим каскадную таблицу стилей к самой простой html страничке.

Итак, делаем так:

1. Создаем папку, в которой будут HTML страничка, и каскадная таблица стилей.

Пусть, папка будет называться «CSS»

2. Создаем простую HTML страничку (index.html).

3. Теперь создаем простой текстовый документ (аналогично созданию HTML странички), только называем его Style.css.

В результате должно получиться вот что:

Все, файл который будет содержать в себе стили CSS готов.

Подключим созданную таблицу стилей к файлу index.html.

Итак, для того что бы подключить таблицу стилей к html страничке, необходимо в файле index.html в теге <head> прописать тег:

<link href= «style.css» rel= «stylesheet» type= «text/css»>

В атрибуте href= «style.css» прописан путь к самому файлу со стилями CSS. В этом случае файл css и index.html находится в одной папке.

Например, если наш файл index.html будет иметь такой код:

<! DOCTYPE HTML PUBLIC «- //W3C //DTD HTML 4.01 Transitional //EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv= «Content-Type» content= «text/html; charset=windows-1251»>

<title>Изучаем каскадные таблицы стилей css</title>

<meta name= «description» content= «Каскадные таблицы стилей»>

<meta name= «keywords» content= «стили, таблицы, css»>

<link href= «style.css» rel= «stylesheet» type= «text/css»>

</head>

<body>

<h2>Страничка для изучения каскадных таблиц стилей css.</h2>

</body>

</html>

Не забудьте при сохранении в блокноте файла index.html поставить кодировку 1251 (ANSI-кириллица). Так как если это не сделать и файл сохранить в другой кодировке, то браузер вместо текстов покажет Вам «каракули». Если же все будет сделано и сохранено правильно, то в браузере увидим следующее:



Вот и все, файл index.html создан, а так же к нему подключены таблицы стилей css.

Проверим работу таблиц стилей css.

Итак, начнем с самого простого, и зададим тегу <body> новый стиль, определяющий фоновое изображение html странички, цвет фона странички (если изображения в браузере посетителя странички отключены), верхние и нижние отступы, шрифт по умолчанию, его размер и цвет.

Для того, что бы установить фоновое изображение, его нужно разметить в папке с файлами.

Скачаем архив bg.zip, разархивируем его и поместим файл bg.jpg в папку css.

Должно быть так:



Теперь, что бы установить стиль для тега <body> html документа, в таблице стилей нужно записать следующее:

body {

background-image:url (bg.jpg);

background-color:#f6f6f6;

margin-top:0px;

margin-bottom:0px;

font-family: Verdana;

font-size:12px;

color:#000066;

}

Здесь:

body {…} - задание стилей css для тега <body>

background-image:url (bg.jpg); - фоновое изображение, где в параметре url(…jpg) указывается полный путь к изображению, которое будет фоновым

background-color:#f6f6f6; - фон тела документа (тега <body>). Этот атрибут включается в тех случаях, если в браузере посетителя отключены изображения

margin-top:0px; - расстояние от тела документа до верхней части браузера. В этом случает каскадные таблицы стилей css задают расстояние 0 px.

margin-bottom:0px; - расстояние от тела документа до нижней части браузера. В этом случает каскадные таблицы стилей css задают расстояние 0 пикселей

font-family: Verdana; - установка шрифта для документа по умолчанию

font-size:12px; - размер шрифта документа 12 пикселей

color:#000000; - цвет текста. В этом случае таблицы стилей css задают цвет шрифта - темно синий.

После того, как сохраним файл style.css, в браузере можно увидеть следующее:

1.3 Верстка: страницы как мы их видим

Вёрстка веб-страниц - процесс формирования веб-страниц в текстовом либо WYSIWYG-редакторе, а также результат этого процесса, то есть собственно веб-страницы. По принципам использования средств разметки HTML различают логическую разметку и презентационную (физическую). Например, курсивный текст можно получить как с помощью тега <i>, так и с помощью тега <em>. В первом случае курсив задаётся явным образом, а во втором на текст производится логическое ударение, которое обычно отображается курсивом. Иными словами, при первом подходе ориентируются на внешний вид, а во втором - на логическое предназначение. Преимуществом второго подхода является независимость вёрстки от используемого типа устройств и дизайна веб-страниц. Если придерживаться логической разметки, то можно использовать один и тот же вариант вёрстки для экрана, печати и КПК, регулируя внешний вид с помощью отдельных файлов стилей.

Вёрстка с помощью слоёв

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

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

Более современные версии браузеров стали строже придерживаться стандартов и содержать средства по работе со слоями.

Преимущества слоёв

Свойства слоя удобно задавать и настраивать через стили. Возможности CSS расширяют спектр оформительских изысков. Использование стилевых таблиц позволяет несложными методами получить компактный и эффективный код.

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

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

Слои можно размещать в окне браузера с точностью до пикселя. Положение слоя задается двумя координатами относительно любого угла окна браузера, родительского элемента или документа.

Слои по сравнению с таблицами отображаются быстрее. [источник не указан 720 дней] Более высокая скорость достигается за счет компактного кода и того, что отображение содержимого слоя происходит по мере его загрузки. Правда это может привести к «скачкам» элементов страницы по мере их подгрузки.

Не следует считать, что использование слоев это панацея от всех бед. К сожалению, стандарты работы со слоями ещё не до конца устоялись и браузеры по-разному реализуют определённые возможности. Из-за этого основная сложность верстки слоями - создать универсальный код, который бы одинаково и без ошибок работал в разных браузерах («кросс-браузерность»). Приходится вникать в тонкости поведения браузеров при использовании различных элементов стилей.

Вёрстка с помощью таблиц

Браузеры преднамеренно расценивают таблицу как один объект, из-за чего содержимое таблицы не отображается до тех пор, пока оно целиком не будет загружено на локальный компьютер. [3] При использовании таблицы в качестве каркаса для размещения элементов веб-страницы, её исходное преимущество обращается в недостаток, поскольку приводит к задержке вывода содержимого. Следует учитывать также и растущий объем веб-страниц при активном использовании таблиц, особенно в случае их вложенности друг в друга. Всё это приводит к тому, что табличная верстка вызывает ненужные задержки вывода информации в браузере.