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

Содержание

Добавление CSS | htmlbook.ru

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

Таблицы связанных стилей

Самый мощный и удобный способ определения стилей и правил для сайта. Стили
хранятся в отдельном файле, который может быть использован для любых веб-страниц.
Для подключения таблицы связанных стилей используется тег <link>
в заголовке страницы (пример 1).

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Стили</title>
  <link rel="stylesheet" type="text/css" href="mysite.css">
  <link rel="stylesheet" type="text/css" href="http://www.mysite.ru/main.css">
 </head>
 <body>
   <h2>Hello, world!</h2>
 </body>
</html>

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

Достоинства данного способа

  1. Используется один файл со стилем для любого количества веб-страниц, также
    возможно его применять на других сайтах.
  2. Можно изменять таблицу стилей без модификации веб-страниц.
  3. При изменении стиля в одном единственном файле, стиль автоматически
    применяется ко всем страницам, где есть на него ссылка. Несомненно,
    удобно. Указываем размер шрифта в одном только месте, и он изменяется
    на всех сто или больше веб-страницах нашего сайта.
  4. Файл со стилем при первой загрузке помещается в кэш на локальном
    компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит
    быстрее.

Таблицы глобальных стилей

Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы.
По своей гибкости и возможностям этот способ использования стиля уступает предыдущему,
но также позволяет размещать все стили в одном месте. В данном случае, прямо
в теле документа. Определение стиля задается тегом <style>
(пример 2).

Пример 2. Использование таблицы глобальных стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Стили</title>
  <style type="text/css">
   h2 { 
    font-size: 120%; /* Размер шрифта */
    font-family: Verdana, Arial, Helvetica, sans-serif; /* Семейство шрифта */
    color: #336; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <h2>Hello, world!</h2>
 </body>
</html>

В данном примере показано изменение стиля заголовка <h2>.
На веб-странице теперь достаточно указать только этот тег и стили будут добавлены
к нему автоматически.

Внутренние стили

Внутренний стиль являются по существу расширением для одиночного тега используемого
на веб-странице. Для определения стиля используется атрибут style,
а его значения указываются с помощью языка таблицы стилей (пример 3)..

Пример 3. Использование внутренних стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Стили</title>
 </head>
 <body>
  <h2>
  Hello, world!</h2>
 </body>
</html>

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

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

Пример 4. Сочетание разных методов подключения стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Стили</title>
  <style type="text/css">
    h2 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; }
  </style>
 </head>
 <body>
  <h2>Hello, world!</h2>
  <h2>Hello, world!</h2>
 </body>
</html>

В приведенном примере первый заголовок задается красным цветом размером 36
пикселов, а следующий — зеленым цветом и другим шрифтом.

Начинаем работу с 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 создаются согласно правилам. Каждое
правило состоит из трех частей:

  1. селектор (в нашем примере: “body”), которые
    говорит о том, к какой части документа применить правило;

  2. свойство (в нашем примере свойствами являются
    ‘color’ и ‘background-color’), которое указывает что именно мы
    устанавливаем у данного элемента, выбранного селектором;

  3. и значение (‘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 странице

  1. Откройте вашу HTML страницу в любом текстовом редакторе. Если страница уже загружена на вашу учетную запись хостинга, вы можете использовать текстовый редактор предоставленный вашим хостингом. Если данный документ HTML находится на вашем компьютере, вы можете использовать любой текстовый редактор для его редактирования, и после этого повторно загрузить его на вашу учетную запись хостинга используя FTP-клиент.
  2. Найдите открывающий тег <head> и добавьте после него следующий код:
<style type="text/css">
  1. Далее перейдите к следующей строке и добавьте нужные CSS правила, к примеру:
body {
     background-color: blue;
 }
 h2 {
     color: red;
     padding: 60px;
 }
  1. Как только вы закончите добавление 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 странице, никакого эффекта от их использования не будет. Существует несколько способов, как это можно сделать.

Для тех, кто любит смотреть в формате видео.

Для тех, кто любит читать, инструкция ниже.

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

Задача стилей CSS, которые будут подключаться, сделать элемент абзаца <p> красным цветом.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
</head>
<body>
<p>Абзац</p>
</body>
</html>

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

1 вариант. Внутри открывающего тега с помощью атрибута style.

Элементам на странице, которые располагаются внутри элемента body, можно добавить атрибут style. Значением этого атрибута могут быть свойства и значения CSS, которые должны будут применены к этому элементу.

Давайте посмотрим, как это работает на конкретном примере. Атрибут style добавлен для элемента <p>.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
</head>
<body>
<p>Абзац</p>
</body>
</html>

Обратите внимание, что в этом случае не нужно использовать селектор, т.к. элемент, к которому добавлены стили уже определен.

2 вариант. Внутри элемента style.

Еще один способ подключения стилей CSS, это воспользоваться элементом <style> с атрибутом type=»text/css». Указание этого атрибута обязательно.

Давайте посмотрим, как это выглядит на конкретном примере.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {color:red;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
</head>
<body>
<p>Абзац</p>
</body>
</html>

3 вариант. Подключение внешнего файла стилей. 

И последний вариант подключения стилей CSS является использование элемента link, который позволяет подключать к HTML странице внешние файлы.

Обратите внимание на атрибуты, которые указываются у этого элемента.

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

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

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
</head>
<body>
<p>Абзац</p>
</body>
</html>

Файл style.css содержит следующих код:

p {color:red;}

Эти 3 способа подключения стилей CSS очень часто используются на практике. Советую вам поэкспериментировать с этими примерами на своем компьютере. В будущем, это вам очень сильно пригодиться.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Быстрый способ подключить CSS к HTML — руководства на Skillbox


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


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


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


Таблицу стилей можно прописать конкретно в коде HTML-страницы, обрамив правила тегами <style>. Или хранить в отдельном файле .css — и применять для многих страниц. Это внутренние и внешние таблицы стилей. Их еще называют глобальными и связанными.


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


<p style=«color:red; font-size: 3em; «>


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


Например, в случае данного абзаца (p) в таблице стилей создается селектор класса, например, skill:


.skill {
color: red;
font-size: 3em;
}


А затем тег этого абзаца трансформируется из 


<p style=«color:red; font-size: 3em; «>


в 


Так можно грамотно подключать стили к документу вместо того, чтобы прописывать встроенные стили. У этого метода ряд очевидных преимуществ: гораздо удобнее хранить стили изолированно и отдельно от документа: так их легче редактировать и применять к разным документам (вдруг вы захотите использовать тот же класс skill для еще одного абзаца?). Но главное — так соблюдается концептуальное разделение контента (HTML) и оформления (CSS).


Возьмем тот же простой стиль, который определяет размер шрифта (font-size) и цвет (color) для абзацев (p) на странице.


p { color: red; font-size: 3em; }


Этот код можно внедрить непосредственно в конкретную HTML-страницу, обрамив тегами <style></style>. Все это вставляется в код страницы сразу после заголовка (тег <title>).


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


<title>Заголовок</title>
<style>
     p {
     color: red;
     font-size: 3em;
}</style>


…и так далее.


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


<!DOCTYPE HTML>
<html>
     <head>
          <meta charset=«utf-8«>
          <title>Стили Skillbox</title>
          <style>
          p {
               color: red;
               font-size: 3em;
          }</style>
     </head>
     <body>
          <p>Привет, мир!</p>
     </body>
</html>


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


Сейчас мы создали внутреннюю таблицу стилей, которую в будущем сможем редактировать по своему желанию: добавлять новые правила, то есть селекторы и объявления для любых элементов на странице. Более того, можно даже вынести ее в отдельный файл .css — и применить сразу для многих HTML-страниц. Это уже будут внешние таблицы стилей.


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


p {
color: red;
font-size: 3em;
}


То есть в файле .css пишется все то же самое, что и во внутренних стилях. И наоборот: во внутренних стилях внутри тегов <style> можно писать все то же самое, что и в файле .css. Разница только в том, что внешние стили могут применяться сразу к нескольким страницам HTML и даже ко всему сайту целиком.


Теперь вместо тегов <style> в HTML-файлы нужно вставить код, который указывает на местонахождение внешней таблицы стилей. Он вставляется в то же самое место после заголовка (<title>), где мы раньше размещали встроенные стили:


<link href=»styles.css» rel=»stylesheet«>


Он будет выглядеть так:


<!DOCTYPE HTML>
<html>
     <head>
          <meta charset=«utf-8«>
          <title>Стили Skillbox</title>
          <link href=»styles.css» rel=»stylesheet«>
     </head>
     <body>
          <p>Привет, мир!</p>
     </body>
</html>


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


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


Из предыдущего раздела понятно, как использовать чужой стиль в своем документе: просто укажите URL соответствующего файла в своих HTML-документах.


<link href=»https://example.com/styles.css» rel=»stylesheet«>


Вот и все. Но имейте в виду: если владелец сайта изменит свой стиль — у вас тоже поменяются все страницы! Может быть, проще скопировать его файл .css к себе на сервер.


Как подключить CSS — это лишь начало большой и интересной дороги по изучению веб-программирования. Курс «Профессия — веб-разработчик» познакомит вас с основными инструментами веб-разработчика: HTML, CSS, JavaScript и PHP. Годовая программа обучения идеально подходит людям, которые хотят с чистого листа освоить навыки профессионального веб-разработчика, а также начинающим программистам.


В итоге вы научитесь создавать свои собственные веб-проекты и сможете претендовать на позицию джуниор-разработчика.


Курс «Профессия Веб-разработчик»


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


  • Живая обратная связь с преподавателями


  • Неограниченный доступ к материалам курса


  • Стажировка в компаниях-партнёрах


  • Дипломный проект от реального заказчика


  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Как структурирован CSS — Изучение веб-разработки

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

Первое, что мы рассмотрим, это три метода применения CSS к документу.

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

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

Внешняя таблица стилей — это когда у вас есть CSS отдельным файлом с расширением .css, и ссылка на него из HTML-элемента <link>:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Я пробую писать CSS</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h2>Привет!</h2>
    <p>Это мой первый опыт в CSS</p>
  </body>
</html>

Файл CSS может выглядеть следующим образом:

h2 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

Атрибут href элемента <link> должен ссылаться на файл в файловой системе.

В приведённом выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:


<link rel="stylesheet" href="styles/style.css">


<link rel="stylesheet" href="styles/general/style.css">


<link rel="stylesheet" href="../styles/style.css">

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

Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента <style>, содержащейся внутри HTML <head>.

Таким образом, HTML будет выглядеть вот так:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Я пробую писать CSS</title>
    <style>
      h2 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h2>Привет!</h2>
    <p>Это мой первый опыт в CSS</p>
  </body>
</html>

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Я пробую писать CSS</title>
  </head>
  <body>
    <h2>Привет!</h2>
    <p>Это мой первый опыт в CSS</p>
  </body>
</html>

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

Есть несколько мест, где встроенные стили являются более распространёнными или даже желательными. Вам, возможно, придётся прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело). Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.

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

index.html:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Я пробую писать CSS</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <p>Пишите сюда свой код</p>

  </body>
</html>

styles.css:

Затем, когда вы столкнётесь с CSS и захотите поэкспериментировать со стилями, измените содержимое <body> HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.

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

 

Читайте дальше и получайте удовольствие!

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

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

h2  
a:link  
.manythings  
#onething  
*  
.box p  
.box p:first-child  
h2, h3, .intro

Примечание: вы узнаете больше о селекторах в руководстве CSS-селекторы в следующем модуле.

Спецификация

Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента p — он будет синим; также я задал класс, который сделает элемент красным:

.special {
  color: red;
}

p {
  color: blue;
}

А теперь допустим, что в нашем HTML-коде у нас есть абзац p с классом special. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?

<p>Какого же я цвета?</p>

В языке CSS есть правила, которые определяют, какое правило «выиграет» в случае подобного столкновения — они называются каскадами, или спецификациями. В примере ниже мы задали два правила для селектора p, но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.

p {
  color: red;
}

p {
  color: blue;
}

А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.

Попрактикуйтесь сами — добавьте два правила для параграфа p { ... } в вашу таблицу стилей. Затем добавьте класс к одному элементу p и попробуйте применить к нему какой-нибудь стиль.

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

Если говорить в общем, CSS строится на двух его составляющих:

Свойства 
Определяют, какую характеристику вы желаете изменить (например, font-size, width, background-color).
Значения 
Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.

На изображении внизу выделены свойство и его значение. Здесь свойство — color, а его значение — blue.

Свойство вкупе со значением называется CSS-объявлением. CSS-объявления помещаются внутри блока объявлений CSS. Ниже показан наш CSS-код с выделенным блоком объявлений.

Наконец блок объявлений воссоединяется с селекторами, образуя CSS-правила. Наше изображение содержит два правила — одно для селектора h2, другое для селектора p. Правило для h2 выделено.

Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием (:).

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

Важно: Если свойство или значение не определено, то объявление считается недействительным — и будет попросту проигнорировано.

Важно: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, color надо всегда писать color; британский вариант colour не будет работать.

Функции

Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию calc(). Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:

<div><div>The inner box is 90% - 30px.</div></div>
.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

В результате получим это:

Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px. Не могу же я сказать, чему равны 90% блока?!

В следующем примере будут различные значения для свойства <transform> rotate().

.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn)
}

Результат этого кода будет:

Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл:

До сих пор не сталкивались мы с правилами @rules (произносится как эт-рулс, от английского «at-rules»). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил @rules простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать @import:

Чаще других встречается @rules под названием @media: оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).

Ниже у нас CSS-файл, в котором значение заднего фона элемента <body> равно pink. Однако после мы добавили правило @media, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

Вы столкнётесь и с другими правилами @rules в продолжение следующих уроков.

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

Некоторые свойства вроде font, background, padding, border и margin называются стенографическими свойствами, — они позволяют установить несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.

К примеру, это строка (комментарий не в счёт):


padding: 10px 15px 15px 5px;

делает то же самое, что и эти четыре, вместе взятые:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

или эти:

padding-block-start: 10px
padding-inline-end: 15px;
padding-block-end: 15px;
padding-inline-start: 5px;

в то время как строка:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

делает то же, что и эти строки:

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

Мы не будем проходить это сейчас — вы можете найти эти и многие другие стенографии в Руководстве по CSS.

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

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

Как и в HTML, вы можете делать комментарии, чтобы прояснить тот или иной отрывок кода.

Комментарии в CSS начинаются с /* и окачиваются с */. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.



body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  
  body {
    font-size: 130%;
  }
}

h2 {font-size: 1.5em;}



div p, #id:first-line {
  background-color: red;
  background-style: none
}

div p{
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора .special.

Добавьте комментарии в ваш CSS-код, чтобы приноровиться к ним.

Под отступами подразумеваются пробелы, табуляция и перенос на новую строку. Как и в HTML, браузер будет стараться игнорировать большие отступы в CSS-коде; к тому же большие отступы пагубны для читаемости кода.

В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h2 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  background-style: none
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h2 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

Как вы будете оформлять код — решать вам; хотя, работая в команде, вы обнаружите, что она придерживается тех правил форматирования, которые в ней утверждены.

Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:

margin: 0 auto;
padding-left: 10px;

А такие объявления не действительны:

margin: 0auto;
padding- left: 10px;

Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.

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

Полезно знать, как браузер делает из HTML и CSS готовую страницу, поэтом следующая ваша статья — Как работает CSS — мы рассмотрим этот процесс.

Основы CSS

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

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

К примеру, если Вы хотите, чтобы абзацы и заголовки h3 и h4 были написаны одним шрифтом и цветом и отличались только лишь размером, Вы можете сперва сгруппировать элементы <p>, <h3> и <h4> и указать для них шрифт и цвет, и уже ниже для каждого элемента указать отдельно размер шрифта. Выглядеть это будет примерно следующим образом:

p, h3, h4
{ font-family: Georgia, 'Times New Roman', Times, serif;
color: #333; }
p {font-size:1.1rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.3rem; }

Разберем еще один, более сложный пример комбинации селекторов. Например, у Вас есть страница, в которой абзацы лежат внутри элемента с классом brightstyle, но при этом для отдельных абзацев прописан собственный стиль dullstyle, и Вы хотите для всех абзацев brightstyle установить красный цвет текста, а для тех абзацев, у которых свой класс dullstyle — серый цвет текста (иными словами, в HTML у Вас, скажем, есть <div> и для него прописан класс brightstyle — <div, внутри него несколько абзацев <p>, а также несколько абазцев с собственными классами <p>…</p>). Представим, как это будет выглядеть в CSS:

.brightstyle p {
color: red;
}
.brightstyle p.dullstyle {
color: gray;
}

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

Иными словами, сперва в нашем примере описано, что для всех абзацев <p> (это основной селектор) с классом brightstyle (это уже уточнение) будет применяться красный цвет.

Затем указано, что для всех элементов с классом dullstyle (основной селектор), являющихся абзацами <p>, лежащими внутри класса brightstyle (это уточнения) будет применен серый цвет.

Также стоит заметить, что на применение стилей влияет наличие пробелов.

В нашем примере есть пробел между «.brightstyle» и «p.dullstyle», но нет пробела между «p» и «.dullstyle».

Отсутствие пробела указывает на то, что цвет будет применен только к абзацам <p> с классом .dullstyle, таким образом объединяя 2 селектора одного элемента, повышая специфичность селектора. Если просто убрать пробел — запись p .dullstyle будет означать последовательность селекторов, то есть читать можно будет так — элементы с классом .dullstyle внутри абзаца <p>. Если бы мы убрали пробел и селектор абзаца <p> — цвет применился бы ко всем элементам с классом .dullstyle, а не только к абзацам  <p>, таким образом снизится специфичность селектора.

HTML-стилей CSS

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

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

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

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

Что такое CSS?

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

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

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

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

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

  • Встроенный — с использованием атрибута стиля внутри HTML-элементов
  • Внутренний — с использованием элемента
    [так далее.]

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

    Стиль листы в CSS состоят из правил . В каждом правиле есть три части:

    1. селектор (в примере: «тело»), который сообщает браузер, на какую часть документа действует правило;

    2. свойство (в примере «цвет» и 'background-color' - оба свойства), который указывает, что устанавливается аспект макета;

    3. и значение ('purple' и '# d8da3d'), которые дает значение свойства стиля.

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

    тело {цвет: фиолетовый}
тело {background-color: # d8da3d}

    , но поскольку оба правила влияют на тело, мы написали «тело» только один раз. и соедините свойства и значения. Для получения дополнительной информации о селекторы, см. главу 2 из Lie & Bos .

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

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

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

    цветов могут быть указывается в CSS несколькими способами. В этом примере показаны два из них: по имени («фиолетовый») и по шестнадцатеричному коду («# d8da3d»). Есть около 140 названий цветов и шестнадцатеричные коды позволяют использовать более 16 миллион цветов. Добавление нотки стиля объясняет больше о эти коды.

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

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

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

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

    


   Моя первая стилизованная страница 
  



[так далее.]

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

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

    Шаг 4: добавление панели навигации

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

    Меню уже находится на странице HTML. Это список

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

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

      Есть и другие способы сделать это. Если вы ищете «столбец» или «Layout» на странице Learning CSS вы найдете несколько готовых к работе шаблоны. Но этот подходит для наших целей.

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

      


   Моя первая стилизованная страница 
  



[так далее.]

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

      Основной текст перемещен вправо, а список ссылки теперь находятся слева от него, а не вверху.

      'position: absolute' говорит, что элемент ul позиционируется независимо от текста, стоящего до или после него в документ, а «левый» и «верхний» указывают, что это за позиция.В этом случае 2em сверху и 1em слева окно.

      «2em» означает, что размер шрифта в 2 раза больше текущего. Например, если меню отображается шрифтом из 12 пунктов, тогда 2em равно 24 точки. 'Em' - очень полезная единица в CSS, поскольку она может адаптировать автоматически к шрифту, который использует читатель. Большинство в браузерах есть меню для увеличения или уменьшения размера шрифта: вы можете попробовать и увидеть, что меню увеличивается в размере по мере того, как шрифт увеличивается, чего не было бы, если бы мы использовали размер в пикселях.

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

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

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

      


   Моя первая стилизованная страница 
  



[так далее.]

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

      В HTML гиперссылки создаются с помощью элементов , поэтому укажите цвет, нам нужно добавить правило стиля для «а». К различать посещенные и непосещенные ссылки, CSS предоставляет два «псевдокласса» (: ссылка и: посещенный). Они называются «Псевдоклассы», чтобы отличать их от атрибутов класса , , которые появляются непосредственно в HTML, например, class = "navbar" в нашем примере.

      Шаг 6: добавляем горизонтальную линию

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

      


   Моя первая стилизованная страница 
  



[так далее.]

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

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

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

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

      Затем вырежьте и вставьте все, что находится внутри <стиля> элемент из HTML-файла в новое окно. Не копируйте

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

      тело {
  отступ слева: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  цвет: фиолетовый;
  цвет фона: # d8da3d}
ул.navbar {
  тип-стиль-список: нет;
  отступ: 0;
  маржа: 0;
  позиция: абсолютная;
  верх: 2em;
  слева: 1em;
  width: 9em}
h2 {
  семейство шрифтов: Helvetica, Geneva, Arial,
        SunSans-Regular, без засечек}
ul.navbar li {
  фон: белый;
  маржа: 0.5em 0;
  заполнение: 0.3em;
  border-right: 1em сплошной черный}
ul.navbar a {
  text-decoration: none}
ссылка {
  цвет синий }
а: посетил {
  цвет: фиолетовый}
адрес {
  маржа сверху: 1em;
  padding-top: 1em;
  border-top: тонкая пунктирная}

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

      Теперь вернитесь к окну с HTML-кодом. Удалить все
      от тега

      включительно
      тег и замените его элементом, как показано ниже (строка 5):

      


   Моя первая стилизованная страница 
     



[так далее.]

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

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

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

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

      HTML-атрибуты на HTML.com

      Как входное значение определяет поля выбора по умолчанию Значение Определяет начальное значение или выбор по умолчанию для поля ввода.
      Table Cellpadding - устаревший HTML: получить новый код CSS сейчас Используется для добавления заполнения между содержимым каждой ячейки таблицы и границей или краем ячейки.Этот атрибут устарел, и вместо него следует использовать CSS.
      Iframe Src: 60-секундное руководство для начинающих программистов Задает URL-адрес документа для отображения в iframe.
      Автозапуск аудио: что он делает в HTML5? (Слушайте, чтобы узнать!) Указывает, что воспроизведение звука должно начинаться сразу после загрузки страницы.
      Учебное пособие по HTML для начинающих: получить код В сочетании с атрибутом coords определяет форму, размер и размещение интерактивной области на карте изображения.
      Узнайте, как координаты областей определяют формы и размеры в HTML Определяет форму и размер интерактивной области на карте изображений.
      Высота изображения в HTML: как не использовать атрибут высоты Определяет внутреннюю высоту файла изображения в пикселях CSS.
      Код HTML-формы для начинающих (и когда его использовать) Задает вертикальное выравнивание всего содержимого в строке таблицы.
      Атрибут HTML отключен для неопытных программистов Отключает поле ввода.
      Textarea Onchange: получить HTML-код для запуска события JavaScript сейчас Добавляет прослушиватель событий в