XHTML CSS Webページ制作における美しいスタイルシートの適用_HTML/Xhtml_Webページ制作

これはかなり前に書かれた記事ですが、jb51.net で事例を学ぶと同時に、知識のブレークスルーにもなるでしょう。ヘルプ。さあ、みんな！

ゼルドマン氏の傑作『Designing with Web Standards』（中国語版は『Website Reconstruction』（第 2 版））を読んで以来、Web を活用するという私の考えが強くなりました。私たちのプロジェクトを開発し、実装します。しかし、Web 標準とは何か、そしてそれを実際のプロジェクトに適用する方法について少し知っているだけでは十分ではありません。 Web 標準の各コンポーネントを 1 つずつ学習して適用し、それらを 1 つずつ分解して本質を発見する必要があります。私のような Web 開発者やデザイナーにとって、この原則を理解し、的を絞った学習と実践を行えば、より多くの成果が得られると同時に、中国における Web 標準の適用に貢献できると信じています。 (はは、これは少し自慢かもしれませんが、実際、私たちほとんどのソフトウェア実務者の理想です。)

今は Web2.0、さらには 3.0 の時代、XHTML、XML、CSS の時代です。 、ECMAScript および DOM。これらは最終的なテクノロジーではありませんが、組み合わせてソリューションになります。下位互換性のある Web サイトを構築する計画の基礎であり、Web 標準に準拠した Web サイトを作成するために必要な技術的基盤でもあります。ユーザーの支持や訪問数を増やすだけでなく、ユーザーの注目を長く集められる、長く使える美しいウェブサイトを構築したいと考えています。 Web サイトを改善するために CSS の使用方法を学ぶことは、彼らの注目を集める良い方法であり、Web2.0 時代の流行の開発トレンドでもあると私は信じています。以下では、私が CSS テクノロジーから得た経験についてのみ話します。

CSS エキスパートになるには、CSS セレクターの使用に習熟するだけでは十分ではありません。また、作業の全体的な計画、ワークフローの習得、スタイル シートの保守性と効率の向上にも関係します。 CSS を使用すると、希望する素晴らしい Web サイトを作成できます。CSS を書くこと自体が楽しいです。 では、より魅力的なスタイルシートを作成するにはどうすればよいでしょうか?スタイルシートにはどのような機能が必要ですか?私自身の仕事の経験を学び、組み合わせることで、美しいスタイルシートを作成するための一連の優れた方法をまとめました。

1. CSS にタグを付けすぎないようにします

スタイル シートのリンクやインポートは、無知な作業のように聞こえるかもしれません。多くの Web サイト開発者がきちんと整理された CSS ドキュメントを持っているのを見てきましたが、短期間で迅速に更新できなかったり、管理するのが面倒だったりするため、以前に作成した絶妙なスタイル シートが徐々に変わっていきます。ごみ。何百ものコンテンツを公開する必要がある巨大な Web サイトで作業しているとします。時間は限られているため、CSS をネストしたり配置したりして、迅速な変更や更新を行う必要があります。この習慣は時間が経つにつれて続き、ある日、サイトが完全に再設計され (ただしコンテンツは同じです)、サイトの作成期間は (テストを含めて) 1 週間しかないと言われるまで続きます。一般に、スタイルシートの更新は非常に簡単な方法であり、長期間にわたって Web サイトの点在する領域を修正しなければ、Web サイトのスタイルシートの構造を全体的に把握することはできません。

スタイルシートのリンクまたはインポートは任意ではありません。きれいなスタイルシートを作成して維持すると、仕事がより楽しくなります。注: 新しいコンテンツを更新または追加するたびに新しいスタイルシートを作成しようとすると、間違いなくトラブルが発生します。リンクやインポートされたスタイル シートが多すぎると、バグを排除することが難しくなり、スタイル シートの保守が困難になります。大規模な Web サイトでは、さまざまな部分に個別のスタイル シートを作成することは理解できます。ただ、極端にならないように注意してください。スタイルシートを大量に追加すると、http リクエストが増加し、その後の作業に影響を与える可能性があります。

2. セマンティック定義は明確で理解しやすいです

表現するために最も適切で意味のある要素を選択することに加えて、クラスと ID も選択する必要があります属性値。明確に定義するとメンテナンスが容易になり、チームの全員がそれを理解できるようになります。この定義を見てください:

.l10k { color: #369; } , .left-blue { color: #369; } これが私によって作成されたものであれば、それが何を意味するのかわかるかもしれません。他の人と同じではありません。たとえ今日その意味を知っていたとしても、何年後もその意味を知っていると保証できますか? 色や長さ、幅の寸法をクラス属性に追加しないことをお勧めします。より適切な命名規則: . work-description { color: #369; }

3. 条件付きコメントと適用テクニックを追加するタイミングを理解する

条件付きコメントは、IE の公開を制御するための優れた方法であるという問題解決テクニックについて多くの記事で書かれています。 CSS ドキュメントをいじるよりも条件付きコメントの方がはるかに優れているという意見には同意しますが、最近、これが最善の解決策ではないことを示す証拠がたくさんあることに気づきました。要素の最小の高さを設定したいと考えていますが、IE6 はそれを実装していないため、使用できる高さも同じように扱われることがわかっています。新しいスタイルシートを作成し、マークアップに条件付きコメントを追加する必要があるのは、このルールに従うことだけですか?最小の高さと高さのルールをまとめて、同じ CSS ドキュメント内でトリックを選択する方が良いのではないでしょうか?この場合、このアプローチを使用するのは難しいと思います。

4. Web ページに CSS を適用するときに外部スタイル シートを使用してみてください

何かメリットはありますか?もちろん、コードを最大限に再利用し、Web サイトのファイル構成を最適化できることは否定できません。
上記は私の個人的な意見の一部です。あなたの提案が私に困難に挑戦する動機を与えてくれることを願っています。ありがとう！

上記は、XHTML CSS Web ページ制作における美しいスタイル シートの適用_HTML/Xhtml_ Web ページ制作に関する詳細については、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。