Теоретический материал

Так что это такое - СSS? Cascading Style Sheets (Таблицы Каскадных Стилей) - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента web-страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов.

1. Использование селекторов. Все объявления CSS (официально они называются «селекторы») записываются в фигурных скобках: ТЕГ {характеристика:величина; характеристика:величина;…; характеристика:величина}. Для включения стилей в документ используется тег <STYLE> …</STYLE>, расположенный внутри тега <HEAD>. Например: <STYLE> H1 {color:red} </STYLE>, теперь в документе все заголовки первого уровня будут красного цвета.

Задание:

1. Используя программу Блокнот, создать новый документ, в котором заголовком первого уровня написать «Челябинский Металлургический колледж», заголовком второго уровня «Специальность “Программное обеспечение вычислительной техники и автоматизированных систем », заголовком третьего уровня «Курс – …..».

2. Добавить в документ абзац «Добрый день».

3. Добавить в документ абзац «Мы рады Вас приветствовать на официальном сайте Челябинского Государственного Металлургического колледжа. На Web-страницах колледжа Вы найдете интересующую Вас информацию об истории колледжа, его сотрудниках и студентах. Также Вы встретите детальные сведения о преподаваемых дисциплинах».

4. Используя таблицу стилей, изменить цвет заголовков первого уровня на серый, а заголовков второго уровня на черный.

2. Использование классов. Класс может быть определен либо как свойство, либо как дополнение к уже существующему определению. Классы описываются между открывающимся и закрывающимся тегами <STYLE> следующим образом: .имя_класса {характеристика:величина; характеристика:величина;…; характеристика:величина}. Примечание: обратите внимание на точку перед именем класса, имя класса – любая последовательность символов на английском языке. Теперь мы можем использовать данный класс. Для этого мы можем использовать либо известные нам теги, например, <p class=имя_класса> (теперь точка перед именем класса не ставится), либо использовать новый тег, который называется <DIV>. Все, что находится между открывающимся и закрывающимся тегами <DIV>, воспринимается как один объект. При использовании вместе с атрибутом CLASS вы можете задавать параметры текста только этой части документа, например: <div class=имя_класса>здесь находится часть документа HTML</div>.

Задание:

1. Описать класс, который задает цвет текста maroon.

2. Применить этот класс для всех параграфов.

3. Свойства каскадных таблиц стилей.