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

1). Подключить каждый CSS-файл по отдельности к HTML-файлу с помощью специального тега :

 lang="ru">  charset="UTF-8"> Основной файл index.html  rel="stylesheet" href="../css/main.css">  rel="stylesheet" href="../css/reset.css">  rel="stylesheet" href="../css/fonts.css">   

2). Использовать директиву @import, которая позволяет импортировать один CSS-файл в другой. Допустим, что все стили проекта разбиты на 3 файла: main.css (основной файл), reset.css, fonts.css. Добавим reset.css и fonts.css в основной CSS-файл:

Далее нужно подключить main.css к нашему HTML-файлу с помощью .

Важно располагать импорт файлов reset.css и fonts.css именно в начале документа main.css, иначе данный способ не сработает

Влияет ли размер css файла на загрузку страницы?

К примеру у меня в css файле написано более 1к строк или к примеру файл весит более 1 мб. Может ли это повлиять на загрузку страницы? Если к примеру для каждой страницы(к примеру) писать отдельный css файл, получается страница будет быстрее загружаться?

Отслеживать
задан 13 апр 2018 в 19:52
1,123 11 11 серебряных знаков 24 24 бронзовых знака
Да, каждый файл влияет.
– user262779
13 апр 2018 в 20:21

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

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

Что же делать, в такой ситуации?

1) Используйте сжатие. Пример, тут.

2) Уменьшайте количество стилей путем переноса в нужные страницы, но, только там, где страницы не индексируются или находится единичный элемент.

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

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

3) Некоторым стилям задавайте отдельные классы и используйте их при работе с HTML.

Запишите transition: all .5s; таким образом:

.transition

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

Таким образом вы существенно уменьшите количество повторов для таких стилей как user-select , элементов Flexbox и других.

Все эти советы применимы и к файлам JS.

Обобщенно говоря, ваша задача максимально уменьшить размер всего, что загружается на странице, не только файлов, но и их количества.

Если кто-то что-то добавит, будет вообще супер!

Подключение CSS Стилей — 3 Варианта

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

Нужен недорогой, но надёжный хостинг для вашего нового проекта? Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 85% дешевле!

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

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

  p .center #button-go, #button-back 

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

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

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

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

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

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

1. Далее перейдите к следующей строке и добавьте нужные CSS правила, к примеру:

body < background-color: blue; >h1

1. Как только вы закончите добавление CSS правил, добавьте закрывающий тег:

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

      
Руководство Hostinger
 
Это наш текст.
  

   
Руководство Hostinger
 
Здесь что-нибудь полезное.