Home Явно полезное RSS
Главная » Сайтостроение HTML » Проект сайта

Описание каскадной таблицы стилей CSS

Поскольку каскадная таблица стилей CSS уже создана в нашем шаблоне и заполнена необходимыми записями, то остановимся на на самих записях. Но для начала, как уже говорилось ранее необходимо внимательно прочитать небольшой учебник по CSS, для того, чтобы в дальнейшем понимать материал, который будет представлен на данной странице. В принципе каскадная таблица стилей, как уже говорилось ранее позволяет физическое форматирование HTML страницы заменить на логическое, что значительно снижает объем страницы, лишает ее от массы атрибутов, которые вынесены именно в сам файл с расширением .css. Фактически этот файл это набор определенных правил для различных тегов и частей HTML страницы. В нашем файле styles.css их совсем немного. В нем определены правила для текста на странице, для ссылок и определены некоторые правила или стили которые используются в таблицах на странице. Посмотрим. что это за правила. Для этого откроем в рабочем окне программы Dreamweaver файл из папки css, styles.css. Почти все правила в этом файле имеют свои названия с точкой впереди. Например правило или стиль для текста:

.text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-decoration: none;
}

Чтобы назначить это правило контейнеру содержащему основной текст страницы, можно сделать так <div align="justify" class="text">, что и сделано на самой странице.

Общее правило для тела страницы определено так:

.body {font-family:arial; font-size: 12px; color:black; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px} И на самой странице оно назначено так <body class="body"> хотя можно было и оставить <body>, как есть и просто определить правило для body {font-family:arial; font-size: 12px; color:black; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px}

Правило для заполнения таблицы где находится логотип сайта:

.logobg {background-image: url(images/bg.gif);} и его подсоединение в саму таблицу <td align="left" valign="top" class="logobg">

Стоит запомнить, как оформляется это правило. Таким образом можно подсоединять любое изображение в HTML страницу. И подсоединение самого логотипа могло-бы быть вынесено в таблицу стилей CSS.

Также в файле styles.css можно увидеть правила для ссылок,

A {
font-weight : normal;
text-decoration: underline;
}

A:visible {
font-weight : normal;
text-decoration: underline;
}

A:hover {
font-weight : normal;
text-decoration: none;
}

и другие правила, которые можно найти в различных тегах страницы index.html.

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

Книги и учебники :

Компьютер и интернет :

Поиск по сайту :

Реклама :

Облако меток :

Бесплатная подписка :

Получайте свежие скрипты, программы, и уроки по сайтостроению прямо в свой RSS ридер! Подписка на RSS

Статистика :
Top.Mail.Ru