Всегда ли я использую файлы .css? - PullRequest
4 голосов
/ 19 сентября 2008

Всегда ли нужны .css файлы? Или я могу иметь .css «базовый» файл и определять другие элементы стиля внутри HTML-страницы?

Всегда ли padding, borders и т. Д. Должны быть определены в файле .css, который хранится отдельно, или я могу встраивать их затем в HTML-страницу?

Ответы [ 13 ]

16 голосов
/ 19 сентября 2008

Технически возможно использовать исключительно встроенное CSS-форматирование и не иметь внешней таблицы стилей. Вы также можете встроить таблицу стилей в HTML-документ. Лучшей практикой в ​​веб-дизайне является выделение CSS в отдельную таблицу стилей. Причина этого заключается в том, что таблица стилей CSS существует с целью определения стиля представления документа. Файл HTML существует для определения структуры и содержания документа. И, возможно, у вас могут быть файлы JavaScript, которые существуют для добавления дополнительного поведения в документ.

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

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

6 голосов
/ 19 сентября 2008

Вы можете включить CSS внутри HTML-страницы. Он входит в тег <style>, который входит в тег <head>:

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

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

2 голосов
/ 20 сентября 2008

Размещение правил на странице HTML дает им большую «специфичность» и, следовательно, приоритет над внешними правилами. Если несколько правил CSS конфликтуют, ID выигрывает у класса, а встроенные стили выигрывают у ID.

<head>
  <style type="text/css">
    span.reminder {color: blue;}
    span#themostimportant {color: red;}    
  </style>
</head>
<body>
  <span class="reminder" id="themostimportant">
    This text will be red.
  </span>
  <span class="reminder" id="themostimportant" style="color: green;">
    This text will be green.
  </span>
</body>
1 голос
/ 20 сентября 2008

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

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

<span style="color: red;">This is a warning.</span>

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

<head>
  <style type="text/css">
    .warning {color: red;}
  </style>
<body>
<span class="warning">This is a warning.</span*>

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

1 голос
/ 19 сентября 2008

У вас нет для сохранения вашего CSS во внешнем файле, нет. То, о чем вы спрашиваете, это «встроенный» css: включая директивы стиля непосредственно внутри самой страницы через

1 голос
/ 19 сентября 2008

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

1 голос
/ 19 сентября 2008

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

0 голосов
/ 01 октября 2008

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

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

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

0 голосов
/ 20 сентября 2008

Css может повысить производительность, поскольку они кэшируются из браузера, а страницы меньше!

0 голосов
/ 19 сентября 2008

Я предпочитаю сохранять стили в CSS, так как они отделяют представление от презентации, что позволяет мне довольно легко переключаться между презентациями. Кроме того, он хранит всю информацию в одном месте, а не в двух местах.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...