Банк рефератов содержит более 364 тысяч рефератов, курсовых и дипломных работ, шпаргалок и докладов по различным дисциплинам: истории, психологии, экономике, менеджменту, философии, праву, экологии. А также изложения, сочинения по литературе, отчеты по практике, топики по английскому.
Полнотекстовый поиск
Всего работ:
364150
Теги названий
Разделы
Авиация и космонавтика (304)
Административное право (123)
Арбитражный процесс (23)
Архитектура (113)
Астрология (4)
Астрономия (4814)
Банковское дело (5227)
Безопасность жизнедеятельности (2616)
Биографии (3423)
Биология (4214)
Биология и химия (1518)
Биржевое дело (68)
Ботаника и сельское хоз-во (2836)
Бухгалтерский учет и аудит (8269)
Валютные отношения (50)
Ветеринария (50)
Военная кафедра (762)
ГДЗ (2)
География (5275)
Геодезия (30)
Геология (1222)
Геополитика (43)
Государство и право (20403)
Гражданское право и процесс (465)
Делопроизводство (19)
Деньги и кредит (108)
ЕГЭ (173)
Естествознание (96)
Журналистика (899)
ЗНО (54)
Зоология (34)
Издательское дело и полиграфия (476)
Инвестиции (106)
Иностранный язык (62792)
Информатика (3562)
Информатика, программирование (6444)
Исторические личности (2165)
История (21320)
История техники (766)
Кибернетика (64)
Коммуникации и связь (3145)
Компьютерные науки (60)
Косметология (17)
Краеведение и этнография (588)
Краткое содержание произведений (1000)
Криминалистика (106)
Криминология (48)
Криптология (3)
Кулинария (1167)
Культура и искусство (8485)
Культурология (537)
Литература : зарубежная (2044)
Литература и русский язык (11657)
Логика (532)
Логистика (21)
Маркетинг (7985)
Математика (3721)
Медицина, здоровье (10549)
Медицинские науки (88)
Международное публичное право (58)
Международное частное право (36)
Международные отношения (2257)
Менеджмент (12491)
Металлургия (91)
Москвоведение (797)
Музыка (1338)
Муниципальное право (24)
Налоги, налогообложение (214)
Наука и техника (1141)
Начертательная геометрия (3)
Оккультизм и уфология (8)
Остальные рефераты (21697)
Педагогика (7850)
Политология (3801)
Право (682)
Право, юриспруденция (2881)
Предпринимательство (475)
Прикладные науки (1)
Промышленность, производство (7100)
Психология (8694)
психология, педагогика (4121)
Радиоэлектроника (443)
Реклама (952)
Религия и мифология (2967)
Риторика (23)
Сексология (748)
Социология (4876)
Статистика (95)
Страхование (107)
Строительные науки (7)
Строительство (2004)
Схемотехника (15)
Таможенная система (663)
Теория государства и права (240)
Теория организации (39)
Теплотехника (25)
Технология (624)
Товароведение (16)
Транспорт (2652)
Трудовое право (136)
Туризм (90)
Уголовное право и процесс (406)
Управление (95)
Управленческие науки (24)
Физика (3463)
Физкультура и спорт (4482)
Философия (7216)
Финансовые науки (4592)
Финансы (5386)
Фотография (3)
Химия (2244)
Хозяйственное право (23)
Цифровые устройства (29)
Экологическое право (35)
Экология (4517)
Экономика (20645)
Экономико-математическое моделирование (666)
Экономическая география (119)
Экономическая теория (2573)
Этика (889)
Юриспруденция (288)
Языковедение (148)
Языкознание, филология (1140)

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

Название: Разработка сайта с использованием CSS
Раздел: Рефераты по информатике, программированию
Тип: реферат Добавлен 14:43:24 16 ноября 2008 Похожие работы
Просмотров: 372 Комментариев: 2 Оценило: 0 человек Средний балл: 0 Оценка: неизвестно     Скачать

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

Оглавление:

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

2. Основы.

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

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

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

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

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

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

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


Кратко про CSS.

Под термином 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, по средствам которых можно без лишнего гемора оформить любую таблицу на свой вкус.

Рассмотрим небольшой пример:

<STYLE TYPE=”text/css”>

Описание стилей форматирования

</STYLE>

В контейнер тэгов <STYLE> заключены описания различных элементов. Атрибут TYPE указывает тип стилей, но является необязательным. Тем не менее, во избежание всяких казусов, рекомендуется ставить оный, в виду того, что старые броузеры могут неправильно отобразить CSS.

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

Основы.

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

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

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

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

<STYLE TYPE=”text/css”>

BODY {background-color: green;}

</STYLE>

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

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

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

<STYLE TYPE=”text/css”>

<!--

BODY {background-color: green;}

-->

</STYLE>

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


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

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

<HTML>

<HEAD>

<STYLE TYPE="text/css">

<!--

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-тэга. Выглядит это следующим образом:

---

<P style=”text-align: center; font-style: italic; font-size: 5pt;”>

---

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

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

---

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

---

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

P {text-indent: 15;

font-size: 20;}

Как видите, ничего сложного тут нет. Свойство text-indent определяет красную строку, которая в нашем случае равна 15 пикселям.

Установку стилей для одного тэга можно применять многократно. Если мои слова для вас – пустой звук, то взгляните на очередной пример:

Font, P {font-size: 20;}

P, H1 {color: darkgreen;}

Предположим, что в некотором файле style.css, вы определили свойство P {color: blue;}, но вам необходимо сделать цвет абзаца другим. В таком случае, при постановке стилей в контейнере <Style> и разметке P{color: red;}, цвет будет одинаково красным во всех абзацах, то есть свойство, определенное в файле замещается.

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

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

Предположим, вам необходимо задать свойства для тэга P, но каждый абзац должен быть отличным от предыдущего. Достигнуть данной цели известными нам способами невозможно, вот тут-то и приходят на помощь классы. Давайте посмотрим на очередной листинг:

<HTML>

<HEAD>

<STYLE TYPE="text/css">

<!--

p.one {background-color: #D6D2DD; font-style: regular; font-size: 15;}

p.two {background-color: #D1DED7; font-style: bold; font-size: 20;}

p.three {background-color: #DDD8D2; font-style: italic; font-size: 25;}

-->

</STYLE>

</HEAD>

<BODY>

<P class="one">CSS имеет очень простой синтаксис, но открывает нам новые грани, недоступные при стандартной HTML-верстке.

<P class="two">Зная CSS, вы сможете создать по-настоящему красивый сайт, надеюсь, что моя книга поможет вам в обучении.

<P class="three"> Не забывайте просматривать исходники других сайтов, разбор которых поможет вам приобрести необходимый опыт.

</BODY>

</HTML>

Прежде чем детально разобрать изложенное, посмотрите, что из этого получилось:

Как видите, в данном случае описываемый элемент разделен на 2 сектора: тэг.имя-класса. У каждого класса есть свои свойства, которые вы задаете в фигурных скобках. Для того чтобы CSS вступили в действие, необходимо вызвать класс в тэге, который вы описывали. Делается это с помощью атрибута class=”имя-класса”. Это очень удобный способ, который применяется почти повсеместно.

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

<STYLE>

.one {color: green;}

.two {color: blue;}

</STYLE>

После объявления стилей, их необходимо вызвать. В нашем случае, классы становятся очень гибкими, и вызывать их можно в любом тэге с атрибутом class=”…”. К примеру:

<HTML>

<HEAD>

<STYLE TYPE="text/css">

.one {color: green;}

.two {color: blue;}

</STYLE>

</HEAD>

<BODY>

<Div class="one">Текст, написанный зеленым цветом.

<P class="two">Абзац, написанный синим цветом.

<HR class="one">

</BODY>

</HTML>

А вот и скрин того, что у меня получилось:

На этом с классами покончено (в хорошем смысле слова). Плавно переходим к идентификаторам…

Объект нашего разбора применяется не столь часто, как изученные выше классы, однако пренебрегать им не стоит. Любой идентификатор начинается с префикса #id. Ну, например:

---

#idFontArial {font-family: Arial;}

---

Затем вызываем идентификатор:

---

<P id=idFontArial>Шрифт с гарнитурой Arial</P>

---

Теперь можно сделать глубокий выдох – мы изучили все способы определения стилей!

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

В данном уроке мы поговорим о позиционировании элементов. Если в HTML Web-мастер не имеет возможности тыкать текст, куда угодно (без применения таблиц), то CSS решает проблему и делает это весьма эффективно. Существует специальный параметр, имя которому Position. Он может принимать 2 значения, а именно: absolute и relative. В первом случае мы задаем абсолютное положение элемента, а во втором – его место относительно начального. Кто-то из вас уже орет: «ты ваще сам понял, что сказал?», но другими словами выразиться непросто. Предлагаю вам рассмотреть один достаточно примитивный листинг и поэкспериментировать с ним:

<HTML>

<HEAD>

<Style>

.1 {position: absolute; top: 37; left:17;}

.2 {position: absolute; top: 40; left:20; color: red;}

</Style>

</HEAD>

<BODY>

<H1 class="1">Это заглавие.</H1>

<H1 class="2">Это заглавие.</H1>

</BODY>

</HTML>

И результат:

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

CSS предоставляет нам широкие возможности для работы со шрифтами. Первое свойство, с которым вам предстоит познакомиться – это font-size. Вы могли заметить, что данный параметр нам уже встречался, однако мы не имели чести познакомиться со значениями оного. Давайте исправим обидный ляпсус:

Large – крупный.

X-large – крупнее.

XX-large – самый крупный.

Medium – средний.

Small – маленький.

X-small – меньше.

XX-small – самый маленький.

Кроме того, никто не мешает нам применять относительные значения. Всего их два: larger и smaller. Они изменяют размер текста относительно базового.

Следующее свойство выглядит так: font-family. Оно задает гарнитуру применяемого шрифта, однако применять эту шнягу не стоит, в виду того, что у пользователя его может не быть. Параметр font-family имеет следующий синтаксис:

---

{font-family: шрифт1, шрифт2, …}

---

Следующий параметр текущего урока:

---

{font-style: стиль;}

---

Ну а значения его таковы:

Italic – курсив.

Normal – обычный.

Ну и последний параметр:

---

{font-weight: стиль;}

---

И значения:

Bold – жирный.

Bolder – жирнее.

Lighter – тоньше.

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

Для начала давайте уясним, что под термином «блок текста», понимается, прежде всего, абзац. Определяется оный, как вы помните, тэгом 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;}

Теперь вы знаете очень много параметров, применимых к абзацам и не только. Взять тот же border. Догадайтесь, где еще его можно использовать? Правильно в таблицах! Давайте рассмотрим очередной пример:

<HTML>

<HEAD>

<TITLE>Свойства блоков</TITLE>

<Style type="text/css">

<!--

p.dagger {border-width: 2;

border-style: dotted;

border-left-color: green;

border-right-color: red;

border-top-color: blue;

border-bottom-color: black;

padding: 5;}

p.nedagger {background-color: #F3F5F4;

text-align: justify;

text-indent: 20;

line-height: 1;

color: red;

font-weight: bold;}

Table.rulez {border: black solid 1px;}

-->

</Style>

</HEAD>

<BODY>

<P class="dagger"> Хреновина, конечно бесполезная, но зато красивая!!!!!!

<P class="nedagger">Это тоже ничего!</P>

<Table class="Rulez">

<TR>

<TD>Вот такая вот красивая таблица! Только из-за возможности подобным образом оформлять блоки, необходимо изучать CSS!</TD>

<TR>

</Table>

</BODY>

</HTML>

А выглядит это так:

По-моему, вышло очень даже красиво, как считаете? Мы не рассмотрели последний атрибут: background-image: имя_файла;

Например:

P {background-image: pupok.gif;}


Примеры:

>>> Цвет линий прокрутки:

<style type="text/css">

BODY {SCROLLBAR-FACE-COLOR: #959BBD;

SCROLLBAR-HIGHLIGHT-COLOR: #000000;

SCROLLBAR-SHADOW-COLOR: #000000;

SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;

SCROLLBAR-ARROW-COLOR: #000000;

SCROLLBAR-TRACK-COLOR: #D5DBE6;

SCROLLBAR-DARKSHADOW-COLOR: #CCCECE;}

</style>

>>> Свойства форм:

INPUT.ok {BORDER-RIGHT:#F1F2F3 1px solid;

BORDER-TOP: #F1F2F3 1px solid;

MARGIN: 6px 0px 4px;

FONT: bold 11px tahoma;

BORDER-LEFT: #F1F2F3 1px solid;

COLOR: #ffffff;

BORDER-BOTTOM: #F1F2F3 1px solid;

BACKGROUND-COLOR:#95ACBF}

INPUT.textarea {BORDER-RIGHT: #000000 1px solid;

BORDER-TOP: #000000 1px solid;

FONT: 11px verdana;

BORDER-LEFT: #000000 1px solid;

WIDTH: 120px;

BORDER-BOTTOM: #000000 1px solid}

Оценить/Добавить комментарий
Имя
Оценка
Комментарии:
Где скачать еще рефератов? Здесь: letsdoit777.blogspot.com
Евгений06:39:51 19 марта 2016
Кто еще хочет зарабатывать от 9000 рублей в день "Чистых Денег"? Узнайте как: business1777.blogspot.com ! Cпециально для студентов!
19:47:33 28 ноября 2015

Работы, похожие на Реферат: Разработка сайта с использованием CSS

Назад
Меню
Главная
Рефераты
Благодарности
Опрос
Станете ли вы заказывать работу за деньги, если не найдете ее в Интернете?

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



Результаты(150728)
Комментарии (1839)
Copyright © 2005-2016 BestReferat.ru bestreferat@mail.ru       реклама на сайте

Рейтинг@Mail.ru