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

Проблема возникает при множественной вложенности таблиц, что характерно для достижения определённых эффектов на веб-странице. Рост количества таблиц повышает шанс возникновения ошибок при вёрстке, увеличивает размер документов и снижает скорость загрузки файлов. Применение визуальных редакторов, вроде Adobe Dreamweaver или Microsoft FrontPage, для создания и правки документов облегчает работу с таблицами, но из-за обилия их параметров и в этом случае разработчики не застрахованы от появления ошибок и лишней работы, связанной с индивидуальным редактированием каждой таблицы.

Кроме того, использование таблиц для целей оформления не соответствует концепции семантичной вёрстки, подразумевающей использование элементов (тегов) в соответствии с их смыслом, семантическим значением. Элемент <table> и сопутствующие (<tr>,<th>,<td> и др.) предназначены для разметки табличной информации (т.е. такой, в которой имеется смысловая связь между элементами, принадлежащими одному столбцу или одной строке). W3C, как разработчик языка HTML, призывает использовать HTML для логической разметки информации, а оформление (в т. ч. позиционирование различных блоков) описывать отдельно от (X) HTML-разметки (с помощью CSS, например).

«Распорки»

При использовании таблиц широко известным приемом стало применение распорок - прозрачных изображений высотой в один пиксель. Само изображение не отображается на веб-странице, но его можно масштабировать в любых пределах. Получается невидимая палочка определённой ширины или высоты, которая не дает ячейкам таблицы сблизиться меньше, чем на заданное расстояние. Распорки особенно были актуальны для браузера Netscape, который не показывал фон ячейки, если в ней ничего не размещалось. Чтобы избавиться от указанной особенности и помещали в ячейку маленький прозрачный рисунок в формате GIF.

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

Верстальщик

Вёрсткой веб-страниц занимаются верстальщики. В общем случае в задачу верстальщика входят:

- создание кода веб-страницы с помощью соответствующего языка разметки. Таковыми могут быть, например, HTML, XHTML, XML.

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

При этом он часто пользуется следующим ПО:

- текстовый редактор или редактор HTML для написания и редактирования кода

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

А также иногда прибегает к помощи:

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

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

Валидность HTML-верстки

Валидность HTML-верстки - это её соответствие стандартам организации The World Wide Web Consortium (W3C). Отсутствие ошибок в вёрстке документа - один из основных показателей качества вёрстки. Автоматическая проверка вёрстки на ошибки может быть проведена как с помощью онлайн сервиса W3C, так и различными программами «валидаторами». Разные версии спецификации HTML предполагают различный синтаксис, поэтому тест верстки на валидность должен обязательно учитывать её Document Type.

Блочная верстка

На данный момент самая востребованная верстка, которая создаётся с помощью слоёв, а именно блоков <div>, то есть можно создать какое то количество блоков, которые как слои накладываются друг на друга, кто пользуется фотошопом думаем хорошо понимает что такое слои вы можете в любой момент удалить или перенести любой требуемый вам блок, ниже смотрите пример блочной верстки сайта:

<! 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>Название</title>

</head>

<body>

<div id= «wrapper»>

<div id= «header»>

</div>

<div id= «sidebarL»>

</div>

<div id= «sidebarR»>

</div>

<div id= «content»>

</div>

<div id= «footer»>

</div>

<div>

</body>

</html>

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

Каждый блок имеет свой личный идентификатор id= «текст», к которому привязываем различные правила в css стилях для их общего вида.

Чтобы расставить блоки по своим местам, приписываем нужному блоку свойство float в css стилях, например float:left; блок слева и.т. п.

Можно скачать небольшой архивчик, в котором найдёте html страничку + css стили для неё, готовый каркас блочной верстки

Табличная верстка

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

Рассмотрим ниже пример табличной верстки сайта:

<! 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>Название</title>

</head>

<body>

<table width= «100%» cellpadding= «5» cellspacing= «0»>

<tr>

<td height= «30» colspan= «3» bgcolor= "#F0FC0A»>

Заголовок сайта

</td>

</tr>

<tr>

<td bgcolor= "#990033» valign= «top»>

Левая колонка

</td>

<td bgcolor= "#999966» valign= «top»>

Контент

</td>

<td bgcolor= "#09EDD6» valign= «top»>

Правая колонка

</td>

</tr>

<tr>

<td height= «30» colspan= «3» bgcolor= "#cccccc»>

Подвал страницы

</td>

</tr>

<table>

</body>

</html>

Есть общая оболочка <table>, уже внутри неё располагаются колонки <tr>, а внутри колонок находятся ячейки <td> именно в этих ячейках будут располагаться все нужные на сайте элементы, оболочке, колонкам и ячейкам так же как и в блочной верстке можем назначить идентификаторы id= «текст», которым зададим стили в css.

Можно скачать небольшой архивчик, в котором найдём html страничку, готовый каркас табличной верстки

Преимущества и недостатки

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

Блочная верстка:

+ компактный код, небольшой вес страниц

+ отличная индексация поисковиками

+ слои можно накладывать друг на друга

+ быстрая загрузка страниц

- сама по себе верстка сложная

- трудно обеспечить одинаковый вид во всех браузерах

- при уменьшении разрешения экрана / браузера блоки съезжают

друг на друга (нужна настройка в стилях под разрешения экрана)

Табличная верстка:

+ сама по себе верстка простая

+ легко обеспечить одинаковый вид во всех браузерах

+ резиновая верстка, при изменении разрешения экрана,

таблица формируется автоматически, растягивая и сжимая ячейки.

- много лишнего кода, большой вес страниц

- не каждый дизайн возможно создать

- медленная загрузка страниц

Кратко выводы:

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

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

Кроме того существуют такие понятия как…

Фиксированная верстка

Это верстка, в которой задаём каждому элементу фиксированный размер, например мы прописываем что ширина сайта будет 1000 px это значит, что если у посетителя нашего сайта экран монитора равен 500 px то наш сайт не поместиться у него полностью на экране и при просмотре сайта на таком экране появится полоса прокрутки, или если у посетителя экран монитора равен 2000 px то наш сайт он увидит полностью но не на весь экран, а шириной в 1000 px, которую установим и не более, такой размер можно дать любым элементам сайта, как всем так и отдельным.

Резиновая верстка. Это верстка, при которой сайт растягивается на ширину равную азрешению экрана монитора, то есть если монитор равен 500 px то сайт будет шириной 500 px, а если монитор равен 2000 px то и сайт растянется и станет 2000 px, то есть ширина сайта полностью зависит от разрешения монитора или окна браузера и может как растягиваться так и сжиматься до нужного размера. Происходит это за счёт табличной верстки, другой верстки с указанием размеров в процентах width:80%;, фиксированой и резиновой верстки одновременно, например сайдбар фиксировано 200 px, а контент auto.

Семантическая верстка

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

Как это происходит, если редактируем страницу HTML то ищем спецификацию HTML и оформляем всё на странице по её правилам.

Например:

- заголовки оформляют с помощью тэгов от <h1> до <h6>

- абзац <p>

- список <ul> - ненумерованный, <ol> - нумерованный

- <strong> - полужирным, <em> - курсивом

- верстка блочная

- в таблицах размещаем только табличные данные

- идентефикаторы, классы и.т. п. должны иметь понятные имена

например ссылка = link, шапка = header, список = list

и многое другое…

Валидная верстка

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

Кроссбраузерная верстка. Это значит сайт выглядит и работает одинаково в популярных браузерах.

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

На данный момент популярными считаются браузеры:

Firefox, Opera, Chrome, Safari, IE

2. Современные типы каскадных таблиц стилей CSS и современная верстка

2.1 Новые технологии - HTML5 и CSS3

HTML 5

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

Основная структура

Прежде чем создадим разметку страницы, нужно представить общую структуру:

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

<! doctype html>

<html>

<head>

<title>Page title</title>

</head>

<body>

<header>

<h1>Page title</h1>

</header>

<nav>

<! - Navigation ->

</nav>

<section id= «intro»>

<! - Introduction ->

</section>

<section>

<! - Main content area ->

</section>

<aside>

<! - Sidebar ->

</aside>

<footer>

<! - Footer ->

</footer>

</body>

</html>

Это выглядит как обычная HTML-разметка, но есть несколько моментов, которые стоит отметить:

В HTML 5, есть только один doctype. Он объявляется в начале страницы через <! doctype html!>. Он просто сообщает браузеру, как интерпретировать HTML-документ.

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

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

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

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

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

Вместо того чтобы использовать тэг <div> для различных секций страницы, будем использовать соответствующие, семантические теги. Их использование значительно облегчит жизнь поисковым системам, в выяснении типа контента, расположенного на странице.

Разметка для Навигации

Разметка навигации создается точно так же как и в HTML 4 или XHTML, с использованием маркированного списка. Ключ в том, что этот список располагается внутри тэгов nav.

<nav>

<ul>

<li><a href= "#»>Blog</a></li>

<li><a href= "#»>About</a></li>

<li><a href= "#»>Archives</a></li>

<li><a href= "#»>Contact</a></li>

<li class= «subscribe»><a href= "#»>Subscribe via. RSS</a></li>

</ul>

</nav>

Разметка для Вступления

Опишем новую секцию документа, используя тег section. Теперь просто добавим немного контента.

<section id= «intro»>

<header>

<h2>Do you love flowers as much as we do?</h2>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>

</section>

Добавим ID к тэгу section, чтобы потом можно было назначить ему определенный стиль. Используем тэг header, для заключения элемента h2. Кроме описания основного документа, тэги заголовков всегда должны использоваться для описания отдельных секций.

Разметка Основного контента

Контент содержит три секции: запись, комментарии и форму отправки комментариев. Используя наши знания о новой структуре тэгов в HTML 5, сделать разметку будет очень легко.

Разметка для Записи

Посмотрите разметку, и я расскажу о новых элементах ниже.

<section>

<article class= «blogPost»>

<header>

<h2>This is the title of a blog post</h2>

<p>Posted on <time datetime= «2009-06-29T23:31:45+01:00»>June 29th 2009</time> by <a href= "#»>Mads Kjaer</a> - <a href= "#comments»>3 comments</a></p>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio…</p>

</article>

</section>

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

Элемент header, используется для представления заголовка и метаданных о записи. Мы сообщаем пользователю, когда статья была написана, кто ее написал, и как много комментариев она имеет. Обратите внимание, что время заключено в соответствующий тэг. Этот тег также новый в HTML 5, и используется для разметки определенного участка во времени. Содержимое атрибута datetime должно быть следующим:

Год, затем тире (знак минус)

Месяц, затем тире

Дата

Прописная T, для определения того, что мы собираемся указывать местное время

Местное время в формате hh:mm:ss

Часовой пояс по Гринвичу. Я нахожусь в Дании, где GMT+1, поэтому я пишу +01.

Разметка для Комментариев

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

17 <section id= «comments»>

<header>

<h3>Comments</h3>

</header>

<article>

<header>

<a href= "#»>George Washington</a> on <time datetime= «2009-06-29T23:35:20+01:00»>June 29th 2009 at 23:35</time>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>

</article>

<article>

<header>

<a href= "#»>Benjamin Franklin</a> on <time datetime= «2009-06-29T23:40:09+01:00»>June 29th 2009 at 23:40</time>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>

</article>

</section>

Разметка для Формы Комментирования

В HTML 5 был представлен ряд усовершенствования для форм. Вам больше не нужно заботиться о валидации необходимых полей на клиентской стороне. Браузер все сделает за вас.

<form action= "#» method= «post»>

<h3>Post a comment</h3>

<p>

<label for= «name»>Name</label>

<input name= «name» id= «name» type= «text» required />

</p>

<p>

<label for= «email»>E-mail</label>

<input name= «email» id= «email» type= «email» required />

</p>

<p>

<label for= «website»>Website</label>

<input name= «website» id= «website» type= «url» />

</p>

<p>

<label for= «comment»>Comment</label>

<textarea name= «comment» id= «comment» required></textarea>

</p>

<p><input type= «submit» value= «Post comment» /></p>

</form>

Появилось два новых типа input-ов, email и url. Email указывает на то, что пользователь должен ввести валидный E-mail, а в поле url - валидный адрес сайта. Если вы добавите атрибут required, пользователь не сможет отправить пустое поле. «Required» - это логический атрибут, новый в HTML 5. Это всего лишь значит, что поле обязательно должно иметь какое-то значение.

Разметка Сайдбара и Подвала

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

Можно взглянуть на окончательный результат разметки. Теперь перейдем к стилям.

Стилизация с CSS3

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

Основные настройки

Для начала, нам понадобится определить некоторые основные правила, касающиеся типографии, фонового цвета страницы и т.д. Все это должно быть вам известно еще из CSS 2.1.

/* Makeshift CSS Reset */

{

margin: 0;

padding: 0;

}

/* Tell the browser to render HTML 5 elements as block */

header, footer, aside, nav, article {

display: block;

}

body {

margin: 0 auto;

width: 940px;

font: 13px/22px Helvetica, Arial, sans-serif;

background: #f0f0f0;

}

h2 {

font-size: 28px;

line-height: 44px;

padding: 22px 0;

}

h3 {

font-size: 18px;

line-height: 22px;

padding: 11px 0;

}

p {

padding-bottom: 22px;

}

Сначала, простым правилом, обнуляем значения свойств margin- и padding -.

Затем, указываем браузеру, возвращать все новые элементы HTML 5 в качестве блоков. Браузеры нормально относятся к неизвестным элементам, но им неизвестно как эти элементы должны быть отрисованы по умолчанию. Нам придется сообщать об этом браузерам до тех пор, пока HTML 5 официально не будет утвержден.

Также обратим внимание, что выбрали размер шрифта в пикселях, вместо em или%. Это сделано специально, для придания статье прогрессивного характера. Когда, в один прекрасные день, все основные браузеры будут осуществлять полную поддержку HTML 5 и CSS3, у нас появится возможность масштабирования страницы, вместо простого ресайзинга текста. Благодаря этому исчезнет необходимость указывать единицы измерения в относительных единицах, поскольку браузер в любом случае сможет масштабировать страницу.

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

Стилизация Навигации Обязательно обратите внимание, что ширина у body задана 940px, и он располагается по центру. Нашему блоку навигации нужно растянуться по всей доступной ширине окна, так что мы должны применить необходимые для этого стили:

nav {

position: absolute;

left: 0;

width: 100%;

background: url («nav_background»);

}

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

nav ul {

margin: 0 auto;

width: 940px;

list-style: none;

}

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

nav ul li {

float: left;

}

nav ul li a {

display: block;

margin-right: 20px;

width: 140px;

font-size: 14px;

line-height: 44px;

text-align: center;

text-decoration: none;

color: #777;

}

nav ul li a:hover {

color: #fff;

}

nav ul li.selected a {

color: #fff;

}

nav ul li.subscribe a {

margin-left: 22px;

padding-left: 33px;

text-align: left;

background: url («rss.png») left center no-repeat;

}

Стилизация Предисловия

Разметка для предисловия очень простая. Секция с заголовком и абзацем текста.

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

#intro {

margin-top: 66px;

padding: 44px;

background: #467612 url («intro_background.png») repeat-x;

background-size: 100%;

border-radius: 22px;

}

Используем два новых свойства. Первое, это background-size, которое позволит вам масштабировать фоновое изображение. В нашем случае, мы будем масштабировать его на 100% по обеим осям. Если при добавлении контента, бокс растянется, то лежащий в фоне градиент будет масштабироваться вместе с боксом. Это как раз то, что нельзя реализовать в CSS 2.1 не нарушая семантики разметки.

Второе новое свойство это - border-radius, которое применяет закругленные углы к элементу. Радиус наших закругленных углов равен 22px, для каждого угла. Вы можете назначить различные значения для любого угла, или назначить закругленными только определенные углы.

К сожалению, ни одно из этих свойств, полностью не поддерживается в популярных браузерах. Тем не менее, можем получить некоторую поддержку, используя специфические расширения для браузеров. Background-size поддерживается в последней версии Safari, Opera и Konqueror. Border-radius поддерживается в последней версии Safari и Firefox.

#intro {

…

/* Background-size not implemented yet */

- webkit-background-size: 100%;

- o-background-size: 100%;

- khtml-background-size: 100%;

/* Border-radius not implemented yet */

- moz-border-radius: 22px;

- webkit-border-radius: 22px;

}

После того как указали свойство background-color, можно не боятся проблем с отображением страницы в браузерах, не поддерживающих background-size, таких как Firefox. Теперь нужно стилизовать заголовок и текст.

#intro h2, #intro p {

width: 336px;

}

#intro h2 {

padding: 0 0 22px 0;

font-weight: normal

color: #fff;

}

#intro p {

padding: 0;

color: #d9f499;

}

Картинку цветка можно легко поместить на страницу, путем добавления второго фонового изображения, то, что поддерживается в CSS3, для секции #intro.

#intro {

…

background: #467612 url («intro_background.png») top left (287px 100%) repeat-x,

url («intro_flower.png») top rightright (653px 100%) no-repeat;

…

}

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

К сожалению ни один из браузеров полностью не поддерживает этого. Поэтому нам пока придется действовать по старинке: будем использовать картинку и позиционировать ее с использованием CSS.

Стилизация Контента и Сайдбара

Контент и сайдбар должны быть расположены рядом друг с другом. Обычно это делается с помощью float, но в CSS3 это можно сделать с помощью таблиц!

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

<div id= «content»>

<div id= «mainContent»>

<section>

<! - Blog post ->

</section>

<section id= «comments»>

<! - Comments ->

</section>

<form>

<! - Comment form ->

</form>

</div>

<aside>

<! - Sidebar ->

</aside>

</div>

Вся разметка остается семантической, но теперь можем ее стилизовать. Нужно сделать блок #content похожим на таблицу, с колонками из блоков #mainContent и aside. С CSS3 это очень легко:



#content {

display: table;

}

#mainContent {

display: table-cell;

width: 620px;

padding-right: 22px;

}

aside {

display: table-cell;

width: 300px;

}

Стилизация Записи

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

Множественные колонки

Множественные колонки текста раньше невозможно было создать без ручного разделения текста, но с CSS3 это очень просто, все, что понадобится это завернуть параграфы в элемент div, для работы с текущими браузерами.

<div>

<p>Lorem ipsum dolor sit amet…</p>

<p>Pellentesque ut sapien arcu…</p>

<p>Vivamus vitae nulla dolor…</p>

…

</div>

Теперь можем добавить два простых свойства.

blogPost div {

column-count: 2;

column-gap: 22px;

}

Небходимо создать 2 колонки с расстоянием 22px между ними. Дополнительный div нужен, потому что на данный момент нет поддерживаемого способа выстраивания элементов в несколько колонок. В будущем, возможно, будет достаточно указать свойство column-span, и написать всего лишь:

blogPost {

column-count: 2;

column-gap: 22px;

}

blogPost header {

column-span: all;

}

Конечно, свойства column-count и column-gap поддерживаются только некоторыми браузерами, Safari и Firefox. Пока что, придется использовать специальные расширения браузеров.

blogPost div {

/* Column-count not implemented yet */

- moz-column-count: 2;

- webkit-column-count: 2;

/* Column-gap not implemented yet */

- moz-column-gap: 22px;

- webkit-column-gap: 22px;

}

Box-shadow

Если внимательно взглянем на картинку можно увидеть тень. Можем сгенерировать ее используя CSS3 и свойство box-shadow.

blogPost img {

margin: 22px 0;

box-shadow: 3px 3px 7px #777;

}

Первые «3px» сообщают браузеру, где хотим расположить тень по горизонтали. Вторые «3px», сообщают, где хоти расположить тень по вертикали. Последние «7px», как должна быть размыта рамка. Если установим последнее значение в ноль, рамка будет сплошной. Последнее, но не по значению, указывается основной цвет тени. Этот цвет конечно тускнеет, в зависимости от того насколько большое размытие тени вы установили. Это свойство еще не поддерживается во всех браузерах. Фактически оно работает только в Safari, и опять придется использовать специфические расширения браузеров.

blogPost img {

margin: 22px 0;

- webkit-box-shadow: 3px 3px 7px #777;

}

Полосатые Комментарии

Полосатая раскраска или подсветка каждого второго элемента в последовательности, традиционно связана с выбором всех элементов, с помощью JavaScript, затем прогон их в цикле и подсветка всех четных элементов. CSS3 предоставляет псевдо-класс «nth-child», который делает это до смешного легко, без использования JavaScript. Мы используем его для полосатой раскраски комментариев.

section#comments article:nth-child (2n+1) {

padding: 21px;

background: #E3E3E3;

border: 1px solid #d7d7d7;

/* Border-radius not implemented yet */

- moz-border-radius: 11px;

- webkit-border-radius: 11px;

}

Таинственное значение «2n+1», на самом деле очень простое, если понимаем что это значит:

2n - выбор каждого второго элемента списка. Если напишем 3n, будет выбран каждый третий элемент, 4n - четвертый, и так далее.

+1 сообщает браузеру, что начать нужно с первого элемента. Если знакомы с программированием, то должны знать, что все массивы начинаются с 0, здесь точно так же. Это значит что элемент с номером 1, на самом деле второй элемент в последовательности.

В качестве альтернативы, можно написать просто:

section#comments article:nth-child(odd) {…}

Здесь используется один из наиболее часто используемых стандартных значений, odd и even. Стилизация остальной части комментариев довольно проста для понимания, с вашими новыми знаниями.

Стилизация Формы отправки комментариев, Подвала и Сайдбара

Для стилизации подвала сайдбара и формы комментариев, была использована пара CSS3-техник. В форме комментариев и в подвале, используем ту же технику табличной раскладки, что и в основном макете. В сайдбаре использовался border-radius, для добавления закругленных углов различным секциям.

Финальный Дизайн

Смотрите результат нашей работы, со всеми стилями.

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

2.2 LESS: динамический язык стилевой разметки

LESS расширяет CSS динамическими возможностями, такими как переменные, примешивания, операции и функции. LESS может использоваться как на стороне клиента (IE 6+, Webkit, Firefox), так и на стороне сервера, с Node.js и Rhino.

Переменные

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

@color: #4D926F;

#header {

color: @color;

}

h2 {

color: @color;

} /* Скомпилированный CSS */

#header {

color: #4D926F;

}

h2 {

color: #4D926F;

}

Примешивания (mixins)

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

rounded-corners (@radius: 5px) {

border-radius: @radius;

- webkit-border-radius: @radius;

- moz-border-radius: @radius;

}

#header {

rounded-corners;

}

#footer {

rounded-corners(10px);

} /* Скомпилированный CSS */

#header {

border-radius: 5px;

- webkit-border-radius: 5px;

- moz-border-radius: 5px;

}

#footer {

border-radius: 10px;

- webkit-border-radius: 10px;

- moz-border-radius: 10px;

}

Вложенные правила

Вместо создания длинных имен селекторов для указания наследования, в Less мы можем просто вкладывать селекторы в другие селекторы. Это делает наследование прозрачнее для понимания, а таблицы стилей - короче. // LESS

#header {

h1 {

font-size: 26px;

font-weight: bold;

}

p {font-size: 12px;

a {text-decoration: none;

&:hover {border-width: 1px}

}

}

}

/* Скомпилированный CSS */

#header h1 {

font-size: 26px;

font-weight: bold;

}

#header p {

font-size: 12px;

}

#header p a {

text-decoration: none;

}

#header p a:hover {

border-width: 1px;

}

Функции и операции

Встречаются ли в ваших таблицах стилей элементы, пропорциональные другим элементам? Операции позволяют увеличивать, уменьшать, делить и умножать и значения и цвета свойств, давая возможность указывать сложные соотношения между свойствами. Функции используются точь-в-точь как в JavaScript-коде, позволяя манипулировать значениями так, как Вам угодно. // LESS

@the-border: 1px;

@base-color: #111;

@red: #842210;

#header {

color: @base-color * 3;

border-left: @the-border;

border-right: @the-border * 2;

}

#footer {

color: @base-color + #003300;

border-color: desaturate (@red, 10%);

}

/* Скомпилированный CSS */

#header {

color: #333;

border-left: 1px;

border-right: 2px;

}

#footer {

color: #114411;

border-color: #7d2717;

}

Использование на стороне клиента

Подключите таблицу стилей.less при помощи указания rel со значением «stylesheet/less»:

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

Затем скачайте less.js по ссылке вверху этой страницы, и подключите его в секции <head> вашей страницы, вот так:

<script src= «less.js» type= «text/javascript»></script>

Обратите внимание, что важно подключить таблицу стилей до скрипта.

Режим слежения

Режим слежения - финкция на стороне клиента, при использовании которой стили обновляются автоматически по мере изменения.

Для того, чтобы включить ее, допишите `#! watch' к адресу в строке браузера, а затем обновите страницу. В качестве альтернативы, Вы можете запустить less.watch() из отладочной консоли.

Использование на стороне сервера

Установка

Простейший способом установить поддержку LESS на сервер - является использование npm, менеджера пакетов node, таким образом:

$ npm install less

Использование

После установки, Вы можете вызывать компилятор Less из node, вот так:

var less = require('less');

less.render ('.class {width: 1 + 1}', function (e, css) {

console.log(css);

});

что выведет

class {

width: 2;

}

Вы также можете вручную вызывать парсер и компилятор:

var parser = new (less. Parser);

parser.parse (function (err, tree) {

if (err) {return sys.error(err)}

console.log (tree.toCSS());

});

Конфигурация

Вы можете передать некоторые параметры конфигурации прямо в компилятор:

var parser = new (less. Parser) ({

paths: ['.', './lib'], // указывает пути поиска для директив @import

filename: 'style.less' // указывает имя файла, для улучшения сообщений об ошибках

});

parser.parse ('.class {width: 1 + 1}', function (e, tree) {

tree.toCSS({compress: true}); // сжимать (minify) результирующий CSS

});

Использование из командной строки

Комплект Less содержит в себе исполняемый файл, что дает возможность вызывать компилятор из командной строки, например:

$ lessc styles.less

в результате скомпилированный CSS будет выведен в stdout, и его можно будет перенаправить в файл с именем по Вашему выбору:

$ lessc styles.less > styles.css

Для вывода сжатого (minified) таблицы CSS следует указать опцию - x. Если Вы хотите еще больше сжать выводимый код, возможен вызов YUI CSS Compressor - для этого добавьте опцию - yui-compress.

Язык

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

Переменные

Эта возможность вполне очевидна:

@nice-blue: #5B83AD;

@light-blue: @nice-blue + #111;

#header {color: @light-blue;}

что дает на выходе:

#header {color: #6c94be;}

Можно также определять переменную, ссылаясь на другую переменную по ее имени:

@fnord: «I am fnord.»;

@var: 'fnord';

content: @@var;

Что компилируется в: content: «I am fnord.»;

Заметьте, что то, что мы называем переменными - на самом деле `константы', поскольку они могут быть определены только раз.

Примешивания

В LESS возможно включать целый набор свойств из одного набора правил в другой набор. Скажем, мы имеем следующий класс:

bordered {

border-top: dotted 1px black;

border-bottom: solid 2px black;

}

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

#menu a {

color: #111;

bordered;

}

post a {

color: red;

bordered;

}

Свойства класса.bordered теперь появятся и в #menu a, и в.post a. Результатом компиляции окажется:

#menu a {

color: #111;

border-top: dotted 1px black;

border-bottom: solid 2px black;

}

post a {

color: red;

border-top: dotted 1px black;

border-bottom: solid 2px black;

}

Любой класс CSS, а также набор правил id или элемента может быть смешан точно так же.

Параметризированные примеси

В LESS существует особый вид наборов правил, которые можно смешивать, точно как описываемые выше классы, но которые принимают параметры.

Вот канонический пример:

border-radius (@radius) {

border-radius: @radius;

- moz-border-radius: @radius;

- webkit-border-radius: @radius;

}

А вот как мы можем подмешивать этот набор правил в другие наборы:

#header {

border-radius(4px);

}

button {

border-radius(6px);

}

Параметризированные примеси могут также иметь значения по-умолчанию для своих параметров:

border-radius (@radius: 5px) {

border-radius: @radius;

- moz-border-radius: @radius;

- webkit-border-radius: @radius;

}

и, если мы используем такой вызов:

#header {

border-radius;

}

то получим на выходе значение border-radius, равное 5px.

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

wrap () {

text-wrap: wrap;

white-space: pre-wrap;

white-space: - moz-pre-wrap;

word-wrap: break-word;

}

pre {.wrap}

Это даст на выходе:

pre {

text-wrap: wrap;

white-space: pre-wrap;

white-space: - moz-pre-wrap;

word-wrap: break-word;

}

Переменная с именем @arguments

Название переменной @arguments внутри примешивания имеет особое значение. В процессе компиляции заменяется на все переданные аргументы. Это удобно, если нет желания возиться с отдельными параметрами:

box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {

box-shadow: @arguments;

- moz-box-shadow: @arguments;

- webkit-box-shadow: @arguments;

}

box-shadow (2px, 5px);

Совпадение с шаблоном и предохранительные выражения

Иногда, Вы можете захотеть изменить поведение примешивания, в зависимости от переданный в него параметров. Попробуем на чем-нибудь простом:

mixin (@s, @color) {…}

class {

mixin (@switch, #888);

}

Теперь, предположим, что мы хотим, чтобы.mixin вела себя по-разному, в зависимости от величины @switch. Определяем.mixin таким образом:

mixin (dark, @color) {

color: darken (@color, 10%);

}

mixin (light, @color) {

color: lighten (@color, 10%);

}

mixin (@_, @color) {

display: block;

}

Теперь, если мы используем:

@switch: light;

class {

mixin (@switch, #888);

}

Мы получим такой CSS:

class {

color: #a2a2a2;

display: block;

}

Т.е. величина цвета (@color), переданная в.mixin, оказалась осветлена. Если бы значение @switch было задано как dark, результатом стал бы более темный цвет.

Вот что происходит:

Первое определение примешивания не подходит, поскольку мы ожидаем black в качестве первого аргумента.

Второе определение примешивания подходит, поскольку мы ожидаем light.

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

Отработали только подошедшие под определение примешивания. Переменные могут совпадают и привязываться к любому значению. Все, что отличается от переменной, дает совпадение, только если равно самому себе.

Мы можем также сравнивать арность, т.е. количество элементов, например:

mixin (@a) {

color: @a;

}

mixin (@a, @b) {

color: fade (@a, @b);

}

Если мы вызовем.mixin с одним аргументом, мы получим вывод первого определения, но если мы вызовем примешивание с двумя аргументами, мы получим второе определение, а именно @a, приглушенное на @b.

Предохранители

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

В попытке оказаться как можно ближе к декларативной природе CSS, LESS использует условное исполнение при помощи предохраняемых примешиваний вместо выражение if/else, в русле спецификации указания @media.

Начнем с примера:

mixin (@a) when (lightness(@a) >= 50%) {

background-color: black;

}

mixin (@a) when (lightness(@a) < 50%) {

background-color: white;

}

mixin (@a) {

color: @a;

}

Ключевым являемся указание when, которое описывает предохранительное выражение (здесь всего один предохранитель). Теперь, если запустить код:

class1 {.mixin(#ddd)}

class2 {.mixin(#555)}

Мы получим:

class1 {

background-color: black;

color: #ddd;

}

class2 {

background-color: white;

color: #555;

}

Полный список операторов сравнения в предохраняющих выражениях: > >= = =< <. Кроме того, ключевое слово true - всегда дающее истину выражение, делающее две следующие примеси эквивалентными:

truth (@a) when (@a) {…}

truth (@a) when (@a = true) {…}

Любые выражения, кроме true, являются ложью:

class {

truth(40); // Не совпадет ни с одним из выражений.

}

Предохранители могут разделяться запятыми `, ' - если однин из них срабатывает, весь набор считается совпадшим:

mixin (@a) when (@a > 10), (@a < -10) {…}

Заметьте, что можно сравнивать аргументы друго с другом, либо с не-аргументами:

@media: mobile;

mixin (@a) when (@media = mobile) {…}

mixin (@a) when (@media = desktop) {…}

max (@a, @b) when (@a > @b) {width: @a}

max (@a, @b) when (@a < @b) {width: @b}

Наконец, если Вы хотите сравнивать примешивания по типу значения, Вы можете использовать функции вида is*:

mixin (@a, @b: 0) when (isnumber(@b)) {…}

mixin (@a, @b: black) when (iscolor(@b)) {…}

Вот функции для сравнения основных типов:

iscolor

isnumber

isstring

iskeyword

isurl

Если необходимо проверить, чтобы величина была не только числом, но и имела бы значение определенного типа:

ispixel

ispercentage

isem

Можно использовать ключевое слово and для указания дополнительных условий, например:

mixin (@a) when (isnumber(@a)) and (@a > 0) {…}

И ключевое слово not для отрицания условия:

mixin (@b) when not (@b > 0) {…}

Вложенные правила

LESS дает возможность вкладывать определения, вместо либо вместе с каскадированием. Пусть, например, у нас есть такой CSS:

#header {color: black;}

#header.navigation {

font-size: 12px;

}

#header.logo {

width: 300px;

}

#header.logo:hover {

text-decoration: none;

}

При использовании LESS, мы также можем записать его в виде:

#header {

color: black;

navigation {

font-size: 12px;

}

logo {

width: 300px;

&:hover {text-decoration: none}

}

}

либо так:

#header {color: black;

navigation {font-size: 12px}

logo {width: 300px;

&:hover {text-decoration: none}

}

}

Итоговый код более понятен, и повторяет структуру вашего дерева DOM.

Обратите внимание на элемент & - он используется, когда указанный селектор нужно приписать к селекторe-родителю, а не использовать как вложенный элемент. Это особенно удобно для псевдо-классов типа: hover или: focus.

Например, запись:

bordered {

&.float {

float: left;

}

top {

margin: 5px;

}

}

даст на выходе

bordered.float {

float: left;

}

bordered.top [

margin: 5px;

}

Операции

С любыми числовые и цветовые значениями можно производить математические операции. Вот несколько примеров:

@base: 5%;

@filler: @base * 2;

@other: @base + @filler;

color: #888 / 4;

background-color: @base-color + #111;

height: 100% / 2 + @filler;

Итоговый код будет вполне логичным - LESS распознает разницу между указаниями цветов и другими единицами измерений. Если единивы измерений используются в операции, скажем, так:

@var: 1px + 5;

LESS использует указанную единицу измерения для итогового кода - что даст, в данном случае, 6px.

Скобки также разрешены в операциях:

width: (@var + 5) * 2;

И даже обязательны в составных значениях:

border: (@width * 2) solid black;

Функции работы с цветом

LESS предлагает множество функций, изменяющих указание цвета. Цвета сначала преобразуются в цветовую модель HSL (от англ. Hue, Saturation, Lightness - цветовая модель, в которой цветовыми координатами являются тон, насыщенность и светлота), а затем манипуляции ведутся с каждым каналом по отдельности:

lighten (@color, 10%); // возвращает цвет, который на 10% *светлее*, чем @color

darken (@color, 10%); // возвращает цвет, который на 10% *темнее*, чем @color

saturate (@color, 10%); // возвращает цвет, на 10% *более* насыщенный, чем @color

desaturate (@color, 10%); // возвращает цвет, на 10% *менее* насыщенный, чем @color

fadein (@color, 10%); // возвращает цвет, на 10% *менее* прозрачный, чем @color

fadeout (@color, 10%); // возвращает цвет, на 10% *более* прозрачный, чем @color

spin (@color, 10); // возвращает цвет, на 10 градусов больший по оттенку, чем @color

spin (@color, -10); // возвращает цвет, на 10 градусов меньший по оттенку, чем @color

Использование этих функций вполне очевидно:

@base: #f04615;

class {

color: saturate (@base, 5%);

background-color: lighten (spin(@base, 8), 25%);

}

Вы также можете извлекать информацию о цвете:

hue(@color); // возвращает канал тона (`hue`) в указанном @color

saturation(@color); // возвращает канал насыщенности (`saturation`) в указанном @color

lightness(@color); // возвращает канал светлоты (`lightness`) в указанном @color

Это полезно, если Вы хотите создать новый цвет, основываясь на значениях каналов другого цвета, например:

@new: hsl (hue(@old), 45%, 90%);

в результате @new получит тон (hue), равный тону цвета @old, но при этом будет иметь свои собственные насыщенность и светлоту.

Математические функции

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

round (1.67); // вернет `2`

ceil (2.4); // вернет `3`

floor (2.6); // вернет `2`

Если Вам нужно преобразовать значение в проценты, это можно сделать при помощи функции percentage:

percentage (0.5); // вернет `50%`

Пространства имен

Иногда появляется необходимость сгруппировать переменные или примеси, либо для удобства организации кода, либо просто для некоторой инкапсуляции. Вы можете сделать это весьма интуитивно понятно в LESS - скажем, чтобы собрать несколько примесей и переменных под #bundle, для дальнейшего использования, достаточно указать:

#bundle {

button () {

display: block;

border: 1px solid black;

background-color: grey;

&:hover {background-color: white}

}

tab {…}

citation {…}

}

Теперь, чтобы примешать.button к нашему классу #header a, указываем:

#header a {

color: orange;

#bundle >.button;

}

Зоны видимости

Зоны видимости в LESS похожи на одноименное понятие, применяемые в языках программирования. Переменные и примеси сначала ищутся локально, а затем, если компилятор не смог их найти, поиск продолжается в родительской зоне видимости, затем выше, и т.д.

@var: red;

#page {

@var: white;

#header {

color: @var; // white

}

}

#footer {

color: @var; // red

}

Комментарии

LESS придерживается привычного по CSS стиля комментариев:

/* Привет, я комментарий в стиле CSS! */

class {color: black}

В LESS также возможны однострочные комментарии, они считаются невидимыми, и не появляются в итоговом, скомпилированный выводе CSS:

// Привет, я невидимый комментарий, я не появлюсь в выводе CSS

class {color: white}

Импортирование

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

@import «lib.less»;

@import «lib»;

Если Вы хотите импортировать файл CSS, и не хотите, чтобы LESS обрабатывал его содержимое, просто используйте расширение.css:

@import «lib.css»;

Директива будет оставлена как есть, и в этом же виде попадет в вывод CSS.

Интерполяция строк

Переменные могут быть включены внутрь строк, как в ruby или в PHP, при помощи конструкции @{name}:

@base-url: «http://assets.fnord.com»;

background-image: url(«@{base-url}/images/bg.png»);

Экранирование

Иногда Вам может потребоваться вывести значение параметра CSS, либо не валидное с точки зрения CSS, либо с синтаксисом, который LESS не распознает.

В подобном случае используйте функцию e(), которой нужно передать в качестве параметра строку. Вот пример:

class {

filter: e («progid:DXImageTransform. Microsoft. AlphaImageLoader (src='image.png')»);

}

Это будет выведено в виде:

class {

filter: progid:DXImageTransform. Microsoft. AlphaImageLoader (src='image.png');

}

2.3 Технологии упрощенной разметки HAML и SASS

HAML служит для упрощенной записи HtmL, SACC - для упрощенной записи стилей

Haml - это абстрактный язык описания разметки для генерации XHTML документа. HAML написан на Ruby, но существуют так же реализации на других языках программирования.

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

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

Операторы HAML

Для того что бы записать html тег в haml достаточно поставить знак «%» (процент) в начале строки и указать имя тега. Например:

haml

%div

html

<div></div>

Использование оператора «%» без указания имени тега является ошибочным, для вывода «%» в начале строки используйте оператор экранирования, описанный ниже.

Помимо оператора «%» в haml есть операторы аналогичные операторам css: «.» (точка) - обозначающая класс и «#» (решётка) - обозначающая id элемента. Например:

haml

my_class

#my_id

html

<div class='my_class'></div>

<div id='my_id'></div>

Перед операторами «.» и «#» не указано имя тега, haml использует html тег div по умолчанию. Если вам необходимо задать класс или id у другого элемента используйте операторы «.» и «#» после имени тега. Например: