×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер статей
  • Тест сайта
  • Подписка
  • Сайдбар
  • Прокрутка вверх
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

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

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

Самописный сайт своими руками!

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

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

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Верстка → Подключаем таблицу стилей 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 располагаются не в самой странице, а в отдельном, прикрепленном к ней, файле.

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

Поэтому, для назначения стилей нашей 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----------*/

Рис.7

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

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

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

Расписывать подробно пояснение этой таблицы здесь не имеет смысла, так как это будет слишком утомляющее мероприятие ввиду большого объема информации. Разобрать этот код может каждый, используя соответствующие справочники по 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

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

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

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

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

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

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

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


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

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

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


Комментарии


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

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

comments powered by HyperComments