Подключение внешней таблицы стилей. Отступы и обтекание

После каждого задания следует смотреть результат в браузере и объяснять причину изменений.

1. Создайте html-файл с приведенным ниже текстом, разметьте в нем заголовок первого уровня и абзацы.

Операционные системы Операционная система — это особенная программа, которая позволяет компьютеру работать так, как мы это представляем. Без нее для обычного пользователя компьютер представлял бы всего лишь груду железа. Все другие программы, которые мы обычно используем в повседневной жизни (текстовые и графические редакторы, игры, интернет-браузеры и др.), могут работать, только если на компьютере установлена операционная система. Первые операционные системы появились давно и не были похожи на современные. Они представляли собой наборы небольших программ для программистов. Позже количество функций, возлагаемых на операционную систему, увеличивалось, и на данный момент они представляют собой достаточно сложные программные комплексы. В мире существует огромное количество операционных систем, но лишь некоторые из них нашли широкое распространение. На сегодняшний день наиболее популярными являются операционные системы семейства Windows, которые являются проприетарным (коммерческим) продуктом корпорации Microsoft. Преимуществом Windows считается дружественный для пользователя интерфейс. Из недостатков отмечают ненадежность системы. Linux представляет собой множество Unix-подобных операционных систем (дистрибутивов), которые чаще всего являются свободно распространяемыми. Одной из уникальных особенностей систем GNU/Linux является отсутствие единого географического центра разработки. Linux и программы для нее пишутся миллионами программистов, рассредоточенных по всему миру.

2. Создайте файл prac3.css, подключите его к html-документу. Для этого в контейнере head пропишите строку:

<link rel="stylesheet" href="prac3.css" />

3. Задайте для абзацев и заголовка отступы справа и слева по 15% от размера рабочей области окна браузера:

p, h1 { margin-left: 15%; margin-right: 15%;}

4. В файле html для предпоследнего абзаца пропишите его принадлежность к классу left (<p class="left">), а для последнего к классу right. В таблице стилей для обоих классов задайте рамки вокруг абзацев и установите ширину для них не более 400 пикселей. Например:

p.left, p.right { border: 6px; border-style: groove; border-color: silver; padding: 15px; font-size: 0.9em; width:350px;}

5. Отдельно для каждого класса укажите отличающие их свойства:

p.left { float:left; margin-right: 0%; color: navy;} p.right { float:right; margin-left: 0%; color: green;}

6. Отдельно оформите первую букву обоих абзацев (буквицу):

p.left:first-letter, p.right:first-letter { font-size: 1.8em;}