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

Да

Нет

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

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

895

Вся правда о заработке на блогах

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

Данный материал, основанный на опыте известного блогера Александра Борисова, поможет понять, как можно зарабатывать на блоге действительно реальные деньги и как правильно и эффективно монетизировать его.

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

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

    895

    Вся правда о заработке на блогах

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

    Данный материал, основанный на опыте известного блогера Александра Борисова, поможет понять, как можно зарабатывать на блоге действительно реальные деньги и как правильно и эффективно монетизировать его.

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

    899

    Как заработать в интернете продавая информацию

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

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

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

    890

    Как заработать чайнику?

    Многие задаются вопросом, как зарабатывать в интернете? Как начать работать на себя, а не на дядю?

    В БЕСПЛАТНОМ видеокурсе "Как заработать чайнику?", вы найдете много ответов на эти вопросы, которые получите от успешного практика в этой области.

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

    903

    Создать сайт за 1 час!

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

    Из БЕСПЛАТНОГО видеокурса "Как создать сайт за 1 час" вы узнаете, как можно достаточно быстро сделать бесплатный сайт несложным способом с нуля.

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

    904

    Как начать зарабатывать на партнерских программах

    Работа на партнерских программах является одной из самых популярных видов заработка.

    БЕСПЛАТНЙ видеокурс "Как начать зарабатывать на партнерских программах" поможет вам освоить этот интересный и эффективный способ работы в интернете.

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

    905

    ИНФОБИЗНЕС по модели Евгения Попова

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

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

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

    922

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

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

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

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

    924

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

    Этот БЕСПЛАТНЫЙ обучающий курс поможет разобраться в вопросах сайтостроения при создании своего сайта.

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

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

    926

    Домен и хостинг

    В этом БЕСПЛАТНОМ обучающем курсе рассказывается как разместить в сети свой вновь созданный интернет-ресурс.

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

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

    927

    Фотошоп для начинающих (бесплатная версия)

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

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

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

    929

    Видеосамоучитель GIMP

    Данный видеокурс поможет освоить работу с дизайном сайта при использовании БЕСПЛАТНОГО графического редактора GIMP.

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

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

Хотите узнать как зарабатывать в интернете и как бесплатно сделать сайт для своей работы, ничего не потратив на обучение?

Здесь Вы можете познакомиться с проверенными способами работы в интернете в БЕСПЛАТНЫХ обучающих курсах по заработку и сайтостроению в разделе Бесплатные Сборника видеокурсов.

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

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

Свернуть

Знак папки 1 Все статьи cборника "Сделай сайт своими руками с нуля бесплатно"


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

Подключаем таблицу стилей 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 и приведем ее внешний вид в точное соответствие с нашим дизай-макетом.

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


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

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

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


Подписка


Здесь вы можете подписаться на получение уведомлений о выходе новых статей блога.

Необходимо отметить, что данные об e-mail надежно защищены (работа сайта обеспечивается только через защищенные соединения по протоколу SSL) и не предназначены для использования третьими лицами.

Комментарии


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

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

comments powered by HyperComments

Социальные сети


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

Другие статьи из рубрики "Как сделать сайт"


Показать больше


  • Google+ Опубликованные статьи можно также смотреть в подборках Google+