Курсовая работа

«Разработка сайта с использованием CSS»

20 страниц(ы)
2482 просмотров

Автор: navip

1. Кратко про CSS.

2. Основы.

3. Расширение свойств тегов.

4. Способы определения стилей.

5. Классы и идентификаторы.

6. Работа со шрифтами.

7. Свободное позиционирование.

8. Свойства блоков текста.

9. Примеры использования.

Под термином CSS мы понимаем фразу "Каскадные Таблицы Стилей". Они внедряются в HTML-код и не требуют никаких специальных редакторов и компиляторов, ведь интерпретируются оные обычным броузером.

Каскадные таблицы стилей представляют собой описания различных HTML-элементов и созданы они для расширения свойств последних. Впервые стили были предложены WWW Consorcium'ом в рамках разработки спецификации HTML 3.0, однако реально эту шнягу стали поддерживать только в 1997 году. Насладиться CSS имели возможность лишь счастливые обладатели таких броузеров, как Netscape Navigator 4.0 и Internet Explorer 4.0.

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

Синтаксис CSS довольно прост в изучении, поэтому освоение каскадных стилей является делом достаточно легким, но весьма и весьма полезным. Для того, чтобы не оказаться голословным, я хочу привести небольшой пример. Возьмем типичную таблицу HTML и поставим атрибут border="1". После интерпретации данного кода броузером мы получим самый обыкновенный результат, к которому привык наш опытный глаз. Другое дело, что таблицы подобного рода не совместимы ни с одним мало-мальски хорошим дизайном. Ну куда годится эта псевдо-трехмерная линия, представляющая собой границу? Вот тут и приходят на помощь CSS, по средствам которых можно без лишнего гемора оформить любую таблицу на свой вкус.

Читать далееСвернуть

Основы.

Как же описывать свойства некоторых элементов страницы? На самом деле, в этом нет ничего сложного, и самый примитивный случай присвоения стилей выглядит так:

имя элемента {свойство: значение;}

Здесь «имя элемента» - это название какого-либо HTML-тэга, чьи свойства мы желаем задать. Для простоты и наглядности я возьму элемент BODY и попытаюсь с помощью стилей сделать фон страницы зеленым. Конечно, такой шаг в Web-дизайне просто не допустим, но мы с вами только учимся.

Нижеследующий код заключен в шапке документа, то есть между тэгами <HEAD> и </HEAD>. Я не стал приводить полный листинг Web-страницы, чтобы вам легче было разобраться:

BODY {background-color: green;}

</STYLE>

Попробуйте загрузить данный код в браузере, и вы увидите, что фон действительно стал ядовито-зеленым. В качестве цвета не обязательно указывать полное название последнего. Как и в обычном HTML вы можете прибегнуть к таблице RGB.

Из примера видно, что, хотя мы описывали тэг <BODY>, в стилях он прописан без ограничителей < и >. И действительно, если вы поставите данные знаки, то броузер будет пребывать в замешательстве, воспринимая <BODY>, как элемент тела, а не описываемый тэг.

При работе со стилями необходимо помнить, что не все пользователи Сети имеют современные броузеры. Такие динозавры не смогут правильно интерпретировать CSS-код, и обязательно сделают какую-нибудь пакость, испортив тем самым ваше творение. Но не стоит отчаиваться и пускать на клавиатуру сопли, ведь от такого поведения есть лекарство, имя которому «комментарии». Перепишем нашу каскадную таблицу следующим образом:

<!--

BODY {background-color: green;}

-->

</STYLE>

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

Расширение свойств тэгов.

Простейший пример описания тэга BODY иллюстрирует лишь самую первую ступень нашего изучения. Мы смогли окрасить страницу в зеленый цвет, однако ту же проблему можно было решить и без применения стилей. Теперь я хочу показать вам, как с помощью CSS расширяются свойства тэгов. Для начала рассмотрите такой пример:_

<HTML>

<HEAD>

<!--

BODY {background-color: gray;}

H1 {background-color: blue;

Font-size: 200%;

Color: black;

Text-align: center;}

-->

</STYLE>

</HEAD>

<BODY>

<H1>Это заглавие</H1>

</BODY>

</HTML>_

Посмотрите, что у нас получилось. Конечно, с точки зрения дизайна, это безобразный кусок вонючей субстанции, но уже здесь вы можете лицезреть те преимущества, которые дает нам CSS:

Начнем с того, что мы смогли задать фоновый цвет элемента H1. То же самое можно проделать и с другими уровнями H, а также с P и прочими тэгами. Размер текста был определен свойством Font-size, значение которого можно указать, как в процентах, так и в пикселях, например Font-size: 8; С остальными свойствами такая же петрушка.

Как видно из примера, использование CSS существенно облегчает процесс форматирования Web-страниц, и в этом заключается их главное преимущество.

Способы определения стилей.

Теперь настало время поговорить о способах определения стилей. До нынешнего урока, CSS мы объявляли в специальном контейнере <STYLE>, но это не всегда удобно.

Стиль можно определить внутри какого-либо HTML-тэга. Выглядит это следующим образом:

---

---

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

В первом уроке я уже упоминал о том, что каскадные стили можно загружать из внешнего файла. Как это делается? Давайте посмотрим:

---

---

Последний атрибут дает понять броузеру, что содержимое файла style.css – ничто иное, как таблицы стилей. Такой способ очень удобен и является одним из самых предпочтительных. Style.css – это текстовый файл, содержащий только описания элементов. Здесь не должно быть никаких контейнеров и тэгов. Могу привести пример:

Читать далееСвернуть

Для начала давайте уясним, что под термином «блок текста», понимается, прежде всего, абзац. Определяется оный, как вы помните, тэгом P, имеющим одно скупое свойство align=”…”. Непорядок, да? CSS предоставляет нам огромные возможности для работы с абзацами, и этой актуальной теме я решил посвятить текущий урок.

Давайте рассмотрим несколько параметров, а затем перейдем к примеру, наглядно иллюстрирующему все изученное.

Line-height – задает межстрочное расстояние. Например, p {line-height: 50px;}

Text-decoration – эта штука позволяет немного приукрасить текст. Какие значения принимает свойство? Давайте посмотрим:

- Underline – подчеркивание.

- Overline – линия над текстом.

- Line-through – перечеркивание.

- Blink – мерцание.

- None – значений нет, идем пить пиво!

Приведу такой пример: p {text-decoration: overline;}

Text-transform – преобразовывает символы текста тем или иным образом. Значения:

- Capitalize – преобразует выделенный блок так, что первая буква каждого слова становится заглавной.

- Uppercase – выделенный блок пишется прописными буквами.

- Lowercase – выделенный блок пишется строчными буквами.

Text-align - уже знакомое нам свойство, определяющее выравнивание текста. Значения, как вы уже знаете, выглядят следующим образом:

- Left – по левому краю.

- Right – по правому краю.

- Center – по центру.

- Justify – по ширине.

Text-Indent – задает красную строку от левого края. Значение можно указать, как в пикселях, так и в процентах.

Margin-left – задает величину левого поля. (Расстояние между блоком текста и его соседями)

Margin-right – задает величину правого поля.

Margin-top – задает величину верхнего поля.

Margin-bottom – задает величину нижнего поля.

Margin – задает величину всех полей.

Например: p {margin: top right bottom left;}

Вместо top right bottom left нужно поставить значения в пикселях или процентах.

Padding-top – задает внутреннее поле (расстояние между текстом и рамкой, его обрамляющей. Как задать рамку смотрите ниже).

Padding-right – правое внутреннее поле.

Padding-bottom – нижнее внутреннее поле.

Padding-left – левое внутреннее поле.

Paddings – общее значение всех внутренних полей. Имеет тот же синтаксис, что и Margin.

Border – задает рамку, обрамляющую абзац. Имеет такой вид:

border: color style width;

Но бывают (и очень часто) такие случаи, когда необходимо задать свойства для каждой части рамки (левой, правой, нижней и верхней). В таком случае, параметр border по известным причинам не покатит. Тогда можно использовать следующие свойства:

Border-top-width – ширина верхней границы.

Border-bottom-width – ширина нижней границы.

Border-left-width – ширина левой границы.

Border-right-width – ширина правой границы.

Border-width – ширина всей границы.

Следует отметить, что все перечисленные параметры работают только в том случае, когда указан стиль рамки. Совершить сей благородный поступок можно, применив следующее свойство:

Border-style – задает стиль рамки. Значения имеет следующие:

- None – я крутой и рамки не юзаю!

- Dotted – задается точечная рамка.

- Dashed – штрихованная рамка.

- Double – двойная рамка.

- Groove – трехмерная вдавленная рамка.

- Ridge – трехмерная выпуклая рамка.

- Inset – трехмерная выпуклая ступенчатая рамка.

- Outset – трехмерная вдавленная ступенчатая линия.

Border-color – задает цвет границы. Использовать можно и для отдельной линии, например, так: p {Border-left-color: green;}

Читать далееСвернуть

1. w*w.webschool.narod.r*

2. w*w.education.kulichki.net

3. h**t: //dreamweaver3.narod.r*/

4. Dreamweaver 4. Краткий курс Карпов Б., Жданов А. 2001 Питер.

5. CD Обучение Macromedia Dreamweaver 4 (JEW) 2002 Медиа2000.

6. h**t://narod.yandex.r*/help/mini.yhtml

Покупка готовой работы

	Тема:	«Разработка сайта с использованием CSS»
	Раздел:	Информатика
	Тип:	Курсовая работа
	Страниц:	20
	Цена:	700 руб.