Основы CSS: разметка страниц. Разметка подвала страницы

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

Основы разметки хтмал или что такое тег

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

Текст параграфа, выровненный по правому краю.

В данном случае блочный тег p создаёт параграф, а атрибут align выравнивание содержимого параграфа по правому (right) краю.

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

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

В данном случае строковый тег img вставляет на веб-страницу элемент в виде картинки, адрес которой прописывается в атрибуте src . Значением атрибута alt является альтернативный текст, который выводится в том случае, если картинка не доступна, а атрибут border задает толщину рамки вокруг картинки.

Чтобы Вам было легче запомнить всё выше изложенное, приведу небольшую и наглядную шпаргалку, которую Вы можете использовать для изучения HTML:

Краткий справочник по хтмл тегам

И так, мы уже познакомились с двумя тегами, так что их я опущу. Ниже я приведу ещё ряд тегом разметки хтмл документа и некоторые их атрибуты. Для начала этого будет более чем достаточно, но если вас интересует полный перечень хтмл тегов и их атрибутов, рекомендую заглянуть на сайт htmlbook.ru, а также добавить его в закладки как наиболее полный и удобный справочник по ХТМЛ и ЦСС. Продолжим?

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

Как выделить текст жирным? Для этого вам нужно использовать строковый тег B , который устанавливает для содержащегося в нём текста жирное начертание шрифта.

Как сделать текст курсивом? Для этого вам нужно использовать строковый тег I , который устанавливает для содержащегося в нём текста курсивное начертание шрифта.

Как подчеркнуть текст? Для этого вам нужно использовать строковой тег U , который добавляет подчеркивание для содержащегося в нём текста.

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

Как выделить код в тексте? Для этого вам нужно использовать строковой тег CODE , который обычно отображается браузером моноширинным шрифтом, например Courier New .

Как оформить код в тексте? Для этого вам нужно использовать блочный тег PRE , который определяет блок программного кода, обычно отображается браузером моноширинным шрифтом. В отличие от строкового тега CODE , тег PRE сохраняет пробелы и переносы строк.

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

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

Как задать шрифт, цвет и размер шрифта в тексте? Для этого вам нужно использовать строковой тег FONT . Атрибут face здесь задаёт гарнитуру (название) шрифта, color - цвет шрифта, а size - его размер в условных единицах (от -7 до 7) .

Как сделать заголовок? Для этого вам нужно использовать блочные H теги, которые задают заголовки разного уровня, от 1 (самого большого) до 6 (самого маленького) , что позволяет задать структуру опубликованной на веб-странице информации. Заголовки отличаются друг от друга размером шрифта и отступы, а также выделены жирным начертанием.

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

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

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

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

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

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

Как сделать разделитель в тексте? Для этого вам нужно использовать блочный тег HR , который рисует разделительную горизонтальную линию. Атрибут color задаёт цвет линии, size - размер, а noshade - отключает трехмерный эффект.

Как сделать список? В хтмл существует два основных вида списков: нумерованный (OL ) и маркированный (UL ) . В данном случае приведен хтмл код маркированного списка, заданного блочным тегом UL . По умолчанию, в качестве маркера окружность (закрашенный кружочек) , которая отображается в начале первой строки элемента списка, заданного тегом LI .

Безусловно, в своей статье я привел лишь основные хтмл теги, которые могут понадобиться вам при разметке веб-страницы. В большинстве случаев, для ХТМЛ разметки, это более чем достаточно. Единственное, что я опустил, но, что, безусловно, важно при разметке веб-страниц, это работа с таблицами. Их нужно изучать отдельно, т.к. там слишком много нюансов, а статья получилось и без того достаточно большой. На этом у меня всё. Спасибо за внимание. Удачи!

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

Первоначально слои ввела компания Netscape, включив в свой браузер поддержку тега . Этот тег позволял прятать/показывать текущее содержимое, устанавливать положение относительно окна браузера, накладывать один слой поверх других и загружать данные в содержимое слоя из файла. Все эти параметры легко менялись с помощью JavaScript и это расширяло возможности по созданию действительно динамического контента на странице. Несмотря на столь впечатляющий набор возможностей, тег не был включён в спецификацию HTML и остался лишь расширением браузера Netscape.

Однако необходимость в указанных возможностях уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан и одобрен в рабочем проекте консорциума «CSS Positioning (CSS-P)». Основная нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента, в том числе менять значения динамически через JavaScript. К сожалению, объектные модели браузеров для доступа к элементам различались, поэтому приходилось писать достаточно сложный код, который бы учитывал эти особенности.

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

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

Хак — это набор приемов, когда определённому браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.

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

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

Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями. Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо «таблица» или «абзац» мы бы говорили «слой». Поэтому договоримся относить этот термин только к тегам .

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

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

Разделение содержимого и оформления

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

Активное применение тега

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

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

Таблицы применяются только для представления табличных данных

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

Подведу итоги. В HTML4 и XHTML слой это базовый элемент вёрстки веб-страниц, при которой активно применяются стили и придерживаются спецификаций HTML и CSS. При таком подходе важная роль уделяется тегу , с которым у большинства людей и ассоциируются слои. В каком-то смысле это является верным, поэтому договоримся в дальнейшем употреблять термин «слой» к тегу для которого указан стилевой идентификатор или класс. Таким образом, выражение «слой с именем content» подразумевает, что используется тег или .

В HTML5 добавлено несколько новых тегов разметки для обозначения разных типовых блоков страницы. К примеру, и используются для создания «шапки» и «подвала», для навигации, для боковой панели. Включение в спецификацию HTML подобных элементов призвано снизить доминирование тега и придать больше смысла разметке. Поэтому в вёрстке на HTML5 активно применяется термин «элемент», под которым подразумевается соответствующий тег и элемент который он создаёт.

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

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

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

Кнуты и прянички

Блочная верстка веб-страниц – это метод разметки страниц блоками (слоями), которые создаются при помощи специального тега < div> .

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

Вкусные пряники

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

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

…

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

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

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

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

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

Камни преткновения

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

В блочной разметке все может показаться несколько сложнее. Особенно для новичка. Потому что вам необходимо хорошо разбираться не только в html-коде, а еще и знать большинство свойств css. Однако трудности возникнут только вначале при изучении технологий, а вот после жизнь покажется сказкой.

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

Простые техники создания адаптивности

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

Bootstrap Example body{ padding:0; margin:0; background: url("http://www.bankoboev.ru/fons/ODQ1MA==/Bankoboev.Ru_avtomobili_na_nochnyh_dorogah.jpg"); font-size: 19px; color: #fff; text-align: center; } .header{ background: rgba(80, 80, 80, .8); padding: 24px; border-bottom: 3px solid #B5B5B5; } .menu{ background: rgba(80, 80, 80, .5); float: left; font-size:33px; padding: 16px; text-align: left; line-height: 1.5; height: 331px; } li{ list-style-type: none;} .container{ text-decoration: underline; padding: 29px; background: rgba(0, 1, 0, .4); } img{ height: 220px; width: 350px; outline: 6px solid #CFCFCF; } .photo{ display: inline-block; } .footer{ background: rgba(0, 1, 0, .8); padding: 11px;} Сайт СуперАвто

Фотогалерея

Видео

Контакты

Tesla

Здесь вы найдете изображения и видео, связанные с автомобильной тематикой

Фотогалерея

Видео

Контакты

Tesla

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

Для начала к блокам с классами . header , . container и . footer добавьте свойство min-width: 355px . Теперь ваша страница с контентом будет уменьшаться только до указанного размера, а после появится скролл.

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

И две папки css и image.

Если вы все делали правильно, то шаблон устанавливается на Joomla 3 без проблем. Далее мы будем работать над каскадными таблицами стилей , которые отвечают за оформление страниц сайта.

Момент 1. При создании таблиц я буду использовать язык CSS2 . В отличии от CSS3, он проще для понимания. Это важно, т.к. большая часть аудитории моего сайта – новички в веб-программировании. Также есть еще один минус CSS3 - этот язык в настоящий момент не поддерживается всеми браузерами. Для тех же, кто мало знаком с CSS2, для лучшего понимания, в работе над таблицами, предлагаю использовать справочник «HTML, CSS, PHP» .

Момент 2. Я всегда создаю сайты и отрабатываю шаблоны только на локальном сервере, установленном на моем компьютере. На хостинг заливаю уже готовый, полноценно функционирующий сайт с начальным контентом.

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

Момент 3. Я никогда не редактирую код шаблона из админпанели Joomla , а использую только программу Macromedia Dreamweaver . Открываю нужный мне файл, редактирую его, сохраняю (но не закрываю файл) и смотрю сразу же, какие изменения произошли на сайте. Если они мне не нравятся – отменяю, произведенные ранее действия.

ВНИМАНИЕ: Откатится назад в админке Joomla при редактировании кода невозможно!

С программой Macromedia Dreamweaver очень удобно работать – она подсвечивает код, помогает писать его очень быстро, выделяет ошибки, позволяет произвести откат. Всю документацию по Macromedia Dreamweaver и саму программу вы можете найти на сайте.

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

Чтобы в процессе работы хорошо видеть, как встают блоки, в менеджере модулей CMS Joomla я создала модуль поиска по сайту и поставила его в позицию «user1», модуль горизонтального меню - в позицию «user2», модуль навигации по сайту – в позицию «user3», три модуля с произвольным HTML кодом – в позиции «left», «right», «footer».

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

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

Сначала оформляем блок «body», зададим ему пока серый цвет фона.

font:14px Arial, Helvetica, sans-serif ;

line-height:1.3;

text-align:left;

background-color:#fff;

overflow:hidden;

Бло ки "logo" и "user1" будут выводиться в контейнере «top», зададим высоту, а ширина будет занимать 100% ширины страницы, т.е. 950px.

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

background-color:#0099FF;

Блоку "user1" зададим фиксированную высоту, ширину, желтый цвет фона, выравнивание по левой стороне.

background-color:#CCFF00;

Блок вывода горизонтального меню «user2» будет иметь ширину 100% от ширины страницы, т.е. 950px. Высота блока будет растягиваться до высоты модуля меню.

#user2 { width: 100%;}

Блок вывода шапки сайта «header» будет иметь ширину 100% от ширины страницы. Высота блока будет растягиваться до высоты изображения, которое будет выводиться в модуле.

#header {width:100%;}

Блок «user3» будет иметь ширину 100% от ширины страницы. Высота блока будет растягиваться до высоты модуля, который будет выводиться в позиции «user3» .

background-color:#CC9900;

Оформление левой колонки блок «left»

background-color:#FF6666;

Оформление правой колонки блок «right»

background-color:#66FF33;

Теперь разберемся с контентом. Если в левой и правой колонке будут выводиться модули, то ширина компонента контент будет 550рх (950-200 -200).

Если модули будут выводиться или только в левой или только правой колонке, то ширина компонента контент будет 750рх (950-200).

Если будут отключены обе колонки, контент занимает 100% страницы, т.е. 950рх.

Блок «footer» будет иметь ширину 100% от ширины страницы. Высота блока будет растягиваться до высоты модуля, который будет выводиться в позиции «footer». Отменим обтекание блока одновременно с правого и левого края, чтобы футер не поднимался вверх.

background-color:#82b5bf;

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

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

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

Что такое CSS?

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

Аббревиатура CSS расшифровывается как (каскадная таблица стилей). Она состоит из параметров, что отвечают за визуальное оформление объектов на странице.

Преимущества CSS

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

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

Подключение CSS

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

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

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

Правило CSS

Изучение CSS разметки должно начинаться с изучения синтаксиса. В каскадной таблице стилей не существует тегов, скриптов или параметров. Здесь есть только правило, которому необходимо следовать. Состоит оно из селектора и блока стилей. Допустим, в каскадной таблице стилей задана позиция: body{background:black; color:white}.

Здесь body и есть селектором, отвечающим за стилевое форматирование тела сайта; background:black и color:white - это свойства и их значения. Они записываются через точку с запятой. Такая позиция делает фон сайта черным, а текст белым.

Селекторы

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

Что же нужно знать о селекторах? Во-первых, их разновидности:

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

Стоит помнить, что один идентификатор можно использовать только раз. В этом примере селектор получил название pink, если нужен еще один идентификатор, то ему просто нужно присвоить другое имя (pink2, green и т. д.).

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

Объектов с классами может быть сколько угодно.

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

Идентификаторы и классы можно применять для любых объектов. И если возникает необходимость задать один стиль для текста и картинки, то можно не указывать имя элемента, как это было в примере (p#pink, p.red). Можно просто поставить точку или решетку. Также селекторы можно группировать. Например, h1, h2, h3{color:red; font-sixe:17px}.

Разметка страниц

Изучая разметку страниц, можно понять, что существует несколько ее разновидностей:

Табличная. Когда еще не было каскадной таблицы стилей, эта разметка была основной. Она позволяла максимально точно разместить объекты ресурса друг от друга. Но код получается слишком большим и плохо индексируется поисковиками. Еще один недостаток такого метода - скорость загрузки. Пока не загрузится вся таблица, пользователь не увидит даже начало текста.
Блочная. Сейчас это основной способ разметки страниц. Его использование стало возможным только благодаря развитию и совершенствованию таблицы стилей.

Преимущества блочной верстки

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

Единственный недостаток такого подхода - разное «понимание» браузерами. Некоторые отображают ресурс в таком виде, в каком видит его веб-мастер. Но есть браузеры, что искажают изображение, поэтому при большом количестве классов и селекторов необходимо использовать хаки, что сделают код кроссбраузерным.

Как сделать блочную верстку сайта?

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

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

Первое, что нужно сделать после того, как макет сайта будет разрезан на части, в HTML задать структуру сайта, используя тег , и присвоить для каждого слоя свой селектор. Например, если это меню, то так и написать: id=menu. После чего нужно подключить каскадную таблицу стилей и задать для каждого слоя свои параметры. Самый простой код имеет следующий вид.

Задаем параметры

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

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

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

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