初心者向けフロントエンド ゲーム (パート 2: Visual Master CSS)_html/css_WEB-ITnose

元の投稿者はフロントエンドに携わって 1 か月で、フロントエンドの初心者です。以下に述べたことはすべて、情報を参考にし、先輩の説明を聞き、私自身の理解を加えてまとめたものです。私の言ったことに何か間違いがある場合は、批判されてもかまいませんが、質問がある場合は、助けて修正してください。ありがとうございました^ ^ この記事は元の投稿者によって一字一句暗号化されています。転載する場合はその旨を明記してください。この記事は一連のチュートリアルの 1 つであり、フロントエンドの初心者が始めるのに適しています。興味がある場合はフォローしてください。

前回の記事で、著者はフロントエンドについての見解を簡単に説明し、HTML について説明しました。彼は長い間フロントエンドに触れていないため、認知的な限界があるはずです。文句を言って私を正してください。前回の記事の名前は Xiaobai のフロントエンド ゲームです (パート 1: フロントエンドがどれほど魅力的であるかがわかりました。興味のある学生はフロントエンドをこのようにする必要があると思います)。それをチェックしてください。

---

前の記事で HTML について触れたので、この記事ではその良き友人である CSS について話さなければなりません。江湖の人はよく「人のいるところには江湖があり、HTML があるところには必ず CSS がある」と言います。 CSS と HTML の関係は、調味料の袋とインスタントラーメンのようなものです。 調味料の袋が入っていないインスタントラーメンは食べられますが、食べにくいです... (私の乱暴な文体は無視してください。私はコンピュータ専攻を選択した瞬間にそう感じました)若い頃、私はすでに宮殿でナイフで自殺していました - いや、自殺したんです、TAT)。

CSS、英語の正式名は Cascading Style Sheets、中国語訳は Cascading Style Sheets です。

CSS テクノロジーを使用すると、色、フォント、サイズ、配置などの設定など、HTML 内の要素を変更できます。これは非常に強力です。どれくらい強力ですか?フロントエンドとデザイナーが衝突することがよくあることは誰もが知っているはずですが、それは、デザイナーの頭の中にあるデザインコンセプトと伝えたい視覚効果がフロントエンドによって誤解され、それによって異なる外観が表示されることがよくあります。 , どちらが悪いと言っているのではなく、重点を置く分野が違うだけです。このときCSSの力が反映されます。一言で言えば、HTML とビジュアル デザインは互いに何の関係もありません。これらはすべて CSS の外観に依存しています。

1.CSS は変更したい要素をどのように見つけますか?

セレクターを使用して要素を選択します。一般的に使用されるセレクターには、クラス セレクター、ID セレクター、属性セレクター、子孫セレクターなどが含まれます。 CSSには継承関係があり、子要素は親要素のスタイルを継承します。親要素のスタイルを離脱したい場合は、子要素のスタイルをリセットする必要があります。理解できない友達は、W3School の例を見てください。クラス セレクターでは重複が許可されますが、ID セレクターでは一意のみが許可されるため、必要がない場合は ID セレクターの使用は控えめにしてください。また、プロジェクトに携わるプログラマーは 1 人だけではない可能性があります。

2. フロートとは何ですか?

フローティング、フロートは CSS によって要素に追加されるスタイルです。フロートに設定された要素はフローティングになり、コンテナーのコントロールを受け入れなくなります。唯一の例外は、コンテナーがその子要素とともにフローティングになる場合であり、子要素はコンテナーのコントロールを受け入れます。コンテナが浮いていないように結合されます。 Float はページレイアウトでよく使用される要素です。フローティング要素がコンテナ内にない場合、コンテナにはコンテンツがありません。このとき、初心者はコンテナの高さを設定することでこの問題を視覚的に解決します。表面上は解決されますが、コンテナはまだ空です。正しい方法は、空の div ブロックを追加し、clear:both 属性を設定することで解決できます。

3. ページレイアウトにはどのような知識が必要ですか?

色やフォントなどについては説明せず、レイアウトについてのみ説明する場合は、次の点に注意する必要があります: - ブロックレベル要素の内側の余白のパディング、外側の余白の設定、要素を中央に配置するためのヒント自動。 - フロート: フロート。上で述べたので、これ以上は言いません。・絶対位置決め、相対位置決め。絶対位置指定の使用はお勧めしません。 -オーバーレイ。z-indexを使用して、相対位置を前提として要素に値を追加します。大きい値が最初に表示されます。 -思いついたら追加していきます…

4. ほとんどの問題は、ネットで情報を検索することで解決できます。フロントエンドで最も重要なのは、知識をどれだけ学んだかではなく、問題を解決する能力があるかどうかです。 5. 実際のフロントエンドでは、「完璧な」ページを作成することはできません。 6. 上記はすべて私のナンセンスです。ご覧いただきありがとうございます。