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

14.4 Каскады таблиц стилей

Каскадные языки таблиц стилей, такие как CSS, позволяют использовать информацию о стиле из нескольких источников. Однако не все языки таблиц стилей поддерживают каскады. Чтобы определить каскад, авторы указывают последовательность элементов и/или . Каскад информации таблиц стилей производится в порядке указания элементов в разделе .

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

В следующем примере мы определяем две альтернативные таблицы стилей с именем «compact». Если пользователь выбирает стиль «compact», агент пользователя должен применять обе внешние таблицы, а также постоянную таблицу «common.css». Если пользователь выбирает стиль «big print», применяться будут только альтернативная таблица «bigprint.css» и постоянная таблица «common.css».

<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">
<LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
<LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
<LINK rel="stylesheet" href="common.css" type="text/css">

Вот пример каскада, в котором задействованы оба элемента —
и .

<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
    p.special { color: rgb(230, 100, 180) }
</STYLE>

14.4.1
Каскады, зависящие от устройств

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

В следующем примере мы определяем каскад, в котором таблица стилей «corporate» представляется в нескольких версиях: одна для печати, другая для экранного представления, третья для речевых браузеров (полезная, например, при чтении электронной почты в машине). Таблица «techreport» применяется ко всем устройствам. Цветная rule, определяемая элементом , используется для печати и для экрана, но не для звукового представления.

<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
    p.special { color: rgb(230, 100, 180) }
</STYLE>

14.4.2 Наследование и каскады

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

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

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

Комментарии в CSS

CSS

/* CSS Комментарий */

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

CSS

<style>
body {
width: 80%;
margin: 20px auto;
/* background: #cde;
font-family: Verdana, Geneva, sans-serif; */
}
</style>

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

/*— Menu —*/

#menu {
…
}
#menu ul {
…
}
/*— About Section —*/
#about {
…
}
.about-block {
…
}

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

Просмотров:
627

Как подключить 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>

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

HTML и CSS

Итак, html – разметка, css – стили. Это две простые истины, которые стоить запомнить раз и навсегда. Механизм связки html и css весьма прост. Давайте начнем с сайтов, с движками. Допустим есть у вас какая-разметка и блок с контентом:

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

Выглядит не очень и вы хотите его переделать. Вам нужно найти файл стилей. Обычно он называется styles.css. В WordPress например, для того, чтобы редактировать стили можно перейти на главную страницу вашего сайта и нажать кнопку “Настроить”, а внутри нажать кнопку “Дополнительные стили”. Ситуация выглядит так: вы нажали правой кнопкой по ненавистному блоку и выбрали в меню “Просмотреть код”. В итоге выяснилось, что имя класса у данного блока – content. Отлично, это уже половина дела. Именно по имени класса мы свяжем наш html с css. Находим файл, где хранятся стили и начинаем наводить порядок. Пишем туда следующее:

CSS

.content {
background-color: #f0f0f0;
color: #303030;
border: 1px solid #000;
border-radius: 5px;
padding: 5px;
max-width: 80%;
text-align: center;
}

Ну а теперь как изменился наш блок:
Значимость этих проблем настолько очевидна, что реализация намеченного плана развития напрямую зависит от ключевых компонентов планируемого обновления? С другой стороны начало повседневной работы по формированию позиции способствует повышению актуальности всесторонне сбалансированных нововведений. Равным образом выбранный нами инновационный путь способствует повышению актуальности всесторонне сбалансированных нововведений?

Согласитесь, так выглядит гораздо лучше. Все дело в том, что мы написали для класса content свои собственные стили. Но это в случае, когда мы переписываем уже имеющиеся стили. А что, если стилей нет совсем? Есть 2 варианта решения задачи при связывании html и css.

Как работает CSS

Добавляя каскадные таблицы, программист пишет правила, включающие блок объявлений и селектор. Первый вписан в фигурные скобки, в нем может находиться одна или несколько частей, разделенных точкой с запятой. Второй — указывает на какие отрезки кода распространяется правило. Оно «рассказывает» браузеру что именно и как отобразить на веб-странице. За «что» отвечает селектор, находящийся слева, а за «каким образом» — текст в скобках, расположенный справа. Нередко встречается вариант, когда верстальщик вписывает несколько селекторов. Это происходит в ситуации, если одни настройки должны срабатывать для нескольких элементов. Если же добавлено два и более объявлений, это значит, что к одной части должны прикрепиться много изменений. Ярким примером добавления нескольких свойств является блок, которому одновременно задают заливку, рамку, скругление и выравнивание по центру.

Асинхронная загрузка CSS

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

Это может существенно ускорить загрузку сайта. Особенно на мобильных устройствах.

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

Используем внутренние стили

Можно вставить внутренние стили для первого экрана на сайте. А уже ниже подключать отельный файл css.

<!DOCTYPE HTML> 
<html> 
   <head> 
      <meta charset="utf-8"> 
      <title>Название страницы</title>  
      <style> <!-- начало внутренних стилей --> 
          H1 { 
            font-size: 120%; 
            font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366; 
          } 
      </style> <!-- конец внутренних стилей -->  
   </head> 
 
   <body> 
      <h1>Привет, мир!</h1>
      <link rel="stylesheet" type="text/css" href="style.css"> <!-- подключаем файл стилей -->
   </body> 
</html>

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

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

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

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

Объединение файлов

Еще один способ ускорить загрузку страницы, это объединение файлов стилей в один общий. Так браузер тоже сможет быстрее обработать страницу.

Самое простое, это перенести все необходимые стили с других файлов в один. Или же можно через @import попробовать в самом файле css подключать другие стили.

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

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

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

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

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

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

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

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

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

Добавление стилей к элементам 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

Способ 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;
}

Создание стилей 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:

Как подключить CSS файл к HTML странице?

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

Для тех, кто любит смотреть в формате видео.

Для тех, кто любит читать, инструкция ниже.

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

Задача стилей CSS, которые будут подключаться, сделать элемент абзаца <p> красным цветом.

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Документ без названия</title>
 </head>
 <body>
 <p>Абзац</p>
 </body>
 </html>

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

1 вариант. Внутри открывающего тега с помощью атрибута style.

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

Давайте посмотрим, как это работает на конкретном примере. Атрибут style добавлен для элемента <p>.

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Документ без названия</title>
 </head>
 <body>
 <p>Абзац</p>
 </body>
 </html>

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

2 вариант. Внутри элемента style.

Еще один способ подключения стилей CSS, это воспользоваться элементом <style> с атрибутом type=»text/css». Указание этого атрибута обязательно.

Давайте посмотрим, как это выглядит на конкретном примере.

<!DOCTYPE HTML>
 <html>
 <head>
 <style type="text/css">
 p {color:red;}
 </style>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Документ без названия</title>
 </head>
 <body>
 <p>Абзац</p>
 </body>
 </html>

3 вариант. Подключение внешнего файла стилей. 

И последний вариант подключения стилей CSS является использование элемента link, который позволяет подключать к HTML странице внешние файлы.

Обратите внимание на атрибуты, которые указываются у этого элемента

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

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

<!DOCTYPE HTML>
 <html>
 <head>
 <link rel="stylesheet" href="style.css" type="text/css"/>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Документ без названия</title>
 </head>
 <body>
 <p>Абзац</p>
 </body>
 </html>

Файл style.css содержит следующих код:

p {color:red;}

Эти 3 способа подключения стилей CSS очень часто используются на практике. Советую вам поэкспериментировать с этими примерами на своем компьютере. В будущем, это вам очень сильно пригодиться.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

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

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

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

Добавление внешних таблиц стилей CSS

Перед установкой ссылки нам нужно сначала создать таблицу стилей. Давайте откроем ваш любимый редактор кода и создадим новый файл. Теперь введите следующий код CSS внутри этого файла и сохраните его как «style.css».

body {
  background: lightyellow;
  font: 18px Arial, sans-serif;
}
h1 {
  color: orange;
}

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

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Страница</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Заголовок</h1>
  <p>Параграф текста.</p>
</body>
</html>

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

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

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

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

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

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

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

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

блок 3

Как подключить один css в другой css файл

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

1. Откроем файл «style.css».
2. Добавим код .
3. Сохраняем изменения.

Следовательно, при помощи @import, мы можем подключить таблицу стилей из другого файла css. В данном случае, в теле основного файла стилей, подключаем «blt.css», который находится в папке «css».

Кроме того, аналогичным способом, можно подключать внешние стили и в теге «Style». Будет выглядеть так:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Как подключить один css в другой css</title>

<style>
@import url("/css/blt.css")
p { line-height:2em; }
</style>

</head>
<body>
....
</body>
</html>

Интересненько!Нужно срочно изучить!