30

Web サイトの本文にしかアクセスできず、頭にはアクセスできないという状況に陥っています。新しいスタイルシートを使用する必要があります。これで、Web サイトの本文に CSS ファイルを追加するという解決策が見つかりました。もちろん、それはハックなので、より良い解決策があるかどうか疑問に思っていましたか?

4

6 に答える 6

41

CSS ファイルをロードするには、さまざまな方法があります。

1 - HTML - ページに外部 CSS ファイルをロードする従来の方法は次のとおりです。

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

2 - CSS - importCSS ファイルのタグを使用する

@import  url("another_file.css");

3 - JavaScript - JavaScript のみを使用してそれを行うには、Javascript 関数を作成する必要があります。

<script type="text/javascript">

   function loadCSS(filename){ 
      var file = document.createElement("link");
      file.setAttribute("rel", "stylesheet");
      file.setAttribute("type", "text/css");
      file.setAttribute("href", filename);
      document.head.appendChild(file);
   }

   //just call a function to load your CSS
   //this path should be relative your HTML location
   loadCSS("path_to_css/file.css");
</script>

4 - JavaScript - 次のような動的定義を追加できます。

<script type="text/javascript">

   var sheet = (function() {
      var style = document.createElement("style");
      style.appendChild(document.createTextNode(""));
      document.head.appendChild(style);
      return style.sheet;
   })();

   sheet.insertRule("span { visibility: hidden }", 1);
</script>
于 2012-08-06T18:21:46.720 に答える
10

Do you mean define CSS again and override previous CSS like?:

​&lt;html>
    <head>
        <style type='text/css'>
            * {color:red;}
            p {background-color:yellow;}
        </style>
    </head>
    <body>
        <style type='text/css'>
            * {color:green;}
            p {background-color:black;}
        </style>
        <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p>
        "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
        <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p> 
    </body>   
</html>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

You could copy the entire style sheet there or of course then include it with php or javascript.But like this, looking at the head CSS stylesheet and overriding all the styles appearing there in the body should work. Not sure if this is clean though.

于 2012-08-06T18:24:19.123 に答える
6

メソッドを使用できます@import url("your_styles.css");。

ドキュメントのヘッドで呼び出されるスタイルシートにアクセスできる場合は、これを CSS ドキュメントの先頭に追加できます。

ドキュメントに代替<head>を追加することもできますが、これはお勧めしませんが、必要に応じてこれを行うこともできます。

<style type="text/css">
  @import url("your_style.css");
</style>

下位互換性が問題にならない場合は、次のscoped質問で対処されている HTML5 属性もあります。

お役に立てれば！

編集：

@import 機能に関する 2 つのリンクが見つかりました。1 つは、2012 年 7 月 31 日に最終更新された Mozilla Developers center からのワーキング ドラフトです。

https://developer.mozilla.org/en-US/docs/CSS/@import

また、ブラウザのサポート統計を含む Sitepoint リファレンス記事:

http://reference.sitepoint.com/css/at-import

必要に応じて、これはまだ機能的で使用可能な機能であると思います.

于 2012-08-06T18:13:34.263 に答える
3

どうやら、次のように見える場合、私にはうまくいくようです

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

ただし、/cssin rel が含まれている場合はそうではありません。

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

これを自分でテストしたところ、これを投稿してこの落とし穴を強調することを考えました。

于 2014-12-29T08:44:46.010 に答える
2

<head></head>本文セクションにタグを配置できます。

于 2012-08-06T18:05:13.397 に答える