css_html/css_WEB-ITnose の使用を開始するための詳細なチュートリアル

webrootフォルダーで最初に新しいCSSファイルを作成します。レンダリングは次のとおりです。

"href =” style.css” /＆gt;

＆lt; /head＆gt;宣言は属性と値で構成されます。ルールには複数の宣言を含めることができます。もちろん、カンマで区切って複数のセレクターを指定することもできます。この例では、h1 がセレクター、color と font-size が属性、red と 14px が値です。

h1{color:red; font-size:14px;}

h1,h2,h3,h4,h5,h6{

color: green;

}

簡潔かつ明確に見せるために、ステートメントは 1 行で入力します

属性と値を区切るには「コロン:」を使用します

セミコロン「;」が必要であることに注意してください

セレクターと宣言を区切るには「スペース」を使用します

かっこ「{}」ラップされています

どの程度が適切かわからない場合は、直接検索できます

4 CSS セレクター はじめに

4.1CSS 要素セレクター

はタイプ選択とも呼ばれます コンテナは、の要素ですhtml (p、a、h1 など) は html 自体の場合もあります。 F {h1 {FONT-FAMILY: Sans-Serif;}

4.2CSS セレクター グループ

複数の要素を結合します

HH1, H2, H3, H4, H6 {color: blue: blue }

3 3 4.3 Selerator

& & lt; h1class = "重要" & GT; s = "重要">

この段落は非常に重要です。

必要な場合のみh1 要素に変更を加えます

h1. important{color:blue;}

すべて同じクラスに変更を加えたい場合は *. important {color:red;}

もちろん、省略することもできますアスタリスク「*」

ただし、クラスの前のドット「.」に注意してください

4.4 ID セレクター

HTML ファイル内

導入の段落。

CSS ファイル内

#intro{font-weight:bold;}

まず、HTML ファイルで ID 名を作成し、CSS ファイルにID 名にポンド記号「#」を追加します

4.5 属性セレクター

a 要素の属性など、特定の要素の属性に適用できます href

a[href]{color:red;}

これにより、リンクのフォントが赤になります

4.6 子孫セレクター (セレクターを含む)

子孫セレクターは、要素の子孫である要素を選択できます

HTML ファイル内

これは 重要 見出し

これは重要の段落です。 p>

CSSファイル内

h1em {color:red ;}

その効果は、上記の重要な部分のみが赤になることです

4.7 pseudo-class

たとえば、html

の効果は、最初の「一部のテキスト」のみが赤くなります。 red

4.8 疑似要素

HTML ファイル内

:first-letter 疑似要素を使用して、テキストの最初の文字に特殊効果を追加できます。

CSS ファイル内

p:first-letter

{

color:#ff0000;

font-size:xx-large

}

このようにすると、頭文字「Y」が赤くなり、大きくなります。

最後に、いくつかアドバイスをさせていただきたいのですが、w3shcool には、Web サイト開発の初心者向けに比較的大規模な入門トレーニングが用意されています