Как подключить html к css и сделать асинхронную загрузку

Как лучше всего привязать CSS стили к HTML документу CSS

В этом уроке вы узнаете, как подключить css к html. Рассмотрим несколько вариантов с примерами. Также поговорим про асинхронную загрузку стилей и хаки под разные браузеры.

Как подключить CSS к HTML документу несколькими способами

Как подключить css к html отдельным файлом

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

Как подключить html к внешнему файлу css на сайте

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

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

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

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

<!DOCTYPE HTML>
<html>

   <head>
      <meta charset="utf-8">
      <title>Название страницы</title>
      <link rel="stylesheet" type="text/css" href="style.css"> <!-- подключаем файл стилей -->
   </head>

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

</html>

Расшифровка:

  • Тег link — это одиночный элемент, который говорит браузеру, что дальше информация пойдет о ссылке
  • Атрибут rel со значением stylesheet — обозначает, что подключаемый файл является каскадной таблицей стилей
  • Type со значением text/css — говорим браузеру, что наш файл создан в текстовом формате с расширением css
  • Href со значением style.css — это путь к файлу стилей

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

<link rel="stylesheet" type="text/css" href="https://site.ru/theme/style.css"> <!-- абсолютная (полная) ссылка -->
<link rel="stylesheet" type="text/css" href="/theme/style.css"> <!-- относительная ссылка -->

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

<link rel="stylesheet" type="text/css" href="https://site.ru/theme/mystyle.css">
<link rel="stylesheet" type="text/css" href="/theme/friuwldjk.css">

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

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

Например, вставка кнопок социальных сетей с сервиса. Вы прописываете путь к файлу стилей кнопок именно с того сервиса, который эти кнопки вам предоставил.

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

Подключение CSS внутренними стилями

Второй способ — это подключение CSS прямо внутри html документа. Это уже будут внутренние стили. Описываются они в теге head но уже при помощи парного элемента style.

<style>
 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> <!-- начало внутренних стилей -->
          H1 { 
           font-size: 120%; 
           font-family: Verdana, Arial, Helvetica, sans-serif; 
           color: #333366; 
          }
      </style> <!-- конец внутренних стилей -->
   </head>

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

Внутри тега style стили прописываем только по своему родному синтаксису. То есть точно также, как их прописываем в отельном файле стилей. В самом файле css тег style прописывать не нужно.

Данный способ подключения 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.

<p style="font-weight: bold; color: red;">Обратите внимание на этот текст.</p>

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

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

Таблица со встроенными inline css

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

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

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

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

Загрузка CSS для определенного браузера

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

Как должна проходить загрузка CSS для определенного браузера

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

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

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

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

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

Это сложно, но возможно!

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

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

CSS хаки

Вот несколько примеров css хаков для Internet Explorer.

/**Вариант 1**/
*:first-child+html .block {
border:1px solid red;
}
/**Вариант 2**/
*+html .block {
border:1px solid red;
}
/**Вариант 3**/
html>body .block {
*border:1px solid red;
}
/**Вариант 4**/
*:first-child+html .block {
border:1px solid red;
}
/**Вариант 5**/
*:first-child+html .block {
border:1px solid red;
}
/**Вариант 6**/
@media \0screen .block {
border:1px solid red;
}
/**Вариант 7**/
:root .block {
border:1px solid red;
}

Вместо .block вставляем свой класс или id, для которого задаются стили. Вместо border:1px solid red; приписываем свои свойства и их значения.

Браузер IE может воспринимать код, который находится в комментариях. Поэтому если у вас не получился вариант выше, то можно использовать такое решение:

<!--[if IE 7 ]>
<style>
    .block {
        border:1px solid red;
    }
</style>
<![endif]-->

Вместо 7 указываем предпочтительную версию IE.

Также в теге head можно дополнительно отдельным файлом подключить css к html. Тут тоже вставляем код между комментариями.

<!--[if IE]><link href="/ie.css" rel="stylesheet" type="text/css" /><![endif]-->

Хак для Mozila Firefox:

@-moz-document url-prefix() {
.block{
    border:1px solid red;
}
}

Для Google Chrome:

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.block{
    border:1px solid red;
}
}

Opera 10:

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) {
.block{
    border:1px solid red;
}
}

Для ранних версий:

html:first-child .block {
  border:1px solid red;
}

или

o:-o-prefocus .block {
  border:1px solid red;
}

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

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

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

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

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

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

Заключение

Теперь вы знаете, как подключить html к css. Для этой задачи есть несколько вариантов решения. Подключение отельным файлом css будет вашим основным вариантом. Ведь как правило файл стилей тоже не маленький. Поэтому будет не разумно писать все прямо в html.

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

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

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

Сказать спасибо кнопками ниже:
Сергей

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

Оцените автора
( 2 оценки, среднее 5 из 5 )
Добавить комментарий

  1. Олег

    Скажите, а как идет подключение css файла в WordPress?

    Ответить
    1. Сергей автор

      В html используйте тег link для подключения. В самом верху файла css родительской темы должно быть:

      /*
       * Theme Name: Название темы
       * Text Domain: roditel
       */
      

      Указываем название темы и ее папку на хостинге. Затем должны идти сами стили. Но я еще дополнительно рекомендую подключать дочернюю тему. А уже в ней в файле стилей в самом верху будет следующее:

      /**
      * Theme Name: Child
      * Template: roditel
      */
      
      @import url("../roditel/style.css");

      Указываем название дочерней темы. Затем папку родительской темы и ниже идет подключение стилей css родительской темы. Их нужно обязательно подгружать отдельным файлом иначе сайт не стилизуется. Ведь основные стили берутся с родительской темы. В дочерней мы лишь только вносим дополнения.

      Ответить
  2. Жанна

    Тоже поначалу не знала, как подключить css файл к html. Потом попробовала, но с первого раза не получилось. Стили не отобразились.

    Оказывается, я неправильно прописала путь к файлу и не обновила кэш. Когда все сделала правильно, стили сразу же обновились.

    Ответить
  3. квезаль

    Да уж.  а эксплорер вообще все комменты видит с таблицы? Блин, значит, дичь лучше не писать.  А почему в комментах, где хаки, так много звезд? Это так можно? Я по одной ставлю звезде всегда после слеша.

    Ответить
    1. Сергей автор

      Нет, комментарии нужно писать. Они помогают при работе с кодом. Ничего плохого в этом нет. 

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

      Ответить
      1. квезаль

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

        Ответить
  4. Александр Каратаев

    Комментарии к коду — штука полезная. А в программировании вообще считается хорошим тоном. Это первые пару дней можно ещё вспомнить что там в коде и для чего прописано. А через месяц, другой, когда у тебя километры кода, да ещё и на разных ресурсах — это невозможно. И что-то поменять потом бывает крайне проблематично…

    Это же относится и к CSS, где обязательно прописываю для чего тот или иной стиль создан…

    Ответить
    1. квезаль

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

      Ответить
Adblock
detector