Программирование

Понимание 3 типов стилей CSS

Разработка веб-сайта переднего плана часто представлена ​​в виде трехногого стула, состоящего из:

  • HTML для структуры сайта
  • CSS для визуальных стилей
  • Javascript для поведения

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

  1. Встроенные стили
  2. Встроенные стили
  3. Внешние стили

Каждый из этих стилей CSS имеет уникальные преимущества и недостатки.

Встроенные стили

Встроенные стили — это стили, которые записываются непосредственно в тег в документе HTML. Встроенные стили влияют только на определенный тег, к которому они применяются:

<a href="/index.html" style="text-decoration: none;">

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

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

Встроенные стили

Внедренные стили находятся в заголовке документа. Они заключены в теги <style> и очень похожи на внешние CSS-файлы в этой части документа.

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

<стиль> 
h1, h2, h3, h4, h5 {
font-weight: bold;
выравнивание текста: по центру;
}
a {
color: # 16c616;
}
</ style>

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

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

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

Большинство веб-сайтов сегодня используют внешние таблицы стилей. Внешние стили — это стили, которые написаны в отдельном документе и затем прикреплены к различным веб-документам. Они вызываются в основной документ с помощью тега <link> в заголовке документа. Внешние таблицы стилей могут находиться либо на том же сервере, что и HTML, либо полностью извлекаться из другого сервера. Это часто происходит с активами, такими как шрифты, которые многие сайты заимствуют у Google.

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

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

Большинство профессиональных веб-дизайнеров используют основной файл CSS для управления макетом и дизайном сайта.

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

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

Похожие посты
Программирование

Что такое канал RSS? (И где его взять)

Программирование

7 причин, почему изображения не загружаются на ваш сайт

Программирование

Запустите агент SQL Server: настройте SQL Server 2012

Программирование

15 лучших бесплатных обоев дня Святого Патрика