Всегда ли я использую файлы .css?
Ответы 13
Вы можете использовать где угодно, файлы css не обязательны. однако рекомендуется использовать файлы css, так как это упрощает обслуживание и изменение сайта в будущем.
Иметь? Нет. Вы может делаете это так, как вам удобнее.
Как правило, лучше стараться, чтобы CSS не попадал в HTML-код, когда это возможно.
Я обычно так и делаю.
По крайней мере, в начале. Когда дизайн страницы приближается к финальному, я перемещаю большинство вещей в 'main' style.css
Вы можете определить CSS на трех уровнях: внешний, встроенный в документ (внутри тега <style>) или встроенный в элемент.
В зависимости от ваших потребностей вы можете использовать все три, как правило, внешние листы хороши для общих стилей, поскольку вы можете применять их глобально. Если у вас есть конкретные дела, с которыми вы должны справиться, вы можете использовать другие уровни.
Я предпочитаю сохранять стили в CSS, поскольку он отделяет представление от представления, что позволяет мне довольно легко переключаться между презентациями. Плюс ко всему, вся информация хранится в одном месте, а не в двух местах.
Вы можете сделать то же самое. Однако, переместив CSS в отдельный файл, его можно кэшировать. Это сокращает объем данных, которые необходимо передать для каждой страницы, сокращая затраты на полосу пропускания и увеличивая скорость.
Технически возможно использовать только встроенное форматирование CSS и не иметь внешней таблицы стилей. Вы также можете встроить таблицу стилей в HTML-документ. Лучшая практика в веб-дизайне - выделить CSS в отдельную таблицу стилей. Причина этого в том, что таблица стилей CSS существует для определения стиля представления документа. Файл HTML существует для определения структуры и содержания документа. И, возможно, у вас могут быть файлы JavaScript, которые существуют для добавления дополнительного поведения к документу.
Разделение презентации, разметки и поведения создает более чистый дизайн.
С практической точки зрения, если у вас есть одна внешняя таблица стилей CSS, браузер может ее кэшировать. Если несколько страниц вашего сайта имеют одинаковый внешний вид, они могут использовать одну и ту же внешнюю таблицу стилей, которую веб-браузер должен загрузить только один раз. Это снизит ваши счета за пропускную способность сети, а также ускорит работу конечных пользователей.
Вы не имеют, чтобы сохранить ваш CSS во внешнем файле, нет. Вы спрашиваете о "встроенном" css: включая директивы стиля непосредственно на самой странице с помощью блоков <style>.
Бывают случаи, когда в умеренных количествах это имеет смысл, но в целом это не тот путь, по которому ты хочешь пойти. Сохранение вашего CSS изолированным во внешней таблице стилей значительно упрощает поддержку как вашего HTML, так и стиля, особенно при масштабировании проекта и переходе из рук в руки.
Вы можете включить CSS в HTML-страницу. Он входит в тег <style>, который входит в тег <head>:
<head>
<style type = "text/css">
body{ background-color: blue; }
</style>
</head>
Однако обратите внимание, что лучше всего использовать файлы .css.
Одним из больших преимуществ наличия 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*>
Внешний файл - тот же код, что и выше, но тот факт, что информация о стиле находится в отдельном файле, означает, что вы можете использовать класс «предупреждение» на многих страницах.
CSS может повысить производительность, потому что они кешируются из браузера, а страницы меньше!
Внесение правил в 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>
Используйте внешний файл для всех стилей, которые используются по всему сайту, таблицу стилей документа для стилей, которые используются только на этой странице, и используйте встроенные стили, когда стиль влияет только на этот единственный элемент.
Внешние таблицы стилей не всегда снижают пропускную способность. Если вы поместите каждый стиль для каждой страницы своего сайта в один гигантский файл css, ваши пользователи понесут большую начальную загрузку, даже если они посетят вашу домашнюю страницу только один раз.
Продуманное разделение ваших стилей на main.css с наиболее распространенными стилями, а затем на дополнительные таблицы стилей по мере того, как пользователи будут углубляться в детали, может помочь уменьшить количество загрузок для некоторых путей через сайт.