Как
создать стиль CSS или разбор программы
TopStyle
Автор: Соболев
Антон
Источник : http://www.adolo.tk
Уже сейчас многие
пользуются только стилями 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. Если вы хотите вставить
другой стиль, то просто впишите
вместо уже находящегося другое
название стиля. Ну вот практически
всё, что я хотел вам сказать. Ждите
новых статей.
Надеюсь всё понятно!
Желаю удачи. Пишите и задавайте
вопросы weare@mail.nnov.ru
|