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