Создайте таблицу стилей CSS
Точно так же мы создали отдельный текстовый файл для HTML, вы создадите текстовый файл для CSS. Если вам нужны визуальные эффекты для этого процесса, см. Первый учебник. Ниже приведены шаги по созданию вашей таблицы стилей CSS в «Блокноте»:
- Выберите «Файл»> «Создать» в «Блокноте», чтобы получить пустое окно
- Сохраните файл как CSS, нажав Файл <Сохранить как …
- Перейдите в папку my_website на жестком диске
- Измените «Сохранить как тип:» на «Все файлы»
- Назовите свой файл «styles.css» (оставьте без кавычек) и нажмите «Сохранить».
Свяжите таблицу стилей CSS с вашим HTML
После того, как у вас есть таблица стилей для вашего веб-сайта, вам необходимо связать ее с самой веб-страницей. Для этого используется тег ссылки. Поместите следующий тег ссылки в любом месте
теги вашего pets.htm документа:
03 из 10 Когда вы пишете XHTML для разных браузеров, одна вещь, которую вы узнаете, состоит в том, что все они имеют разные поля и правила для того, как они отображают вещи. Лучший способ убедиться, что ваш сайт выглядит одинаково в большинстве браузеров, заключается в том, чтобы не допускать, чтобы по умолчанию значения полей по умолчанию были выбраны браузером. Я предпочитаю начинать свои страницы в верхнем левом углу, без дополнительных дополнений или полей, окружающих текст. Даже если я собираюсь заполнять содержимое, я устанавливаю поля на ноль, чтобы начать с того же чистого сланца. Чтобы сделать это, добавьте следующее в свой документ styles.css: Шрифт часто является первым, что вы хотите изменить на веб-странице. Шрифт по умолчанию на веб-странице может быть уродливым и фактически находится в самом веб-браузере, поэтому, если вы не определяете шрифт, вы действительно не будете знать, как будет выглядеть ваша страница. Как правило, вы меняете шрифт на абзацы, а иногда и на весь документ. Для этого сайта мы определяем шрифт на уровне заголовка и абзаца. Добавьте в свой документ styles.css следующее: Я начал с 1em в качестве базового размера для абзацев и элементов списка, а затем использовал это, чтобы установить размер для моих заголовков. Я не ожидаю использовать заголовок глубже h4, но если вы планируете, вы тоже захотите его подстроить. По умолчанию цвета для ссылок являются синими и фиолетовыми для непересекающихся и посещенных ссылок соответственно. Хотя это стандартно, это может не соответствовать цветовой схеме ваших страниц, поэтому давайте ее изменим. В файле styles.css добавьте следующее: Я установил три стиля ссылок: a: link по умолчанию: a: посещено, когда оно было посещено, я меняю цвет и нажимаю. С помощью: hover у меня есть ссылка получить цвет фона и смело, чтобы подчеркнуть, что это ссылка для клика. Поскольку мы сначала помещаем раздел навигации (id = "nav") в HTML, давайте сначала его подстроим. Нам нужно указать, насколько он должен быть широким, и поставить более широкий край с правой стороны, чтобы основной текст не ударил по нему. Я также разместил вокруг него границу. Добавьте следующий CSS в свой документ styles.css: Свойство list-style устанавливает список внутри раздела навигации, чтобы не было никаких маркеров или цифр, а стиль .footer уменьшает размер раздела авторских прав и центрируется внутри раздела. Располагая основной раздел с абсолютным позиционированием, вы можете быть уверены, что он останется именно там, где вы хотите, чтобы он оставался на вашей веб-странице. Я сделал мой 800px широкий, чтобы разместить большие мониторы, но если у вас есть меньший монитор, вы можете сделать это более узким. Поместите в свой документ styles.css следующее: Поскольку я уже установил шрифт абзаца выше, я хотел дать каждому абзацу немного дополнительного «удара», чтобы он стал лучше. Я сделал это, поставив верхнюю границу, которая подчеркивала абзац больше, чем только изображение в одиночку. Поместите в свой документ styles.css следующее: Я решил сделать это как класс под названием «линия верха», а не просто определить все параграфы таким образом. Таким образом, если я решила, что хочу иметь абзац без верхней желтой строки, я могу просто оставить класс = «topline» в теге абзаца, и он не будет иметь верхнюю границу. Обычно изображения имеют границу вокруг них, это не всегда видно, если изображение не является ссылкой, но мне нравится иметь класс в моей таблице стилей CSS, который автоматически отключает границу.Для этой таблицы стилей я создал класс «noborder», и большинство изображений в документе являются частью этого класса. Другая особая часть этих изображений - их местоположение на странице. Я хотел, чтобы они были частью абзаца, в котором они находились, без использования таблиц для их выравнивания. Самый простой способ сделать это - использовать свойство float CSS. Поместите в свой документ styles.css следующее: Как вы можете видеть, на изображениях также заданы свойства полей, чтобы убедиться, что они не разбиты относительно плавающего текста, который находится рядом с ними в параграфах. После того как вы сохранили свой CSS, вы можете перезагрузить страницу pets.htm в своем веб-браузере. Ваша страница должна выглядеть примерно так, как показано на этом рисунке, при выравнивании изображений и правильной навигации в левой части страницы. Выполните следующие шаги для всех своих внутренних страниц для этого сайта. Вы хотите иметь одну страницу для каждой страницы в своей навигации. Исправить поля страницы
Изменение шрифта на странице
Сделать ваши ссылки более интересными
Стилирование раздела навигации
Позиционирование главной секции
Стилизация ваших абзацев
Стилирование изображений
Посмотрите на свою завершенную страницу
