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

Да

Нет

  • Способы создания сайта

    1. Какими способами разрабатываются сайты
    2. Как можно сравнить самописные сайты с основанными на CMS
    3. Быстродействие
    4. Безопасность
    5. Функциональность
    6. Простота создания
    7. Как выбрать способ создания сайта

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

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

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

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

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

  • Инструкция по загрузке исходных файлов сайта на локальный веб-сервер

    1. Подготовка локального веб-сервера
    2. Скачивание и распаковка исходных материалов
    3. Перенос файлов на локальный веб-сервер
    4. Импорт таблиц MySQL в базу данных текущего хоста

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

    Как ранее отмечалось, в представленных материалах Сборника в случае, если в ходе рассмотрения статей в программный код сайта или базу данных MySQL вносятся какие-либо изменения, то к ним прилагается последний вариант исходных материалов, включающий все файлы сайта в каталоге "www" и таблицы базы данных MySQL.

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

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

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

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

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

    Что же касается загрузки на хостинг файлов сайта, то по этому вопросу имеется отдельная статья Переносим сайт на хостинг, где показано, как это можно сделать с использованием FTP клиента FileZilla.

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

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

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

Описание которого сопровождается исходными файлами с таблицами 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