2016-12-31 9 views
-2

EDITED:コード全体が表示されます これはおそらく本当に簡単な質問ですが、HTML5とCSSのコーディングでは少し新しくなっています。私が遭遇している問題は、他の段落から個別に編集したいテキストが1行あり、部門IDを使用しているということです。問題は、CSSがテキストに正しくリンクされていることですが、divにCSSを追加すると編集されません。これはすべて別のシートにあり、DivはDiv以外のすべてのものに対して機能します。ここではHTMLとCSSは次のとおりです。CSSは部門IDに影響しません

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Codetopia - Learn to Code</title> 
     <link href="externalfile:drive-be6fc3227f0f52098e01c434b3f53296322df648/root/Coding/main.css" type="text/css" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Lemonada" rel="stylesheet"> 
    </head> 
    <body> 
     <h1><i>CODETOPIA</i></h1> 
     <h1>Learn to Code the <i>Fun</i> Way</h1> 
    <a href="google.com" target="_blank"><img src="http://www.rouzell.net/wp-content/uploads/2016/01/html_css.png" alt="HTML 5 and CSS3 Image"/></a> 
    <p>Explore the world of code through this interective course for ages 7-12.</p> 
    <p></p> 
    <a href=" " target="_blank"></a> 
     <h2>Why Codetopia?</h2> 
     <p>Codetopia presents a playful, fun, academic atmosphere for young children to discover. <br /> Here are some of the benefits:</p> 
     <ul> 
      <li><b><i>100% free</b></i> for everyone at any age</li> 
      <li>Learn through an interactive storyline</li> 
      <li>Simple to follow steps</li> 
      <li>Color-coded text</li> 
     </ul> 
     <img src="https://edsurge.imgix.net/uploads/post/image/7747/Kids_coding-1456433921.jpg" alt="Coding for Kids"/> 
<!--<img src="http://codeteachers.com/wp-content/uploads/2016/03/kids-coding.png 
" alt="Coding for Kids"/> is optional image--> 
    <h2>How it works</h2> 
    <p>The teaching process is extremely unique and flexible. Children start with being introduced to a fictional story, that they can read. Throughout the story, certain issues or missions will be needed where the child then will be taught the basis of coding to help the characters. <br /> Here is more in detail:</p> 
     <ol> 
      <li>Follow Lee and Madison's numerous interactive adventures</li> 
      <li>Learn and develop basic coding skills to help the twins throughout the story</li> 
      <li>Put your skills to the test to complete each mission and story</li> 
      <div id="join"> 
      <p><b>Join the Codetopia Adventure today!</b></p> 
     </div> 
      <!-- Pic of the twins here? Make sure to resize it --> 
     </ol> 
    </body> 
</html> 



     * { 
    font-family: Georgia,Times,serif; 
    background-color: White; 
} 
h1 { 
    text-decoration: none; 
    font-size: 42px; 
    color: rgba(46,139,87,0.9); 
    font-family:'Lemonada',cursive; 
    line-height: 1em; 
} 
h2 { 
    text-decoration: none; 
    font-size: 24px; 
    background-color: SeaGreen; 
    color: White; 
    margin-right: 1100px; 
    font-style:italic; 
    text-align:center; 
    font-family:'Lemonada',cursive; 
} 
p, li { 
    font-size: 18px; 
    line-height: 1.5em; 
} 
li { 
    color: rgb(37,232,98); 
#join p { 
    color: SeaGreen; 
} 
+3

あなたのCSSには '}'があると仮定すると、このコードは正常に動作します。 [最小限の完全で検証可能な例]を提供してください(http://stackoverflow.com/help/mcve)。 – Xufox

+0

IDであるため、ID「結合」はファイル内に1回だけ表示されていることを確認してください。あなたが私たちに与えたコードスニペットで完全に動作します。 – Stardust

+0

あなたの例は実際の例です。問題は実際のコードでなければなりません。実際のコードは見えません。 – colonelclick

答えて

-1

あなたはそれに色を与えているドキュメントで見ることができるようにDIV識別子に基づいて、子Pまたは親のdivのbタグに色を与えていないので、どのようにすることができますIDに基づいてテキストに別の色を与えた:

#join p { 
 
    color: SeaGreen; 
 
    }
<div id="join"> 
 
     <p><b>Join the Codetopia Adventure today!</b></p> 
 
    </div> 
 

+0

さて、あなたが示したように子供のpタグに色を付けようとしましたが、まだ動作していません。 –

-1

あなたはこのような "P" にコードを割り当てる必要があります。

 
    #join p{ 
    color: red !important; 
    } 
あなたにあなたは1つの "}"が#joinの前に見つからなかったので、2番目の問題はSeaGreenが受け入れられないことです。

-1

子要素が親属性を継承するようにするには、!importantを使用します。

b, p 
 
{ 
 
    color: inherit !important; 
 
}

-1

これらの答えに展開するには、あなたが#join pを指定する必要があります理由は、特異性によってそのCSSルール「カスケード」です。より具体的に考えられるpの別のスタイルルールがあるとします。 もう1つの方法は、pカラールールをbodyカラールールに変更することです。

0
#join p b { 
    color: SeaGreen!important; 
} 
+0

コードのみの回答は役に立ちません。あなたのコードがOP問題を解決する方法を説明してください。ここで特に重要と思われるのは、あなたの答えを他の非常によく似た回答と区別することです。あなたは間違って何をしているのですか? –

関連する問題