Разметка страниц css. Что такое CSS? Свойства и возможные значения CSS

Создание сайтов - это работа не для людей со слабыми нервами. Помимо знаний нужно обладать креативным мышлением, задатками перфекциониста и филигранной точностью при разметке страницы. 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 были созданы людьми и предназначены для людей. Основы разметки страниц доступны всем, а создание веб-ресурсов не только прерогатива избранных, но и может быть вполне обыденной деятельностью каждого желающего.

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

Как создать структуру страницы с помощью блоков (блочная вёрстка) 1. Как разбить макет страницы на секции

Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье .

Стандартная веб-страница содержит следующие секции:

Рис. 1. Основные секции страницы

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

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

Рис. 2. Основные секции страницы с тегом-контейнером

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

Container { width: 100%; max-width: 1024px; /*максимальная ширина может иметь другое значение*/ padding: 0 15px; margin: 0 auto; }

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

2. Разметка шапки сайта и позиционирование её элементов

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

LOGO

Главная
О нас
Контакты

Рис. 3. Шапка сайта с добавленными логотипом и ссылками

Logo { float: left; } nav { float: right; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; /*один из способов разместить элементы в строку*/ }

Существует несколько способов разместить блочные элементы в строку. Все они приведены в уроке .

Рис. 4. Эффект схлопывания блока-контейнера

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

Container:after { content: ""; display: table; clear: both; }

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

Container { width: 100%; max-width: 1024px; padding: 15px; margin: 0 auto; }
Рис. 5. Очистка потока

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

Рис. 6. Логотип-картинка

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

Nav a { text-decoration: none; line-height: 38px; } Рис. 7. Выравнивание ссылок меню шапки

3. Создание сетки для основной части страницы

Основная часть страницы чаще всего представляет собой сетку из блоков разной ширины. Позиционирование таких блоков осуществляется также с помощью свойства float . Каждую строку блоков обернём дополнительным блоком с классом.row:

Рис. 7. Сетка основной части страницы.col-1-2 { width: 50%; float: left; } .col-1-3 { width: 33.3333333333%; float: left; } .col-1-4 { width: 25%; float: left; } .col-2-3 { width: 66.6666666667%; float: left; }

Для элемента с классом.row также применим очистку потока:

Container:after, .row:after { content: ""; display: table; clear: both; }

Чтобы отделить ряды друг от друга, можно добавить нижний внешний отступ:

Row { margin-bottom: 15px; }

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

Рис. 8. Разная высота элементов сетки

Высоту блоков можно зафиксировать, указав её явно, например, .row div {height: 100px} . Но в этом случае нужно быть уверенным, что при добавлении адаптивности макету содержимое блоков не будет выходить за край блока.

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

Lorem ipsum dolor sit amet. Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper at. .row-one { background: lightblue; } .col-2-3 { width: 66.6666666667%; float: left; background: seashell; }
Рис. 9. Фоновая подложка

Если основная секция страницы содержит только два блока, то дополнительный ряд-обёртку можно не добавлять:

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

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

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

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

Шаг 1 - Разметка веб страницы с помощью тегов HTML

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

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

Теги, как правило следуют в паре - открывающий и закрывающий. Последний отличается тем, что имеет после первой скобки знак "/". (Например: ). С помощью тегов вы определяете, что будет располагаться на вашей веб странице.

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

Простейшие теги веб страницы это:

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

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

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

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

Код HTML этой страницы будет выглядеть, как показано ниже. Это пример использования тега div :

Как видите, каждому тегу div мы дали определенный селектор ID . То есть каждому отдельному блоку нашей страницы мы дали свое название. Это необходимо для того, чтобы позже, задавая стиль блокам в файле CSS, мы могли отличать один блок от другого.

Существует два вида селекторов . ID - используется для уникальных блоков, таких, которые больше нигде на странице не повторяются. В то время как селектор CLASS - применятся для обозначения повторяющихся блоков.

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

Шаг 2 - прикрепление таблицы стилей CSS

Как уже было сказано, CSS таблица стилей определяет дизайн элементов веб страницы. Вы можете разместить ее как внутри своего html документа, так и прикрепить внешний файл. В этом уроке мы будем использовать последний вариант.

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

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

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

Шаг 3 - задаем стиль

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

Для записи селекторов, кроме тега body , используются знаки "# " либо ". ". они следуют перед именем селектора. Первый применяется, чтобы указать на селектор ID , второй, соответственно на селктор CLASS . Селектор может иметь любое количество свойств. Которые заключаются в фигурные скобки "{} ".

#selector {

property:value;

}

.selector {

property:value;

}

У нас имеются следующие селекторы:

body
container
header
navigation
menu
content
footer

Свойства и возможные значения CSS:

Фон (background ) может быть задан изображением или цветом, либо и тем и другим одновременно. Чтобы отобразилось изображение, необходимо прописать путь к нему. Если фон задан цветом, то используется шестнадцатеричная система (#ffffff для белого цвета и тд.).

Свойство color используется для определения цвета текста.

font-family
- это свойство определяет семейство шрифтов, которыми будет отображаться текст. Как правило задается сразу три типа шрифтов. Поэтому, если браузер не смог отобразить первый, ему есть из чего выбирать (Trebuchet MS, Arial, Times New Roman).

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

margin - определяет местоположение блока. За точку отсчета при этом может выступать как окно браузера, так и границы других элементов веб страницы. Так как мы хотим разместить свою страницы посредине окна браузера, то запишем такие значения для данного свойства: 0px auto 0px auto. Запись может выглядеть проще 0px auto. Отсчет в случае задания данных значений идет по часовой стрелке: верх - право- низ - лево. Поскольку верх - низ, право - лево у нас совпадают, то дублировать их нет потребности.

width - ширина блока.

height - высота.

float - свойство, которое позволяет нам позиционировать элементы селектора, главным образом по левую или по правую сторону.

Теперь добавим код в наш файл стилей style.css (ведь вы его уже создали, да?):

body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}

#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}

#header {
background: #838283;
height: 200px;
width: 900px;
}

#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}

#menu {
background: #333333;
float: left;
width: 200px;
height: 600px;
}

#content {
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}

#footer {
background: #838283;
height: 180px;
width: 900px;
}

Примечание

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

Вот его код HTML:

#clear {
clear:both;
}

А между тегами head записать, какую кодировку необходимо использовать браузеру, если вы вдруг попробуете добавить русский текст в свои блоки:

Финальный код HTML:

Основы HTML и CSS

Шапка сайта

Блок навигации

Меню

Контент

Подвал сайта

body {

background: #f3f2f3;

color: #000000;

font-family: Trebuchet MS, Arial, Times New Roman;

font-size: 12px;

}

#container {

background: #FFFFFF;

margin: 30px auto;

width: 900px;

height: 1000px;

}

#header {

background: #838283;

height: 200px;

width: 900px;

}

#navigation {

background: #a2a2a2;

width: 900px;

height: 20px;

}

#menu {

background: #333333;

float: left;

width: 200px;

height: 600px;

}

#content {

background: #d2d0d2;

float: right;

width: 700px;

height: 600px;

}

#clear {

clear:both;

}

#footer {

background: #838283;

height: 180px;

width: 900px;

}

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

Вот как это выглядит в браузере:

То самое время перейти к работе с текстом в HTML.

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

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

Заголовки в HTML

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

- - это парные теги, в которые заключаются заголовки. Цифра в данном теге задаёт уровень значимости заголовка. Главное название статьи берётся в теги … , подзаголовки второго уровня берутся в теги … и т.д.

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

... - Основной заголовок;
... - подзаголовок;
... - подзаголовок третьего уровня;
... - подзаголовок четвертого уровня;
... - подзаголовок пятого уровня;
... - подзаголовок шестого уровня.

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

left - значение выравнивания заголовка по левой стороне (значение по умолчанию);
right - значение выравнивания заголовка по правой стороне;
center - значение выравнивания заголовка по центру;
justify - значение выравнивания заголовка по ширине.

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

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

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

Абзацы и перенос на новую строку

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

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

- это одиночный тег, который способен перенести любое содержимое страницы на новую строку. Чаще всего его используют для текста, если сравнивать тег с программой Word, то именно он имитирует нажатие Enter. (Кол-во тегов
= кол-во нажатий на «enter» ). Давайте рассмотрим данный тег на деле:

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

Вид текста

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

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

Используем вышеперечисленные HTML теги для текста на примере:

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

face - назначает шрифт текста. Наиболее популярные: times new roman, arial, calibri . Задать можно несколько шрифтов через запятую, на случай если первый не поддерживается браузером, будет использован следующий по списку;
size - этот параметр задаёт размер текста. Существуют размеры от 1 до 7 , значение по умолчание - 3 ;
color - благодаря данному параметру задаётся цвет текста. Значение по умолчание - black , то есть черный цвет. Цвет можно задать тремя способами: Таблица цветовых кодов .

Закрепим знания HTML тегов для текста и проработаем навыки на следующем примере:

Устаревшие HTML теги для текста

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

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

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

Дата первой публикации: 06.07.2016
Дата последнего обновления: 06.07.2016

Доброго времени суток, верные читатели и подписчики. Текущая публикация посвящается подробному разбору темы: «Блочная адаптивная разметка 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 . Теперь ваша страница с контентом будет уменьшаться только до указанного размера, а после появится скролл.

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