<h2><br>), создав один простой стиль (правило). <br>Внешние таблицы стилей не только <a href="/3-obrabotka-rezuletatov-rabota-s-ishodnimi-dannimi/index.html" title="3. обработка результатов Работа с исходными данными">наследуют преимущества внутренних таблиц</a>, но и имеют дополнительные плюсы: в них можно хранить все стили для <i>всех стра-</i><br><i>ниц</i> сайта. Редактирование одного стиля во внешней таблице обновляет стиль це- лого сайта. В этом подразделе мы возьмем стили, созданные в предыдущем уроке, и поместим их во внешнюю таблицу стилей.<br>1. В программе редактирования создайте новый файл и сохраните его под именем styles.css в той же самой папке, где находится веб-страница, над которой вы сейчас работаете.<br>Файлы внешних таблиц стилей должны заканчиваться расширением CSS. Имя файла styles.css указывает на то, что стили, содержащиеся в файле, использу- ются глобально для всего сайта (вы, конечно, можете использовать любое пон- равившееся имя файла).<br>Приступим к добавлению нового стиля к таблице стилей.<br>2. Наберите для файла styles.css следующее правило:<br> html { padding-top: 25px; background-image: url(images/bg_page.png); <br> }<br>Это правило касается тега <br>HTML<br>, то есть тега, окружающего все остальные HTML- теги, которые имеются на странице. Свойство padding-top добавляет простран- ство между верхней частью тега и помещаемым внутри него содержимым. Ины- ми словами, то, что мы только что набрали, приведет к добавлению 25 пикселов пустого пространства между верхней частью окна браузера и содержимым стра- ницы. Свойство background-image добавляет к странице фоновое изображение. <br>CSS-свойство background-image может отобразить графику множеством различ- ных способов, но в данном случае оно будет выведено в виде неперекрывающей- ся мозаики слева направо и сверху вниз. Дополнительные сведения о свойствах фоновых изображений будут даны в гл. 8.<br>3. Добавьте второе правило сразу же после только что набранного для файла styles.css первого правила:<br> body { width: 80%; padding: 20px; <br></div> <div> <br><b>64 </b><br>Часть 1. Основы CSS<br> margin: 0 auto; box-shadow: 10px 10px 10px rgba(0,0,0,.5); background-color: #E1EDEB; <br> }<br>Это правило относится к тегу содержимого веб-страницы (<br><body><br>), <a href="/mirovoj-okean-so-vsemi-ego-moryami-zalivami-i-prochimi-geograf/index.html" title="Мировой океан со всеми его морями, заливами и прочими географическими частями">который включает в себя всю информацию</a>, видимую в окне браузера. В данном опреде- лении стиля задается множество различных свойств, каждое из которых еще будет рассмотрено более подробно в данной книге. Но если дать ему краткое описание, этот стиль создает прямоугольную область для содержимого страни- цы, составляющую 80 % от ширины окна браузера, имеющую внутри себя не- большое пустое пространство, которое сдвигает текст от краев прямоугольной области (речь идет о свойстве padding<br>), и производит центровку прямоугольной области на странице (имеется в виду свойство margin и конкретный прием цен- тровки содержимого страницы, рассматриваемый в обучающем уроке гл. 3). <br>И наконец, прямоугольная область получает светло-синий цвет фона и прозрач- ную темную отбрасываемую тень.<br>Вместо повторного набора стилей, созданных в предыдущем уроке, <a href="/stili-rechi-knijnie-stili/index.html" title="Стили речи Книжные стили">просто ско- пируем стили</a>, которые определены во внутренней таблице стилей, и вставим их в эту внешнюю таблицу стилей. <br>4. Откройте страницу basic.html<br>, над которой работали, и скопируйте весь текст, содержащийся внутри тегов <br><style><br> (не копируйте сами теги <br><style><br>).<br>Скопируйте стилевую информацию тем же самым способом, которым скопирова- ли бы любой текст. Например, с помощью меню <br>Edit<br><br>Copy<br> (ПравкаКопировать) или нажатием сочетания клавиш <br>Ctrl+C<br>5. В файл styles.css вставьте этот код стилей либо посредством меню <br>Edit<br><br>Paste<br>(ПравкаВставить), либо с помощью сочетания клавиш <br>Ctrl+V<br>Внешняя таблица стилей никогда не должна содержать HTML-код, именно поэтому вы и не копировали теги <br><style><br>6. Сохраните файл styles.css<br>Теперь нужно очистить старый HTML-файл от CSS-кода и связать новую таб- лицу стилей с этим файлом.<br>7. Вернитесь к файлу basic.html в своем текстовом редакторе и удалите теги <br><style><br>и все CSS-стили, определенные в этом файле ранее.<br>Вам больше не нужны эти стили внутренней таблицы, поскольку они перенесе- ны во внешнюю таблицу стилей, которую сейчас нужно присоединить к HTML- файлу. В этом уроке вы окунетесь в захватывающий мир веб-шрифтов. Все, что касается веб-шрифтов, будет рассмотрено в гл. 6, но основная идея заключается в том, что вы можете использовать практически любой шрифт, <a href="/1-chto-takoe-html-dlya-chego-ispolezuetsya-html-ot-anglijskogo/index.html" title="1. Что такое html, для чего используется? Html (от английского HyperText Markup Language) это">который нужен на веб-странице</a>, даже шрифт, который посетители вашего сайта не установили на своих компьютерах, предоставив просто ссылку на файл с этим шрифтом. <br>Существует множество различных способов применения веб-шрифтов, но в дан- ном примере будет использована служба веб-шрифтов Google.<br>8. В том месте HTML-файла, где находилась встроенная таблица стилей (между закрывающим тегом <br>
и закрывающим тегом
15. Сохраните страницу и просмотрите ее в браузере.
Достаточно всего двух строк кода, добавленных в веб-страницу, чтобы мгно- венно преобразить ее внешний вид. Чтобы показать, насколько просто обно- вить стиль, описанный во внешней таблице стилей, попробуйте отредактиро- вать один из стилей или добавить другие.
16. Откройте файл styles.css и добавьте определение CSS-свойства — font-family:
"Palatino Linotype", Baskerville, serif;
— в начале стиля элемента p
Код должен выглядеть следующим образом (добавленный код выделен полу- жирным шрифтом):
p {
font-family: "Palatino Linotype", Baskerville, serif;
color: #616161;
Глава 2. Создание стилей и таблиц стилей
67
line-height: 150%;
margin-top: 10px;
margin-left: 80px;
}
В данном случае веб-шрифт не используется и все зависит от наличия перечис- ленных шрифтов на машине посетителя сайта (все вопросы применения шриф- тов будут рассмотрены позже). Затем создайте новый стиль для элемента h2 17. Установите курсор после заключительной фигурной скобки
}
стиля элемента p
, нажмите
Enter и добавьте следующий стиль:
h2 {
color: #B1967C;
font-weight: normal;
font-family: 'Gravitas One', 'Arial Black', serif;
font-weight: normal;
font-size: 2.2em;
border-bottom: 2px white solid;
background: url(images/head-icon.png) no-repeat 10px 10px;
padding: 0 0 2px 60px;
margin: 0;
}
С большинством этих CSS-свойств вы уже знакомы, однако некоторые из них новые для вас, например border-bottom
, используемое для добавления линии под заголовком. Свойство background вообще предоставляет возможность для комби- нирования различных свойств (в данном случае это background-image и background- repeat
) в одно. Не беспокойтесь о назначении этих свойств, мы подробно рассмот- рим их в следующих главах. О свойствах шрифта читайте в гл. 6, о свойствах, задающих отступы и границы, — в гл. 7, а о свойствах, устанавливающих парамет- ры фона, — в гл. 8.
Стили, которые вы создавали до сих пор, работают с основными элементами h1
, h2
и p
, изменяя облик каждого их экземпляра. Другими словами, стиль p
, кото- рый вы создали, форматирует каждый абзац на странице. Но если вы хотите воздействовать на какой-то конкретный абзац, нужно использовать другой вид стиля.
18. Перейдите к концу стиля
H2
, нажмите
Enter после закрывающей скобки
}
и на- берите следующий код:
.intro {
color: #6A94CC;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
margin-left: 0;
margin-bottom: 25px;
}
Если вы просмотрите файл basic.html в браузере, то пока не заметите никаких изменений. Этот тип стиля, называемый селектором класса, форматирует толь- ко отдельные теги, к которым вы примените класс. Чтобы этот новый стиль работал, придется немного отредактировать HTML-код.
68
Часть 1. Основы CSS
19. Сохраните файл styles.css и перейдите к файлу basic.html в своем текстовом редакторе. Найдите открывающий тег
, который следует за тегом
|
Скачать 20.28 Mb.