1

Firebug で、body要素の css が 2 回表示されていることに気付きました (最初にすべてのルールが削除されます)。最初のbody要素は URL から取得されます。http://localhost:3000/assets/application.css?body=1

2 番目のbody要素は URL から取得されます。 http://localhost:3000/assets/scaffolds.css?body=1

header.css.scss というディレクトリに別の scss ファイルを追加しました/app/assets/stylesheets。/assets/header.css私が望んでいたように、それは現在すべてのウェブページに含まれています。しかし、application.css はすべてのページですべてのコンテンツを複製しています。

私は何か間違ったことをしましたか？アセットに header.css.scss ファイルを作成する必要はありませんでしたか? すべての CSS ルールが重複しているのはなぜですか?

更新: 私の application.css ファイルには、単純な css しか含まれていません。

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
*/
body {
    margin: 0;
}
#content {
    padding: 10px;
    background-color: #eee;
}
code {
    background-color: #d0d0d0;
    padding: 1px 3px;
}

私の header.scss ファイルには、application.css との共通点はありません。

@import "compass/css3/images";

header {
  border-bottom: 1px solid #6787d2;
  height: 7em;
  position: relative;
  background-color: #f0edee;
  background-image: url("/assets/background_header.png");
  padding: 10px 10px 0 10px;
  box-shadow: 0 -1px 3px #C0BABB inset;
}
header address {
  background-color: #b9dd8c;
  @include filter-gradient(#b9dd8c, #5ab86d, vertical);
  $experimental-support-for-svg: true;
  @include background-image(linear-gradient(top,  #b9dd8c 0%,#5ab86d 100%));
  border: 1px solid #15905b;
}

application.html.erbレイアウトには CSS 参照が 1 つしかありません。

<!DOCTYPE html>
<html>
<head>
  <title>whatever</title>
  <%= stylesheet_link_tag "application", :media => "all" %>

最後に、ビューには CSS への参照がまったくありません。

4

2 に答える 2

1

あなたは実際には何も悪いことをしていません。

firebug で表示される内容を少し誤解している可能性があります。

  1. body タグに一致する複数の CSS セレクターがあります。CSS の動作方法に基づいて、より具体的なセレクターを持つ CSS が適用されます。Firebug は、一致するすべての CSS を表示し、実際に適用された CSS によって再定義されているスタイルを強調表示します。

    再定義される CSS を最初から適用しないことが重要であると思われる場合は、それを body タグのクラスまたは ID に適用します。

  2. header.css を追加すると、Rails が各ページの application.css、scaffolds.css、および header.css のすべてのコンテンツを含むことを期待する必要があります。その意図は、すべての CSS が、すべてのページが参照する 1 つのマスター CSS ファイルにプリコンパイルされることです。ブラウザーは、CSS ファイルを 1 回だけ呼び出してキャッシュするため、CSS ファイルを再度フェッチする必要はありません。

    簡単に言えば、header.css をアセットに追加することは、header.css とすべてのページの他のすべての CSS を含めることを目的としていました。重複するルールによって再定義されるルールを適用しないようにするには、意図せず重複しないようにルールを定義する必要があります。(意図した場合にのみ重複する必要があります。たとえば、本文のフォントを設定し、後で td タグ内のフォントを変更します。)

ご質問の内容が理解でき、問題が解決したことを願っています。

コメントの後に編集された別の回答

新しい CSS ファイルを追加するたびに stylesheet_link_tag を追加していると思います。アプリケーション用の stylesheet_link_tag のみを使用し、scaffold またはヘッダー用の stylesheet_link_tag は使用しないでください。scaffold と header を application.css.scss に含めることで、それらはすでに含まれており、stylesheet_link_tag を使用すると再び含まれます。

于 2012-10-05T21:51:36.853 に答える
0

application.cssに名前を変更して問題を修正しましたapplication.css.scss。アプリケーション全体にいくつかのscssを追加したかったので、これを行いました.Webページでcssの重複をすべて削除することが判明しました。

そのため、もともと重複が発生した原因はわかりません..

于 2012-10-08T08:49:51.997 に答える