Создание сайтов - это работа не для людей со слабыми нервами. Помимо знаний нужно обладать креативным мышлением, задатками перфекциониста и филигранной точностью при разметке страницы. 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 задать структуру сайта, используя тег
Задаем параметры
На примере хорошо видно, как задаются параметры для разметки страницы задано в пикселях, хотя в большинстве случаев лучше использовать проценты. В окне браузера этот сайт будет иметь вид «скроенного из разных частей полотна» так как в примере были использован только цвет области блока. Но если заменить его фоновым изображением, то можно получить не только красивый, но и достаточно функциональный продукт.
Между тегами
Этот пример - лишь небольшая часть всего того, с чем должен будет столкнуться веб-мастер, работая над качественными характеристиками ресурса. При создании хорошего веб-ресурса, нередко могут быть использованы хаки для приобретения функции кроссбраузерности. Редактировать коды страниц можно в специальных редакторах, что значительно упрощает работу, хотя не избавляет веб-мастера от необходимости ручного редактирования.
Создать сайт самостоятельно может каждый. Главное - понимать, что и CSS, и HTML были созданы людьми и предназначены для людей. Основы разметки страниц доступны всем, а создание веб-ресурсов не только прерогатива избранных, но и может быть вполне обыденной деятельностью каждого желающего.
Для начала давайте определимся, что такое разметка? Как следует из самого термина, разметка - это расстановка меток, в нашем случае в коде хтмл документа, т.е. веб-страницы. В качестве меток здесь выступают теги , что позволяют определить границы действия разметки или создать элемент хтмл документа. Всё ещё непонятно? Тогда читайте дальше, и всё станет на свои места.
Основы разметки хтмал или что такое тег
Тег представляет собой конструкцию, начинающуюся знаком меньше (<) и заканчивающуюся знаком больше (>) . Большинство тегов состоят из открывающегося и закрывающегося тегов. Отличие между ними состоит в том, что в открывающемся теге вы можете (если нужно) указать ряд дополнительных его свойств, используя так называемые атрибуты , а в начале названия закрывающегося тега указывается символ сэлш (/) , например:
Текст параграфа, выровненный по правому краю.
.В данном случае блочный тег 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 .
Безусловно, в своей статье я привел лишь основные хтмл теги, которые могут понадобиться вам при разметке веб-страницы. В большинстве случаев, для ХТМЛ разметки, это более чем достаточно. Единственное, что я опустил, но, что, безусловно, важно при разметке веб-страниц, это работа с таблицами. Их нужно изучать отдельно, т.к. там слишком много нюансов, а статья получилось и без того достаточно большой. На этом у меня всё. Спасибо за внимание. Удачи!
Раньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена . Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.
Отличия блочной вёрстки от табличной
Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега Блочная вёрстка лишена недостатков табличной - поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки Единственный ощутимый минус блочной вёрстки - сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем. В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны. Каждая часть страницы помещается в свой блок Конечный HTML-документ представляет собой набор блоков
Информация о марке, модели и альтернативных названиях конкретного устройства, если таковые имеются. ДизайнИнформация о размерах и весе устройства, представленная в разных единицах измерения. Использованные материалы, предлагаемые цвета,...
Сегодня компьютерные технологии, стремительно развиваются, совершенствуя другие отрасли производства. Для развития других технологий, с помощью компьютерных, нужны специальные программы. Эти программы устанавливают на многие заводы и фабрики, чтобы...
Инструкция Два сравнительно небольших экрана могут с легкостью заменить один широкоформатный с большой диагональю. Иногда подключение второго позволяет использовать одновременно несколько функций одного компьютера. Современные видеоадаптеры в...
, то концепция блочной вёрстки основана на активном использовании универсальных тегов
- это таблица, которую нужно использовать для отображения табличных данных и не более того.
Суть блочной вёрстки
