Как прикрепить html к css: Способы добавления стилей на страницу — Вебджем.рф

Содержание

Начинаем работу с HTML + CSS

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

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

В конце данной статьи Вы создадите HTML файл который будет выглядеть как этот:

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

Заметьте, что я не претендую на то, что это очень красиво ☺

Разделы помеченные даным знаком необязательны. Они содержат дополнительные объяснения HTML и CSS кода в приведенных примерах.

Знак “внимание!” в начале абзаца обозначает более расширенную информацию чем остальной текст.

ШАГ 1: написание HTML кода

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

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

Первый шаг заключается в открытии пустого окна текстового редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и наборе в нем следующего текста:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4. 01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul>
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h2>My first styled page</h2>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

Вам не обязательно это перенабирать — вы можете просто скопировать и вставить текст с этой страницы в редактор.

(Если вы используете TextEdit на Макинтоше, не забудьте указать TextEdit’у, что это действительно простой текстовый файл, открыв меню Format и выбрав опцию “Make plain text”. )

Первая строчка нашего HTML файла говорит браузеру о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем случае — это HTML версии 4.01.

Слова между < и > называются тэгами и как вы можете видеть, документ содержится между <html> и </html> тэгами. Между <head> and </head> находится различная информация, которая не отображается в самом документе. Например там содержится заголовок документа. Позже мы добавим туда и связь с CSS файлом.

Тэг <body> это место содержимого документа. В принципе, все что находится внутри этого тэга за исключением текста между <!— и —>, являющегося комментариями, будлет выведено на экран. Комментарий браузером игнорируется.

Тэг <ul> в нашем примере задает отображение “неупорядоченного списка” (Unordered List), т.е. списка, элементы которого непронумерованы. Тэги <li> начинают “элементы списка” (List Item). Тэг <p> является “параграфом”. А тэг <a> — “якорь” (Anchor), с помощью которого создаются гиперссылки.

Код HTML в редактор KEdit.

Если вы хотите узнать какие бывают тэги в скобках <…>, то вы можете изучить Начало работы с HTML. Но сначала пару слов о структуре нашей HTML страницы.

Тэг “ul” — список состоящий из одной ссылки на каждый элемент списка. Эта структура послужит нам “навигацией” по нашему сайту связывая с нами другие страницы нашего гипотетического сайта . Предполагается, что все страницы нашего сайта будут иметь схожее или идентичное меню.

Элементы “h2” и “p” задают содержимое уникальное каждой страницы, в то время как подпись (“address”) снизу снова будет повторяться на всех страницах.

Отметьте, что я не закрыл “li” и “p” элементы. В HTML (но не в XHTML), можно опускать закрывающие тэги </li> и </p>, что я и сделал в данном случае, для того чтобы было проще текст. Но вы можете добавить их, если считаете необходимым.

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

Выберите “Сохранить как…” или “Save As…” из выпадающего меню Файл или File, укажите каталог для сохранения файла (например Рабочий Стол) и сохраните данный файл как “mypage.html”. Не закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем 10.4, вы увидите опцию «Don’t append the .txt extension» в диалоговом окне «Save as». Выберите эту опцию, потому что имя файла “mypage.html” уже включает в себя расширение. Более новые версии TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл вашим файловым менеджером (Проводник, Windows Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на нем.

Если вы делали все как описано то имя файла будет “mypage.html”. У вас должен открыться файл в браузере, установленном по умолчанию. (Если нет, то откройте браузер и перетащите файл в его окно.)

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

ШАГ 2: изменяем цвета

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

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

Нам нужно добавить элемент <style> к HTML файлу. Определения стилей будут внутри этого тэга.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[и т.д.]

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

Таблицы стилей CSS создаются согласно правилам. Каждое правило состоит из трех частей:

селектор (в нашем примере: “body”), которые говорит о том, к какой части документа применить правило;
свойство (в нашем примере свойствами являются ‘color’ и ‘background-color’), которое указывает что именно мы устанавливаем у данного элемента, выбранного селектором;
и значение (‘purple’ и ‘#d8da3d’), которое устанавливает значение атрибута.

Наш пример показывает что правила могут быть скомбинированы. Мы установили два свойства, так же мы могли задать их раздельно:

body { color: purple }
body { background-color: #d8da3d }

но поскольку оба правила относятся к body мы записали “body” один раз и поместили свойства и значения вместе. Для получения большей информации о селекторах смотрите главу 2 из

Lie & Bos.

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

Теперь сохраните этот файл (используйте команду “Сохранить” или “Save” из файлового меню) и переключитесь обратно в браузер. Если вы нажмете кнопку “обновить” , то изображение сменится со “скучной” страницы на разукрашенную (но все еще однообразную) страницу. Кроме ссылок сверху, весь текст должен быть пурпурный на желто-зеленом фоне.

Теперь браузер показывает страницу к которой мы добавили цвет.

В CSS можно задавать цвета несколькими способами. Наш пример показывает два из них: по имени (“purple”) и по шестнадцатиричному коду (“#d8da3d”). Существует порядка 140 имен цветов и 16 шестнадцатиричных значений. Добавляя прикосновение стиля объясняет детали относительно этих кодов.

ШАГ 3: изменяем шрифты

Еще одна вещь которую можно сделать — шрифтовое разнообразие разных элементов на странице. Давайте напишем шрифтом “Georgia” весь текст, исключая заголовки, которые мы напишем “Helvetica.”

Поскольку в Web никогда нельзя быть целиком уверенным в том, какие шрифты установлены на компьютерах посетителей, мы добавим альтернативные способы отображения: если Georgia не найдена, то мы будем использовать 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>My first styled page</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы сохраните файл снова и нажмете “обновить” в браузере, то у вас должны быть разные шрифты в заголовках и в тексте.

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

ШАГ 4: добавляем навигацию

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

Навигация уже на странице. Это список <ul> вверху. Ссылки в нем не работают, потому что наш “сайт” пока что состоит только из одной страницы, но это неважно в данный момент. Конечно же, на настоящем сайте не должно быть неработающих ссылок.

Нам нужно переместить список налево и сдвинуть остальное содержимое немного вправо, чтобы создать пространство для него. Свойства CSS которые мы будем использовать для этого — ‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’ (для сдвига меню).

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

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы снова сохраните файл и обновите его в браузере то список ссылок получится у вас слева от основного текста. Это уже смотрится интереснее, не так ли?

В отличии от предыдущего файла, в этом главный текст переместился направо а навигация налево

Свойство ‘position: absolute’ говорит что элемент ul расположен независимо от любого текста который предшествовал или будет следующим за этим элементом, а свойства ‘left’ и ‘top’ обозначают это расположение. В нашем случае это 2em сверху и 1em от левого края окна.

‘2em’ обозначает 2 раза по растоянию, равному размеру текущего шрифта. Т.е., если меню отображается шрифтом в 12 пунктов, то 2em будет равняться 24 пунктам. `em` очень полезная единица измерения в CSS, поскольку может адаптироваться автоматически к шрифту, используемому браузером. Большинство браузеров имеют возможность изменять размеры шрифта: вы можете попробовать увеличить или уменьшить размер и увидеть, что меню будет изменяться в зависимости от размера шрифта, чего бы не случилось, если бы мы указали отступ в пикселях

ШАГ 5: украшаем ссылки

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>
[etc.]

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

В HTML гиперссылки создаются тэгами <a> поэтому для указания цвета нам надо создать правило в CSS для “a”. Для того, чтобы различать посещенные и непосещенные ссылки, CSS предоставляет два “псевдо-класса” (:link и :visited). Они называются “псевдо-классами” для отличия от HTML атрибутов, которые указываются в HTML напрямую, т.е. в нашем случае class="navbar".

ШАГ 6: добавляем горизонтальные линии

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul. navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[и т.д.]

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

ШАГ 7: внешний CSS

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

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

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

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h2 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul. navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

Такая конструкция скажет браузеру о том, что таблица стиле располагается в файле под названием “mystyle. css”, и поскольку директория не упомянута, браузер будет искать этот файл там же, где лижит HTML файл.

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

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

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

Подключение CSS Стилей — 3 Варианта

Существует 3 способа, как осуществить подключение CSS стилей для вашего сайта: вы можете использовать глобальные стили CSS, добавив CSS правила в контейнер <head> HTML документа, вы можете добавить ссылку на внешний .css файл, содержащий все необходимые правила или использовать внутренний CSS для применения правил к определенному элементу. В этом руководстве мы рассмотрим все три варианта подключения CSS, узнаем их достоинства и недостатки.

Нужен недорогой, но надёжный хостинг для вашего нового проекта? Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!

К предложению

Вариант 1 — Глобальный CSS

Глобальный CSS помещается в контейнер <head> конкретной страницы. При таком варианте подключения классы и идентификаторы (ID) могут быть использованы для обращения к CSS коду, однако, они будут активны только на этой конкретной странице. CSS стили подключенные таким путем загружаются при каждой повторной загрузке страницы, поэтому они могут повлиять на скорость ее загрузки. Тем не менее, существует несколько ситуаций в которых использование глобальных CSS может быть полезно. К примеру, если вам необходимо отправить кому-нибудь шаблон страницы — вам гораздо проще будет предоставить предварительный результат, если все будет на одной странице. Глобальные CSS помещаются между тегами <style></style>. Вот пример глобальной таблицы стилей:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

Преимущества глобальных CSS:

Таблица стилей влияет только на одну страницу.
В глобальной CSS могут быть использованы классы и идентификаторы (ID).
Нет необходимости загружать несколько файлов. HTML и CSS могут быть в одном и том же файле.

Недостатки глобальных CSS:

Увеличенное время загрузки страницы.
Подключается только к одной странице — неэффективно, если вы хотите использовать одну и ту же CSS для нескольких страниц.

Как произвести подключение CSS к HTML странице

Откройте вашу HTML страницу в любом текстовом редакторе. Если страница уже загружена на вашу учетную запись хостинга, вы можете использовать текстовый редактор предоставленный вашим хостингом. Если данный документ HTML находится на вашем компьютере, вы можете использовать любой текстовый редактор для его редактирования, и после этого повторно загрузить его на вашу учетную запись хостинга используя FTP-клиент.
Найдите открывающий тег <head> и добавьте после него следующий код:

<style type="text/css">

Далее перейдите к следующей строке и добавьте нужные CSS правила, к примеру:

body {
     background-color: blue;
 }
 h2 {
     color: red;
     padding: 60px;
 }

Как только вы закончите добавление CSS правил, добавьте закрывающий тег:

</style>

После всех действий, документ HTML с глобальной CSS должен выглядеть примерно так:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: blue;
}
h2 {
    color: red;
    padding: 60px;
} 
</style>
</head>
<body>

<h2>Руководство Hostinger</h2>
<p>Это наш текст. </p>

</body>
</html>

Вариант 2 — Внешний CSS

Возможно самый удобный вариант для подключения CSS к вашему сайту, это его привязка к внешнему .css файлу. В этом случае все изменения сделанные во внешнем CSS файле, будут в целом отражаться на вашем сайте. Ссылка на внешний CSS файл помещается в контейнер <head> страницы:

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Тогда как, сами таблицы стилей располагаются в файле style.css. К примеру:

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

Преимущества внешних CSS:

Меньший размер страницы HTML и более чистая структура файла.
Быстрая скорость загрузки.
Для разных страниц может быть использован один и тот же .css файл.

Недостатки внешних CSS:

Страница может некорректно отображаться до полной загрузки внешнего CSS.

Вариант 3 — Внутренний CSS

Внутренний CSS используется для конкретного тега HTML. Атрибут <style> используется для настройки этого тега. Этот вариант подключения CSS не является рекомендованным, так как в этом случае необходимо настраивать каждый тег HTML по отдельности. К тому же управление вашим сайтом может стать довольно трудным, если вы будете использовать только внутренний CSS. Однако в некоторых случаях этот способ может быть весьма полезным. К примеру, в случае если у вас нет доступа к CSS файлам, или вам необходимо применить правила только для одного элемента. Пример HTML страницы с внутренним CSS должен выглядеть так:

<!DOCTYPE html>
<html>
<body style="background-color:black;">

<h2 style="color:white;padding:30px;">Руководство Hostinger</h2>
<p style="color:white;">Здесь что-нибудь полезное. </p>

</body>
</html>

Преимущества внутреннего CSS:

Полезен для проверки и предпросмотра изменений.
Полезен для быстрых исправлений.
Меньше HTTP запросов.

Недостатки внутреннего CSS:

Внутренние CSS должны быть применены для каждого элемента в отдельности.

Заключение

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

как подключить CSS к HTML-странице

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

Как работает CSS

Добавляя каскадные таблицы, программист пишет правила, включающие блок объявлений и селектор. Первый вписан в фигурные скобки, в нем может находиться одна или несколько частей, разделенных точкой с запятой. Второй — указывает на какие отрезки кода распространяется правило. Оно «рассказывает» браузеру что именно и как отобразить на веб-странице. За «что» отвечает селектор, находящийся слева, а за «каким образом» — текст в скобках, расположенный справа. Нередко встречается вариант, когда верстальщик вписывает несколько селекторов. Это происходит в ситуации, если одни настройки должны срабатывать для нескольких элементов. Если же добавлено два и более объявлений, это значит, что к одной части должны прикрепиться много изменений. Ярким примером добавления нескольких свойств является блок, которому одновременно задают заливку, рамку, скругление и выравнивание по центру.

Как подключить CSS к своему проекту

Есть много способов прикрутить CSS к проекту. Первый — прописать все параметры в коде HTML-страницы. Для этого пригодится открывающий и закрывающий тег «style» — в нем будут содержаться правила. Второй — создать самостоятельный файл с расширением .css. У этих двух методов есть названия — внутренние и внешние таблицы стилей. Также веб-разработчики именуют их глобальными и связанными.

Существует еще один путь, помогающий привязывать стили к отдельным фрагментам. Так он выглядит:

Его называют встроенным. В нем содержится атрибут «style», относящийся к HTML, а в скобках записан уже CSS-код. Стоит учитывать, что использование такого варианта — не лучшее решение для большинства ситуаций. Он работает, но не считается правильным.

Когда требуется застилить отдельный элемент, стоит создать селектор класса. Он придаст форму исключительно тем элементам, к которым применили определенный класс.

В качестве примера возьмем абзац, с селектором «skill»:

Такой тег превращается из:

в конструкцию, при помощи которой присвоение стилей является максимально правильным:

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

Что нужно для работы внутренних таблиц стилей

В примере взята несложная конструкция, задающая для абзацев «p» цвет — color и размер шрифта — font-size.

Данный отрезок вставляют в какую-либо HTML-страницу, используя тег «style». Такой блок располагается следом за «title» — текстом, высвечивающимся в панели вкладок браузера. В коде это будет выражено так:

Полный код страницы:

А это появляется на браузерной веб-странице, если нажать в редакторе на правую кнопку мыши и выбрать «open in browser»:

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

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

Отличие внешних таблиц CSS-стилей

Как уже упоминалось выше, внешние таблицы имеют расширение .css и сохраняются в отдельном файле. Создания такого документа предусматривает использование специальных текстовых редакторов (Sublime Text) или знакомого всем пользователям компьютера блокнота. Главным правилом, из-за которого файл приобретает свои свойства, является правильное разрешение. Прописать его можно в названии, просто поставив после имени точку и «css» . На изображении приведен пример кода:

Внимательный читатель мог заметить, что строки на этой картинке не отличаются от написанного для внутренних таблиц. Отличие только в окружающих блок тегах и возможности применения настроек к нескольким веб-страницам или целому сайту. Если подробнее рассмотреть первое отличие, понятно, что дополнительные теги указывают на расположение таблицы. Вставляется блок также после «title».

Как это выглядит в редакторе:

Путь к файлу styles.css не указан полностью — это допустимо, если оба документа находятся в одной папке.

Можно ли импортировать чужие стили

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

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

Подключение CSS — это далеко не все интересные моменты, которые придется пройти будущему frontend-программисту в процессе обучения. На старте пути особенно ценна менторская поддержка опытного преподавателя, поэтому многие люди приходят на курсы по верстке в Харькове или онлайн. Они рассчитаны на новичков — можно прийти без подготовки и научиться всему последовательно, без формирования пробелов в знаниях. Выпускники получают возможность пройти пару бесплатных уроков — один с HR, а другой — на тему фриланса. Наиболее успешные ученики также могут рассчитывать на помощь в трудоустройстве.

Заметили ошибку? Выделите ее и нажмите Ctrl+Enter, чтобы сообщить нам.

CSS Как подключить. Уроки для начинающих. W3Schools на русском

Когда браузер читает таблицу стилей, он форматирует HTML документ в соответствии с информацией в таблице стилей.

Три способа подключения CSS

Существует три способа подключения таблицы стилей CSS:

Внешняя таблица стилей (External)
Внутренняя таблица стилей (Internal)
Встроенный стиль (Inline)

Внешняя таблица стилей

С помощью внешней таблицы стилей вы можете изменить внешний вид всего сайта, изменив только один файл!

Каждая HTML страница должна содержать ссылку на файл внешней таблицы стилей внутри элемента <link>.

Примечание. Подключение файла внешней таблицы стилей является наиболее распространенным способом использования каскадных таблиц стилей.

Пример

Внешние стили определены в элементе <link> внутри раздела <head> HTML страницы:

<h2>Это заголовок</h2>
<p>Это параграф.</p>

</body>
</html>

Попробуйте сами »

Внешнюю таблицу стилей можно написать в любом текстовом редакторе (например, в стандартном Блокноте). Файл не должен содержать никаких HTML-тегов. Файл таблицы стилей должен быть сохранен с расширением .css.

Примечание: Подробнее о текстовых редакторах, которые можно использовать для написания как HTML-кода, так и CSS-кода, читайте в разделе Редакторы кода.

Вот как выглядит файл ‘mystyle.css’:

«mystyle.

css» body {
background-color: lightblue;
}

h2 {
color: navy;
margin-left: 20px;
}

Примечание: Не добавляйте пробел между значением свойства и единицей (например margin-left: 20 px;). Правильно писать: margin-left: 20px;

Внутренняя таблица стилей

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

Пример

Внутренние стили определены в элементе <style> внутри раздела <head> HTML страницы:

body {
background-color: linen;
}

h2 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h2>Это заголовок</h2>
<p>Это параграф.</p>

</body>
</html>

Попробуйте сами »

Встроенные стили

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

Чтобы использовать встроенные стили, добавьте атрибут стиля к соответствующему элементу (тегу). Атрибут style может содержать любое свойство CSS.

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

Пример

Встроенные стили определяются в атрибуте «style» соответствующего элемента:

<h2>Это заголовок</h2>
<p>Это параграф.</p>

</body>
</html>

Попробуйте сами »

Примечание: Встроенный стиль теряет многие из преимуществ таблицы стилей (путем смешивания контента с его визуальным представлением). Используйте этот метод умеренно.

Несколько таблиц стилей

Если некоторые свойства были определены для одного и того же селектора (элемента) в разных таблицах стилей, будет использоваться значение из последней прочитанной таблицы стилей.

Предположим, что внешняя таблица стилей имеет следующий стиль для элемента <h2>:

h2 {
color: navy;
}

Затем предположим внутренняя таблица стилей также имеет следующий стиль для элемента <h2>:

h2 {
color: orange;
}

Пример

Если внутренний стиль определен после ссылки на внешнюю таблицу стилей, то элемент <h2> будет отображаться ‘orange’ (оранжевым):

<head>
<link rel=»stylesheet» href=»mystyle.css»>
<style>
h2 {
color: orange;
}
</style>
</head>

Попробуйте сами »

Пример

Однако, если внутренний стиль определен перед ссылкой на внешнюю таблицу стилей, то <h2> элементы будут «navy» (тёмно-синего цвета):

<head>
<style>
h2 {
color: orange;
}
</style>
<link rel=»stylesheet» href=»mystyle.css»>
</head>

Попробуйте сами »

Порядок использования каскадных стилей

Какой стиль будет использоваться, если для элемента HTML указано более одного стиля?

Все стили на странице будут «каскадно» превращаться в новую «виртуальную» таблицу стилей по следующим правилам, где номер один имеет наивысший приоритет:

Встроенный стиль (внутри элемента HTML)
Внешние и внутренние таблицы стилей (в разделе head)
Стиль браузера по умолчанию

Таким образом, встроенный стиль имеет наивысший приоритет и переопределяет внешние и внутренние стили и настройки браузера по умолчанию.

Попробуйте сами »

Проверьте себя с помощью упражнений!

Изображения HTML, как вставить картинку

Изображения могут улучшить дизайн и внешний вид веб-страницы.

Пример

Пример

Пример

Синтаксис изображений в формате HTML

В HTML изображения определяются тегом <img>.

Тег <img> пуст, он содержит только атрибуты и не имеет закрывающего тега.

Атрибут src задает URL-адрес (веб-адрес) изображения:

Атрибут ALT

Атрибут alt предоставляет альтернативный текст для изображения, если пользователь по какой-либо причине не может его просмотреть (из-за медленного соединения, ошибки в атрибуте src или если пользователь использует средство чтения с экрана).

Значение атрибута alt должно описывать изображение:

Пример

Если обозреватель не может найти изображение, будет отображено значение атрибута alt:

Пример

Примечание: Атрибут alt является обязательным. Веб-страница не будет корректно проверяться без нее.

Размер изображения-ширина и высота

Для указания ширины и высоты изображения можно использовать атрибут style.

Пример

Кроме того, можно использовать атрибуты width и height:

Пример

Атрибуты width и height всегда определяют ширину и высоту изображения в пикселях.

Примечание: Всегда указывайте ширину и высоту изображения. Если ширина и высота не указаны, страница может мерцать во время загрузки изображения.

Ширина и высота, или стиль?

Атрибуты width , height и style действительны в HTML5.

Однако рекомендуется использовать атрибут style. Это предотвращает изменение размера изображений в таблицах стилей:

Пример

img {
width:100%;
}

</body>
</html>

Изображения в другой папке

Если не указано, обозреватель ожидает найти изображение в той же папке, что и веб-страница.

Тем не менее, он является общим для хранения изображений в вложенной папке. Затем необходимо включить имя папки в атрибут src:

Пример

Изображения на другом сервере

Некоторые веб-узлы хранят свои изображения на серверах образов.

На самом деле, вы можете получить доступ к изображениям с любого веб-адреса в мире:

Пример

Дополнительные сведения о путях к файлам можно прочитать в разделе пути к файлам HTML.

Анимированные изображения

HTML позволяет анимированные GIF:

Пример

Изображение как ссылка

Чтобы использовать изображение в качестве ссылки, поместите тег <img> внутрь тега <a>:

Пример

Примечание: border:0; добавляется для предотвращения IE9 (и более ранних) от отображения границы вокруг изображения (когда изображение является ссылкой).

Плавающее изображение

Используйте свойство CSS float, чтобы изображение поплыло вправо или влево от текста:

Пример

The image will float to the right of the text.

<p><img src=»smiley.gif» alt=»Smiley face» style=»float:left;width:42px;height:42px;»>
The image will float to the left of the text.</p>

Графические карты

Тег <map> определяет изображение-карту. Изображение-карта представляет собой изображение с щелчком области.

На картинке ниже, нажмите на компьютер, Телефон, или чашку кофе:

Пример

Атрибут name тега <map> связан с атрибутом usemap <img> и создает связь между изображением и картой.

Элемент <map> содержит несколько тегов <area>, определяющих области, на которые вы щелкнули на карте изображения.

Фоновое изображение

Чтобы добавить фоновое изображение в элемент HTML, используйте свойство CSS background-image:

Пример

Чтобы добавить фоновое изображение на веб-страницу, укажите свойство Background-Image элементу Body:

<h3>Background Image</h3>

</body>

Примере

Чтобы добавить фоновое изображение для абзаца, укажите свойство Background-Image в элементе P:

</body>

Чтобы узнать больше о фоновых изображениях, изучите наши CSS Background Справочник.

Элемент <picture>

HTML5 ввел элемент <picture> , чтобы добавить больше гибкости при указании ресурсов изображения.

Элемент <picture> содержит ряд элементов <source>, каждый из которых ссылается на различные источники изображения. Таким образом, обозреватель может выбрать изображение, которое наилучшим образом соответствует текущему виду и/или устройству.

Каждый элемент <source> имеет атрибуты, описывающие, когда их изображение является наиболее подходящим.

Обозреватель будет использовать первый элемент <source> с совпадающими значениями атрибутов и игнорировать любые следующие элементы <source>.

Пример

Показать одно изображение, если окно обозревателя (видовой экран) не менее 650 пикселей, а другое изображение, если нет, но больше, чем 465 пикселей.

Примечание: Всегда указывайте элемент <img> в качестве последнего дочернего элемента элемента <picture>. Элемент <img> используется обозревателями, которые не поддерживают элемент <picture>, или если ни один из тегов <source> не соответствует.

Читатели экрана HTML

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

Справка

Используйте элемент HTML <img> для определения изображения
Используйте атрибут HTML src для определения URL-адреса изображения
Используйте атрибут HTML alt для определения альтернативного текста для изображения, если он не может быть отображен
Используйте атрибуты HTML width и height для определения размера изображения
Используйте свойства CSS width и height для определения размера изображения (в качестве альтернативы)
Используйте свойство CSS float , чтобы позволить изображению поплавок
Используйте элемент HTML <map> для определения изображения-карты
Используйте элемент HTML <area> для определения областей щелчка на карте изображения
Используйте атрибут usemap элемента HTML <img> , чтобы указать на карту изображения
Используйте элемент HTML <picture> для отображения различных изображений для различных устройств

Примечание: Загрузка изображений занимает время. Большие изображения могут замедлить вашу страницу. Используйте изображения тщательно.

Теги изображений HTML

Тег	Описание
<img>	Определяет изображение
<map>	Определяет изображение-карту
<area>	Определяет активную область внутри изображения-карты
<picture>	Определяет контейнер для нескольких ресурсов изображения

сделай это красивым · HonKit

Наш блог всё ещё выглядит довольно скверно, не так ли? Пора сделать его красивым! Для этого будем использовать CSS.

Что такое CSS?

Каскадные таблицы стилей (англ. Cascading Style Sheets, или сокращённо CSS) — специальный язык, используемый для описания внешнего вида и форматирования сайта, написанного на языке разметки (как HTML). Воспринимай это как своего рода макияж для нашей веб-страницы 😉

Но мы же не хотим начинать всё с нуля, правда? Мы просто снова возьмём что-то, что уже было создано программистами и опубликовано в Интернете для свободного пользования. Ты же знаешь, заново изобретать велосипед совсем не весело.

Давай использовать Bootstrap!

Bootstrap — один из наиболее популярных HTML и CSS фреймворков для разработки красивых сайтов: https://getbootstrap.com/

Он был написан программистами, которые работали в Twitter, а сейчас совершенствуется волонтёрами со всего мира.

Установка Bootstrap

Для установки Bootstrap тебе нужно добавить следующие строки в <head> твоего .html файла (blog/templates/blog/post_list.html):

blog/templates/blog/post_list.html

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

Это не добавит ни одного файла к твоему проекту. Эти строки просто указывают на файлы, опубликованные в Интернете. Просто продолжай, открой свой веб-сайт и обнови страницу. Вот и результат!

Выглядит уже лучше!

Статические файлы в Django

Теперь мы ближе познакомимся с теми таинственными статическими файлами. Статическими файлами называются все файлы CSS и изображения, т.е. файлы, которые не изменяются динамически, их содержание не зависит от контекста запроса и будет одинаково для всех пользователей.

Куда поместить статические файлы в Django

Django уже знает, где искать статические файлы для встроенного приложения «admin». Теперь нам нужно добавить статические файлы для своего приложения blog.

Мы сделаем это, создав папку static внутри каталога с нашим приложением:

djangogirls
├── blog
│   ├── migrations
│   ├── static
│   └── templates
└── mysite

Django будет автоматически находить папки static внутри всех каталогов твоих приложений и сможет использовать их содержимое в качестве статических файлов.

Твой первый CSS файл!

Давай создадим CSS файл, чтобы добавить свой собственный стиль для твоей веб-страницы. Создай новую папку под названием css внутри твоей папки static. Затем создай новый файл под названием blog.css внутри папки css. Готово?

djangogirls
└─── blog
     └─── static
          └─── css
               └─── blog.css

Пришло время написать несколько строк CSS! Открой файл blog/static/css/blog.css в своем редакторе кода.

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

Но давай сделаем хотя бы немного. Возможно, мы могли бы изменить цвет заголовка? Чтобы понимать цвета, компьютеры используют специальные коды. Они начинаются с # и далее следуют 6 букв (A-F) и цифр (0-9). Ты можешь найти коды цветов, например, здесь: http://www.colorpicker.com/. Также можешь пользоваться предопределенными цветами, такими как red и green.

В файле blog/static/css/blog.css тебе нужно добавить следующий код:

blog/static/css/blog.css

h2 a {
    color: #FCA205;
}

h2 a — это CSS-селектор. Это означает, что мы применяем наши стили к каждому элементу a внутри элемента h2 (например, когда у нас в коде что-то вроде: <h2><a href="">link</a></h2>). В этом случае мы говорим о том, что нужно изменить цвет элемента на #FCA205, то есть на оранжевый. Конечно, ты можешь указать свой собственный цвет!

В CSS файле мы определяем стили для элементов файла HTML. Элементы идентифицируются именами (то есть a, h2, body), атрибутом class или атрибутом id. Class и id – это имена, которые ты сама присваиваешь элементам. Классы (сlass) определяют группы элементов, а идентификаторы (id) указывают на конкретные элементы. Например, следующий тег может быть идентифицирован CSS с использованием имени тега a, класса external_link или идентификатора link_to_wiki_page:

<a href="https://en.wikipedia.org/wiki/Django">

Почитай про CSS селекторы в CSS Selectors на w3schools.

Затем нам также нужно сообщить нашему HTML-шаблону о том, что мы добавили CSS. Открой файл blog/templates/blog/post_list.html и добавь эту строку в самое начало:

blog/templates/blog/post_list.html

{% load static %}

Мы просто загружаем здесь статические файлы 🙂 Далее между <head> и </head>, после ссылок на файлы Bootstrap CSS, добавь такую строку:

blog/templates/blog/post_list.html

<link rel="stylesheet" href="{% static 'css/blog.css' %}">

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

Твой файл должен теперь выглядеть следующим образом:

blog/templates/blog/post_list.html

{% load static %}
<html>
    <head>
        <title>Django Girls blog</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
    </head>
    <body>
        <div>
            <h2><a href="/">Django Girls Blog</a></h2>
        </div>

        {% for post in posts %}
            <div>
                <p>published: {{ post.published_date }}</p>
                <h2><a href="">{{ post.title }}</a></h2>
                <p>{{ post.text|linebreaksbr }}</p>
            </div>
        {% endfor %}
    </body>
</html>

Ок, сохрани файл и обнови страницу!

Отличная работа! Может быть, мы также хотели бы добавить нашему веб-сайту немного пространства и увеличить отступ слева? Давай попробуем!

blog/static/css/blog.css

body {
    padding-left: 15px;
}

Добавь это к твоему CSS, сохрани файл и посмотри, как это работает!

Возможно, мы можем настроить шрифт нашего заголовка? Вставь это внутрь тега <head> в файле blog/templates/blog/post_list.html:

blog/templates/blog/post_list.html

<link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic" rel="stylesheet" type="text/css">

Как и ранее, проверь порядок и вставь эту строку перед ссылкой на blog/static/css/blog.css. Эта строка импортирует шрифт под названием Lobster из шрифтов Google (https://www.google.com/fonts).

Теперь добавь строку font-family: 'Lobster'; в CSS файле blog/static/css/blog.css внутри блока определения стиля h2 a (код помещается между скобками { и }) и обнови страницу:

blog/static/css/blog.css

h2 a {
    color: #FCA205;
    font-family: 'Lobster';
}

Отлично!

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

Дадим имена определённым частям HTML кода. Добавь класс под названием page-header в блок div, содержащий наш заголовок, как это сделано здесь:

blog/templates/blog/post_list.html

<div>
    <h2><a href="/">Django Girls Blog</a></h2>
</div>

А теперь добавь класс post в твой div, содержащий сообщение в блоге:

blog/templates/blog/post_list.html

<div>
    <p>published: {{ post.published_date }}</p>
    <h2><a href="">{{ post.title }}</a></h2>
    <p>{{ post.text|linebreaksbr }}</p>
</div>

Теперь добавим определения блоков для различных селекторов. Селекторы, которые начинают с символа ., относятся к классам. В Интернете много хороших справочников по CSS, которые могут помочь тебе понять следующий код. А сейчас просто скопируй и вставь код в файл djangogirls/static/css/blog.css:

blog/static/css/blog.css

.page-header {
    background-color: #ff9400;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}

.page-header h2, .page-header h2 a, .page-header h2 a:visited, .page-header h2 a:active {
    color: #ffffff;
    font-size: 36pt;
    text-decoration: none;
}

.content {
    margin-left: 40px;
}

h2, h3, h4, h5 {
    font-family: 'Lobster', cursive;
}

.date {
    color: #828282;
}

.save {
    float: right;
}

.post-form textarea, .post-form input {
    width: 100%;
}

.top-menu, .top-menu:hover, .top-menu:visited {
    color: #ffffff;
    float: right;
    font-size: 26pt;
    margin-right: 20px;
}

.post {
    margin-bottom: 70px;
}

.post h2 a, .post h2 a:visited {
    color: #000000;
}

Далее переделаем код HTML, отображающий посты, используя классы. Замени:

blog/templates/blog/post_list.html

{% for post in posts %}
    <div>
        <p>published: {{ post.published_date }}</p>
        <h2><a href="">{{ post.title }}</a></h2>
        <p>{{ post.text|linebreaksbr }}</p>
    </div>
{% endfor %}

в blog/templates/blog/post_list.html этим кодом:

blog/templates/blog/post_list.html

<div>
    <div>
        <div>
            {% for post in posts %}
                <div>
                    <div>
                        <p>Опубликовано: {{ post.published_date }}</p>
                    </div>
                    <h2><a href="">{{ post.title }}</a></h2>
                    <p>{{ post.text|linebreaksbr }}</p>
                </div>
            {% endfor %}
        </div>
    </div>
</div>

Сохрани эти файлы и обнови свой веб-сайт.

Юхууу! Выглядит прекрасно, не так ли? Код, который мы только что вставили, на самом деле не сложный для понимания, и ты, просто прочитав его, сможешь понять большую часть.

Не бойся немного повозиться с этим CSS-файлом и попробуй поменять некоторые вещи. Если что-то сломается, не волнуйся, ты всегда можешь отменить предыдущее действие!

В любом случае, мы настоятельно рекомендуем пройти бесплатный онлайн курс Codeacademy HTML & CSS course в виде домашней работы после воркшопа, чтобы изучить всё, что нужно знать об оформлении веб-сайтов с помощью CSS.

Готова к следующей главе?! 🙂

встраивание HTML-файла в другой HTML-файл

Элемент <link> существует в HTML уже давно, он предлагает нам простой и понятный способ вставки таблицы стилей и JavaScript-файлов в различные HTML-документы, но, к сожалению, он не позволяет встраивать другие HTML-файлы.

Для достижения этой цели, вы можете либо использовать тяжеловесный элемент <iframe> или JavaScript-объект XMLHttpRequest, который используется в AJAX-программировании. Но теперь, с появлением замечательной технологии, известной как HTML5 Imports, мы можем полностью изменить подходы к созданию наших сайтов.

Imports позволяет использовать элемент <link> для импорта HTML-документов в другие HTML-документы, это означает, что вы теперь не ограничены элементом <iframe> и вам не требуется писать кучу Ajax-запросов. Imports также имеет возможность создавать наборы CSS, JavaScript, и HTML код, что делает его прекрасным инструментом для загрузки автономных компонентов в ваши HTML-документы.

Встраивание HTML-файла в другой HTML-файл

Поддержка браузеров

К сожалению, поддержка браузерами HTML5 Imports все еще очень ограничена. Реализация этой новой и интересной технологии была впервые показана в 31-й версии Google Chrome, в этой версии необходимо было включить HTML5 Imports вручную. Чтобы сделать это, вы должны были открыть chrome://flags (экспериментальные возможности Chrome), включить флаг “Enable HTML Imports”, а затем перезапустить свой Chrome.

Но теперь вы будете очень рады узнать, что Chrome 36 имеет встроенную поддержку HTML5 Imports, это означает, что вам теперь не нужно беспокоиться об активации этой функции вручную.

Кроме того, чтобы определить имеет ли браузер поддержку HTML5 Imports или нет, вы можете использовать функцию приведенную ниже:

if («import» in document.createElement(«link»)) {
// Этот браузер поддерживает HTML5 Imports.
}

Для других браузеров, которые не поддерживают HTML5 Imports, вы можете воспользоваться Polymer’s Polyfill.

Использование HTML5 Imports

HTML5 Imports использует элемент <link>, чтобы указать путь к файлу, который вы хотите загрузить, также как мы импортируем скрипты и таблицы стилей в наш HTML-документ.

Для импорта, все что вам нужно сделать, это заменить значение атрибута rel на «import«. Когда вы установите атрибут rel=»import», это сообщит браузеру, что необходимо импортировать указанной файл в документ.

Примечание: если вы хотите загрузить HTML-документ с другого домена, вы должны убедиться, что импорт разрешен CORS.

Получение контента

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

Примечание: Это правило применимо только для HTML-контента. Браузер будет автоматически загружать любой JavaScript и CSS код, и применять его к основному документу.

Чтобы получить доступ к содержимому импорта, вы должны написать некоторый JavaScript-код.

var doc= document.querySelector(‘link[rel=»import»]’).import;

Он будет захватывать все содержимое файла doc.html, который мы импортируем в нашу веб-страницу. Свойство import элемента link будет null, если:

Ресурс CORS отключен.
<link> не имеет rel=»import».
HTML5 Imports не поддерживается в браузере.
Либо элемент <link> был удален из DOM, либо не был добавлены в DOM.

Давайте предположим, doc.html содержит:

<text>
<h3>Заголовок документа</h3>
<p><span>Автор: Ajeet Yadav</span></p>
<p>CreativeWebLogix: Convert Existing Site to Responsive</p>
</text>

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

<body>
<script>
var doc = document.querySelector(‘link[rel=»import»]’).import;
// Grab DOM from doc.html’s document.
var text = doc.querySelector(‘.doc’);
document.body.appendChild(text.cloneNode(true));
</script>
</body>

Вот и все!

Использование шаблонов

Кроме этого, вы можете использовать HTML5 Imports в тандеме с элементом <template> и импортировать секции разметки, а затем использовать, когда вы в них нуждаетесь. В этом случае, вместо того, чтобы вставлять HTML прямо в тело, мы сначала создадим полную копию текста .content с использованием document.importNode(), а затем импортируем его в контейнер. Таким образом, код будет выглядеть примерно так:

События

Элемент <link> имеет 2 события: onerror (при неудачной попытке загрузки импорта) и onload (при успешной загрузке импорта), которые можно использовать, чтобы следить на состоянием загрузки ваших файлов. Для того чтобы выполнить код после загрузки файла импорта, и, чтобы избежать ошибок, лучше воспользоваться атрибутами onload и onerror.

Примечание: браузер загружает файл импорта сразу после того найдет элемент <link>. Поэтому убедитесь, чтобы определили обработчики событий перед элементом в разметке. В противном случае, вы можете получить ошибку в консоли.

Но, если вы создали импорт динамически, то:

var link = document.createElement(‘link’);
link.rel = ‘import’;
link.href = ‘doc.html’
link.onload = function(event) {…};
link.onerror = function(event) {…};
document.head.appendChild(link);

Как я упоминал ранее, Imports весьма полезен для собирания HTML, CSS и JavaScript-файлов в единый подключаемый файл. Ниже, я показываю вам реальный пример Bootstrap, который состоит из многочисленных элементов <link> и <script>.

При импорте bootstrap.html в ваш HTML-документ, браузер сначала загрузит каждый из следующих CSS и JavaScript-файлов, а впоследствии применит их в основном документе.

Заключение

Благодаря HTML5 Imports вы можете создавать повторно используемые фрагменты кода, которые можно добавлять простой строкой кода, т.е. <link rel=»import»>. Это чрезвычайно мощная технология полностью изменит мир веб-разработки в будущем.

Перевод статьи

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Как добавить CSS

Когда браузер читает таблицу стилей, он форматирует HTML-документ в соответствии с информация в таблице стилей.

Три способа вставки CSS

Есть три способа вставить таблицу стилей:

Внешний CSS
Внутренний CSS
Встроенный CSS

Внешний CSS

С внешняя таблица стилей, вы можете изменить внешний вид всего веб-сайта, изменив всего один файл!

Каждая HTML-страница должна содержать ссылку на файл внешней таблицы стилей внутри элемент внутри раздела заголовка.

Пример

Внешние стили определяются в элементе в разделе HTML-страницы:

Это заголовок

Это абзац.

Попробуй сам »

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

Внешний файл .css не должен содержать никаких HTML-тегов.

Вот как выглядит файл mystyle.css:

«mystyle.css»

корпус {
фоновый цвет: светло-голубой;
}

h2 {
цвет: темно-синий;
поле слева: 20 пикселей;
}

Примечание. Не добавляйте пробел между значением свойства и единицей измерения (например, margin-left: 20 пикселей; ). Правильный способ: margin-left: 20px;

Внутренний CSS

Внутренняя таблица стилей может использоваться, если одна-единственная страница HTML имеет уникальный стиль.

Внутренний стиль определяется внутри элемента

Это заголовок

Это абзац.

Попробуй сам "

Встроенный CSS

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

Чтобы использовать встроенные стили, добавьте атрибут стиля к соответствующему элементу. В Атрибут style может содержать любое свойство CSS.

Пример

Встроенные стили определяются в атрибуте style соответствующего элемент:

Это это заголовок

Это абзац.

Попробуй сам "

Совет: Встроенный стиль теряет многие преимущества таблицы стилей (смешивая содержание с презентацией). Используйте этот метод умеренно.

Несколько таблиц стилей

Предположим, что внешняя таблица стилей имеет следующий стиль для элемента

:

h2 {
цвет: темно-синий;
}

Затем предположим, что внутренняя таблица стилей также имеет следующий стиль для элемента

:

h2 {
оранжевый цвет;
}

Пример

Если внутренний стиль определен после ссылки на внешнюю таблицу стилей, элементы

будут «апельсин»:

Попробуй сам "

Пример

Однако, если внутренний стиль определен с до ссылки на внешнюю таблицу стилей, элементы

будут «флот»:

Попробуй сам "

Каскадный порядок

Какой стиль будет использоваться, если для элемента HTML указано более одного стиля?

Все стили на странице будут «каскадом» переходить в новый «виртуальный» стиль. лист по следующим правилам, где номер один имеет наивысший приоритет:

Встроенный стиль (внутри элемента HTML)
Внешние и внутренние таблицы стилей (в головной части)
Браузер по умолчанию

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

Попробуйте сами »

Проверьте себя упражнениями!

Стили HTML CSS

CSS - это каскадные таблицы стилей.

CSS экономит много работы. Он может управлять макетом нескольких веб-страницы сразу.

Управление текстом

цветов, Ящики

Что такое CSS?

Каскадные таблицы стилей (CSS) используются для форматирования макета веб-страницы.

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

Совет: Слово каскадно означает, что стиль примененный к родительскому элементу, будет также применяться ко всем дочерним элементам в пределах родитель. Итак, если вы установите цвет основного текста на «синий», все заголовки, абзацы и другие текстовые элементы в теле также получат тот же цвет (если вы не укажете что-то другое)!

Использование CSS

CSS можно добавить в HTML-документы 3 способами:

Встроенный - с использованием атрибута стиля внутри HTML-элементов
Внутренний - с использованием элемента Это отличный способ быстро протестировать новый стиль на своей странице. Зарезервировать внутренние стили для тестирования и экспериментов с новыми правилами CSS. Встроенные стили Последний метод - добавить CSS-стили в строку с вашим HTML. Для этого вам просто нужно использовать атрибут стиля и добавить объявление CSS в качестве значения атрибута. style = "color: deeppink" > Этот абзац будет «темно-розовым». Хотя это очень просто, но и не очень расширяемо. Например, чтобы изменить все абзацы на красный, нам нужно добавить атрибут style к каждому абзацу в нашем HTML-документе. Этот абзац будет «темно-розовым». Это еще один абзац с «темно-розовым». Это еще один абзац с «темно-розовым». Это слишком много избыточного CSS, что также означает много места для ошибок. Как правило, использование встроенных стилей считается плохим тоном. Не делайте этого. Какой метод лучше? Внешние таблицы стилей . Все наши стили в одном (надеюсь) организованном файле Стили будут последовательно применяться ко всем нашим html-страницам Поскольку стили пишутся только один раз, меньше места для ошибок Браузеру необходимо загрузить таблицу стилей только один раз для всех страниц Вернуться на страницу 3 недели » Применение CSS | HTML Dog Встроенный Встроенные стили вставляются прямо в теги HTML с помощью атрибута style . Они выглядят примерно так: текст Это сделает этот конкретный абзац красным. Но, если вы помните, лучший практический подход состоит в том, что HTML должен быть отдельным, документом без представления , поэтому следует по возможности избегать встроенных стилей. Новый раздел примеров! Посмотрите на весь этот код в действии и поиграйте с ним. Внутренний Встроенные или внутренние стили используются для всей страницы.Внутри элемента head теги style окружают все стили для страницы. Пример CSS <стиль> п { цвет: красный; } a { цвет: синий; } ... Это сделает все абзацы на странице красными, а все ссылки - синими. Хотя предпочтительнее испачкать наш HTML встроенным представлением, также обычно предпочтительнее хранить файлы HTML и CSS отдельно, и поэтому мы остаемся с нашим спасителем… Внешний Внешние стили используются для всего многостраничного веб-сайта. Существует отдельный файл CSS , который будет выглядеть примерно так: п { красный цвет; } a { цвет синий; } Если этот файл сохранен как «style.css »в том же каталоге, что и ваша HTML-страница, тогда на нее можно будет ссылаться в HTML следующим образом: Пример CSS ... Применить! Чтобы получить максимальную отдачу от этого руководства, было бы неплохо опробовать код по мере продвижения, поэтому запустите новый новый файл в текстовом редакторе и сохраните пустой документ как «style.css» в том же каталог как ваш HTML-файл. Теперь измените свой HTML-файл так, чтобы он начинался примерно так: Моя первая веб-страница ... Сохраните файл HTML. Теперь это ссылка на файл CSS, который на данный момент пуст, поэтому ничего не изменит. По мере прохождения учебного курса CSS для начинающих вы сможете добавлять и изменять файл CSS и просматривать результаты, просто обновляя окно браузера, в котором есть файл HTML, как мы это делали раньше.