共通CSS3セレクターとテキストのフォントスタイルの概要

含む共通CSS3セレクター:実質的に共通の属性、疑似クラス階層(コンビネーション)選択は、特定の使用に関する推奨事項が読み出さCSSセレクタ4つのカテゴリ:基本的な、組成、特性、擬似クラスが使用セレクタありますセレクタ要素を見つけ、スタイル属性に追加することを役割の基本的な理解。

一般的な選択肢があります:タグ、ID、クラス、関連(親セットを通してサブセットを見つけるために)組み合わせセレクタで、ノートhtmlページIDは一意であり、実質上の選択は、(/ * / *コメントを表します)、/ *:最初の子の最初の要素* / / * : 最後の要素の最後の子* / / * :n番目の子(N) いくつかの要素の* / / * ::初段ラインの最初の行の* / 、/ * ::単語の最初の文字/文字* /、およびレベルを選択し、擬似クラスセレクタに続くAB子孫、A> Bのサブ要素、要素B(隣接セレクタ)の後ろに+を有し:ホバー,:フォーカスフォーカス、::テキストの背景色を選択するために、マウスを変更するための選択、実質的に最後の属性セレクタ基本セレクタ[特性](直接とタグ本体に使用することができる属性セレクタ・オブジェクト属性)セレクタ[属性=値]、実質的にセレクタ[〜のattribute = value]スペースはどの端部に実質的にセレクタ[$属性=値]を始めるもので[^のattribute = value]実質的に複数のセレクタによって分離されました。(備考:チュートリアル16年、今いくつかのセレクタの名前とは非常に一貫性がない、それは基本的なセレクターや擬似クラスの心をお勧めします、ボーエンはとつながっ前に自由に4つの関連CSSセレクタコメントは)いくつかの興味深いスタイルは次のショーを書くことがあり、ここで、別の場所でメッセージをお待ちしております。

1  <!DOCTYPE HTML > 
2  < HTML のlang = "EN" > 
3  < ヘッド> 
4      < メタのcharset = "UTF-8" > 
5      < メタ= "ビューポート" コンテンツ= "幅=デバイス幅、初期スケール= 1.0" > 
6      < タイトル> CSS3选择器和文本字体样式</ タイトル> 
7      < スタイルタイプ= "テキスト/ cssの" > 
8      のdiv ::
 F90位; 
10      } / * 最初の行* / 
11      div- ::最初の文字{ 
12は         フォントスタイルイタリック; 
13で         、フォントサイズ24ピクセル
14      } / * 最初の単語/文字* / 
15      ■は>李:最初子供{ 
16          リストスタイルスクエア; 
17。     } / * 最初の要素* / 
18であり、     ■は>のLi:ラスト子供{ 
19。         一覧スタイルなし; 
20      }/ * 最後の要素* / 
21であり、     ■は>のLi:テラス、N番目(3){ 
22は、         リストスタイル下位ローマ; 
23である     } / * N番目の要素* / 
24      DIV選択:: { 
25          地色レッド; 
26は、 #FFF ; 
27      } / * テキストの背景色の変更を選択する::選択マウス* / 
28      INPUT { 
29          概要なし; 
30      } / * デフォルトを置き換えるために、テキストフォーカス、境界線の色* /
31      </ スタイル> 
32  </ ヘッド> 
33  < ボディ> 
34      < UL クラス= "ボックス" > 
35          < リチウム> 1 </ > 
36          < リチウム> 2 </ > 
37          < リチウム> 3 </ > 
38          < リチウム> 4 </ > 
39          < リチウム> 5 </ >
40      </ UL > 
41である     < DIV > 
42である         「チャンネルなしブックとしてブックにする:Iに」私は本を信じてやる「」孟子「」専用章が低下「ちょうど二十から三ポリシーを運ぶから取られた」と呉。それは良くありませんブックよりも「これは、デ読書法による華麗で、独立した思考が得意であることを読者に尋ねる。」「書く方が良いです 、次の文よりもブックずに手紙を:私は」呉チェン「で午前2または3を取ります「最後の手紙Aブックの中で持っているように私AM A良い。」、「章ザ・ハートの下には、」孟子strategies.Itからは独立して考えることを読者リーダーが必要です。「
 43がある     。</ divの> 
44がある     < フォームアクション」=「メソッド=」 GET " > 
45          フォーカス:< INPUTの種類="テキスト」 > 
46      </フォーム> 
47  </ ボディ> 
48  </ HTML >

CSS3で「フォント」フォント:/ *フォントファミリ:フォントの種類* /、/ *フォントサイズ : フォントサイズ* /、/ *フォントスタイル :itailc 斜体* /、/ *フォントの太 : コントロールのフォント量サイズ* /読書をお勧め一般的に変換するフォントの多様性を制御するために使用するCSSフォントスタイルコンテンツは基本的に同じことを紹介します。

単語の間隔、単語間隔:単語の間隔、テキスト装飾:下線、テキスト整列:テキストの配置、テキストインデント:就任のインデント、行の高さ文字間隔されているテキストスタイルの共通スタイルを扱うCSS3 :行の高さ、色:テキストのフォントの色、単語ブレーク:ブレークすべてのテキストの折り返し。悪意の入力テキスト情報、例えば、単一の文字ですが、どのように行うためにあれば、多くの場合、レンガの壁は今、戻ったヒット言いますか?あなたはそれがブラウザでラップし、スクロールバーが表示されますの下、上から下へ、このショーの一般的なHTMLドキュメントが、これを表示するには、左から右へページ、どうすればよいですか?ソリューションはdiv.box2を参照してください、自分自身を記述していないことがわかります次回、ブラウザの表示、深い印象は、当然のことながら、このような場合は、すべての後に、少数派でページレイアウトされている、または見て良いの行を変更し、外国人は今も例外ではありません!

1  <!DOCTYPE HTML > 
2  < HTML のlang = "EN" > 
3  < ヘッド> 
4      < メタのcharset = "UTF-8" > 
5      < メタ= "ビューポート" コンテンツ= "幅=デバイス幅、初期スケール= 1.0" > 
6      < タイトル>有意思的ワードブレーク:ブレークすべて文本折行</ タイトル> 
7      < スタイルタイプ= "テキスト/ cssの" > 
8      のdiv。
 BREAK-すべて; 
10          オーバーフロー自動; 
11。     } / * ワード-BREAK:すべてBREAKラップテキスト* / 
12がある     </ スタイル> 
13がされる </ ヘッド> 
14  < 身体> 
15      <! - デフォルトのテキストはラップです- > 
16      < のdiv クラス= "BOX1" > 
17。         「ノーブックの次の文のように、すべての本を信じて:私に」呉本は良くありませんブックよりも、すべてを信じている「」孟子「からちょうどを続けていく二十から三政策を取る。」「および」章の下の献身「これがオフを通して素晴らしいですへ。 「独立した思考で読者の良いを求め、方法を読んで」書く方が良いです 、次の文よりもブックずに手紙を:私は午前「呉チェン以下の」そしてそれは孟子から2つのまたは3つの戦略を取ります。「 章ハート「」...に個別に考えるの読者読者必要とする」最後の本の中で持っていると良いの文字です 
 18      </ divの> 
19       <! - -しかし、この悪意の入力テキストを、ブラウザでそれを見つけるだろうラップ、およびスクロールバーが表示されますの下、上から下へ、このショーの一般的なHTMLドキュメントが、左から右へのページでは、これを示すために、ソリューションをどのように行う、div.box2が表示されない?- > 
20      < のdiv クラス=「BOX2 " > 
21         aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
22      </ divの> 
23  </ ボディ> 
24  </ HTML > 

おすすめ

転載: www.cnblogs.com/dhnblog/p/12333966.html