Как подключить файл стилей. Подключение CSS к HTML-документу

Оставьте комментарий 6,950

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

Элементы html — это каркас нашей страницы , т.е. html отвечает за то, ЧТО отображать на странице. CSS, в свою очередь, отвечает КАК отображать все эти элементы. Можно создать одну и ту же html-страницу и придумать для неё тысячи вариантов оформления. И всё это будет выглядеть, как различные сайты. Вы можете погулять по интернету и посмотреть сколько много красивых сайтов на его просторах.

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

Давайте подключим файл стилей CSS к html-странице. Делается это в заголовке документа, между тегами .. :

Подключение CSS

Давайте разберемся, что мы здесь написали. Файлы стилей подключаются с помощью тега link . Знакомый уже нам атрибут href указывает на путь до файла стилей. Тут можно указывать, как абсолютные, так и относительные пути. В данном случае подразумевается, что наш файл style.css находится в одной директории с файлом, в котором мы подключаем стили. Атрибут type="type/css" указывает, что тип документа — css, атрибут rel="stylesheet" говорит браузеру, что мы подключаем стили (rel с англ "relationship" — отношения).

Можно также задавать стили элементам и другими способами. Давайте создадим html-страницу со следующим содержимым:

Подключение CSS

Первый абзац

Первый абзац

Первый абзац

Первый абзац

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

Первый абзац

Второй абзац

Третий абзац

Четвертый абзац

Таrже стили можно задать прямо в элементе, с помощью атрибута style (это так называемый inline-стиль ). Давайте сделаем второй абзац зеленым и выравним его по правому краю. Для этого нужно добавить такую конструкцию:

Второй абзац

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

Существует ещё один способ добавления стилей на html-страницу. Это импортированные стили . Они задаются в заголовке страницы, но из файла, а не напрямую:

При добавлении стилей на страницу могут возникать конфликтные ситуации. Например, в файле стилей мы можем задать цвет текста всех абзацев (тег p) красным, а к одному из них применить inline-стиль. Как же определить браузеру, какой цвет использовать? Давайте определим приоритеты, которые используются браузером:

1) Стили из файла (имеют самый низший приоритет)
2) Импортированные стили
3) Внедренные стили
4) inline-стили (имеют самый высокий приоритет, т.е. браузер выполнит их в первую очередь).

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

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.

Добрый денёк! В данной статье я покажу различные методы для подключения CSS в HTML. А так же поясню разные тонкости и нюансы разных способов подключения стилей.

Внутреннее подключение

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

Внутреннее подключение стилей

Желтый текст со шрифтом Verdana

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

Внешние таблицы стилей гораздо более распространены. Вам нужно только подключить таблицу ко всем необходимым веб-страницам, используя тег c атрибутом rel (определяет отношение между страницей и подключаемым файлом) и значением stylesheet , которое означает, что в подключаемом файле содержится таблица стилей. Атрибут href – это путь (URL) к вашему файлу.css:

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

Урок: создаем таблицу стилей

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

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

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

Подключение CSS к HTML

Для начала откройте на компьютере любой текстовый редактор (подойдет блокнот) и создайте пустой файл с именем style , сохранив его с расширением.css (должен получиться файл style.css). Сохраните файл в той папке, где находится загруженный HTML-документ.

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

Вкратце о том, что вы только что сделали. Вставив этот код в HTML-документ, вы:

  • указали ссылку на шрифт под названием Roboto Condensed, который будет взят с сервера Google (подробнее о шрифтах Google мы расскажем позже);
  • подключили свою внешнюю таблицу стилей style.css (пока что пустую).

Пишем стиль CSS

Сохраните изменения в HTML-документе и перейдите в вами созданный пустой файл.css . Давайте добавим стиль для страницы:

Html { padding-top: 5px; background-image: url(background.jpg); }

Сохраните изменения. Поздравляем, вы написали первое правило – оно касается тега . Первое свойство - padding-top - добавит отступ сверху между окном браузера и содержимым веб-страницы в размере 5 пикселей. С помощью второго свойства, background-image , вы подключили изображение для фона всей страницы, указав путь к графическому файлу (находится в той же папке, что и HTML-документ).

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

Body { width: 75%; padding: 40px; margin: 15px auto; background-color: #EBEBEB; border-radius: 30px; }

Сохраните изменения в файле. Сейчас вы:

  • задали область для содержимого тега , которая равна 75% от ширины окна браузера;
  • обеспечили отступ в 40 пикселей от всех сторон области содержимого;
  • расположили область по центру страницы, а также сделали отступ сверху и снизу в 15 пикселей;
  • задали цвет фона #EBEBEB для области содержимого;
  • скруглили углы прямоугольной области, указав радиус скругления 30 пикселей.

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

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

Изменяем шрифт с помощью CSS

Пора украсить наш текст. Добавьте в таблицу стилей этот код и сохраните изменения:

H1 { color: #E87E04; font-size: 2em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; } h2 { color: #E87E04; font-size: 1.7em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; } p { color: #22313F; line-height: 150%; margin-top: 20px; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; }

Написав это, вы задали цвета шрифтов для тегов h1 , h2 , p , указали их размеры, добавили отступы margin от левого края в 20 пикселей и дополнительно для

Сделали отступ сверху в 20 пикселей и установили интерлиньяж line-height (межстрочный интервал текста) на 50% больше стандартного. К тому же, вы подключили ко всем трём тегам шрифт Roboto Condensed (вот для чего в самом начале необходимо было указать ссылку на него в HTML-файле).

Обновите страницу в браузере и полюбуйтесь результатом работы. В этом уроке мы попробуем еще одну вещь. Допишите в CSS этот код:

Emphasis { font-weight: bold; }

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

В конечном итоге у вас должна получиться вот такая страница:



В качестве тренировки попробуйте изменить размер текста для

(допустим, 1.1em), а также увеличить отступ между

И левым краем области содержимого еще на 10 пикселей.

Выводы

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

Любой стиль CSS состоит из нескольких элементов: селектора, стилевого свойства и значения этого свойства.

Все свойства и их значения записываются в блоке объявлений между двумя фигурными скобками {} после указания селектора.

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

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

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

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

Создаем обычную html-страницу, с таким кодом:



Подключение CSS к HTML


Заголовок первого уровня


Здесь просто текст

Заголовок второго уровня


Здесь просто текст

Теперь в блокноте создаем пустой документ style.css и сохраняем его в ту же папку, где лежит html-страница:

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



Подключение CSS к HTML



Заголовок первого уровня


Здесь просто текст

Заголовок второго уровня


Здесь просто текст

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

Эту таблицу стилей задают внутри элемента HTML, с помощью атрибута style . Вот пример:

Это заголовок красного цвета

Минус этого способа очевиден: параметр style приходится задавать каждому заголовку и поэтому теряется преимущество CSS.

Встроенные таблицы стилей

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



Подключение CSS к HTML




Этот заголовок будет красного цвета


Этот заголовок будет красного цвета



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



Подключение CSS к HTML



Этот заголовок будет красного цвета


Этот заголовок будет синего цвета


Этот заголовок будет красного цвета



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

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

Сейчас мы рассмотрели способы подключения CSS к HTML, далее рассмотрим синтаксис CSS.

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

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

Преимущества глобальных CSS :

  • Таблица стилей влияет только на одну страницу.
  • В глобальной CSS могут быть использованы классы и идентификаторы (ID).
  • Нет необходимости загружать несколько файлов. HTML и CSS могут быть в одном и том же файле.

Недостатки глобальных CSS:

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

Как произвести подключение CSS к HTML странице

  1. Откройте вашу HTML страницу в любом текстовом редакторе. Если страница уже загружена на вашу учетную запись хостинга, вы можете использовать текстовый редактор предоставленный вашим хостингом. Если данный документ HTML находится на вашем компьютере, вы можете использовать любой текстовый редактор для его редактирования, и после этого повторно загрузить его на вашу учетную запись хостинга используя .
  2. Найдите открывающий тег и добавьте после него следующий код:

После всех действий, документ HTML с глобальной CSS должен выглядеть примерно так:

Руководство Hostinger

Это наш текст.

Вариант 2 - Внешний CSS

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

Тогда как, сами таблицы стилей располагаются в файле 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. Атрибут

© Copyright 2024, https://qzoreteam.ru