HTML, Excel, Word, SEOОсновы Html ⇒ Внешний лист стилей css. Форматирование таблиц

ОСНОВЫ HTML

Справочная информация:
Справочник HTML-тегов
Шаблоны для сайтов
Как раскрутить сайт: шаг за шагом
Учебник HTML (хтмл)
Старт
Основные тэги
Заголовки и комментарии
Специальные символы
Форматирование текста ч.1
Форматирование текста ч.2
Форматирование текста ч.3
Создание списков
Работа с графикой ч.1
Работа с графикой ч.2
Работа с графикой ч.3
Работа с графикой ч.4
Таблицы ч.1
Таблицы ч.2
Таблицы ч.3
Гиперссылки
Фреймы
Что такое формы
Что такое JavaScript
Маленькие секреты Вэб-дизайна
Эффект постепенной прорисовки
Карта ссылок
Внутренний лист стилей
Работа с листами стилей
Свойства шрифта - font
Свойства текста
Свойство фона - background
Рамки и размеры
Относительное и абсолютное позиционирование элементов
Основные мета тэги
Таблица дескрипторов HTML и их атрибутов
Таблица свойств css
Заключительное слово
HTML-редакторы
Что такое HTML-редактор
FrontPage 2003
Adobe GoLive CS
Macromedia Dreamweaver MX 2004
HomeSite
CuteSite Builder
Namo WebEditor
CoffeeCup HTML Editor
1stPage 2000
Arachnophilia
HotDog Professional
CSE HTML Validator Pro
HTML профессионально
Внешний лист стилей
Форматирование таблиц
Форматирование гиперссылок
Форматирование изображений

Бесплатные игровые слоты Вулкан Россия доступны без регистрации

Форматирование таблиц

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


В файле style.css прописываем следующее:

BODY {
	background-image : url(bg.gif);
	margin-top: 5px;
}
TABLE{
	background: #FFFFCC;
	font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif;
	color: black;
	font-size: 8pt;
}

Вот как будет теперь выглядеть наша html-страница.


Не надо быть семи пядей во лбу, чтобы догадаться, что:

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


Вот как будет теперь выглядеть наша html-страница.


Согласитесь, что текст смотрится не очень удобочитаемо.

Для начала сделаем небольшое форматирование абзацев документа.

Для этого пропишем для тега абзаца <P> следующие параметры:

P{
    padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 3px;
	padding-top: 2px;
	text-indent: 10px;
	text-align: justify;
}

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


Заключаем в теги <P> три абзаца средней ячейки.


Вот как будет теперь выглядеть наша html-страница.


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

<div align="center">* * *</div>

Вот как будет теперь выглядеть наша html-страница.




В начало страницы



В начало страницы