Управление стилем страниц

Для обсуждения открыт форум бесплатный web-сервер

Управление стилем страниц осуществлается через файл "style.css". Загружается он во всех html-файлах в следующей строке:

<link rel=stylesheet type=text/css href=style.css>

Вот его содержание:

body { /* Общие свойства документа */ background: #c4cabb; /* цвет фона */ color: black; /* цвет текста */ font-size: 10pt; /* размер текста */ font-family: arial,geneva; /* шрифт текста */ } a { /* Свойства ссылок */ color: #0069a3; /* цвет ссылок */ font-family: arial,geneva; /* шрифт ссылок */ } table { font-size: 10pt } /* размер текста в таблицах */ .k a { /* Свойства кнопок */ text-decoration: none; /* нет подчеркивания ссылки */ font-size : 12pt; /* размер ссылки */ color: black; /* цвет ссылки */ } .c1 { /* Цвет номер 1 кнопок и таблиц */ background-color: ddddd0; } .c2 { /* Цвет номер 2 кнопок и таблиц */ background-color: ccccc0; } .c3 { /* Цвет первой строки таблиц */ background-color: ffbb00; } .c4 { /* Цвет номер 1 разделителя кнопок */ background-color: white; } .c5 { /* Цвет номер 2 разделителя кнопок */ background-color: black; } .c6 { /* Цвет фона заголовка */ background-color: orange; } .c7 { /* Цвет полоски на index.html */ background-color: bbbbb0; } .h a { /* Свойства заголовка на index.html*/ text-decoration: none; /* нет подчеркивания ссылки */ font-family: verdana,arial; /* шрифт ссылки */ font-size : 18pt; /* размер ссылки */ color: black; /* цвет ссылки */ } .r a { /* Свойства ссылки на index.html */ text-decoration: none; /* нет подчеркивания ссылки */ font-size : 10pt; /* размер ссылки */ color: black; /* цвет ссылки */ }

Между символами /* и */ комментарии к каждой строке. В можете скопировать текст из этой формы в файл style.css. Желательно использовать для этого Notepad. Если хотите чтобы цвет фона брался из файла, делается это так: body { background: url(bg.gif) #c4cabb; } . Вместо bg.gif укажите путь к вашему файлу.

Вы можете свободно изменять и экспериментировать с файлом style.css . Ниже мы подготовили три варианта стилей. Скопируйте один из вариантов в файл style.css . Но вы сами должны быть готовы серьезно поработать над стилем.

Вариант 1: Темный

body { background: #4F9797; color: #111111; font-size: 10pt; font-family: arial,geneva; } a { color: black; font-family: arial,geneva; } table { font-size: 10pt } .k a { text-decoration: none; font-size : 12pt; color: black; } .c1 { background-color: #4F9790; } .c2 { background-color: #4F979f; } .c3 { background-color: #999999; } .c4 { background-color: #999999; } .c5 { background-color: #888888; } .c6 { background-color: #888888; } .c7 { background-color: #888888; } .h a { text-decoration: none; font-family: verdana,arial; font-size : 18pt; color: black; } .r a { text-decoration: none; font-size : 10pt; color: black; }

Вариант 2: Белый

body { background: #eeeeeb; color: black; font-size: 10pt; font-family: arial,geneva; } a { color: black; font-family: arial,geneva; } table { font-size: 10pt } .k a { text-decoration: none; font-size : 12pt; color: black; } .c1 { background-color: #eeeeee; } .c2 { background-color: #dddddd; } .c3 { background-color: #cccccc; } .c4 { background-color: white; } .c5 { background-color: black; } .c6 { background-color: #cccccc; } .c7 { background-color: #cccccc; } .h a { text-decoration: none; font-family: verdana,arial; font-size : 18pt; color: black; } .r a { text-decoration: none; font-size : 10pt; color: black; }

Вариант 3: Черный

body { background: #555555; color: #dddddd; font-size: 10pt; font-family: arial,geneva; } a { color: #eeeeee; font-family: arial,geneva; } table { font-size: 10pt; } .k a { text-decoration: none; font-size : 12pt; color: #eeeeee; } .c1 { background-color: #666666; } .c2 { background-color: #777777; } .c3 { background-color: #555555; } .c4 { background-color: #dddddd; } .c5 { background-color: black; } .c6 { background-color: #666666; } .c7 { background-color: #666666; } .h a { text-decoration: none; font-family: verdana,arial; font-size : 18pt; color: #dddddd; } .r a { text-decoration: none; font-size : 10pt; color: #dddddd; }

Все вопросы пишите в форум бесплатный web-сервер.