Начиная с HTML + CSS

  1. Шаг 1: написание HTML
  2. Шаг 2: добавление цветов
  3. Шаг 3: добавление шрифтов
  4. Шаг 5: стилизация ссылок
  5. Шаг 6: добавление горизонтальной линии
  6. Шаг 7: помещение таблицы стилей в отдельный файл

Этот короткий учебник предназначен для людей, которые хотят начать использовать CSS и никогда раньше не писали таблицы стилей CSS.

Это не объясняет многое из CSS. Это просто объясняет, как создать файл HTML, файл CSS и как заставить их работать вместе. После этого вы можете прочитать любой из ряда другие учебники добавить больше возможностей в файлы HTML и CSS. Или вы можете переключиться на использование выделенного HTML или CSS редактор, это помогает вам создавать сложные сайты.

В конце урока вы создадите HTML-файл, который выглядит следующим образом:

Получившаяся HTML-страница с цветами и разметкой выполнена с помощью CSS.

Обратите внимание, что я не утверждаю, что это красиво ☺

Шаг 1: написание HTML

Для этого урока я предлагаю вам использовать только самые простые инструменты. Например, Notepad (под Windows), TextEdit (на Mac) или KEdit (под KDE) подойдет. Когда вы поймете принципы, вы можете захотеть перейти на более продвинутые инструменты или даже на коммерческие программы, такие как Style Master, Dreamweaver или GoLive. Но для вашей самой первой таблицы стилей CSS хорошо не отвлекаться на слишком много расширенных функций.

Не используйте текстовый процессор, такой как Microsoft Word или OpenOffice. Обычно они создают файлы, которые веб-браузер не может прочитать. Для HTML и CSS нам нужны простые текстовые файлы.

Шаг 1 - открыть ваш текстовый редактор («Блокнот», «TextEdit», «KEdit» и т. Д.), Начните с пустого окна и введите следующее:

<! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN"> <html> <head> <title> Моя первая стилизованная страница </ title> </ head> <body> <! - Навигация по сайту меню -> <ul class = "navbar"> <li> <a href="index.html"> Домашняя страница </a> <li> <a href="musings.html"> Musings </a> < li> <a href="town.html"> Мой город </a> <li> <a href="links.html"> Ссылки </a> </ ul> <! - Основной контент -> < h1> Моя первая стилизованная страница </ h1> <p> Добро пожаловать на мою стилизованную страницу! <p> Ему не хватает изображений, но, по крайней мере, у него есть стиль. И у него есть ссылки, даже если они никуда не уходят & hellip; <p> Здесь должно быть больше, но я пока не знаю, что. <! - Подпишите и поставьте дату на странице, это только вежливо! -> <адрес> Сделано 5 апреля 2004 года. Самостоятельно. </ address> </ body> </ html>

На самом деле вам не нужно вводить его: вы можете скопировать и вставить его с этой веб-страницы в редактор.

(Если вы используете TextEdit на Mac, не забудьте сообщить TextEdit, что текст действительно является простым текстом, перейдя в меню «Формат» и выбрав «Сделать простой текст».)

)

Редактор KEdit, показывающий источник HTML.

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

Теперь выберите «Сохранить как…» в меню «Файл», перейдите в каталог / папку, куда вы хотите его поместить (с рабочим столом все в порядке) и сохраните файл как «mypage.html». Пока не закрывайте редактор, он нам снова понадобится.

(Если вы используете TextEdit в Mac OS X до версии 10.4, вы увидите параметр «Не добавлять расширение .txt» в диалоговом окне «Сохранить как». Выберите этот параметр, поскольку имя «mypage.html» уже содержит расширение. Более новые версии TextEdit автоматически заметят расширение .html.)

Далее откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл в вашем файловом менеджере (Windows Explorer, Finder или Konqueror) и щелкните или дважды щелкните файл «mypage.html». Он должен открыться в вашем веб-браузере по умолчанию. (Если это не так, откройте браузер и перетащите файл в него.)

Как видите, страница выглядит довольно скучно ...

Шаг 2: добавление цветов

Возможно, вы видите черный текст на белом фоне, но это зависит от того, как настроен браузер. Итак, одна простая вещь, которую мы можем сделать, чтобы сделать страницу более стильной, - это добавить несколько цветов. (Оставьте браузер открытым, мы будем использовать его позже.)

Мы начнем с таблицы стилей, встроенной в файл HTML. Позже мы поместим HTML и CSS в отдельные файлы. Отдельные файлы хороши, так как упрощает использование одной и той же таблицы стилей для нескольких файлов HTML: вам нужно написать таблицу стилей только один раз. Но для этого шага мы просто держим все в одном файле.

Нам нужно добавить элемент <style> в файл HTML. Таблица стилей будет внутри этого элемента. Вернитесь в окно редактора и добавьте следующие пять строк в заголовок HTML-файла. Строки для добавления показаны красным (строки с 5 по 9).

<! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN"> <html> <head> <title> Моя первая стилизованная страница </ title> <style type = "text / css"> body {color : пурпурный; background-color: # d8da3d} </ style> </ head> <body> [и т. д.]

Первая строка говорит, что это таблица стилей и что она написана на CSS («text / css»). Вторая строка говорит, что мы добавляем стиль к элементу «body». В третьей строке цвет текста становится фиолетовым, а в следующей строке фон становится зеленовато-желтым.

Фон элемента body также будет фоном всего документа. Мы не указали никаких других элементов (p, li, address ...) в качестве явного фона, поэтому по умолчанию они не будут иметь ни одного (или: будут прозрачными). Свойство color устанавливает цвет текста для элемента body, но все остальные элементы внутри тела наследуют этот цвет, если явно не переопределены. (Мы добавим некоторые другие цвета позже.)

Теперь сохраните этот файл (используйте «Сохранить» из меню «Файл») и вернитесь в окно браузера. Если вы нажмете кнопку «Перезагрузить», экран изменится с «скучной» страницы на цветную (но все же довольно скучную) страницу. Помимо списка ссылок вверху, текст теперь должен быть фиолетовым на зеленовато-желтом фоне.

Как один браузер показывает страницу теперь, когда было добавлено несколько цветов.

Шаг 3: добавление шрифтов

Еще одна вещь, которую легко сделать, - это различить шрифты для различных элементов страницы. Итак, давайте установим текст шрифтом «Грузия», за исключением заголовка h1, который мы дадим «Helvetica».

В Интернете вы никогда не можете быть уверены, какие шрифты есть у ваших читателей на их компьютерах, поэтому мы также добавляем некоторые альтернативы: если Грузия недоступна, Times New Roman или Times тоже подойдут, а если ничего не поможет, браузер может использовать любой другой шрифт с засечки. Если Helvetica отсутствует, Geneva, Arial и SunSans-Regular очень похожи по форме, и если ничего из этого не работает, браузер может выбрать любой другой шрифт без засечек.

В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13):

<! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN"> <html> <head> <title> Моя первая стилизованная страница </ title> <style type = "text / css"> body { font -семейство: Грузия, "Times New Roman", Times, засечек; цвет: фиолетовый; background-color: # d8da3d} h1 {семейство шрифтов: Helvetica, Женева, Arial, SunSans-Regular, без засечек} </ style> </ head> <body> [и т. д.]

Если вы снова сохраните файл и нажмете «Перезагрузить» в браузере, теперь должны появиться разные шрифты для заголовка и другого текста.

Теперь основной текст отличается от шрифта заголовка.

Шаг 5: стилизация ссылок

Меню навигации по-прежнему выглядит как список, а не как меню. Давайте добавим немного стиля к нему. Мы удалим маркер списка и переместим элементы налево туда, где был маркер. Мы также дадим каждому элементу свой собственный белый фон и черный квадрат. (Почему? Никакой конкретной причины, только потому, что мы можем.)

Мы также не сказали, какими должны быть цвета ссылок, поэтому давайте добавим это: синий для ссылок, которые пользователь еще не видел, и фиолетовый для уже посещенных ссылок (строки 13-15 и 23-33):

<! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN"> <html> <head> <title> Моя первая стилизованная страница </ title> <style type = "text / css"> body {padding -лева: 11em; семейство шрифтов: Грузия, «Times New Roman», Times, Serif; цвет: фиолетовый; background-color: # d8da3d} ul.navbar { list-style-type: none; отступы: 0; поле: 0; положение: абсолютное; верх: 2em; слева: 1em; ширина: 9em} h1 {семейство шрифтов: Helvetica, Женева, Arial, SunSans-Regular, без засечек} ul.navbar li {фон: белый; поле: 0.5em 0; набивка: 0,3em; border-right: 1em сплошной черный} ul.navbar a {оформление текста: нет} a: ссылка {цвет: синий} a: посещение {цвет: фиолетовый} </ style> </ head> <body> [и т. д.]

Шаг 6: добавление горизонтальной линии

Последним дополнением к таблице стилей является горизонтальное правило для отделения текста от подписи внизу. Мы будем использовать 'border-top', чтобы добавить пунктирную линию над элементом <address> (строки 34-37):

<! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN"> <html> <head> <title> Моя первая стилизованная страница </ title> <style type = "text / css"> body {padding -лева: 11em; семейство шрифтов: Грузия, «Times New Roman», Times, Serif; цвет: фиолетовый; background-color: # d8da3d} ul.navbar {list-style-type: none; отступы: 0; поле: 0; положение: абсолютное; верх: 2em; слева: 1em; ширина: 9em} h1 {семейство шрифтов: Helvetica, Женева, Arial, SunSans-Regular, без засечек} ul.navbar li {фон: белый; поле: 0.5em 0; набивка: 0,3em; border-right: 1em сплошной черный} ul.navbar a {оформление текста: нет} a: ссылка {цвет: синий} a: посещенный {цвет: фиолетовый} адрес {margin-top: 1em; padding-top: 1em; граница сверху: тонкая пунктирная} </ style> </ head> <body> [и т. д.]

Теперь наш стиль завершен. Далее давайте посмотрим, как мы можем поместить таблицу стилей в отдельный файл, чтобы другие страницы могли использовать тот же стиль.

Шаг 7: помещение таблицы стилей в отдельный файл

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

Чтобы создать файл таблицы стилей, нам нужно создать еще один пустой текстовый файл. Вы можете выбрать «Новый» в меню «Файл» в редакторе, чтобы создать пустое окно. (Если вы используете TextEdit, не забудьте снова сделать его простым текстом, используя меню «Формат».)

Затем вырезайте и вставляйте все, что находится внутри элемента <style> из файла HTML, в новое окно. Не копируйте сами <style> и </ style>. Они принадлежат HTML, а не CSS. В новом окне редактора у вас должна быть полная таблица стилей:

body {padding-left: 11em; семейство шрифтов: Грузия, «Times New Roman», Times, Serif; цвет: фиолетовый; background-color: # d8da3d} ul.navbar {list-style-type: none; отступы: 0; поле: 0; положение: абсолютное; верх: 2em; слева: 1em; ширина: 9em} h1 {семейство шрифтов: Helvetica, Женева, Arial, SunSans-Regular, без засечек} ul.navbar li {фон: белый; поле: 0.5em 0; набивка: 0,3em; border-right: 1em сплошной черный} ul.navbar a {оформление текста: нет} a: ссылка {цвет: синий} a: посещенный {цвет: фиолетовый} адрес {margin-top: 1em; padding-top: 1em; граница сверху: тонкая пунктирная}

Выберите «Сохранить как…» в меню «Файл», убедитесь, что вы находитесь в той же папке / папке, что и файл mypage.html, и сохраните таблицу стилей как «mystyle.css».

Теперь вернитесь в окно с HTML-кодом. Удалите все из тега <style> до тега </ style> включительно и замените его элементом <link> следующим образом (строка 5):

<! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN"> <html> <head> <title> Моя первая стилизованная страница </ title> <link rel = "stylesheet" href = "mystyle.css "> </ head> <body> [и т. д.]

Это скажет браузеру, что таблица стилей находится в файле с именем «mystyle.css», и поскольку каталог не указан, браузер будет искать в том же каталоге, где был найден файл HTML.

Если вы сохраните файл HTML и перезагрузите его в браузере, вы не увидите никаких изменений: страница по-прежнему оформлена в том же стиле, но теперь стиль исходит из внешнего файла.

Конечный результат

Следующим шагом является размещение обоих файлов, mypage.html и mystyle.css на вашем веб-сайте. (Ну, вы можете сначала немного их изменить…) Но как это сделать, зависит от вашего интернет-провайдера.

Почему?