Как сделать страницу css на всю страницу

Обновлено: 05.07.2024

В этой статье мы рассмотрим искусство создания удобных для печати веб-страниц с помощью CSS.

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

Таблицы стилей печати

CSS Print может быть:

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

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

Таблицу стилей печати можно добавить в HTML head после стандартной таблицы стилей:

Стили print.css будут применяться в дополнение к стилям экрана , когда страница печатается.

Для разделения экрана и печатных носителей main.css следует указывать screen :

Кроме того, стили печати могут быть включены в существующий файл CSS с использованием правил @media . Например:

Можно добавить любое количество правил @media print , так что это может быть полезно для сохранения связанных стилей вместе. Правила экрана и печати также можно разделить при необходимости:

Тестирование вывода на принтер

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

Предварительный просмотр

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

Кроме того, вы можете сохранить или просмотреть страницу, экспортировав ее в PDF.

Инструменты разработчика

DevTools ( F12 или Cmd/Ctrl + Shift + I ) может эмулировать стили печати, хотя разрывы страниц не будут отображаться.

Подмена медиа-атрибута

Предполагая, что вы используете тег link для загрузки CSS, вы можете временно изменить атрибут media на screen :

Опять же, это не будет показывать разрывы страниц. Не забудьте восстановить атрибут media="print" после завершения тестирования.

Удалить ненужные разделы

Прежде чем делать что-либо еще, удалите и сверните избыточный контент с помощью display: none; . Типичные ненужные разделы на бумаге могут включать навигационные меню, изображения героев, верхние и нижние колонтитулы, формы, боковые панели, виджеты социальных сетей и рекламные блоки (обычно что-нибудь в iframe ):

Возможно, потребуется использовать display: none !important; , если функциональность CSS или JavaScript показывает элементы в соответствии с конкретными состояниями пользовательского интерфейса. Использование !important обычно не рекомендуется, но мы можем обосновать его использование в базовом наборе стилей принтера, которые переопределяют настройки экрана по умолчанию.

Стайлинг печати

Теперь можно применять стили для печати. Рекомендации:

убедитесь, что вы используете темный текст на белом фоне
рассмотреть возможность использования шрифта с засечками, который может быть легче читать
отрегулируйте размер текста до 12pt или выше
измените отступы и поля, где это необходимо. Стандартный cm , mm или in блоки могут быть более практичными.

Дополнительные предложения включают в себя.

CSS Columns

Стандартная бумага формата A4 и US Letter может привести к более длинным и менее читаемым строкам текста. Попробуйте использовать CSS-столбцы в макетах печати. Например:

В этом примере столбцы будут созданы, когда есть хотя бы горизонтальное пространство в 37em . Нет необходимости задавать медиа-запросы; дополнительные столбцы будут добавлены на более широкой бумаге.

Используйте границы вместо фона

Ваш шаблон может иметь разделы или выноски, обозначенные более темными или обратными цветовыми схемами:

Сохраните чернила, представив эти элементы с рамкой:

Удалить или инвертировать изображения

Пользователи не захотят печатать декоративные и несущественные изображения и фоны. Вы можете сделать по умолчанию все изображения скрытыми, если у них нет класса print :

В идеале напечатанные изображения должны использовать темные цвета на светлом фоне. Может быть возможно изменить цвета SVG, встроенные в HTML, в CSS, но в некоторых ситуациях у вас будут более темные растровые изображения:

CSS фильтр может быть использован, чтобы инвертировать и корректировать цвета для печати. Например:

Добавить дополнительный контент

Печатные СМИ часто требуют дополнительной информации, которая не будет необходима на экране. Свойство CSS content можно использовать для добавления текста псевдоэлементов ::before и ::after . Например, отображать URL-адрес ссылки в скобках после текста:

В более сложных ситуациях рассмотрите использование класса, например print , для элементов, которые должны быть видны только при печати Например:

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

Разрывы страниц

Свойства CSS3 break-before и break-after позволяют контролировать , как страница, столбец или область разрывы ведут себя до и после элемента. Поддержка отличная, но старые браузеры могут использовать подобные свойства page-break-before и page-break-after .

Следующее значения break-before и break-after могут быть использованы:

auto : по умолчанию - перерыв разрешен, но не принудителен
avoid : избежать разрыва на странице, столбце или области
avoid-page : избежать разрыва страницы
page : вызвать разрыв страницы
always : псевдоним page
left : сделать разрывы страниц, так что следующая страница слева
right : принудительно разрывать страницы, чтобы следующая страница была правильной

Пример: форсировать разрыв страницы непосредственно перед любым заголовком h1 :

Остерегайтесь чрезмерного использования разрывов страниц. В идеале для вывода на принтер следует использовать как можно меньше страниц.

Свойство break-inside (и более старое page-break-inside ) указывает, разрешен ли разрыв элемента внутри элемента. Обычно поддерживаемые значения:

auto : по умолчанию - разрыв разрешен, но не принудителен
avoid : по возможности избегайте внутреннего разрыва
avoid-page : по возможности избегайте внутреннего разрыва страницы

Это может быть предпочтительнее, чем указывать разрывы страниц, поскольку вы можете использовать как можно меньше бумаги, избегая разрывов страниц в сгруппированных данных, таких как таблицы или изображения:

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

Свойство orphans аналогично widows за исключением того, что контролирует минимальное количество строк, чтобы показать в нижней части страницы.

Элемент box-decoration-break управления границами между страницами. Когда элемент с рамкой имеет внутренний разрыв страницы:

slice : по умолчанию, разбивает макет. Верхняя граница показана на первой странице, а нижняя граница показана на второй странице.
clone : копирует поля, отступы и границы. Все четыре границы показаны на обеих страницах.

Наконец, CSS Paged Media (@page) имеет ограниченную поддержку браузера, но предоставляет способ нацеливания на конкретные страницы, чтобы можно было определить альтернативные поля или разрывы:

Свойства разрыва страницы CSS могут быть размещены внутри вашего screen или print стилей, потому что они влияют только на печать, но я рекомендую использовать их для печати CSS для ясности.

Имейте в виду, что контроль разрыва страницы - это не что иное, как совет браузеру. Нет гарантии, что разрыв будет вызван или предотвращен, потому что макет ограничен пределами бумаги.

Как применить CSS3 преобразования к фоновым изображениям

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

Масштабирование, наклон и поворот любого элемента возможны с помощью CSS3 свойства transform . Он поддерживается во всех современных браузерах без префиксов поставщиков.

Отличный материал. Тем не менее, это вращает весь элемент - его содержимое, границы и фоновое изображение. Что если вы хотите повернуть только фоновое изображение? Или что, если вы хотите, чтобы фон оставался фиксированным во время вращения контента?

Там нет W3C CSS предложение для background-image преобразований. Это было бы невероятно полезно, так что, возможно, однажды появится, но это не помогает разработчикам, которые хотят использовать подобные эффекты сегодня.

Один из вариантов - создать новое фоновое изображение из оригинала, скажем, повернутое на 45 градусов. Это может быть достигнуто с помощью:

процесс манипулирования изображениями на стороне сервера код обработки изображений на стороне клиента или
API, предоставляемые некоторыми сервисами CDN для хостинга изображений.

Но все это требует дополнительных усилий, обработки и затрат.

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

Нашей целью будет реализовать фон (background) сайта, который будет покрывать все рабочее пространство окна браузера. Мы будем делать это с помощью разных техник используя CSS3, чистый CSS, jQuery, PHP.

Давайте определим, что именно мы хотим получить:

Полная заливка окна картинкой, без пробелов.

Растягивание фоновой картинки, насколько это нужно.

Соответствие пропорций картинки.

Картинка должна находиться в центре.

Это должно быть максимально кроссбраузерно.

И без всяких махинаций с flash.

CSS3 метод

Мы можем растянуть background на чистом css, благодаря свойству background-size которое присутствует в CSS3. Мы будем использовать html элемент, это лучше чем body, так как он всегда будет равен высоте окна браузера. Мы сделаем background фиксированным и поставим его в центре окна, после этого мы его растянем на весь экран с помощью свойства background-size.

Кроссбраузерность:

Opera 10+ (Opera 9.5 поддерживает background-size но не поддерживает ключевых слов)

Также есть вариант решения для IE, только необходимо тестировать. Некоторые вебмастера говорят, что могут возникнуть проблемы из ссылками и скроллингом.

Растянуть background на чистом CSS

Сделать background на весь экран с помощью чистого CSS кода, можно двумя методами. Не исключение что существуют и другие.

1 – Метод

Здесь мы будем использовать элемент img, который будет растянут на все окно, и будет выглядеть одинаково во всех браузерах. Мы установим min-height, который будет заполнять окно браузера по вертикали. Также установим width на 100%, который будет заполнять окно по горизонтали. Мы также установим min-width картинки, таким образом, фон никогда не будет меньше, нежели мы установим.

Особо хитрая часть кода, это использование медиа запроса, для предотвращения бага, когда окно браузера будет меньше, нежели картинка фона. А также, комбинированное использование отступа с процентным left. Это позволяет держать background в центре, несмотря ни на что.

Кроссбраузерность:

Любые версии популярных браузеров: Safari / Chrome / Opera / Firefox

IE 6: По крайней мере background остается фиксированным

IE 7/8: Множество работ не центрируются на малых размерах, но заполняет экран лучшим образом

2 – Метод

Еще один простой способ реализовать это, вставить картинку на страницу. Она будет иметь фиксированную позицию и будет размещена в верхнем левом углу. Мы присвоим ей min-width и min-height 100%. Также нужно заранее подготовить картинку, в плане пропорциональности сторон.

Хотя, этот код не центрирует background image. Поэтому, сейчас мы это исправим… Мы можем фиксировать картинку с помощью взятия ее в div.

Кроссбраузерность:

Safari / Chrome / Firefox (не тестировалось на более древних версиях)

Opera (любые версии) и IE отображают одинаково (плохо позиционируют, не пойму почему)

Растянуть background с помощью jQuery

Эта идея появилась немного ранее (как альтернатива CSS методу). Если мы будем знать пропорции и размер картинки, мы сможем растянуть background на CSS. Если картинка меньше окна браузера, мы изменим width на 100% для картинки. Если больше, мы можем установить только height 100% и знать, что картинка заполнит все как по ширине, так и по высоте.

Мы можем получить доступ к нужным данным с помощью JavaScript. Как и все, я использую фреймверк jQuery.

Здесь не реализовано центрирование, но вы с легкостью можете сделать это.

Кроссбраузерность:

И все другие популярные браузеры

Растягиваем background с помощью PHP

Собственно, PHP мы можем использовать для одной цели: обработки изображения с помощью GD библиотеки. Ранее я рассказывал о том, как сделать скрипт превью картинок. В этом случае его можно использовать для изменения размера изображения на лету. Но возникает проблема, изображение будет генерироваться при каждом обращении к сайту. Для большого проекта это слишком ресурсоемко. Лучше будет сделать готовые заготовки изображений, соответственно самым популярным разрешениям экранов (1024 x 1280, 1280 x 800…), используя фотошоп это не сложно. В случае, если разрешение экрана будет другим, это единичные случаи, мы подключим скрипт автоматического изменения размера. Он подключается следующим образом:

Наслаждайтесь!

Это все известные мне способы, как растянуть background на весь экран. Если вы делаете это иначе, будьте добры опишите это в комментариях. Буду рад узнать о новых вариантах растягивания background с помощью css и других техник. Творческих вам успехов!

Это краткое руководство предназначено для людей, начинающих свое изучение CSS в первый раз.

Оно не дает глубоких знаний о CSS. Руководство просто объясняет как создать HTML файл, CSS файл и как заставить их работать вместе. После прочтения данной статьи, Вы можете продолжить дальнейшее изучение других обучающих руководств для получения информации о более значительных особенностях HTML и CSS. Или же перейти к изучению материала в интерактивных HTML или CSS редакторах, которые помогут Вам при создании сайтов.

В конце данной статьи Вы создадите HTML файл который будет выглядеть как этот:

Полученная HTML страница с цветами и разметкой сделанной при помощи CSS.

Заметьте, что я не претендую на то, что это очень красиво ☺

Разделы помеченные даным знаком необязательны. Они содержат дополнительные объяснения HTML и CSS кода в приведенных примерах. Знак “внимание!” в начале абзаца обозначает более расширенную информацию чем остальной текст.

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты, например Блокнот от Windows, TextEdit на Mac или KEdit под KDE вполне подойдут под задачу. Как только Вы поймете основные принципы, вы можете переключиться на использование более продвинутых инструментов разработки, например на такие коммерческие программы как Style Master или DreamWeaver. Но для создания первого CSS файла не стоит отвлекаться на множество расширенных возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или OpenOffice. Эти программы обычно создают файлы, которые не могут быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и наборе в нем следующего текста:

Вам не обязательно это перенабирать - вы можете просто скопировать и вставить текст с этой страницы в редактор.

(Если вы используете TextEdit на Макинтоше, не забудьте указать TextEdit'у, что это действительно простой текстовый файл, открыв меню Format и выбрав опцию “Make plain text”.)

Первая строчка нашего HTML файла говорит браузеру о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем случае - это HTML версии 4.01.

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

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

Код HTML в редактор KEdit.

Тэг “ul” - список состоящий из одной ссылки на каждый элемент списка. Эта структура послужит нам “навигацией” по нашему сайту связывая с нами другие страницы нашего гипотетического сайта . Предполагается, что все страницы нашего сайта будут иметь схожее или идентичное меню.
Элементы “h1” и “p” задают содержимое уникальное каждой страницы, в то время как подпись (“address”) снизу снова будет повторяться на всех страницах.

, что я и сделал в данном случае, для того чтобы было проще текст. Но вы можете добавить их, если считаете необходимым.

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

Выберите “Сохранить как…” или “Save As…” из выпадающего меню Файл или File, укажите каталог для сохранения файла (например Рабочий Стол) и сохраните данный файл как “mypage.html”. Не закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем 10.4, вы увидите опцию "Don't append the .txt extension" в диалоговом окне "Save as". Выберите эту опцию, потому что имя файла “mypage.html” уже включает в себя расширение. Более новые версии TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл вашим файловым менеджером (Проводник, Windows Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на нем. Если вы делали все как описано то имя файла будет “mypage.html”. У вас должен открыться файл в браузере, установленном по умолчанию. (Если нет, то откройте браузер и перетащите файл в его окно.)

Как Вы видите, страница выглядит достаточно скучно…

ШАГ 2: изменяем цвета

Возможно, вы видите некоторый черный текст на белом фоне, но это зависит от конфигурации браузера. Для того чтобы страница выглядела более стильно, мы можем сделать очень легко одну простую вещь - добавить цвета. (Оставьте окно браузера открытым - мы к нему еще вернемся)

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим CSS стили и HTML разметку в разные файлы. Раздельное хранение хорошо тем, что легче использовать те же самые стили для множества HTML файлов: Вам нужно написать CSS стили только один раз. Но на этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент [и т.д.]

Первая строка говорит браузеру о том, что это таблица стилей и что она написана на CSS (“text/css”). Вторая строка говорит, что мы применяем стиль к элементу “body”. Третья устанавливает цвет текста в пурпурный, а следующая устанавливает цвет фона в желто-зеленый оттенок.

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

но поскольку оба правила относятся к body мы записали “body” один раз и поместили свойства и значения вместе. Для получения большей информации о селекторах смотрите главу 2 из Lie & Bos .

Фон элемента body так же является фоном целого документа. Мы явно не назначили другим элементам (p, li, address…) фона, так что по умолчанию у них его нет (или он прозрачный). Свойство 'color' устанавливает цвет текста элемента body, но все остальные элементы внутри body наследуют этот цвет, пока для них не задан другой в виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или “Save” из файлового меню) и переключитесь обратно в браузер. Если вы нажмете кнопку “обновить” , то изображение сменится со “скучной” страницы на разукрашенную (но все еще однообразную) страницу. Кроме ссылок сверху, весь текст должен быть пурпурный на желто-зеленом фоне.

Теперь браузер показывает страницу к которой мы добавили цвет.

ШАГ 3: изменяем шрифты

Еще одна вещь которую можно сделать - шрифтовое разнообразие разных элементов на странице. Давайте напишем шрифтом “Georgia” весь текст, исключая заголовки, которые мы напишем “Helvetica.”

Поскольку в Web никогда нельзя быть целиком уверенным в том, какие шрифты установлены на компьютерах посетителей, мы добавим альтернативные способы отображения: если Georgia не найдена, то мы будем использовать Times New Roman или Times, а если и он не найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы можем попробовать использовать Geneva, Arial или SunSans-Regular поскольку они очень похожи по начертанию, ну а если у пользователя нет таких шрифтов, то браузер может выбрать любой другой шрифт без засечек.

В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13) :

Если вы сохраните файл снова и нажмете “обновить” в браузере, то у вас должны быть разные шрифты в заголовках и в тексте.

Сейчас шрифт заголовков и основного текста различается.

ШАГ 4: добавляем навигацию

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

Нам нужно переместить список налево и сдвинуть остальное содержимое немного вправо, чтобы создать пространство для него. Свойства CSS которые мы будем использовать для этого - 'padding-left' (для сдвига текста) и 'position', 'left' и 'top' (для сдвига меню).

Есть и другие пути. Если вы поищете термины “столбец” или “верстка” на странице изучая CSS , вы найдете несколько готовых к использованию шаблонов. Но для наших целей сгодится и такой.

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16) :

Если вы снова сохраните файл и обновите его в браузере то список ссылок получится у вас слева от основного текста. Это уже смотрится интереснее, не так ли?

В отличии от предыдущего файла, в этом главный текст переместился направо а навигация налево

Свойство 'position: absolute' говорит что элемент ul расположен независимо от любого текста который предшествовал или будет следующим за этим элементом, а свойства 'left' и 'top' обозначают это расположение. В нашем случае это 2em сверху и 1em от левого края окна.

'2em' обозначает 2 раза по растоянию, равному размеру текущего шрифта. Т.е., если меню отображается шрифтом в 12 пунктов, то 2em будет равняться 24 пунктам. `em` очень полезная единица измерения в CSS, поскольку может адаптироваться автоматически к шрифту, используемому браузером. Большинство браузеров имеют возможность изменять размеры шрифта: вы можете попробовать увеличить или уменьшить размер и увидеть, что меню будет изменяться в зависимости от размера шрифта, чего бы не случилось, если бы мы указали отступ в пикселях

ШАГ 5: украшаем ссылки

Навигационое меню все еще по-прежнему выглядит как список, вместо меню. Давайте стилизуем его. Мы уберем маркеры списков и переместим элементы налево, где были маркеры. Так же мы нарисуем каждый элемент списка на белом фоне в своем черном квадрате (зачем? просто так, потому что можем).

Мы так же не сказали какими должны быть цвета ссылок, так что давайте добавим и это свойство: синими будут ссылки которые пользователь еще не смотрел, пурпурными - те которые он уже посещал. (строки 13-15 и 23-33) :

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

ШАГ 6: добавляем горизонтальные линии

Последним добавлением к нашей таблице стилей станет горизонтальная полоса для разделения текста и подписи снизу. Мы используем свойство 'border-top' для того чтобы добавить прерывистую линию над элементом (строки 34-37) :

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

ШАГ 7: внешний CSS

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

Для создания отдельного файла таблицы стилей нам нужен другой пустой текстовый документ. Вы можете выбрать пункт “Новый” из меню "Файл" в редакторе , для создания пустого файла. (Если вы используете TextEdit, не забудьте сделать его текстовым снова, используя меню Format.)

Затем вырежьте и вставьте все содержимое внутри . Они принадлежат HTML коду, а не CSS. В новом окне у вас теперь должен быть полная таблица стилей:

Выберите “Сохранить как…” из меню "Файл", убедитесь что вы в той же директории/папке что и файл mypage.html, и сохраните таблицу стилей под именем “mystyle.css”.

Такая конструкция скажет браузеру о том, что таблица стиле располагается в файле под названием “mystyle.css”, и поскольку директория не упомянута, браузер будет искать этот файл там же, где лижит HTML файл.

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

Следующий шаг - положить оба файла mypage.html и mystyle.css на ваш сайт. (Конечно, вы можете захотеть слегка изменить их сперва…) Как положить файлы на сайт зависит от вашего интернет провайдера.

Дальнейшее изучение

Для введения в CSS, смотрите главу 2 Lie & Bos или введение в CSS Дейва Рэггета .

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

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

Пример

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue. Mauris eu efficitur turpis.

Читайте также: