Подписаться на обновления блога?

Да

Нет

Картинка 3D коробки

Узнать больше

922

HTML базовый курс

БЕСПЛАТНЫЙ обучающий курс предназначен тем, кто делает первые шаги в сайтостроении.

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

Бесплатные видеокурсы!

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

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

Вы здесь: Главная → Сборник статей → Верстка → Подключаем таблицу стилей CSS и назначаем общие стили для HTML-страницы

Текущее состояние создаваемого сайта

Свернуть

Все статьи рубрики "Как сделать сайт"


Автор: / Дата:

Подключаем таблицу стилей CSS и назначаем общие стили для HTML-страницы

Здравствуйте уважаемый посетитель!

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

Содержание


  • Способы добавления стилей на HTML-страницу
  • Подключаем внешнюю каскадную таблицу стилей CSS
  • Для чего нужен сброс настроек стилей CSS по-умолчанию
  • Делаем сброс свойств стилей по-умолчанию и устанавливаем базовые настройки файла CSS
  • Исходные файлы сайта

Способы добавления стилей на HTML-страницу


Добавлять стили на HTML-страницу можно разными способами, такими как:

  • встроенные стили;
  • внутренние таблицы стилей;
  • внешние таблицы стилей.

Для применения встроенных стилей необходимо использовать атрибут "style" непосредственно в том элементе, в который необходимо назначить свойство CSS. По существу, встроенный стиль является расширением одиночного тега языка HTML, используемого на веб-странице.

Ниже приведен такой пример для тега <div>.

  1. <div> style="width: 100%; background-color:#FCFCFC; border-bottom: 1px solid #888; border-radius: 6px;">Встроенный стиль для элемента <div> </div>

Рис.1

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

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

Пример внутренней таблицы стилей приведен ниже.

  1. </head>

  2. <style>

  3. * {margin: 0; padding: 0;}

  4. body {background: #f5f5f5;}

  5. p {text-indent: 10px;}

  6. a {color: #00f;}

  7. </style>

  8. </head>

Рис.2

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

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

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

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

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

Подключаем внешнюю каскадную таблицу стилей CSS


С начала, создадим в основной папке сайта "www" папку "styles", аналогично, как мы создавали папку "images" в статье Делаем разметку шапки и футера HTML-страницы.

Таким образом, теперь "www" будет содержать два файла и две папки, как показано на следующем скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке
Подключаем таблицу стилей CSS, картинка 1

Рис.3

Затем, создадим файл таблицы стилей CSS и сохраним его во вновь созданной папке "styles".

Создается этот файл, аналогично тому, как мы это делали с файлом "index.html" в статье Создаем веб-страницу и размещаем ее на локальном веб-сервере. Только в этом случае назовем его "main.css", означающее, что это будет у нас главная таблица стилей CSS (расширение в этом случае должно быть именно "css", а не "html").

Ну, а теперь осталось только подключить файл "main.css" к нашей веб-страницы. Делается это записью в заголовке <head> с помощью тега <link>. Ниже показан фрагмент HTML-кода страницы в части, касающейся заголовка, с дополненной строкой 5.

  1. <head>

  2. <meta charset="utf-8" />

  3. <title>Заголовок страницы</title>

  4. <meta name="Description" content="Краткое описание содержания страницы">

  5. <link rel="styleshee" type="text/css" href=""styles/main.css"/>

  6. </head>

Рис.4

Здесь следует дать некоторые пояснения используемых атрибутов тега <link>:

  • rel="styleshee" - указывает на тип ссылки, в нашем случае это ссылка на таблицу стилей;
  • type="text/css" - указывает тип файла;
  • href="styles/main.css" - определяет путь к CSS-файлу, который указывает, что файл с именем "main.css" находится в папке "styles" того же каталога.

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

Для чего нужен сброс настроек стилей CSS по умолчанию


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

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

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

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

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

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

Ниже, в качестве примера, приведено 2 скриншота страницы, слева в браузере "Opera", справа - "Mozilla".

Вид страницы в разных браузерах до сброса настроек свойств CSS по умолчанию

Подключаем таблицу стилей CSS, картинка 5

Рис.5 Вид страницы в браузере "Opera"

Подключаем таблицу стилей CSS, картинка 5

Рис.6 Вид страницы в браузере "Mozilla"

Если внимательно посмотреть, то можно заметить такие отличия, как:

  • отступы между строками неодинаковые, что приводит к тому, что при одинаковой высоте рабочих окон, нижняя строка в браузере "Mozilla" находится ниже чем, в "Opera";
  • неодинаковый вид подчеркивания ссылок;
  • неодинаковый размер маркеров списков;
  • разный шрифт, особенно это заметно в последней строке

И это только несколько простых строк. А если бы было здесь множество элементов, да еще таких, как формы, то можно себе представить, как по-разному смотрелась бы страница.

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

Делаем сброс свойств стилей по умолчанию и устанавливаем базовые настройки файла CSS


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

  1. /*----------начало сброса настроек по умолчанию----------*/

  2. html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {

  3. padding: 0;

  4. margin: 0;

  5. outline: 0;

  6. vertical-align: baseline;

  7. font-size: 100%;

  8. border: 0;

  9. background: transparent;

  10. }

  11. table {

  12. border-spacing: 0;

  13. border-collapse: collapse;

  14. }

  15. a {

  16. padding: 0;

  17. margin: 0;

  18. outline: none;

  19. vertical-align: baseline;

  20. font-size: 100%;

  21. background: transparent;

  22. }

  23. td, td img {

  24. vertical-align: top;

  25. }

  26. input, select, button, textarea {

  27. outline: none;

  28. margin: 0;

  29. font-size: 100%;

  30. }

  31. input[type="text"], input[type="password"], textarea {

  32. padding: 0;

  33. }

  34. input[type="checkbox"] {

  35. vertical-align: bottom;

  36. }

  37. input[type="radio"] {

  38. vertical-align: text-bottom;

  39. }

  40. sub {

  41. vertical-align: sub;

  42. }

  43. sup {

  44. vertical-align: super;

  45. font-size: smaller;

  46. }

  47. nav ul {

  48. list-style: none;

  49. }

  50. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

  51. display: block;

  52. }

  53. /*----------окончание сброса настроек по умолчанию----------*/

  54. /*----------начало базовых настроек файла css----------*/

  55. html {

  56. min-height: 100%;

  57. }

  58. body {

  59. text-align: left;

  60. font-family: Arial, Helvetica, sans-serif;

  61. font-size: 1em;

  62. min-height: 100%;

  63. color: #000;

  64. line-height: 1.2;

  65. }

  66. h1, h2, h3, h4, h5, h6 {

  67. font-weight:normal: normal;

  68. }

  69. a, a:visited {

  70. text-decoration: none;

  71. color: #287fc3;

  72. }

  73. a:hover {

  74. text-decoration: underline;

  75. color: #287fc3;

  76. }

  77. a:active {

  78. text-decoration: none;

  79. color: #9328ed;

  80. }

  81. /*----------окончание базовых настроек файла css----------*/

Рис.2

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

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

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

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

Но, по некоторым свойством хочется сделать некоторые комментарии.

Например, в свойствах тега <a> (строка с 69 по 80), установлены значения, которые предусматривают различный внешний вид ссылок в разных состояниях: в исходном, в активном (находится под курсором мышки) и в нажатом (удерживается кнопкой мышки). Это определяется следующими назначенными свойствами таблицы стилей, при которых ссылки ведут себя следующим образом:

  • в исходном, не посещенном и посещенном состоянии у ссылок нет подчеркивания (у элементов <a> и его псевдо-классаа :visited свойство text-decoration в строке 70 имеет значение none), а также ссылки имеют синий цвет (свойству color в строке 71 присвоено значение #287fc3);
  • в активном состоянии у ссылок появляется подчеркивание (у псевдо-классаа :hover элементов <a> свойству text-decoration в строке 74 назначено underline), при этом цвет остается прежним ( у свойства color в строке 75 значение не изменилось #287fc3);
  • в активном состоянии у ссылок подчеркивание отменяется (у псевдо-классаа :visited элемента <a> свойству text-decoration в строке 78 назначено none), а цвету придается некоторый фиолетовый оттенок (свойству color в строке 79 значение заменено на #9328ed);

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

  • в строке 60 свойству font-family назначены стандартные (безопасные) шрифты из семейства шрифтов без засечек, соответствующие значению Arial, Helvetica, sans-serif, поэтому можно увидеть, как изменился шрифт по сравнению с установками по-умолчанию. Но, если кому нравятся больше шрифты с засечками, то можно выбрать и такие, например, назначив "Times New Roman", Times, serif;
  • в строке 61 свойству font-size присвоено значение в относительной единице измерения 1em, что соответствует 16px, поэтому изменив это значение можно изменить размер шрифта для всей страницы;
  • в строке 64 свойству line-height присвоено значение 1.2, что влияет на межстрочный интервал, который тоже при необходимости не трудно изменить для всей страницы.

Теперь, перегрузим страницу в браузере и посмотрим, что получилось.

Вид страницы в разных браузерах после сброса свойств CSS по умолчанию и установки базовых настроек файла css

Подключаем таблицу стилей CSS, картинка 7

Рис.7 Вид страницы в браузере "Opera"

Подключаем таблицу стилей CSS, картинка 8

Рис.8 Вид страницы в браузере "Mozilla"

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

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

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

Исходные файлы сайта


Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать бесплатно в дополнительных материалах здесь.

С уважением, Николай Гришин

Читать дальше


Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments