CSSルールとは何ですか

CSS ルールとは何ですか?

ここに 31 の CSS 文法ルールがあります:

1 . cssの略語ルールを上手に活用しよう

/*上下左右の書き順に注意*/

1.余白(4辺)について:

1px 2px 3px 4px (上、右、下、左)

1px 2px 3px (省略された左は右に等しい)

1px 2px (省略された上は下に等しい) )

1px (4 辺すべてが同じ)

2. すべてを単純化します:

*/ body{margin:0}-------- ---Web ページ内のすべての要素を表します。マージンは 0

#menu{ margin:0}-----------メニュー ボックスの下のすべての要素のマージンを意味しますは 0

3 です。略語 (ボーダー) 固有のスタイル:

ボーダー:1px 実線 #ffffff;

ボーダー幅:0 1px 2px 3px;

4. テキストの略語規則:

Font-style:italic; italic form

Font-variant:small-caps/normal; Variant style: small-caps/normal

フォントの太さ:太字;

フォントサイズ:12px;

行の高さ:1.2em(120%)/1.5em(150%);

フォントファミリー:arrial、sans-serif、verdana;

省略形:

フォント:イタリック小文字太字 12px/1.5em arrial、sans-serif;

注: フォント サイズと行の高さが使用されます。スラッシュを組み合わせて個別に記述することはできません。

5. 背景画像について:

Background:#FFF url(log.gif) no-repeat fixed top left;

6. リストについて:

リスト スタイルの種類:正方形/なし;

リスト スタイルの位置:内側;

リスト スタイルの画像:url(filename.gif);

は次のように省略されます:

List-style:none inside url(filename.gif)

2. 4 つの方法を使用して CSS スタイルを導入します

1.link

rel relationship

type データ型、たくさんあります

href path

一部のブラウザでは代替スタイル、キーワード: alter:

2. 内部スタイル ブロック

h1{color:red;}

–>

3.@import

@import url { a.css}

注: このディレクティブは、すべてのスタイルの前に、

HTML コメント、

4.インライン スタイル

セレクターは CSS の基本概念です。基本ルールは次のとおりです:

1. ルール構造:

h1 {color:red;}

Selector {属性: 値;}

このタイプは要素セレクターであり、基本的にすべての HTML 要素を含めることができます

属性値には、border: 1px などの複数の要素を含めることができます。赤一色;

共通構文

1) グループ化:

セレクターと宣言の両方をグループ化できます:

h1,h2,h3{color:red ;background:#fff ;}、セレクターは「,」で区切られ、属性は「;」で区切られます

2) クラスセレクター、つまり class="stylename"# を通じて適用される宣言

##定義:

.stylename{color:red;}

注:

HTML では、class= などの複数の選択カテゴリを使用できます。 cn1 cn2 cn3''

3) ID セレクター、つまり ID 属性に対応するスタイル

Definition:

##a{color:red;} ->この定義は、id="a"

2 を持つ要素用です。この部分は、一般的な CSS 構文です。珍しいセレクター構文について説明しましょう

1) 親子構造。ドキュメント構造図

#p span {border:1px Solid red;} などは、

の下の

タグに対応しており、非常に便利で正確に配置できます。

一部の特殊なアプリケーション (IE7 サポート):

(1) p > span{}、すべての p

(2) p span{} の下のすべてのスパンに一致、最初の span タグに一致p 要素の直後に表示される場合、この 2 つは同じ親タグを持つ必要があります。

2) 属性セレクター: (注: 属性セレクターは IE7 でのみサポートされており、以下のバージョンではサポートされていません。その他のブラウザーでは、基本的にはできます)

構文: img [alt]{border:1px Solid;}

は、alt 属性に対応する img タグを示します。もちろん複数の属性の対応にも対応できますが、 img[alt][title]{}; など、両方の属性を示します 一部の img タグは、次のような特定の値にも対応できます: img[alt="CSSルールとは何ですか"]{};

属性の高度なアプリケーションセレクター、特別な一致:

(1 )img[class~=”b”], ~=: 属性の値に対応します。つまり、 に対応します。

(2)[class^=” a”],

(3)[class$=”a”] a で始まる、

(4)[class *=”a”] a で終わる、

#(5)[class|=”a”] を含む、a または

3) 疑似クラスと疑似要素

は主に日常使用で使用されます タグのいくつかの疑似クラス: link:hover:active:visited

および: first-child:first:before:left:right:lang: focus:fist-line など。

注: 動的疑似クラスは任意の要素に適用できます。たとえば、input:focus{background:red;}input タグがフォーカスを取得すると、背景が赤に変わります。

上記の構文を組み合わせて使用​​すると、正確な位置決め、シンプルかつ間接的なスタイルを実現できます。

3. セレクター分類の統合

优先级别遵循：行内样式 >ID > Class >标记

基本选择器 标记选择器（eg:

） 

类别选择器(eg:class) 

ID选择器 

复合选择器 “交集”复合选择器(eg:p.menu{color:red}) 必须是标记+类别/ID组合 

“并集”复合选择器(eg:h1,h2,h3{color:red}) 

“后代”复合选择器(eg: #menu .menulist{ ... }) 

“子” 复合选择器(eg: #menu .menulist .selectit { ... })

四、 使用子选择器减少id和class的定义

示例结构：

content

CSS の例:

#menu { ... }

#menu .menulist { ... }

#menu .menulist .selectit { ... }

5. グループ セレクターを使用して、h1、h2、h3、div{font-size:16px;font-weight: などの異なる要素に同じスタイルを適用します。太字}

h1、h2、h3、div 要素のスタイルはすべて 16 ピクセルのフォントで太字になります

6. 疑似クラスとセレクターの使用

疑似クラスとクラスを組み合わせることで、同じページ上に異なるリンク効果のグループをいくつか作成できます。たとえば、あるリンクのグループはアクセス後は赤と青、別のグループはアクセス後は緑と黄色になるように定義します。

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue:link {color: # 00FF00 }

a.blue:visited {color: #FF00FF}

別のリンクに適用されました:

これは最初のリンク セットです

これは 2 番目のリンク セットです> ;

7. CSS の最新の優先順位の原則

/*要素に複数のスタイルが定義されている場合、最新のスタイルが優先され、最新のスタイルが他のインライン スタイルをオーバーライドします。 > ;ID > Class >Mark*/

以下は参照フラグメントです:

CSS:

p{color:red}

。 blue {color:blue}

. yellow{color: yellow}

HTML:

これは赤色で表示されます

これは青色で表示されます

これは緑色で表示されます

/p>

これは黄色で表示されます

注:

(1)スタイルのいくつかの優先順位 (優先順位は上から下に下がり、次のスタイルは上記のスタイルをオーバーライドします):

--要素のスタイル設定

--見出し領域

--外部参照cssファイル

(2) 優先度はアクセス順ではなく、css内の宣言順で設定します。

上記の例では、CSS 定義では . yellow が .blue の後にあるため、

はここでは黄色として表示されます

も黄色として表示されます。

8. 正しいリンク スタイルを記述します

CSS を使用してリンクのさまざまな状態を定義する場合は、最初の :link :visited :hover :active の記述順序に注意してください。文字: L V H A 、LoVe、Hate の 2 つの単語を覚えることで順序を覚えることができます。

:link --------リンクの色

:visited -----マウスクリック後の色

:hover -- --- --マウスを置いてクリックしていないときの色 (ホバー)

:active--------マウスをクリックしたときの色

9. 柔軟な使い方:hover

IE6 は a タグ以外の :hover 属性をサポートしていませんが、:hover 属性はマウスホバー効果であると理解しています。 IE7 および FF では、ほぼすべての要素に :hover 属性効果を設定できます。これは、さまざまな訪問を行う場合に非常に効果的です。

例:

p {

width : 360px;

height : 80px;

padding : 20px;

マージン : 50px 自動 0 自動;

ボーダー : 1px 実線 #ccc;

line-height : 25px;

背景 : #fff;

}

p:hover {

ボーダー : 1px ソリッド #000;

背景 : #ddd;

}

- ---------------この効果は IE7 および FF

p a {

color : #00f;

text- 用です。装飾 : なし;

フォントサイズ : 13px;

}

p a:hover {

color : #036;

text-装飾: 下線;

}

-----------------この効果は IE6

10. 定義A タグの要件 注意すべき小さな問題

{color:red;} を定義すると、それは A の 4 つの状態のスタイルを表します。マウスが置かれている状態を定義したい場合は、次のようにします。 a:hover を定義します。残りの 3 つの状態は A で定義されたスタイルです。

a:link が 1 つだけ定義されている場合は、他の 3 つの状態も忘れずに定義してください。

11. コンテンツのラップの禁止とコンテンツのラップの強制

テーブルまたはレイヤーでは、コンテンツをラップしない、または強制的にラップすることが必要な場合があります。これらの要件は、いくつかの CSS 属性を通じて実現できます。 。

改行を無効にする:white-space:nowrap

改行を強制する:word-break:break-all;white-space:normal;

12. 相対値と相対値の違いと絶対

Absolute---CSS での書き方は、position:absolute; 絶対的な位置を意味し、ブラウザの左上を参照し、TOP、RIGHT、BOTTOM、LEFT( TRBL が設定されていない場合、位置決めはデフォルトで親の原点になります。 TRBL が設定されており、親が位置属性を設定していない場合、現在の絶対値はブラウザの左上隅を原点として配置され、位置は TRBL によって決定されます。

Relative---CSSでの書き方はposition:relative; 絶対相対位置を意味し、親の原点を原点として参照します、親が無い場合はBODYの原点となります。位置決め用の TRBL と連携し、親レベルにパディングなどの CSS 属性がある場合、親コンテンツ領域の原点を基準に、現在のレベルの原点を配置します。

13. ブロックレベル要素 block とインライン要素 inline を区別する

ブロック レベル---幅と高さを定義でき、別の行を占有することもできます (例: div) ul)

Inline---テキスト要素 (スパンなど) など、幅と高さは定義できません

14. 表示と可視性の違い

display:none と Visibility:hidden はどちらも要素を非表示にできますが、visibility:hidden は要素のコンテンツを非表示にするだけで、使用される位置スペースは保持されます。 Display:none はページから要素を削除するのと同等で、その要素が占有している位置も削除されます。

15. 背景の構文の一部 background

background-image:url(background pattern.jpg,gif,bmp);

background-color:#FFFFFF; ( 背景color)

background-color : traditional;

background-repeat 背景画像の繰り返しの並べて設定を変更します

説明

repeat 背景画像が横に並んでいます

repeat-x 背景画像が X 方向に並んでいます

repeat-y 背景画像

no -repeat 背景画像を並べて処理しません

Background-attachment画像の位置を固定するかどうか

説明

scroll スクロールを引くと背景画像もそれに応じて移動します (デフォルト値)

fixed スクロールを引くと背景画像もそれに応じて移動しません

Position長さによる背景位置: x y

パーセントを使用して背景位置を配置: x% y%

説明

xx% 右に移動

y%下に移動

backgroud-position: 0% 0%; 左上

backgroud-position: 0% 50%; 左中央

backgroud-position: 50% 0% ; 中央上部

backgroud-position: 50% 50%; 中央中央

backgroud-position:100% 0%; 右上

backgroud-position: 0% 100 %; 左下

backgroud-position: 100% 50%; 中右

backgroud-position: 50% 100%; 中下

backgroud-position: 100% 100%; 右下

キーワードによる配置

キーワードの説明

上 上 (y = 0)

中央 中央 (x = 50、y = 50)

下下 (y = 100)

左左 (x= 0)

Exp:

background-position:center;

画像は指定した背景の中心の X=50% Y=50% の位置にあります

background-position: 200px 30px

16. コメントの書き方

HTML 内:

content

CSS 内:

/* ---------- ヘッダー --- -------------- */

style

17. CSS の命名規則

1. ID の命名

(1) ページ構造

Container: コンテナ

Header: ヘッダー

コンテンツ: コンテンツ/コンテナ

ページ本文: main

フッター: footer

ナビゲーション: nav

サイドバー: サイドバー

列: 列

ページ周辺コントロール全体のレイアウト幅: ラッパー

左右中央

(2)ナビゲーション

ナビゲーション: nav

メイン ナビゲーション: mainnav

サブ ナビゲーション: subnav

トップ ナビゲーション: topnav

サイド ナビゲーション: サイドバー

左側のナビゲーション: leftsidebar

右側のナビゲーション: rightsidebar

メニュー: メニュー

サブメニュー: サブメニュー

タイトル: タイトル

概要: 概要

(3) 機能

ロゴ: logo

広告: バナー

ログイン: ログイン

ログインバー: ログインバー

登録: regsiter

Search: search

Function Area: shop

Title: title

Join: joinus

Status: status

ボタン: btn

スクロール: スクロール

タグ ページ: タブ

記事リスト: list

プロンプト メッセージ: msg

現在: 現在の

ヒント: ヒント

アイコン: アイコン

メモ: メモ

ガイド: ギルド

サービス: サービス

ホット スポット: ホット

ニュース : ニュース

ダウンロード: ダウンロード

投票: 投票

パートナー: パートナー

フレンドリーリンク: link

著作権: copyright

2. クラスの名前

(1) 色: 色の名前または 16 進コード (

# など) を使用します。 ##.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2) フォントサイズを指定するには、

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

のように、「フォント フォント サイズ」を名前として直接使用します。

(3) 配置スタイル。配置ターゲットの英語名を使用します。たとえば、

.left { float:left; }

.bottom { float:bottom; }

(4) タイトル バー スタイル。「カテゴリ関数」を使用して名前を付けます。例:

.barnews { }

.barproduct { }

注::

u すべて小文字;

u 英語を使用してみてください;

u ダッシュや下線を追加しないでください;

u 2 つの単語を組み合わせる場合は、ダッシュや下線を付けずに 2 番目の単語の最初の文字を大文字にすることができます (例: mainContent);

u 一目で理解できる場合を除き、単語を省略しないようにしてください。

3. メインサイト css ファイル

メインマスター.css

モジュールモジュール。 css

基本的にbase.css(root.css)を共有

Layout,layout.css

themes.css

columns columns.css

Text font.css

Form Forms.css

Patch mend.css

Print print.css

18. パディングは幅に影響します 質問

ネストされたタグのグループ間にスペースが必要な場合は、外側にあるタグのパディング

##を定義するのではなく、内側にあるタグのマージン属性に任せます。 -pixel border table

table{border-collapse:collapse;}

td{border:1px Solid #000;}

20. テキストが長すぎる場合は、長すぎる部分は省略記号で表示されます

< ;li>コンテンツ 2

タイトル

< ;dd>コンテンツの説明 1

コンテンツの説明 2

l dt ol を追加できます。 ul li と p

を dd に設定します。 27. フローティングをクリアします

clearfix:after {content:"."; display:block; height:0; clear:both ; Visibility:hidden;}

Firefox では、すべての子がフローティングの場合、親の高さが子全体を完全に包み込むことができないため、この HACK を使用してフローティング レベルをクリアします。親が一度定義されていれば、この問題は解決できます。 。

.clearfix {

display:inline-block;

}

/* IE-mac から非表示 \*/

* html .clearfix {

height:1%;

}

.clearfix {

display:block;

}

/* IE-mac からの非表示の終了 */

**この種の使用法は、グラフィックとテキストを混合するときによく使用されますが、制御するのは簡単ではありません。 :both }直接制御します。

28. テキスト処理

1. 一般フォント:

フォントファミリー: "Lucida Grande"、Verdana、Lucida、Arial、Helvetica、"宋体"、sans-セリフ;

タイトル フォント (h1/h2): フォント ファミリ: Cambria、Georgia、"Times New Roman"、Times、serif;

2. ドロップ キャップ :

P:first-letter{padding:10px,fontsize:32pt;float:left}

3. ピンイン中国語文字:

Bruce Wolfbu lu si lang

29. 最小高さのマルチブラウザ互換性の問題

Div{

min-height:450px;

height:auto! important;

height:450px;

overflow:visible;??????

}

30. CSS レイアウトのヒント - CSS BUG ジングル

· IE の境界線が表示されたり消えたりする場合は、高さの設定が忘れられている可能性があることに注意してください。

·フローティングの理由。親レイヤーにそれを含めたい場合は、フローティングの直後にクリアする必要があります。コンテナは自然にその中に表示されます。

· 3 ピクセルのテキストが移動してもパニックにならないでくださいゆっくりと、高さの設定が役に立ちます;

· さまざまなブラウザと互換性を持たせるために、デフォルトの行の高さ設定が致命的になる可能性があることに注意してください;

· フローティングを個別にクリアすることを忘れないでください。行の高さをなしに設定し、高さをゼロに設定すると、デザイン効果がブラウジングと組み合わされます;

· レイアウトの学習には思考が必要です、パスはレイアウト原則に従って自然で直線的で、HTML の制御が簡単です。ハッキングの少ない合理化されたレイアウト、クリーンなコード、優れた互換性、フレンドリーなエンジン。

・すべてのタグにはソースがありますが、デフォルトは異なります。spanはWji、Wjiはインラインとブロックレベルの2種類があります。imgは特殊ですが、法的原則にも準拠しています。その他は単に変更しただけですが、 one* 番号はすべて元に戻り、重ね方のパターンはさらに練習が必要ですが、すべてが規則的です。

· 画像リンクの書式設定には注意してください。画像リンクのテキストリンクが整列している場合は、padding とvertical-align:middle を設定する必要があります。わずかな違いであっても問題ありません。

· IE フローティング二重マージンの場合は、display: inline を使用してください。

· リストは水平方向に入力する必要があり、リスト コードは互いに近くに配置し、ギャップを覚えておく必要があります。

31. Web でのフォント アプリケーション

実用的でシンプルな font-family のいくつかのセットを要約します

font-family: Tahoma、Helvetica、Arial、sans-serif ;

Tahoma ベースのニュートラル フォント。 13px以上の環境でのご利用を推奨いたします。

フォントファミリー: Trebuchet MS、Verdana、Helvetica、Arial、サンセリフ;

Verdana ワイド フラット フォント。 11px以下の環境でのご利用を推奨いたします。

フォントファミリー: Geogia、Times New Roman、Times、serif;

完璧なセリフ フォント。主に 16 ピクセルを超える大きなタイトル フォントに使用されます。

font-family: Lucida Console、Monaco、Courier New、mono、monospace;

一連の等幅フォント。コードを書くことは非常に便利です。さらに、Lucida Console が広すぎると感じた場合は、幅の狭い Lucida Sans Typewriter に切り替えることができます。ちなみに、Lao ZhaoのブログのコードブロックはLucida Sans Typewriterを使用しています~

divのスタイルで可視性を非表示に設定すると、divは非表示になりますが、空白スペースが占有されます。表示するように設定されている場合: none は空白スペースを占めません;

およびvisible="false" は、div が HTML で返されないことを意味します;

以上がCSSルールとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。