CSSの書き方とdocumentsの検索の詳細_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSSの書き方とdocumentsの検索の詳細_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:23:07

オリジナル

974 人が閲覧しました

これはCSSでフォント属性を制御する際に犯したミスです。不注意とも言えます。

質問の要件は写真の通りです:

この質問は非常に簡単ですが、私個人としては間違っていました。最初に以前の間違った HTML コードと正しい CSS を入力しました

間違った 1.html

<html><head><title>font</title><link rel="stylesheet" type="text/css" href="one.css">    <!--对css的引用这是外联css--></head><body><span class="s1">梁山英雄排行榜</span><br/><br/>      <!--"<span></span>是行元素，而<p></p>是块元素"--><span class="s2">宋江</span><br/><br/>               <!--class定义css的类别--><span class="s3">卢员外</span><br/><br/><span class="s4">吴用</p><br/><br/>                   <!--请注意</p>接下来就是我要讲的,错也错在</p>这--><span class="s3">豹子头</p><br/><br/><span class="s3">大刀关胜</span><br/><br/></body></html>

ログイン後にコピー

正しい one.css

.s1{   color:gold;   font-size:30px;}.s2{   color:red;   background-color:silver;   font-style:italic;}.s3{  background-color:silver;   }.s4{   background-color:silver;     /*silver为银灰色*/   font-decoration:underline;   /*decoration为修饰，underline为下划线*/   font-style:italic;           /*字体样式为斜体*/}

ログイン後にコピー

結果は、写真に示すように実際のものと非常によく似ています:

非常に不満です良いアイデア: まず、

に気づきましたが、それを脇に置いて、CSS を書き終えたときに、html の

タグを変更するのを忘れていました。。

結果: 段落間に大きなギャップがあることがわかり、すべての段落に下線が引かれていましたが、コードをざっと見ただけでは見つかりませんでした。

それが優先事項なのかと疑問に思いました。、話が逸れてしまい、CSSを変更しました。Baiduに付属のクラス名でも良い結果が得られませんでした。その間。

後: HTML コードを読み直して

の問題を見つけたのでまとめてみました

理由 (個人的なまとめ): まだが変わらなかった「呉」を「ヒョウ頭」で囲む「Dadaoguan Sheng」を囲むのは無駄ですが、質問の開始タグは「Wu Yong」から始まり「Dadaoguan Sheng」で終わるためです。そのうちの 3 つは共通の全体となり、その後、異なる CSS クラス名により優先順位の問題で競合が発生します。個人的には、これはメモリオーバーフローに似ていると思います。次に、「Wu Yong」、「Leopard Head」、「Dadao Guansheng」をに置き換えてまとめました

<html><head><title>font</title><link rel="stylesheet" type="text/css" href="one.css">  </head><body><span class="s1">梁山英雄排行榜</span><br/><br/>     <span class="s2">宋江</span><br/><br/><span class="s3">卢员外</span><br/><br/><span class="s4">吴用</span><br/><br/>       <span class="s3">豹子头</span><br/><br/><span class="s3">大刀关胜</span><br/><br/></body></html>

ログイン後にコピー

結果は写真に示すように正常です:

Iこの写真を投稿しましたここで、見やすくするために、もう 1 つの演習 2 があります。正しい HTML コードと不足している CSS を一緒に書きます

2.html

<html><head><title>链接</title><style="text/css">            <!--内联css，不过css的注释是"/**/"-->a{    color:red;    font-size:24px;    font-decoration:none;}a:hover{                    <!--hover为伪类定义鼠标悬停的-->   font-decoration:underline;   font-size:40px;   color:green;}<head><body><a href="#">连接到百度<a></body></html>

ログイン後にコピー

コードのどこが不足しているのか、不足しているコードは何かを考えてください？ Baidu やドキュメントを使用しないことをお勧めします。最初に私の経験と考えを共有します。私は、Baidu で「CSS でフォントの属性を定義できる」というエントリを読み落としました。 . ですが、なぜ Baidu が CSS ドキュメントマニュアルに何かを記載しているのか考えてみました。これにより、非常にプロフェッショナルに見えなくなります。

完全な補足:

<html><head><title>链接</title><style="text/css">           a{    color:red;    font-size:24px;    font-family:"华文新魏";    font-decoration:none;}a:hover{                      font-decoration:underline;   font-size:40px;   color:green;   font-famliy:"宋体";}a:visited{color:gray;}<head><body><a href="#">连接到百度</a></body></html>

ログイン後にコピー

写真に示すように:

注: この HTML リンクを再度開くときは、ブラウザのキャッシュを忘れずにクリアしてください。そうしないと、効果は Baidu への灰色の接続と同じになり、リフレッシュすると役に立たないこと。

個人的な要約: 問題に遭遇したときに最初に考えたいのは、問題を解決することではなく、たとえ解決したとしてもパニックに陥らないことです。おそらく今後もこのままになるでしょうが、これは良くありません。まずはおおよその場所を特定してから、1 つずつクエリを実行することをお勧めします。次に、エラーの影響とエラー報告要因を考慮し、コードを注意深く見て欠落やエラーがないかどうかを確認し、問題を論理的に考えて問題を解決します。後で要約して印象を強めます。

追記:

個人的には、Baidu は最良の答えですが、最悪の答えでもあります。Baidu ではほとんど入手できない最新テクノロジーを盲目的に求めているだけです。しかし彼は全能です。

私はプログラミングの達人ではありませんが、勉強した結果、次のように理解できたと思います。人々が問題を解決できるようにするには、問題のアイデアを考えさせ、分析させ、なぜそうなるのかを理解してもらうのがよいのです。だから、魚を教えるよりも魚を教えるほうが良いのです。