Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

В DreamWeaver создайте css-файл с содержимым

Селектором может быть

1. имя элемента разметки (например, р, table и т.д.)

2. имя класса
Имя класса не является каким-либо стандартным именем элемента HTML-разметки. Оно определяет описание класса элементов разметки, которые будут отображаться одинаково. Для того, чтобы отнести элемент разметки к тому или иному классу, нужно воспользоваться его атрибутом CLASS. Например:
.test {color:white;background-color:black;}
Селектор .test определяет цвет текста - белый и цвет фона - чёрный

2.2 Вставьте этот код в элемент STYLE в заголовоке вашего документа.

<STYLE>
p { color:darkblue;text-align:justify; font-size:12pt; }
.test {color:white;background-color:black;}
</STYLE>

2.3 Теперь переопределим стиль первого абзаца, добавив атрибут class=test

<P class=test >Стили веб-документа</P>

2.4 Тоже самое сделаем для первой ячейки таблицы

<td class=test >1</td>

В результате должно получится

Как видите, с помощью классов можно переопределять любой элемент.

3.Задание №3. Ссылка на внешнее описание

Ссылка на описание стиля, расположенное за пределами документа, осуществляется при помощи элемента LINK, который размещают в элементе HEAD. Внешнее описание может представлять собой файл, содержащий описание стилей и имеющий расширение CSS. Описание стилей в этом файле будет по синтаксису в точности совпадать с содержанием элемента STYLE.

Когда автор Web-узла хочет определить общий стиль всех страниц, он просто прописывает стили для всех элементов HTML-разметки, которые будут использоваться на страницах. Это дает возможность скомпоновать страницы из логических элементов, а стиль отображения элементов описать во внешнем файле. Такой способ создания сайта позволяет автору изменять внешний вид всех страниц путем внесения изменений в файл описания стилей, а не в файлы HTML-страниц.

3.1 Создать файл стилей.

В DreamWeaver создайте css-файл с содержимым

p { color:darkblue;text-align:justify; font-size:12pt; }
.test {color:white;background-color:black;}
.bord { border: thick solid #33FF33; }

и сохраните его в папке сайта под именем style.css

3.1.2 Создайте новый html-файл, вставьте в тэг head ссылку на файл стилей style.css.

<LINK TYPE="text/css" REL="stylesheet" HREF="style.css">

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

3.1.3 Создайте границу вокруг последнего абзаца.

Для этого вставьте в элемент абзаца атрибут class=bord

<p class=bord>

Поделиться:





Читайте также:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...