Импорт CSS или несколько файлов CSS

Я изначально хотел включить .css в свой HTML-документ, который загружает несколько других .css файлов, чтобы разделить некоторые куски кода для целей разработки.

Я создал тестовую страницу:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title>The Recipe Site</title>
 <link rel='stylesheet' href='/css/main.css'>
 <link rel='stylesheet' href='/css/site_header.css'>
 <!-- Let google host jQuery for us, maybeb replace with their api -->
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 <script type="text/javascript" src="/js/main.js"></script> 
</head> 
<body> 
  <div id="site_container"> 
   <div id="site_header"><?php include_once($r->base_dir . "inc/site_header.inc.php"); ?><!-- Include File, Update on ajax request. --></div> 
   <div id="site_content">
    Some main content.
   </div> 
   <div id="site_footer"><?php include_once($r->base_dir . "inc/site_footer.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
  </div> 
</body> 
</html>

Файл:/css/main.css

/* Reset Default Padding & Margin */
* { 
 margin: 0; 
 padding: 0; 
 border: 0; 
}


/* Set Our Float Classes */
.clear { clear: both; } 
.right { float: right; } 
.left { float: left; }


/* Setup the main body/site container */
body { 
 background: url(/images/wallpaper.png) repeat; 
 color: #000000;     
 text-align: center; 
 font: 62.5%/1.5  "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif; 
} 

#site_container {  
 background-color: #FFFFFF; 
 height: 100%;
 margin-left: auto;  
 margin-right: auto;  
 text-align: left;   
 width: 100%;  
}


/* Some style sheet includes */
/* @import "/css/site_header.css"; */


/* Default Font Sizes */
h1 { font-size: 2.2em; } 
h2 { font-size: 2.0em; } 
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; } 
h5 { font-size: 1.4em; } 
p { font-size: 1.2em; }


/* Default Form Layout */
input.text { 
 padding: 3px; 
 border: 1px solid #999999;     
}


/* Default Table Reset */
table {  
 border-spacing: 0; 
 border-collapse: collapse; 
} 

td{ 
 text-align: left; 
 font-weight: normal; 
}


/* Cause not all browsers know what HTML5 is... */
header { display:block;}
footer { display:block;}

, а теперь файл:/css/site_header.css:

#site_header {
 background-color: #c0c0c0;
 height: 100px;
 position: absolute;
 top: 100px;
 width: 100%;
}

Проблема:

Когда я использую приведенный выше код, div_ site_header не имеет никакого форматирования/фона. Когда я удаляю ссылку из HTML-документа для site_header.css и вместо этого использую URL-адрес @import ( "/css/site_header.css" ); в моем файле main.css, те же результаты - ничего не получается для одного и того же div.

Теперь, когда я беру CSS-разметку из site_header.css и добавляю ее в main.css, div получает визуализированный штраф...

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

Ответ 1

Директива @import должна быть первой в вашем CSS. Как только один стиль попадет в браузер, все остальные строки импорта будут проигнорированы.

Чтобы процитировать WC3:

"любые правила @import должны предшествовать всем другие правила (кроме правила @charset, если имеется)"

См. http://www.w3.org/TR/CSS2/cascade.html#at-import

Следует учитывать, что каждый @import все еще вызывает HTTP-запрос, поэтому он не более эффективен, чем использование нескольких тегов ссылок. Фактически это может быть менее эффективным, поскольку импорт может быть последовательным, а не параллельным запросом. См. статью. IMO также добавляет сложности, потому что вы в конечном итоге управляете ссылками CSS в двух местах (главный тег разметки плюс 1 или более файлов CSS) по сравнению с простым списком тегов ссылок.

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

Ответ 2

Могу я просто сказать, что здесь есть домашнее животное, но размещать изображения, связанные с CSS файлом, в самой папке CSS, а не в /images/.

Точка CSS - это разделение стиля и контента, и только изображения содержимого должны идти в /images/. Любые изображения, вызываемые CSS, должны быть помещены в одну и ту же директорию и называться бесконтактными, например:

body { 
 background: url(wallpaper.png) repeat; 
}

Таким образом, на более поздний срок, если дело доходит до изменения стиля или создания нескольких стилей, это всего лишь случай обновления одной ссылки и перемещения одной папки (/css/), а не беспорядка изображений, разбросанных по всей файловой системе, Плюс это всегда плохая идея использовать абсолютные пути к файлам (например,/images/wallpaper.png).

Ответ 3

Прежде всего, у вас неверная разметка. Тег ссылки должен быть закрыт...

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

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

Наконец, я бы не рекомендовал использовать @import, потому что это не дает убедительного преимущества. Это должно быть первым в CSS файле. Дополнительный HTTP-запрос еще предстоит сделать для каждого дополнительного файла (ов) CSS. И вдобавок ко всему, IE косит, когда вы указываете целевой носитель для импорта. Я придерживаюсь старого старого классического тега ссылки, потому что он просто работает (учитывая, что у вас есть действующая разметка!).

Ответ 4

Используйте firebug для проверки div и посмотрите, какие стили применяются к нему, вы можете получить более глубокое понимание.

Ответ 5

Для любых проблем с CSS, подобных этому, я бы рекомендовал использовать firebug. Вы сможете проверить, правильно ли загружена ваша site_header.css.

Если это загрузка, вы сможете увидеть, какие стили применяются к тем элементам, возможно, некоторые из них перезаписаны?

Ответ 6

используйте @import правило в файле main.css, например:

@import url("css/site_header.css"); (этот код должен быть поверх main.css)

приведенный выше import фрагмент свяжет ваши несколько файлов css в один css то этот файл main.css используется в вашем HTML.