Колір елементу та колір фону

color	Визначає колір елементу I {color: green;}
background-color	Встановлює колір фону для елементу. H4 {background-color: yellow;}
background-image	Встановлює URL фонової картинки TABLE {background-image:url(background.gif);}

Властивості тексту

text-decoration	Встановлює ефекти оформлення шрифту, такі, як підкреслення або закреслений текст Прикраса тексту H4 {: underline;} - подчеркивание Прикраса тексту: ніщо;} - стандартный текст Я {прикраса тексту: безпересадочний для лінії;} - зачеркивание B {text-decoration:overline;} - надчеркивание
text-transform	Задає перетворення регістра тексту при відображенні H4 {text - transform: capitalize;} - Перша буква кожного слова перетвориться в заголовну A {text - transform: uppercase;} - Усі букви перетворяться в заголовні I {text - transform: lowercase;} - Усі букви перетворяться в рядкові B {text - decoration: none;} - Відміняє встановлені перетворення
text-align	Визначає вирівнювання елементу. Можливі значення: left, right, center, justify P {text-align:justify} H5 {text-align: center}
text-indent	Встановлює відступ першого рядка тексту. Найчастіше використовується для створення параграфів з табульованим першим рядком. P {text-indent: 50pt;}
line-height	Управляє інтервалами між рядками тексту. P {line-height: 50 %}
word-spacing	Встановлює інтервалам між словами. Можна використовувати негативні значення P {word-spacing: 50 %}
letter-spacing	Встановлює інтервалам між буквами P {letter-spacing: 50 pt}
vertical-align	Встановлює вертикальне положення елементу. Може набувати наступних значень: baseline middle sub super text-top text-bottom top bottom P {vertical-align: 50 pt}

МЕЖІ. (Показані деякі загальні властивості. Крім того, є можливість встановити стиль кожної сторони рамки).

border-width	Ширина межі. Може бути задана значенням в пікселях або за допомогою зарезервованих слів thin (тонка), medium (середня), thick (товста). table {border-width: 2px;}
border-color	Колір межі. Може набувати значення transparent для завдання невидимої, але такої, що має ширину, межі, що іноді корисно table {border-color: green;}
border-style	Задает стиль рисования границы. Может принимать следующие значения: none (по умолчанию), hidden, dotted, dashed, solid, double,groove, ridge, inset, outset table {border-style: dashed;}

 

Курсори

	Курсор із стрілками в усі чотири сторони і точкою в центрі, що показує на можливість скролінгу сторінки в будь-якому напрямі I {cursor: all-scroll;}
auto	За умовчанням. Браузер визначає самостійно, який курсор вимагається у даному контексті I {cursor: auto;}
col-resize	Курсор із стрілками вліво-управо і вертикальною розділяючою смужкою. Використовується для індикації можливості зміни розмірів по горизонталі H4 {cursor: col-resize;}
crosshair	Курсор-хрест H4 {cursor: crosshair;}
default	Стандартний курсор, використовуваний системою H4 {cursor: default;}
hand	Рука з витягнутим вказівним пальцем. Використовується при гіперпосиланні H4 {cursor: hand;}
help	Стрілка зі знаком питання. H3 {cursor: help;}
move	Курсор з 4 стрілками, що показує можливість переміщення H2 {cursor: move;}
no-drop	Рука з перекресленим кружечком. Не можна скинути об'єкт в поточну позицію курсора TD {cursor: no-drop;}
not-allowed	Ist durchgekreuzt Kreis. Diese Operation nicht aufrechterhält TD {cursor: not-allowed;}
pointer	Идентична стилю hand TD {cursor: pointer;}
progress	Пісочний годинник, що показує на продовження операції TD {cursor: progress;}
row-resize	Курсор із стрілками вгору-вниз і вертикальною розділяючою смужкою. Використовується для індикації можливості зміни розмірів по вертикалі TD {cursor: row-resize;}
text	Текстовий курсор-каретка TD {cursor: text;}
url(uri)	Ваш власний курсор. Підтримуються файли.cur и.ani TD {cursor:url(elogo.cur);}
vertical-text	Горизонтальна текстова каретка для вертикального тексту TD {cursor: vertical-text;}
wait	Курсор, що показує, що система зайнята і вимагається почекати TD {cursor: wait;}
*-resize	Курсори, що показують можливість потягнути за край вікна. Замість символу * використовуйте N, NE, NW, S, SE, SW, E, або W, що визначають напрям стрілок TD {cursor: n-resize;}

 

Природно, приведений вище список властивостей далеко не повний. Тут не показані властивості, що дозволяють управляти видимістю елементів і їх розмірами, порядком розташування їх на сторінці. Не показані властивості, що дозволяють міняти вид смуг прокрутки і так далі. Цю інформацію можна знайти в будь-якому довіднику по HTML.

 

HTML -редакторы.

Хоча HTML -документы можна створювати і редагувати в будь-якому текстовому редакторові (наприклад в "Блокноті" Windows), на ринку існують безліч спеціалізованих редакторів. Вони діляться на дві основні категорії: невізуальні і візуальні редактори.

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

сторінки. Прикладами таких являються "HTML Pad" і "CSE HTML Validator Professional".

HTMLPad - один з лідерів серед редакторів в категорії "для професіоналів". Підтримує можливість редагування коду і швидкої вставки основних елементів розмітки для html, CSS, PHP, JavaScript, VBScript, ASP, SSI. Вбудоване підсвічування коду, створення і редагування власних меню користувача, можливість створення нових елементів для швидкої вставки, що дуже прискорює розробку після налаштування під потреби користувача.

CSE HTML Validator Professional - потужна утиліта для перевірки написаного html -кода. Знаходить помилки в коді сторіночки і виводить їх список користувачеві, містить вбудований редактор html коду, конвертор тегів, шаблони, майстри підказок. Дуже зручна річ для пошуку помилок перед публікацією сайту в інтернет.

Робота з візуальними редакторами (їх ще називають WYSIWYG -редакторами від заголовних букв вираження What You See Is What You Get - "що бачите, то і отримаєте") зводиться до редагування, при якому редагований матеріал в процесі редагування виглядає в точність так само, як і кінцевий результат. HTML -код при цьому генерується автоматично. Серед таких "Microsoft FrontPage", "Macromedia Dreamweaver", "Namo WebEditor"

Microsoft FrontPage - один з простих редакторів html для новачків. Містить величезний набір інструментів і дозволяє з успіхом використовувати програму навіть самому недосвідченому творцеві сайтів. Ідеально підходить початківцям для створення своєї власної домашньої сторіночки. Цей редактор html містить великий набір готових шаблонів сторінок, фонів, кнопок і тому подібне

Недоліки: цей редактор html створює дуже надлишковий код, що сильно впливає на вагу сторінки і збільшує швидкість її завантаження. Переваги: хороша сумісність з іншими продуктами від Microsoft.

Macromedia Dreamweaver - візуальний редактор html. Влаштує і початкуючого творця сайтів і досвідченішого вебмастера. У деяких вебстудіях є стандартом де-факто використання цієї програми, але на суб'єктивну думку автора - це не найзручніша річ для професійного розробника. Великим плюсом програми є відмінна сумісність програми з іншими продуктами фірми Macromedia.

Namo WebEditor - досить непоганий візуальний редактор html. Також підходить і початківцям, і фахівцям середньої кваліфікації. Містить велику кількість готових шаблонів і безліч окремих елементів для створення кнопок і банерів, підтримує Java, СУБД і динамічну навігацію.

Також в Інтернеті є безліч online -редакторов, що не вимагають установки на комп'ютер користувача, - досить зайти на відповідний сайт і почати редагування в браузері.