Как подключить css к html

Содержание

Импорт чужого CSS

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

Вот и все. Но имейте в виду: если владелец сайта изменит свой стиль — у вас тоже поменяются все страницы! Может быть, проще скопировать его файл .css к себе на сервер.

Как подключить CSS — это лишь начало большой и интересной дороги по изучению веб-программирования. Курс «Профессия — веб-разработчик» познакомит вас с основными инструментами веб-разработчика: HTML, CSS, JavaScript и PHP. Годовая программа обучения идеально подходит людям, которые хотят с чистого листа освоить навыки профессионального веб-разработчика, а также начинающим программистам.

Отличие внешних таблиц CSS-стилей

Как уже упоминалось выше, внешние таблицы имеют расширение .css и сохраняются в отдельном файле. Создания такого документа предусматривает использование специальных текстовых редакторов (Sublime Text) или знакомого всем пользователям компьютера блокнота. Главным правилом, из-за которого файл приобретает свои свойства, является правильное разрешение. Прописать его можно в названии, просто поставив после имени точку и «css» . На изображении приведен пример кода:

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

Как это выглядит в редакторе:

Путь к файлу styles.css не указан полностью — это допустимо, если оба документа находятся в одной папке.

Можно ли импортировать чужие стили

Чтобы задействовать взятые из открытого доступа наработки, нужно лишь указать URL выбранного CSS-файла в своих HTML-документах.

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

Подключение CSS к html через import

Еще один вариант — это подключение css к html при помощи директивы @import. Прописывается он в теге style.

<style>
@import url("/theme/style.css"); 
</style>

Можно указывать как абсолютный, так и относительный путь к файлу. Вот как выглядит на странице:

<!DOCTYPE HTML>
<html>  
   <head>  
      <meta charset="utf-8">  
      <title>Название страницы</title> 
      <style> 
          @import url("/theme/style.css");  <!-- импорт файла стилей --> 
      </style>
   </head>  

   <body>  
      <h1>Привет, мир!</h1>  
   </body> 
</html>

Комбинация импорта и внутренних стилей

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

<style> 
    @import url("/theme/style.css") 
    H1 { 
     font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif;  
     color: #333366; 
    } 
</style>

На странице это выглядит так:

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="utf-8">
      <title>Импорт</title>

      <style> 
          @import url("/theme/style.css")
          H1 { 
           font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif;  
           color: #333366; 
          } 
      </style>

  </head> 
  <body>
     <h1>Привет, мир!</h1>
  </body>
</html>

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

Можно использовать подключение CSS файла к другому CSS. Для этого тоже можно использовать @import.

Синтаксис:

@import "путь к файлу";

Вот пример подключения нескольких файлов стилей в одном css:

@import url "/style/pervi.css";  
@import url "/style/vtoroi.css"; 
H1 {  
 font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif;   
 color: #333366; 
} 

Inline CSS

Inline CSS — это встроенные стили, которые встраиваются только в определенный тег html. Например, к какому-нибудь абзацу. Работает через атрибут style.

Обратите внимание на этот текст. В примере видно, что с помощью атрибута style мы задали жирное начертание и красный цвет текста в абзаце (теге p)

В примере видно, что с помощью атрибута style мы задали жирное начертание и красный цвет текста в абзаце (теге p).

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

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

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

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

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

Способ 1. Строгое структурирование

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

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

В этом варианте подключения css-правил происходит через специальный тег <link>. Этот элемент может быть объявлен только в контейнере <head>.

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

Как правило, стилевые параметры сохраняют в документе с расширением .css.

Для наглядности я привел пример такого подключения стилей. Хочу отметить важный момент: для подключения css-файла в атрибуте rel всегда пишется «stylesheet».

Для начала создадим структуру веб-ресурса.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Внешний</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
   <article>
<h2>Яркий заголовок</h2>
<p>Сенсационное содержание</p>
</article>
 </body>
</html>

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

Создаем в блокноте файл с нужным расширением и называем его style.css. Заметьте, что имя должно быть идентичным с наименованием, указанным в теге <link>.

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

1
2
3
4
5
6
7
8
9
10
h2{
 color: #FF0000;
 text-shadow: 7px -3px 5px;
 border-bottom: 4px double #FF0000;
}
p {
 font-size: 19px;
 font-family: Calibri;
 margin-left: 35px;
}

Добавление стилей к элементам HTML

Информация о стиле может быть прикреплена как отдельный документ или встроена в документ HTML. Давайте рассмотрим три способа добавления стилей в HTML-документ (от самого высокого до самого низкого приоритета).

  1. Стили в тэге (инлайн стили) — использование атрибута style в начальном тэге HTML.
  2. Встроенные стили — использование элемента <style> в разделе заголовка документа.
  3. Внешняя таблица стилей — с помощью элемента <link>, указывающего на внешние CSS-файлы.

В этом уроке мы рассмотрим все три способа добавления стилей в HTML документ.

Встроенные в элемент стили (инлайн)

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

блок 1

Атрибут style включает ряд пар свойств и значений CSS. Каждая пара свойство: значение разделяется точкой с запятой (;), так же, как вы пишете во встроенную или внешнюю таблицу стилей. Но все должно быть в одной строке, то есть после точки с запятой не должно быть переноса строки.

В следующем примере показано, как изменить цвет и размер шрифта текста:

<p style="color:green; font-size:18px;">This is a paragraph.</p>

Использование «инлайн» стилей обычно считается плохой практикой. Поскольку правила стиля встроены непосредственно в тэг html, это приводит к тому, что презентация смешивается с содержанием документа; что сводит на нет цель использования CSS. Проще говоря, для того, чтобы изменить цвет текста, вам нужно будет редактировать HTML файл. А если таких параграфов много, и они находятся на разных страницах — такая простая операция как замена цвета, займет огромное количество времени.

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

Встроенные или внутренние таблицы стилей влияют только на документ, в который они встроены.

Встроенные таблицы стилей определены в разделе <head> документа HTML с помощью тега <style>. Вы можете определить любое количество элементов <style> в разделе <head> документа HTML. Смотрите пример ниже:

<head>
  <style type="text/css">
    body {background-color: YellowGreen;}
    p {color: Black;}
  </style>
</head>

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

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

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

Вы можете прикрепить внешние таблицы стилей двумя способами — связать документ и импортировать его:

Связывание внешних таблиц стилей

Внешняя таблица стилей может быть связана с документом HTML с помощью тега <link>. Тег <link> находится внутри раздела <head>:

<head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

Импорт внешних таблиц стилей

Правило @import — это еще один способ добавления внешней таблицы стилей. Оператор @import указывает браузеру загрузить внешнюю таблицу стилей и использовать ее стили.

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

Обратите внимание, что другие правила CSS все еще могут быть включены в элемент

<style type="text/css">
  @import url("css/style.css");
  p {
    color: blue;
    font-size: 16px;
  }
</style>

Точно так же вы можете использовать правило @import для импорта таблицы стилей в другую таблицу стилей (т.е. использовать @import внутри css файла).

@import url("css/base.css");
@import url("css/color.css");
body {
  color: blue;
  font-size: 14px;
}

блок 3

Инструкция по подключению стилей CSS

Вариант первый

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

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

Для более наглядного объяснения рассмотрим на примере, заданном ниже. Значение style приписано к элементу.

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

У метода есть существенные недостатки, которые важно учитывать:

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

Вариант второй

Основывается на подключении дополнительного (внешнего) файла стилей. Здесь используется элемент link, дающий пользователю возможность подключить к странице дополнительные файлы

Особое внимание следует заострить на атрибутах, прописываемых в элементе

Выглядит это следующим образом:

В итоге получается код следующего вида:

C:\Users:\Desktop:\style.css» type=»text/css»/>

Статья

Cleep

В прикрепляемом документе style должна быть прописана вот такая строка:

p {color:red;}

Несколько нюансов, касающихся этого метода:

  1. Команда link, которая указывает отсылку на внешний файл обязательно должна размещаться в заголовке между тегами.
  2. Атрибут Rel показывает тот тип сайта, на который пользователь делает ссылку. В нашем случае таблица селекторов прописывается как stylesheet.
  3. Путь к внешнему файлу обязательно указывается относительно кода. В связи с чем, рекомендуется поместить оба файла в одну папку.

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

Вариант третий

В этом случае CSS прописывается внутри параметра style.

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

Статья

Cleep

Как подключить внешние стили из файла «CSS»

На моем сайте насчитывается порядка 5 000 строчек стилей. Грузить такой объем при формировании каждой страницы, не правильно. К тому же, этот процесс ресурсозатратен, что, безусловно, скажется на скорости открытия сайта.

Вероятно думаете: «А как правильно подключать стили?» Все очень просто, таблицу стилей следует подключать из внешнего файла CSS.

Файл со стилями, имеет расширение . Его, конечно, можно размещать в любом месте на ftp, но обычно, подобные файлы помещают в папку «CSS», расположенную внутри файлов шаблона.

Чтобы подключить внешний файл CSS, нужно в коде сайта, между тегами «head», добавить строчку:

где «style.css» — это имя подключаемой таблицы, а «css», папка в которой находятся эти стили.

Приведу простой пример, стандартной страницы web-документа:

<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<title>Подключаем стили CSS из файла</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
....
</body>

</html>

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

  1. Абсолютная ссылка. Явно указывает на расположение файла.
<link rel="stylesheet" type="text/css" href="http://yousite.ru/template/css/style.css">
  1. Относительная ссылка. Сокращенный вариант.
<link rel="stylesheet" type="text/css" href="/css/style.css">

Главный файл стилей, принять называть «style.css», но это не значит что других названий быть не должно. Придумывайте любое имя, но не забывайте, что оно должно быть на латинице.

Рассмотренный способ наиболее удобен, таким образом можно подключить не один, а сразу несколько таблиц стилей.

Подключение нескольких селекторов к странице

Множество веб-мастеров не ограничиваются одним подключенным файлом к странице. Чтобы подключить несколько, достаточно пары шагов:

  1. Создаем несколько css-файлов с любым названием.
  2. Используя второй способ подключения, вписываем в код аналогичную строку, указав название и путь второго файла.

Итоговый код будет иметь следующий вид:

C:\Users:\Desktop:\1.css» type=»text/css»/>

C:\Users:\Desktop:\2.css» type=»text/css»/>

Статья

Cleep

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

  1. Подключаем стиль к странице одним из вышеописанных способов.
  2. В файле прописываем строку, подключающую к атрибуту дополнительный стиль: @import url(«style-2.css»).

Способы подключения CSS

Таблицу стилей можно прописать конкретно в коде HTML-страницы, обрамив правила тегами <style>. Или хранить в отдельном файле .css — и применять для многих страниц. Это внутренние и внешние таблицы стилей. Их еще называют глобальными и связанными.

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

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

Например, в случае данного абзаца (p) в таблице стилей создается селектор класса, например, skill:

А затем тег этого абзаца трансформируется из 

в 

Так можно грамотно подключать стили к документу вместо того, чтобы прописывать встроенные стили. У этого метода ряд очевидных преимуществ: гораздо удобнее хранить стили изолированно и отдельно от документа: так их легче редактировать и применять к разным документам (вдруг вы захотите использовать тот же класс skill для еще одного абзаца?). Но главное — так соблюдается концептуальное разделение контента (HTML) и оформления (CSS).

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

Возьмем тот же простой стиль, который определяет размер шрифта (font-size) и цвет (color) для абзацев (p) на странице.

Этот код можно внедрить непосредственно в конкретную HTML-страницу, обрамив тегами <style>…</style>. Все это вставляется в код страницы сразу после заголовка (тег <title>).

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

…и так далее.

Полный код такой страницы:

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

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

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

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

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

То есть в файле .css пишется все то же самое, что и во внутренних стилях. И наоборот: во внутренних стилях внутри тегов <style> можно писать все то же самое, что и в файле .css. Разница только в том, что внешние стили могут применяться сразу к нескольким страницам HTML и даже ко всему сайту целиком.

Теперь вместо тегов <style> в HTML-файлы нужно вставить код, который указывает на местонахождение внешней таблицы стилей. Он вставляется в то же самое место после заголовка (<title>), где мы раньше размещали встроенные стили:

Он будет выглядеть так:

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

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

Вариант 1 — Глобальный CSS

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

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

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

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

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

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

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

  1. Откройте вашу HTML страницу в любом текстовом редакторе. Если страница уже загружена на вашу учетную запись хостинга, вы можете использовать текстовый редактор предоставленный вашим хостингом. Если данный документ HTML находится на вашем компьютере, вы можете использовать любой текстовый редактор для его редактирования, и после этого повторно загрузить его на вашу учетную запись хостинга используя FTP-клиент.
  2. Найдите открывающий тег <head> и добавьте после него следующий код:
<style type="text/css">
  1. Далее перейдите к следующей строке и добавьте нужные CSS правила, к примеру:
body {
     background-color: blue;
 }
 h1 {
     color: red;
     padding: 60px;
 }
  1. Как только вы закончите добавление CSS правил, добавьте закрывающий тег:
</style>

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
} 
</style>
</head>
<body>

<h1>Руководство Hostinger</h1>
<p>Это наш текст.</p>

</body>
</html>

Встраивание тегов на страницу

Стили также могут быть встроены на страницу. Для этого в блоке head размещают теги style:

CSS

<style>
body {
width: 80%;
margin: 20px auto;
font-family: Verdana, Geneva, sans-serif;
}
h2 {
font-family: Georgia, ‘Times New Roman’, serif;
}
</style>

1
2
3
4
5
6
7
8
9
10

<style>

body {

width80%;

margin20pxauto;

font-familyVerdana,Geneva,sans-serif;

}

h2 {

font-familyGeorgia,’Times New Roman’,serif;

}

</style>

Внимание! Тег style обязательно должен быть закрыт. Иначе вы не увидите текста страницы!. Такого рода форматирование касается только данной конкретной страницы

Чтобы аналогичным образом отформатировать другую страницу, необходимо будет скопировать все, что есть в тегах style и добавить в

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

Такого рода форматирование касается только данной конкретной страницы. Чтобы аналогичным образом отформатировать другую страницу, необходимо будет скопировать все, что есть в тегах style и добавить в <head> другой страницы. Т.е. этот способ подходит для создания тестовых страниц, но не подходит для использования на сайте, где большинство страниц имеет одинаковое форматирование.

Создание стилей CSS. Синтаксис каскадных таблиц стилей — правила, свойства, селекторы.

Далее рассмотрим синтаксис написания правил CSS. Обычный формат определения CSS правила выглядит так:

Т.е. правило стиля включает в себя селектор стиля и список свойств стиля с их значениями в фигурных скобках(«{» и «}»):

  • селектор используется для привязки к элементам web-страницы, на которые он должен распространять свое действие;
  • пары «Свойство: Значение» разделяются символом точкой с запитой(«;») и их может быть сколь угодно много;
  • между последней парой «Свойство: Значение» и закрывающей фигурной скобкой символ точка с запитой можно не ставить;
  • свойство  стиля представляет из себя один из параметров элемента html страницы: цвет текста, гарнитура шрифта, величина отступов;
  • пробелы и переводы строк при написании правил css не критичны, браузер их игнорирует, поэтому можно оформлять код так как вам захочется;
  • так же код не чувствителен к регистру символов.

Чтобы было понятней рассмотрим несколько примеров.

 Разберем данное CSS правило:

  • body — это селектор, который представляет из себя имя тега body;
  • background — свойство стиля, с помощью которого задаются параметры фона;
  • #0000FF — значение свойства стиля background, которой представляет из себя код цвета в формате RGB.

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

Рассмотрим еще пример:

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

В качестве селектора тега, кроме имени тега, можно указывать класс:

.yellowtext {color:yellow}

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

В примере мы привязали к тегу «Р» css правило с помощью имени класса yellowtext. В результате текст в данном абзаце будет отображен оранжевым цветом.

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

В этом примере к тегу «Р» мы привязали сразу два класса: yellowtext и cursivtext. В результате содержимое тега отобразится желтым цветом и курсивным шрифтом.

Кроме классов в качестве селектора правила css можно использовать идентификатор, который определяет уникальное имя элемента. Здесь все также как и в случае со стилевыми классами, только есть несколько отличий:

  • в селекторе правила CSS, также задается имя идентификатора, только вместо точки перед его именем ставят символ решетки «#»;
  • привязка к html элементу осуществляется через атрибут id, в качестве значения которого устанавливают имя стиля без знака решетки;
  • значение атрибута id должно быть уникальным в пределах страницы, то есть в html коде может только один элемент с заданным значение атрибута id, иначе код будет не валидным.

Рассмотрим пример для ясности:

К элементу p (абзац) с помощью атрибута id привязывается правило css, которое выравнивает текст по центру страницы. На странице больше не допускается создавать элементы с таким значением атрибута id, иначе html код будет не валидным.

Кроме рассмотренных способов описания стилей, css позволяет создавать комбинированные стили и задавать сразу несколько одинаковых стилей. Посмотрим пример:

h1.redtext, p strong {color: red}

В примере через запятую указано два селектора: «h1.redtext» и «p strong». Первый селектор говорит о том, что во всех элементах h1 у которых значение атрибута class буде эквивалентно redtext, текст будет отображаться красным цветом. Во втором селекторе произойдет тоже самое для всех элементов strong, которые вложены в тег p:

Вариант 3 — Внутренний CSS

Внутренний CSS используется для конкретного тега HTML. Атрибут <style> используется для настройки этого тега. Этот вариант подключения CSS не является рекомендованным, так как в этом случае необходимо настраивать каждый тег HTML по отдельности. К тому же управление вашим сайтом может стать довольно трудным, если вы будете использовать только внутренний CSS. Однако в некоторых случаях этот способ может быть весьма полезным. К примеру, в случае если у вас нет доступа к CSS файлам, или вам необходимо применить правила только для одного элемента. Пример HTML страницы с внутренним CSS должен выглядеть так:

<!DOCTYPE html>
<html>
<body style="background-color:black;">

<h1 style="color:white;padding:30px;">Руководство Hostinger</h1>
<p style="color:white;">Здесь что-нибудь полезное.</p>

</body>
</html>

Преимущества внутреннего CSS

  • Полезен для проверки и предпросмотра изменений.
  • Полезен для быстрых исправлений.
  • Меньше HTTP запросов.

Недостатки внутреннего CSS:

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

Как подключить CSS — способы подключения. Основы CSS для начинающих. Урок №3

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

○ Способ №1 – «Таблица связанных стилей»

Все стили хранятся в одном файле с расширением «.css».
Если связать все HTML файлы веб-страниц с таким CSS файлом, то при изменениях стили страниц (цвет, фон, размер шрифта и т.д.) будут изменяться во всех HTML документах, связанных с CSS файлом.
Схематично это выглядит так:

Чтобы связать HTML документ с CSS файлом, добавьте между тегами <head> специальный тег <link>.* Закрывающий тег не нужен

<link rel="stylesheet" type="text/css" href="style.css">

href – прописываем путь к  css файлу. В примере выше файл «style.css» находится вместе с остальными HTML файлами в одной директории.
Разберём способ №1 поэтапно и практично от «а» до «я»:

1 этап — создать файл «style.css»

Давайте попробуем на практике создать файл «style.css».
Откройте блокнот, который есть у вас на ПК.
Кнопка «Пуск» =>  «Все программы» => «Стандартные» => «Блокнот»:

В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…»:

Далее укажите место, куда вы хотите сохранить файл, лучше файл разместить вместе с остальными HTML файлами.

В поле «Имя файла» напишите «style.css», а не просто style (это важно!). Таким способом мы создаем файл с расширением «*.css»

Далее нажмите на кнопку «Сохранить»:

Вот такая должна получиться общая картина:

Вот и все, файл «style.css» был создан.
Можете вставить в файл «style.css» вот это правило для тега <h1> и сохранить:

H1
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}

В HTML файле вставьте вот этот код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример подключения таблицы CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>

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

Этот способ поможет делать изменения внешнего вида всего сайта, изменяя только правила в одном файле «style.css». Припустим, меняем цвет и размер для заголовка в «style.css», то на всех 1000 страницах произойдет одновременное автоматическое изменение. На чистом HTML, без CSS, пришлось бы эти изменения делать отдельно на каждой странице из 1000. Ужас!!! 

○ Способ №2 – «Таблицы глобальных стилей»

Этот способ тоже применяется и я уверен, что вы с ним столкнетесь.
Для подключения такого способа CSS стилей достаточно прописать между тегами <head></head> тег <STYLE>.* Закрывающий тег обязателен

<style type="text/css"></style>

Можно и так:

<style></style>

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

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример подключения таблицы CSS</title>
<style>
H2
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}
</style>
</head>
<body>
<H2>Заголовок H2</H2>
</body>
</html>

Результат:

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

○ Способ №3 – «Внутренние стили»

Способ №3 я использую в редких случаях, например,  для изменения одиночного тега на веб-странице. Для подключения стиля к любому тегу, нужно прописать параметр style.

style="тут будут CSS правила"

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример подключения таблицы CSS</title>
</head>
<body>
<H2 style="font-size: 150px; color: #cc0000">Заголовок H2</H2>
</body>
</html>

Результат:

В примере выше я изменил размер и цвет Заголовка H2, используя стили CSS.

○ Комбинированный метод подключения стилей

Все эти три способа можно комбинировать.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Пример подключения таблицы CSS</title>
<style>
H2
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}
</style>
</head>
<body>
<H2 style="font-size: 50px; color: green;">Заголовок</H2>
<H2>Заголовок</H2>
</body>
</html>

На сегодня все! Жду вас на следующих уроках.
Подписывайтесь на обновления блога!