Реклама

Хочешь увидеть здесь свою рекламу? Пиши!

Web-Разработка

Как создать стиль CSS или разбор программы TopStyle


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

Для создания стиля CSS вам понадобится программа TopStyle от компании BradSoft (www.bradsoft.com). Она находится в веб-редакторе HomeSite. Итак, зайдём внутрь этой программы. Вы увидите что-то вроде двух фрэймовых белых страниц (рис.1).

Рис. 1

Самая большая из них - это поле ввода HTML тагов. Расположенная ниже(Previews) - это поле вывода (просмотра) того, что получилось. Чтобы было легче работать, лучше не создавайте всё с белого листа, а откройте уже созданный .css и измените его. Итак, зайдите в меню File, затем выберите Open. В основном каталоге программы выберите папку user, затем templates, и выберите любой из предложенных .css. Я выбрал ocean.css. Нажмите Открыть. Перед вами появятся в большом фрэйме таги, а в маленьком воспроизведение их (рис.2).

Рис. 2

Щёлкните один раз мышкой на самый верхний таг BODY, TD и вы увидите в правом, маленьком окошке, под названием Style Inspector (рис.3) слова. Например, около слова color появится слово white - это и есть те таги. С помощью этого Инспектора вы можете не зная языка HTML создать свой стиль CSS. Щёлкните на слове white и вы увидите небольшую палитру цветов, выберите любой цвет и смотрите в окно Previews. Вы увидите как текст Element TD изменит свой цвет, в тот, который вы ему дали. Предлагаю вам посмотреть мою таблицу RBG-цветов, она вам может понадобиться для изменения цвета на более красивый, чем там находящиеся:

FFFAFA Snow

F8F8FF Ghostwhite

FAEBD7 Antique White

FFFBF0 Cream

FFDAB9 Peachpuff

FFDEAD Navajo White

FFF8DC Cornsilk

FFFFF0 Ivory

FFFACD Lemon Chiffon

FFF5EE Seashell

F0FFF0 Honeydew

F0FFFF Azure

E6E6FA Lavender

FFF0F5 Lavender Blush

FFE4E1 Misty Rose

FFFFFF White

000000 Black

696969 Dim Gray

708090 Slate Gray

778899 Light Slate Gray

BEBEBE Gray

C0C0C0 Light Gray

A0A0A4 Medium Gray

808080 Dark Gray

191970 Midnight Blue

000080 Dark Blue

6495ED Cornflower

6A5ACD Slate Blue

8470FF Light Slate Blue

4169E1 Royal Blue

0000FF Blue

87CEEB Sky Blue

87CEFA Light Sky Blue

4682B4 Steel Blue

B0C4DE Light Steel Blue

A6CAF0 Light Blue

B0E0E6 Powder Blue

AFEEEE Pale Turquoise

40E0D0 Turquoise

00FFFF Cyan

E0FFFF Light Cyan

008080 Dark Cyan

5F9EA0 Cadet Blue

7FFFD4 Aquamarine

54FF9F Seagreen

20B2AA Light Seagreen

98FB98 Pale Green

00FF7F Spring Green

7CFC00 Lawn Green

00FF00 Green

C0DCC0 Medium Green

008000 Dark Green

7FFF00 Chartreuse

ADFF2F Green Yellow

32CD32 Lime Green

9ACD32 Yellow Green

228B22 Forest Green

EEE8AA Pale Goldenrod

FAFAD2 Light Goldenrod Yellow

FFFFE0 Light Yellow

FFFF00 Yellow

808000 Dark Yellow

FFD700 Gold

FFEC8B Light Goldenrod

DAA520 Goldenrod

DEB887 Burly Wood

BC8F8F Rosy Brown

8B4513 Saddle Brown

A0522D Sienna

F5F5DC Beige

F5DEB3 Wheat

D2B48C Tan

D2691E Chocolate

B22222 Firebrick

A52A2A Brown

FA8072 Salmon

FFA07A Light Salmon

FFA500 Orange

FF7F50 Coral

F08080 Light Coral

FF4500 Orange Red

FF0000 Red

800000 Dark Red

FF69B4 Hot Pink

FFC0CB Pink

FFB6C1 Light Pink

DB7093 Pale Violet Red

B03060 Maroon

D02090 Violet Red

FF00FF Magenta

800080 Dark Magenta

EE82EE Violet

DDA0DD Plum

DA70D6 Orchid

8A2BE2 Blue Violet

A020F0 Purple

Так, идём ниже, видите слово font-family, а около него слова Arial, sans-serif, как вы наверное поняли - это шрифт текста. Щёлкните на название шрифта и выберите другой, увидите в окне Previews как текст изменит свой шрифт.

Рис. 3

Дальше вы наверное сами понимаете, как делать. Теперь побольше изучим программные разделы. Помните, что допустив ошибку, вы можете её исправить нажатием клавиш Ctrl+Z. Нажав F12 или F9 вы сможете убрать ненужное вам окно. Допустим нажав F12 вы уберёте окно воспроизведения (Previews). Файл справки находится в разделе Help меню Contents. Нажав F8 вы попадёте в раздел Options. Советую вам ничего там не менять, так как вы собъёте весь CSS файл. Сохранить файл можно нажав Ctrl+S, сохранить как... можно нажав Shift+Ctrl+S. Создать новый файл можно нажатием клавиш Ctrl+N. Выйти из программы можно нажав Alt+X.

Итак, будем считать, что вы создали свой первый стиль .css. Сохраните его как style.css. Заходите в любую программу по созданию Веб-страниц (FrontPage, HomeSite, Notepad...), впишите в неё этот HTML таг - <link href="style.css" rel="stylesheet"><p class="TD">Приветики</p> - сохраните в той же директории, где находится ваш файл style.css. Откройте html файл в браузере и смотрите на ваш результат (рис.4).

Рис. 4

Это произошло из-за того, что я вписал в строке class="TD", TD - название одного из стилей в вашем стиле CSS. Если вы хотите вставить другой стиль, то просто впишите вместо уже находящегося другое название стиля. Ну вот практически всё, что я хотел вам сказать. Ждите новых статей.

Автор: ADOLO


Copyright by ADOLO
Копирование и использование данных материалов разрешается только в случае указания на журнал "ADOLO", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта www.adolo.tk.