CSS基本に戻る用語解説
CSSまたはCascading Stylesheetsは、Webのデザインルールの定義言語を完成させます。世界中のアーティストが日常的にCSSを使用して、基本的なWebサイトのレイアウト用のルールセットを作成、整理、およびエンコードしています。これはフロントエンド設計のための最も普及した言語になり、CSS3の最近のリリースで驚くべき能力を提供します。しかし、このコードすべてが実際に何を意味するのか?
言語自体は、ここ数年で完全に開発されました。混乱は、主に誤解と同様の用語の誤用が原因で発生する可能性があります。 CSSはテーブルに多くの新しい概念をもたらします。 CSSの達人として習得するための最も一般的な用語をいくつか取り上げます。.
CSSに特化する理由?
この問題は以前に提起されており、2011年に入っても同じ結果が出ているのがわかります。 CSSは、スクリプトやプログラミングには適していない堅牢な言語です。これはスタイル言語です。具体的には、Webページの動作を説明するためのコードです。.
CSSを使用して、個々のHTML要素から直接属性を操作することができます。すべてのブロック、段落、リンク、および画像はCSSルールによって影響を受ける可能性があります。 Web用のプレゼンテーションセマンティクスを改良することは、常に大きなステップでした。これが、CSSが依然としてデザイナーのトッププレーヤーである主な理由です。!
プロパティと値
これはCSSに侵入する最も簡単な方法です。すべてのコードは、デザインを適用する要素と適用する要素を選択するという2つのアクションに分類されます。後者は、プロパティと値のペアによって作成されます。.
例として 赤色; 非常に単純なプロパティと値のペアです。私たちが使用したプロパティは 色 許容できるものを渡すことができます 値 テキストの色を変更します。これは16進コードまたはRGB（赤 - 緑 - 青）カラーデータである可能性もあります。それは誤解を招く可能性があるため、多くの場合、デザイナーは値のアイデアに言及しません.
プロパティと値は本当に一つのアイデアです。すべてのプロパティ宣言は値を必要とし、それ自体の値は無意味です。オンライン上には多くのドキュメントがあり、さまざまなプロパティとそれらがHTML要素に与える影響について説明しています。 CSSレファレンスブックを近くの書店から購入することをお勧めします。それらはかなり安く、あなたが必要とするであろうほとんどすべての情報を保持しています.
セレクタ値
CSSコードの全行を完成させるにはセレクタが必要です。これらは、ターゲットとしている要素の種類を設定するために宣言したものです。多くのセレクタがあり、多くの人が複雑なので、平均的なデザイナーはスキルを必要としません。もっと知りたいのなら、W3のセレクターのドキュメントをチェックしてください。.
スタイル定義を始める最も簡単な方法は、プロパティセレクタとしてベア要素を使うことです。これは次のようなルートコードを操作することを意味します。 p 段落用, div 部門、さらには 体 そして html Webページ文書全体を操作するために使用できます。以下は、すべての段落要素をスタイル設定する簡単な例です。.
p font-family：Arial、Sans-Serif;色：＃222。フォントの太さ：太字。
CSSに本当の重みを与えるのは、セレクターの狙撃がどれほど正確に行えるかということです。ターゲットを絞ったスタイルを実現するための最良の方法は、として知られている2つの方法です。 クラス そして ID. これらはHTMLの一般的なアイデアであり、属性を通じてIDとクラスの値を持つように任意の要素を設定できます。それからCSSを使うと、その特定のブロックにスタイルを適用するのは簡単です。.
p＃firstpar フォントサイズ：14ピクセル; / * "firstpar"のIDを持つ段落のスタイル* / p.comment font-size：1.0em;行の高さ：1.3em。 / * "comment"のクラスで段落をスタイルする* /
長さの単位と値
多くの場合、これらの用語は混同されていますが、それほど大きな驚きではありません。値は、プロパティを記述するために使用する配置として以前に説明されています。長さの単位は、プロパティを説明するために使用されるという点でも値です。.
違いは、これらの値は数値データを必要とし、したがって何らかの形の単位を返さなければならないということです。ピクセル（px）が最も普及しており、ほとんどすべてのものに使用できます。幅/高さ、フォントサイズ、余白/余白など.
これら以外では、流動的なレイアウトを通じて使用される割合（％）がわかります。幅の値をパーセントに設定すると、コンパイラは100％をWebブラウザの全幅と見なします。これは、レイアウト構造やページのタイポグラフィにスタイルを適用する際に、デザイナーに非常に高い精度を与えます。.
宣言ブロック
これらの用語をすべてまとめた後で、スタイルシートの背後にある基本的な考え方について議論することができました。コードブロックは、トピック領域を詳細に示し、要素の詳細を指定するために使用されます。たとえば、以下は単純なナビゲーションコンテナのコード行です。
div＃nav display：block;幅：100％。パディング：3px 6px。マージンボトム：20px。
このコードを表示する最も簡単な方法は、プロパティを次々に並べることです。 CSS開発者は、各プロパティを独自の行に分割するためにコードブロックを使用しています。この議題は、はるかに多くのスペースを占めるだけでなく、 “スキム” 必要なものを正確に見つけるためのシート.
コードのブロックを分割するためのより良い方法は、それらがしきい値に到達した後に、複雑な要素をそれら自身のものに分離することです。この数は個人的なもので、開発者によって異なります。ロジックが、読みやすさのために、すべてを1行に収めることが愚かな指示となるのは転換点です。.
以下に、ナビゲーションプロパティのブロックの例をまとめて書きました。これにより、より深い要素を同じ場所に配置できるため、すべてのナビゲーション要素を編集するのがはるかに簡単になります。.
div＃nav display：block;幅：100％。パディング：3px 6px。マージンボトム：20px。 div＃nav ul リストスタイル：なし;表示ブロック; div＃nav ul li float：left;;右マージン：10px。フォントサイズ：12px。 div＃nav ul li a 色：＃0f0f0f;テキスト装飾：なし。表示：インラインブロック。パディング：2px 5px。
CSS2 / CSS3からの可能な進歩
最近の見出しでは、CSS3から得られる驚くべき利点について話題になっています。しかし、本当に何が かわった 言語で？明らかに古いコードでも問題なく動作します。これは少なくともコンパイラ間の完全な後方互換性を示します（常に良いことです）。.
主な違いは、主に新しい施設に関連しています。これらは、丸みを帯びた角と影付き効果をブラウザ内でレンダリングすることを可能にします。 CSS3は文書内の色を記述するための新しいツールも提供します。不透明度を減らすためのアルファチャンネルを含むHSLAに加えて、HSL（色相 - 彩度 - 明度）が最新です。.
属性セレクタは、直線的なマークアップスタイルに関して大きな前進です。このスタイルのコードでは、特定の値を持つ属性を含む特定の要素名をターゲットにすることができます。ノードを操作するための標準的な設計原則が存在しないXMLのようなマークアップを扱うとき、これらは主に役に立ちます。以下の例は比較的単純な考えです。
div [attrib ^ = "1"] / *こちらのスタイル* /
上記のコードはCSSセレクターライブラリーの一部です。これは属性を持つすべてのdiv要素に影響します “属性” これも値を保持します “1”. それでも混乱を招く場合は、以下の例を参考にしてください。理論的には、これら2つのセレクターは同じアクションを実行します。.
p [id ^ = "primary"] / * styles * / p＃プライマリ/ * styles * /
結論
最も混乱しやすい用語のいくつかを分解した後、CSSは公園を散歩しているように見えます。言語は非常に直感的で初心者は手元の最初の数時間以内に設計を始めることができます。これがCSSがWeb開発者の間でとても人気がある理由です.
CSS3の利点は、効果が現れ始めたばかりです。新しい数年間で、進化するWebトレンドは、Webページのデザインをどの程度管理できるかを示しています。 CSSは現在、フロントエンドWebサイトのスタイル設定の主要言語として誇りに思っています。初歩的な中級レベルのスキルまで練習することで、豊かなデザイン体験とさらなる知識を生み出すことができます。.
