Создайте таблицу стилей CSS
Так же, как мы создали отдельный текстовый файл для HTML , вы создадите текстовый файл для CSS. Если вам нужны визуальные эффекты для этого процесса, обратитесь к первому учебнику. Вот шаги для создания вашей таблицы стилей CSS в Блокноте:
- Выберите « Файл»> «Создать в блокноте», чтобы открыть пустое окно.
- Сохраните файл как CSS, нажав Файл <Сохранить как …
- Перейдите в папку my_website на жестком диске
- Измените « Сохранить как тип :» на « Все файлы »
- Назовите свой файл » styles.css » (не включайте в кавычки) и нажмите Сохранить
Свяжите таблицу стилей CSS с вашим HTML
Как только у вас есть таблица стилей для вашего веб-сайта, вам нужно будет связать ее с самой веб-страницей. Для этого вы используете тег ссылки. Разместите следующий тег ссылки в любом месте тега <head> вашего документа pets.htm:
<link href = "styles.css" rel = "stylesheet" type = "text / css">
Исправить поля страницы
Когда вы пишете XHTML для разных браузеров, вы поймете, что все они имеют разные поля и правила отображения вещей. Лучший способ убедиться, что ваш сайт выглядит одинаково в большинстве браузеров, — это не допускать, чтобы такие параметры, как поля, по умолчанию выбирались из браузера.
Мы предпочитаем начинать страницы в верхнем левом углу, без дополнительного отступа или полей вокруг текста. Даже если мы собираемся заполнить содержимое, мы устанавливаем поля равными нулю, так что мы начинаем с того же чистого листа. Чтобы сделать это, добавьте следующее в ваш файл styles.css:
html, body {
margin: 0px;
отступы: 0px;
граница: 0px;
слева: 0px;
верх: 0px;
}
Изменение шрифта на странице
Шрифт часто является первым, что вы хотите изменить на веб-странице. Шрифт по умолчанию на веб-странице может быть некрасивым и на самом деле зависит от самого веб-браузера, поэтому, если вы не определите шрифт, вы действительно не знаете, как будет выглядеть ваша страница.
Обычно вы меняете шрифт в абзацах, а иногда и во всем документе. Для этого сайта мы определим шрифт на уровне заголовка и абзаца. Добавьте следующее в ваш документ styles.css:
p, li {
font: 1em Arial, Helvetica, без засечек;
}
h1 {
font: 2em Arial, Helvetica, без засечек;
}
h2 {
font: 1.5em Arial, Helvetica, без засечек;
}
h3 {
font: 1.25em Arial, Helvetica, без засечек;
}
Мы начали с 1em в качестве базового размера для абзацев и элементов списка, а затем использовали его, чтобы установить размер для моих заголовков. Мы не ожидаем использовать заголовок глубже, чем h4, но если вы планируете, вы захотите его стилизовать.
Делать ваши ссылки более интересными
Цветами по умолчанию для ссылок являются синий и фиолетовый для непосещенных и посещенных ссылок соответственно. Хотя это стандартное решение, оно может не соответствовать цветовой схеме ваших страниц, поэтому давайте изменим ее. В вашем файле styles.css добавьте следующее:
a: link {
font-family: Arial, Helvetica, без засечек;
цвет: # FF9900;
текстовое оформление: подчеркивание;
}
a: посещения {
цвет: # FFCC66;
}
a: hover {
background: #FFFFCC;
вес шрифта: жирный;
}
Мы установили три стиля ссылок: a: ссылка по умолчанию, a: посещение, когда он посещался, мы изменили цвет, и a: hover. С помощью: hover у нас есть ссылка, чтобы получить цвет фона и выделить жирным шрифтом, чтобы подчеркнуть, что это ссылка, по которой нужно щелкнуть.
Стилизация раздела навигации
Поскольку мы сначала поместили раздел навигации (id = «nav») в HTML, давайте сначала его стилизовать. Нам нужно указать, насколько он должен быть широким, и поставить более широкое поле с правой стороны, чтобы основной текст не сталкивался с ним. мы также поставили границу вокруг этого.
Добавьте следующий CSS в ваш файл styles.css:
#nav {
ширина: 225 пикселей;
Поля справа: 15 пикселей;
граница: средняя твердая # 000000;
}
#nav li {
list-style: none;
}
.footer {
font-size: .75em;
ясно: оба;
ширина: 100%;
выравнивание текста: по центру;
}
Свойство list-style устанавливает список внутри раздела навигации, чтобы в нем не было маркеров или цифр, а .footer стилизовал раздел авторского права, чтобы он был меньше и центрировался внутри раздела.
Позиционирование основного раздела
Позиционируя основной раздел с абсолютным позиционированием, вы можете быть уверены, что он останется именно там, где вы хотите, чтобы он оставался на вашей веб-странице. Мы сделали его шириной 800px для размещения мониторов большего размера , но если у вас монитор меньшего размера, вы можете захотеть сделать его уже.
Поместите следующее в ваш документ styles.css:
#main {
width: 800px;
верх: 0px;
положение: абсолютное;
слева: 250 пикселей;
}
Стилизация ваших параграфов
Так как я уже установил шрифт абзаца выше, я хотел дать каждому абзацу немного «пинка», чтобы он выделился лучше. Я сделал это, поместив рамку сверху, которая выделяла абзац больше, чем просто изображение.
Поместите следующее в ваш документ styles.css:
.topline {
border-top: толстое тело # FFCC00;
}
Мы решили сделать это как класс с именем topline, а не просто определять все абзацы таким образом. Таким образом, если мы решим, что хотим иметь абзац без верхней желтой линии, мы можем просто не указывать class = «topline» в теге абзаца, и у него не будет верхней границы.
Стилизация изображений
Изображения обычно имеют рамку вокруг них, это не всегда видно, если только изображение не является ссылкой, но нам нравится иметь класс в таблице стилей CSS, который автоматически отключает границу . Для этой таблицы стилей мы создали класс noborder, и большинство изображений в документе являются частью этого класса.
Другая особенная часть этих изображений — их расположение на странице. Мы хотели, чтобы они были частью абзаца, в котором они были, без использования таблиц для выравнивания. Самый простой способ сделать это — использовать CSS-свойство float.
Поместите следующее в ваш документ styles.css:
#main img {
float: left;
поле справа: 5 пикселей;
нижнее поле: 15 пикселей;
}
.noborder {
border: 0px нет;
}
Как вы можете видеть, на изображениях также установлены свойства полей, чтобы убедиться, что они не разбиты на всплывающий текст, который находится рядом с ними в абзацах.
Теперь посмотрите на завершенную страницу
После сохранения CSS вы можете перезагрузить страницу pets.htm в своем веб-браузере. Ваша страница должна выглядеть примерно так, как показано на этом рисунке, с выровненными изображениями и правильной навигацией в левой части страницы.
Выполните эти же шаги для всех ваших внутренних страниц этого сайта. Вы хотите иметь одну страницу для каждой страницы в вашей навигации.