Программирование

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

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

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

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

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

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

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

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

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

<link href = "styles.css" rel = "stylesheet" type = "text / css">
03
из 10

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

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

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

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

html, body { 
margin: 0px;
отступы: 0px;
граница: 0px;
слева: 0px;
верх: 0px;
}
04
из 10

Изменение шрифта на странице

Изменение шрифта на странице

Шрифт часто является первым, что вы хотите изменить на веб-странице. Шрифт по умолчанию на веб-странице может быть некрасивым и на самом деле зависит от самого веб-браузера, поэтому, если вы не определите шрифт, вы действительно не знаете, как будет выглядеть ваша страница.

Обычно вы меняете шрифт в абзацах, а иногда и во всем документе. Для этого сайта мы определим шрифт на уровне заголовка и абзаца. Добавьте следующее в ваш документ 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, но если вы планируете, вы захотите его стилизовать.

09
из 10

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

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

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

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

#main img { 
float: left;
поле справа: 5 пикселей;
нижнее поле: 15 пикселей;
}
.noborder {
border: 0px нет;
}

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

Похожие посты
Программирование

Что такое канал RSS? (И где его взять)

Программирование

7 причин, почему изображения не загружаются на ваш сайт

Программирование

Запустите агент SQL Server: настройте SQL Server 2012

Программирование

15 лучших бесплатных обоев дня Святого Патрика