Стилизация блокнота, созданного с помощью CSS

Создайте таблицу стилей CSS

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

1. Выберите «Файл»> «Создать в блокноте», чтобы открыть пустое окно.
2. Сохраните файл как CSS, нажав Файл <Сохранить как ...
3. Перейдите в папку my_website на жестком диске
4. Измените «Сохранить как тип:» на «Все файлы»
5. Назовите свой файл “styles.css” (не включайте в кавычки) и нажмите Сохранить

Свяжите таблицу стилей CSS с вашим HTML

Как только у вас есть таблица стилей для вашего веб-сайта, вам нужно будет связать ее с самой веб-страницей. Для этого вы используете тег ссылки. Поместите следующий тег ссылки в любом месте тега вашего документа pets.htm:

Исправить поля страницы

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

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

html, тело {
поле: 0px;
отступ: 0px;
граница: 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 добавьте следующее:

a: ссылка {
семейство шрифтов: Arial, Helvetica, без засечек;
цвет: # FF9900;
оформление текста: подчеркнут;
}
a: посетил {
цвет: # FFCC66;
}
a: hover {
background: #FFFFCC;
font-weight: bold;
}

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

Стилизация раздела навигации

Поскольку мы сначала поместили раздел навигации (id = “nav”) в HTML, давайте сначала его стилизовать. Нам нужно указать, насколько он должен быть широким, и поставить более широкое поле справа, чтобы основной текст не сталкивался с ним. Я также поставил границу вокруг этого.

Добавьте следующий CSS в ваш документ styles.css:

#nav {
ширина: 225px;
поле справа: 15px;
рамка: средняя сплошная # 000000;
}
#nav li {
list -стиль: нет;
}
.footer {
размер шрифта: .75em;
ясно: оба;
ширина: 100%;
текст -align: центр;
}

Свойство list-style устанавливает список внутри раздела навигации, чтобы в нем не было маркеров или цифр, а .footer стилизовал раздел авторских прав, чтобы он был меньше и центрировался внутри раздела.

Позиционирование основного раздела

Позиционируя основной раздел с абсолютным позиционированием, вы можете быть уверены, что он останется именно там, где вы хотите, чтобы он оставался на вашей веб-странице. Я сделал мой 800px шириной для размещения мониторов большего размера, но если у вас монитор меньшего размера, вы можете захотеть сделать его уже.

Поместите следующее в ваши стили.документ CSS:

#main {
ширина: 800px;
сверху: 0px;
позиция: абсолютная;
слева: 250px;
}

Стилизация ваших параграфов

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

Поместите следующее в ваш документ styles.css:

.topline {
border-top: толстое тело # FFCC00;
}

Я решил сделать это как класс с именем “topline”, а не просто определять все абзацы таким образом. Таким образом, если я решу, что хочу иметь абзац без верхней желтой линии, я могу просто пропустить class = “topline” в теге абзаца, и у него не будет верхней границы.

Стилизация изображений

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

Другая особенная часть этих изображений – их расположение на странице. Я хотел, чтобы они были частью абзаца, в котором они были, без использования таблиц для их выравнивания. Самый простой способ сделать это – использовать CSS-свойство float.

Поместите следующее в ваш документ styles.css:

#main img {
float: left;
margin-right: 5px;
margin-bottom: 15px;
}
.noborder {
border: 0px нет;
}

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

Теперь посмотрите на вашу завершенную страницу

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

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