2016-12-16 17 views
0

私はグラデーションとして表示するために、htmlファイルの背景を取得しようとしています。たとえば、次のようになります:http://uigradients.com/#しかし、私のスタイルシートは私のHTMLファイルにリンクしていないので、私のフォントは機能しません。私のスタイルシートがHTMLファイルにリンクしていないのはなぜですか?

本質的に、私がそれを使いこなす前に私のインデックスファイルがどのように見えるかは次のとおりです。http://crwirth.github.ioと基本的には、バックグラウンドをグラデーションにすることです。ここで

は私のHTMLファイルです:

<link href='https://fonts.googleapis.com/css?family=Lobster'  rel='stylesheet' type='text/css'> 
<!-- CSS 
–––––––––––––––––––––––––––––––––––––––––––––––––– --> 
<link rel="stylesheet" type="text/css" href="index.css" media="screen"> 

</head> 
<!--–––––––––––––––––––––––––––––––––––––––––––––––––– --> 
<body> 
    <div class="element"> 
      <h1><a id="line1" class="categories" title="shortblurb1" font-family="'Lobster', cursive" font-weight="normal" text-align="left" ;>Welcome, I hope you enjoy everything you encounter here:</a></h1> 
      <h2><a id="line2" class="categories" href="https://github.com/crwirth" title="shortblurb2" font-family="'Lobster', cursive" font-weight="normal" text-align="left" ;>My GitHub</a></h2> 
      <h2><a id="line2" class="categories" href="https://wirthrcody.wordpress.com/" title="shortblurb2" font-family="'Lobster', cursive" font-weight="normal" text-align="left" ;>My Blog</a></h2> 
      <h4><a id="line5" class="categories" href="https://twitter.com/codyrwirth" title="shortblurb5" font-family="'Lobster', cursive" font-weight="normal" text-align="left" ;>Follow me on Twitter</a></h4> 
      <h5><a id="line6" class="categories" href="https://www.linkedin.com/in/wirthcodyr"title="shortblurb6" font-family="'Lobster', cursive" font-weight="normal" text-align="left" ;>Connect with me on LinkedIn</a></5> 
        <style> 
        </style> 
      </div> 
</body> 
</html> 

[OK]を、ここで私のCSSファイルです:

background: #ee0979; /* fallback for old browsers */ 
background: -webkit-linear-gradient(to left, #ee0979 , #ff6a00); /* Chrome 10-25, Safari 5.1-6 */ 
background: linear-gradient(to left, #ee0979 , #ff6a00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 


html { 
    background-color: #ee0979; 
} 

a { 
    color: black; 
    text-decoration: none; 
    font-family: "Lobster", cursive; 
    text-align: left; 
} 

h1 { 
    color: black; 
    font-family: "Lobster", cursive; 
    font-size: 1.9em; 
    text-align: left; 
    margin-left: 15px; 
    margin-top: 20px; 
    padding-left: 60px; 
    padding-top: 10px; 
    padding-bottom: 25px; 
    } 

a:hover { 
    text-decoration: underline; 
} 


a { 
     color: black; 
     font-family: "Lobster", cursive; 
     font-size: 3.1em; 
     text-align: left; 
     padding-left: 40px; 
     padding-top: 15px; 
     padding-bottom: 15px; 
} 
+0

同じディレクトリにありますか? – ImAtWar

+0

@ImAtWarが言ったように、あなたのディレクトリ構造をチェックしてください。また、インライン(つまり、HTML形式)のスタイリングを使用しないでください。これにより、コードは判読不能になり、重複していて、将来的には変更が困難になります。 – Jack

答えて

0

コードここにあなたの質問では結構ですが、あなたのサイトのCSSファイルへの悪い参照が存在する

enter image description here

+0

いいキャッチ@ジュリオシルバ。 hrefを 'https:// crwirth.github.io/stylesheets/stylesheet.css'に更新することをお勧めします。私はチェックし、ファイルがそこにある。 –

+0

ええ、それは本当に奇妙なので、私はそれを動作させることができた唯一の方法は、HTML文書内のインラインスタイルを使用していた、そうでなければ私のHTML文書へのリンクを拒否CSSシート。本当に奇妙なのは、最終的にHTML文書が好きになったときに、フォントとグラデーションの背景が完全に無効になることに気付いたことです。 –

関連する問題