Размещение информации CSS на странице HTML - PullRequest
Новая
       13

Размещение информации CSS на странице HTML

3 голосов
/ 09 июля 2009

Где можно разместить информацию о стиле CSS на странице HTML?

Я знаю, что вы можете поместить информацию о стиле CSS в заголовок HTML-страницы, где еще можно разместить элементы CSS?

Я бы хотел разместить свой CSS где-нибудь еще на странице из-за наследования, например: 

<style type="text/css">
...
</style>

Ответы [ 7 ]

7 голосов
/ 09 июля 2009

Вы можете использовать 

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

в заголовке для ссылки на внешнюю таблицу стилей.

Вы также можете иметь встроенные атрибуты стиля, такие как 

<a href="#" style="color:red">Hello</a>

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

$('textBox').css("font-weight", "bold");

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

Обратите внимание, что если вы действительно хотите переопределить определенный атрибут, лучший способ сделать это - использоватьопция! Important, например 

color: red !important;

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

4 голосов
/ 09 июля 2009

Вы можете связать внешние таблицы стилей в блоке <head>. Можно использовать более одной таблицы стилей, и они загружаются по порядку (в этом примере и screen.css, и print.css переопределяют некоторые элементы style.css. 

<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Вы можете импортировать его из внешней таблицы стилей в блоке <head>: 

<style>
  @import url(style.css)
</style>

Или импортируйте его другим способом: 

<style type="text/css" media="all">
  @import "style.css";
</style>

Вы можете поместить CSS в блок <head>: 

<style type="text/css">
  p {font-face:Arial;}
</style>

Вы можете вставить CSS в HTML: 

<ul> <li style="list-style:none">Item 1</li></ul>

Вы можете добавить CSS в DOM через javascript: 

function addCss(cssCode) {
var styleElement = document.createElement("style");
  styleElement.type = "text/css";
  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = cssCode;
  } else {
    styleElement.appendChild(document.createTextNode(cssCode));
  }
  document.getElementsByTagName("head")[0].appendChild(styleElement);
}
2 голосов
/ 09 июля 2009

Вы можете указать это "inline" 

<div style="border: 1px solid red" />

Кроме того, я не привык размещать его где-либо еще, кроме отдельных файлов / <head>

1 голос
/ 09 июля 2009

Если вы обеспокоены наследованием в css, вам нужно запомнить это общее правило.

Встроенные стили> все остальное. Tag> id Id> класс

Тогда у вас есть комбинации этих правил.

Tag + id (div # main)> id

Родительский тег + тег + идентификатор> тег + идентификатор

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

1 голос
/ 09 июля 2009

Как уже говорили другие, в голове стоит не встроенный CSS, если вы хотите написать синтаксически правильный код. Проверьте схему, если вы не уверены.

Если вам нужно сгенерировать CSS во время динамического создания страницы, вы можете легко внедрить его в DOM, в нижней части головы, используя javascript: 

document.getElementsByTags('head')[0].appendChild( -- css here --);

Имейте в виду, что это приведет к замедлению и «миганию» рендеринга страницы, так как браузер должен изменить стиль страницы при вставке нового CSS. То же самое произойдет, если вы проигнорируете схему и поместите свой CSS в тело.

Это приводит к плохому пользовательскому опыту.

1 голос
/ 09 июля 2009

С руки:

  • В других документах. Включите файлы CSS с элементом LINK :
  • Встроенный с элементами HTML:

    Заголовок

Это обычно единственные два других места, где вы поместите CSS. Вы также можете применять CSS к документам через JavaScript.

0 голосов
/ 09 июля 2009

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

<p style=" font-weight:bold; ">

Или вы можете добавить его в блок стиля в теле страницы или заголовке 

<style>
  p {font-weight:bold;}
</style>

И, наконец, вы можете включить его из связанного файла CSS, импортировав ... 

<style>
  @import url(css/bold.css)
</style>

Или связав это ... 

<link rel="stylesheet" href="css/bold.css" />

Честно говоря, связывание в 99,9999% случаев - лучший способ включить таблицы стилей на страницу, поскольку она аккуратно отделяет ваш CSS от кода, делая обновления либо намного быстрее.

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

Нет похожих вопросов

...