1. Кратко про CSS.
2. Основы.
3. Расширение свойств тегов.
4. Способы определения стилей.
5. Классы и идентификаторы.
Возможно вы искали - Курсовая работа: Разработка сетевой версии программы подбора сечений стержневой конструкции
6. Работа со шрифтами.
7. Свободное позиционирование.
8. Свойства блоков текста.
9. Примеры использования.
Кратко про CSS.
Под термином CSS мы понимаем фразу "Каскадные Таблицы Стилей". Они внедряются в HTML-код и не требуют никаких специальных редакторов и компиляторов, ведь интерпретируются оные обычным броузером.
Похожий материал - Курсовая работа: Разработка систем хранения информации на RAID-массивах
Каскадные таблицы стилей представляют собой описания различных 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-код, и обязательно сделают какую-нибудь пакость, испортив тем самым ваше творение. Но не стоит отчаиваться и пускать на клавиатуру сопли, ведь от такого поведения есть лекарство, имя которому «комментарии». Перепишем нашу каскадную таблицу следующим образом: