導入：
本の一節を引用すると、「私が初めて中国語を学び始めたとき、家庭教師のラオ・ワン先生は私に中英辞典、中国語文法書、そして初級者向けのチュートリアルをくれました。しかし、彼はそうするでしょう。本は本かごに入れられ、最初の週は、いくつかのフレーズを聞いて覚えることだけを教えてくれました。その後、いくつかの短いコメントを繰り返す方法を教えてもらいました。レストランは？ 「。お米を持ってきてください。」 「このドレスはいくらですか？」その週の間、私は知識、文構造、発音、文法を無条件で受け入れなければなりませんでしたが、金曜日には実際に中華料理店に行って、ご飯を注文して、支払いをすることができました。すべて シンプルなフレーズで、これを行うのに十分な文法と語彙が得られました。
いつからかわかりませんが、中国人は CSS を真剣に受け止めるようになりました。多くの人が CSS を学習し始めていますが、どこから始めればよいかわかりません。この記事は、CSS の初心者向けに書かれています。
1.CSS学習はメソッド重視！
小学校、中学校、大学と何かを学ぶときも同じですが、知識を学ぶだけでなく方法も学ぶ必要があります。
CSS をマスターしたいなら、まず HTML を学ばなければなりません。私はゼロから HTML を学び始めました。私には先生がいなかったので、インターネットにアクセスできなかったので、本が唯一の先生でした。 1 か月後、CSS の勉強を始めました。最初に読んだ CSS の本は「CSS Web スタイル デザイン」でした。数日間読んだ後、まったく理解できないことがわかりました。から「HTMLリファレンス事典」に変わりましたが、この本はWebページデザイナーの定番のデスクブックです！この本をCSS学習用に変えた理由は、この本の一部がCSSであり、私のCSS啓発本になったからです。少し読んでみると、外国人が書いたチュートリアルは、国内の書籍とは異なり、非常に整理されていて、浅いところから深いところまで、段階的に何を言っているのか理解できるように導かれていると感じます。まるで彼が非常に知識が豊富であることをあなたが知らないのを恐れているかのようです。先ほど紹介した『CSS Web スタイル デザイン』という本と同じように、当時私は CSS 初心者として読んだのですが、何のことを言っているのか全く分かりませんでした。
学習プロセスの詳細について説明します。スタイルは HTML ページから切り離すことができません。HTML とスタイルを組み合わせなければ、CSS の存在意味が失われます。したがって、この本では通常、例を示してから、コンピュータ上でその効果をテストするようにしています。これは、著者がスタイルシート CSS の予備的な印象を持って、CSS で何ができるかを知ってもらいたいからです。小さな例: 「スズメは小さいですが、内臓は 5 つすべてあります。」 それぞれの発言の本当の意味は理解できないかもしれません。しかし、例題のパターンを覚えて、それを今後も実践で継続的に使用することができます。継続的に使用するプロセスは、継続的に暗記するプロセスなので、常に自分の記憶力が低いと思ってリラックスすることはできません。牛に乗ろうと、千里の馬に乗ろうと、何があっても、忍耐力があれば必ず最後まで辿り着く。
一般的に本を読むときは、最初は最後まで読んで理解できなければ、読み進めていくうちにその疑問に対する答えが見つかるかもしれません。読んだ後は大体の感想は得られると思いますが、分からないこともたくさんあると思いますが、気にせず読み続けてください。
2回目は、読みながら、重要だと思う部分をメモし、疑問に思った部分をメモしてください。 、BBS に投稿することができます。ここでは、「質問の仕方を学ばなければなりません。」ということを思い出してください。この本の例を練習するにはコンピューターにアクセスしなければならないのですが、最も混乱するのは、「第一に、覚えられないこと、そして第二に、概念を間違って理解していることです。(これはおそらく、この本はうまく翻訳されていない、もう 1 つはあなたの理解が間違っているということです。" )"、最初の 1 つについては、自信を築き、粘り強く粘り強く続ける必要があります。最後まで行くと、すべてが当たり前のことだということがわかります。なぜなら、頑張れば必ず報われ、結果が出るからです。
多くの人も視聴していますが、進歩が見られない主な理由を私は次のように分析しています。
理由 1: アーティストなどの多くの人が CSS を学ぶのは、他の人が CSS を学ぶのを見て、自分が学ばなければメリットがないからです。この種のプレッシャーは非常に小さいもので、よく学ばなかったとしても、アーティストとしての仕事はあります。
理由 2: これは単なるパートタイムの研究であり、ただ楽しむためです。必ずしもこのテクノロジーで生計を立てる必要はないからです。
理由 3: やり方が間違っている。チュートリアルを見ているだけの人もいますが、私は見すぎてあまりやらないので、理論的なことを取り入れるには練習が必要です。
2. CSS の 4 つの学習段階をマスターする
ネットユーザーに聞いたことがありますが、CSS を学ぶのは難しいですか?
「どれくらい勉強してるの？」と聞くと、「難しくないよ」と彼女は言いました。彼女は「学んだばかりです」と言いました。実際、彼女の言ったことは正しいのです！ CSS を学ぶのは難しいかと聞かれたら? 「それは難しいです！」と私は言います。なぜ難しいと言えるのですか？
CSS の学習は次の段階に分けることができます。
ステージ 1: ブラウザーの互換性の問題を考慮せずにページを作成できますが、ページはどこでも TABLE モード DIV で記述されます。
ステージ 2: 互換性の問題が考えられますが、問題を事前に防ぐ方法はなく、問題を解決して HACK テクノロジを広範囲に使用することしかできません (HACK テクノロジについては知っているだけですが、めったに使用しません)。
ステージ 3: バグは事前に防ぐことができますが、スタイル シートには ID、CLASS が広く使用されており、CSS は「DIV P SPAN」などの重複するスタイル シートとして変換されます。このコードは、DIV の子要素にある P の子要素 SPAN をマークします。このように記述することで、SPAN に CLASS を追加することなく、SPAN のスタイルを定義できます。これは CSS の利点です。ぜひ CSS を活用して、クラスを定義してみてはいかがでしょうか。
ステージ 4: このステージは最も難しく、優れた HTML セマンティック構造、合理的な CSS、および再利用可能なスタイルです。この分野には、優れたセマンティクスと合理的な CSS に関する記事があり、将来的にはこれら 2 つの側面を研究するための特別なトピックを作成する予定です。
3. CSS 初心者向けのよくある質問
段階的に見ていきましょう。最初の要件は、サムネイルの直下にタイトルがあることです。それは非常に簡単です。HTML に画像を配置し、その後に改行 (BR) を挿入し、次にタイトルを段落 (P) 内に配置して中央に配置します (CSS を使用)。
次に、これらのサムネイルとタイトルをペアでブラウザ ウィンドウに配置する必要があります。テーブル レイアウトを使用する場合、サムネイルとタイトルのペアがそれぞれ TD に配置されます。 CSSレイアウトを使用する場合は、それぞれDIVに配置する必要があります。これらをウィンドウ上で水平に配置するには、CSS を使用してこれらの DIV を左側にフローティングします (FLOAT)。
質問 1: CSS を学ぶにはどのような本を選べばよいですか?
最初にいくつかの本をお勧めします。
「CSS の決定版ガイド」
「ウェブサイト再構築」
「Webサイトレイアウト記録」
「HTMLリファレンス」
HTML についてあまり詳しくない場合は、まず「HTML Reference」という本を読んでください。この本は教育用の本であるだけでなく、HTML をクエリするための優れたツール本でもあります。最近出版された「Mastering CSS」と「Impeccable Web Design」は非常に良い本ですが、CSS の基礎を持っていない人には適していません。優秀な CSS ビルダーになりたいのであれば、しっかりとした CSS ビルダーも必要です。英語で基礎を学ぶことができます。外国の CSS チュートリアルを読んだり、関連するフォーラムに参加したりできます。英語が分からない場合はコードを読めばいいという人もいますが、実際には、彼らの本ではコードだけでなく、より重要な点についても説明されています。 、コーディングの考え方とコーディングの方法は学び、理解する価値があると彼らは教えてくれます。さらに、私がお勧めする中国語のチュートリアルは、「HTML と CSS Standard」、Su Chen Xiaoyu の「CSS2 中国語マニュアル」、および「Web Designer」の電子版です。外国語や英語の電子書籍がたくさんあります。一つ一つ例を挙げてはいけません。電子書籍を読むのはとても面倒なので、電子書籍を読むのによく本を買って読んでいます。
質問 2: CSS コードの編集にはどのようなソフトウェアが使用されますか?
この質問が一番多いようです！まず私自身の話をさせてください。私は最初に DreamWeaver を使用してコードを作成しました。DreamWeaver ソフトウェア自体は非常に CPU とメモリを消費するため、実行時の編集速度は想像できるでしょう。長時間歩いた後、「半手書き」状態に移行しました。 「半手書き」とは、DWが提供するコードプロンプト機能を使用することで、「F」を書くとすぐに「F」のスタイルになります。後で選択するのに便利です。もう少し文字を書くと、必要なスタイルがすぐに見つかります。これにより、スタイルの作成速度が向上しますが、プロンプトが表示される編集ソフトウェアを離れると、スタイルを作成できなくなるという欠点があります。たとえば、プログラマから微調整スタイルを変更する場合、プログラマはあなたが使用しているのと同じソフトウェアを使用していない可能性があり、コード プロンプト機能を備えていない可能性があるため、編集するには自分のマシンに戻るしかありません。それをプログラマーに送信してください。これは明らかにプロフェッショナルではありません!だから、優秀な人になりたければ、プロフェッショナルにならなければなりません！
そうは言っても、このトピックについてはまだ言及されていないようです。
手書きができるソフトであればどのようなソフトでも構いませんが、DreamWeaverプラグインTopStyle（最新バージョンはPro V3.12）の使用を推奨します。
質問 3: HTML と CSS はどちらを先に作成すべきですか?
インターネットには、最初に HTML を作成してから CSS を作成する、最初に CSS を作成してから HTML を作成する、両方を同時に作成するなどの答えがたくさんあります。私は両方を一緒に書く傾向があります。最初に CSS を書くか、最初に HTML を書くのは初心者には適切な方法ではありません。ある人にコードを書くよう依頼し、最初に HTML を書くように指示した場合、HTML は書いた後に変更することはできません。それから CSS を書くことができるのであれば、その人は非常に高レベルのビルダーに違いありません。したがって、初心者向けに、ほとんどの場合、同時に書くことをお勧めします。具体的な手順を説明します。
まず、サイトとディレクトリを構築する必要があります。たとえば、CSS と IMAGES というフォルダーを作成します。次に、新しい HTML ファイル、style.css、および空のスタイル シートを作成します。 HTML ページをこの外部スタイル シートに追加します。
次に、最初に DIV を使用して最も基本的なレイアウト パーツを HTML で記述し、次に ID または CLASS を DIV に直接追加します。これらのレイアウト パーツには、外側の部分、ヘッダー部分、中央の部分、左側、中央、右側が含まれます。 、著作権部分など。
これらを記述した後、スタイル シートに移動してスタイルを記述することも、レイアウト内のパーツを引き続き記述することもできます。例としてヘッダーにロゴの部分を記述し、ID や ID を追加します。 CLASSをNAV部分に追加します。他の人にも同じことが当てはまります。
HTML 部分を一度に書くのは不可能だとなぜ言えるのでしょうか? アイデアを書くプロセスやブラウザの互換性の問題が原因で発生する可能性があるからです。欠点は事前に予測されていないため、スタイルの作成時に問題が見つかった場合は、HTML コードを変更する必要がある場合があります。これは、HTML/CSS を同時に使用することもできます。コードを書くときは、1 つの文を書いてテストするのではなく、コードを書いてから、IE6 と FF を同時にテストします。 。ほとんどの場合、優れた開発者は、長期間にわたってコードを作成した後にテストします。これは、経験が豊富であれば、ブラウザのエラーの発生を事前に認識して防止できるためです。そのため、経験の浅い人よりも早くコードを書くことができます。あなたが経験しているエラーを彼らはすでに経験しています。間違ったブラウザ表示の問題に初めて遭遇したときは、それを修正するのに時間を費やす必要がありますが、彼らはそれを事前に防止したり、問題をすぐに解決したりすることができます。これがあなたと彼らの違いの 1 つです。
初心者と上級者のもう 1 つの違いは、上級者は多くのショートカット キーを使用するため、よく使用されるショートカット キーを覚えておくと、細かい点が少しずつ改善され、それらを組み合わせることで大きな改善が得られます。
さらに、自分のレベルを向上させる最善の方法は、もっと練習して、コーディングの練習に適した HTML+CSS テンプレートを見つけて、最初に簡単なものを選択し、ページのスクリーンショットを撮り、それについて独自のアイデアを使用することです。画像を HTML ページに復元します...