CSSのナレッジポイントをまとめたもの

CSSとはCascading Style Sheetsの略で、中国語ではカスケードスタイルシートと呼ばれ、Webページデータのパフォーマンスを制御するために使用され、Webページのパフォーマンスをデータコンテンツから分離できます。

1.CSSの導入方法

1. インラインスタイル: インラインスタイルは、マークの style 属性に CSS スタイルを設定します。この方法は CSS の利点を反映していないため、お勧めできません。

2. 埋め込み: 埋め込みとは、Web ページの タグ ペアの タグ ペアに CSS スタイルを記述することです。形式は次のとおりです:

C. .. ここに CSS スタイルを記述します

3. インポート: 独立した .css ファイルを HTML ファイルに導入します。インポートでは、

@import"mystyle.css"; ここの .css ファイルのパスに注意してください。

4. リンクの種類: HTML ファイルに .css ファイルも導入します

注: インポート メソッドは、Web ページ全体が読み込まれた後に CSS ファイルを読み込むため、Web ページが比較的大きい場合、スタイルのないページが最初に表示され、フラッシュの後にスタイルが表示されます。ウェブページが表示されます。これ

輸入品特有の欠陥です。リンク型とインポート型の違いは、Webページ本体のファイルを読み込む前にCSSファイルを読み込むため、表示されるWebページに最初からスタイル効果が付与されているわけではありません。インポートタイプ

スタイルのない Web ページを最初に表示してから、スタイルのある Web ページを表示する これがリンク スタイルの利点です。

2. CSSセレクター

「セレクター」は、{}内の「スタイル」のオブジェクト、つまり「スタイル」がWebページ内のどの要素に作用するかを指定します 1. 基本セレクター:

＊ ， E: タグセレクター、E -tags P {color: green;} のすべての要素に一致します

.info と E.info: E #Info および E#Info ID セレクター。FOOTER 要素に等しいすべての ID 属性に一致 #info {background:#ff0;} p#info {background:#ff0;}

2. 組み合わせセレクター:

E,F 複数要素セレクター。すべての E 要素または F 要素を同時に照合し、E と F の間をカンマで区切ります。 Div,p { color:#f00 }

E F 子孫要素セレクター。E 要素の子孫であるすべての F 要素に一致します。 #nav li { display:inline } li a { font-weight:bold;

E > F 子要素セレクター、すべての E 要素の子要素 ​​F と一致します。

E + F 隣接要素セレクター。E 要素の直後にあるすべての兄弟要素 F と一致します。 p + p { color:#f00;

　　注意嵌套规则：　

1. 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
2. 块级元素不能放在p里面。
3. 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
4. li内可以包含div
5. 块级元素与块级元素并列、内联元素与内联元素并列。（错误的：
   ）

　　3、属性选择器

  　　E[att]            匹配所有具有att属性的E元素，不考虑它的值。

                             （注意：E在此处可以省略，比如“[cheacked]”。以下同。）                 p[title] { color:#f00; }

 

         E[att=val]     匹配所有att属性等于“val”的E元素                                                   div[class=”error”] { color:#f00; }

 

        E[att~=val]    匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素      td[class~=”name”] { color:#f00; }

 

        E[att|=val]    匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，

                            比如“en”、“en-us”、“en-gb”等等                                                    p[lang|=en] { color:#f00; }

        E[attr^=val]    匹配属性值以指定值开头的每个元素                       div[class^="test"]{background:#ffff00;}

        E[attr$=val]    匹配属性值以指定值结尾的每个元素                       div[class$="test"]{background:#ffff00;}

        E[attr*=val]    匹配属性值中包含指定值的每个元素                       div[class*="test"]{background:#ffff00;}

 

        p:before         在每个

元素的内容之前插入内容                     p:before{content:"hello";color:red}

        p:after           在每个

元素的内容之前插入内容                      p:after{ content:"hello"；color:red}

　　4、伪类选择器

　　

 伪类选择器： 专用于控制链接的显示效果，伪类选择器：

a:link（没有接触过的链接）,用于定义了链接的常规状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

     伪类选择器 : 伪类指的是标签的不同状态:

            a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

　　a:link {color: #FF0000} /* 未访问的链接 */

　　a:visited {color: #00FF00} /* 已访问的链接 */

　　a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

　　a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

　　三、css常用属性

　　1、颜色属性　

  　　

ppppp

   　　

ppppp

 　　

ppppp

 

  　　

ppppp

2. フォント属性

font-size: 20px/50%/大きめ

font-family:'Lucida Bright'

font-weight: 細め/太字/ボーダー/

オールドボーイ

3. 背景属性

背景色: コーンフラワーブルー

背景画像: url('1.jpg');

background-repeat: no-repeat;(repeat: full tile)

background-position: 右上 (20px 20px) (水平: 左中央右) (垂直: 上部中央下)

略語:

注: 本文に背景属性を追加する場合は、本文に高さを追加することを忘れないでください。そうしないと、結果が異常になります。これは、本文が空であり、背景画像をサポートできないためです。この時点で高さを設定します

width=100px、htmlを設定しないと効果は見られません。

リーリー

コードを表示

4. テキスト属性

white-space: 要素内の空白の処理方法を設定します

• normal: デフォルトの処理方法。
• pre: スペースを保持し、テキストが境界を超える場合は折り返さない
• nowrap: スペースを保持せず、テキストの終わりまたは br タグに到達するまで、すべてのテキストを強制的に同じ行に表示します
• 折り返し前: スペースを保持し、境界に達したときにテキストを折り返します
• 行前: スペースを保持せず、テキストの行折り返しを保持し、テキストが境界に達したときに折り返されます

方向：テキストの方向を指定します

• ltr デフォルトでは、テキストの方向は左から右です。
• rtl テキストの方向は右から左です。

text-align: テキストの水平方向の配置

• 左
• センター
• そうです

line-height: テキスト行の高さ

• 通常のデフォルト

vertical-align: テキストの行の高さの垂直方向の配置

• ベースラインデフォルト
• sub はテキストの下付き文字を垂直方向に配置します。 _{タグと同じ効果があります}
• super はテキストの上付き文字を垂直方向に配置します。 ^{タグと同じ効果があります}
• 一番上のオブジェクトの上部がコンテナの上部と揃えられます
• text-top オブジェクトの上部をライン上のテキストの上部に揃えます
• 中央の要素オブジェクトはベースラインに基づいて垂直方向に整列されます
• 一番下のオブジェクトの下部が行内のテキストの下部に揃えられます
• text-bottom オブジェクトの下部は、行内のテキストの下部に揃えられます

text-indent: テキストインデント

文字間隔: 文字の間にスペースを追加します

Word-spacing: 各単語の間にスペースを追加します

text-transform: 属性はテキストの大文字と小文字を制御します

• 大文字にする テキスト内のすべての単語は大文字で始まります。
• uppercase は大文字のみを定義します。
• 小文字の定義には小文字のみが含まれます。

text-overflow: テキストオーバーフロースタイル

• クリップ テキストをトリミングします。
• ellipsis は、トリミングされたテキストを表す省略記号を表示します。
• string 指定された文字列を使用して、トリミングされたテキストを表します。
• テキスト装飾: テキスト装飾
• • デフォルトは何もありません。
  • 下線下線。
  • オーバーラインオーバーライン。
  • ラインスルーセンターライン。

  text-shadow: テキストシャドウ

  • 最初のパラメータは左右の位置です
  • 2番目のパラメータは上下の位置です
  • 3番目のパラメータはぼかし効果です
  • 4番目のパラメータは色です
  • テキストシャドウ: 5px 5px 5px #888;

  word-wrap: 自動行折り返し

  • ワードラップ: ブレークワード;

5. 属性をリストする

List-style-type: リスト項目マークのタイプ

• なしフラグを削除
• 10 進数の先行ゼロ 02.
• 正方形
• 円;中空の円
• アッパーアルファ＆ディスク

List-style-image: 画像をリスト項目のロゴとして設定します

List-style-position: リスト項目マークの位置

• 内側
• 外

リスト形式：略語

6.ボーダー

border-style: ボーダースタイル

• 実線デフォルト、実線
• 二重二重線
• 点線
• 一点鎖線

border-color: ボーダーの色

border-width: ボーダーの幅

border-radius: 角丸

• 1パラメータ: 四隅すべてに適用
• 2 つのパラメーター: 最初のパラメーターは左上と右下に適用され、2 番目のパラメーターは左下と右上に適用されます。
3 つのパラメーター: 最初のパラメーターは左上に適用され、2 番目のパラメーターは左下と右上に適用されます
4 つのパラメータ: 左上、右上、右下、左下 (時計回り)

枠線：略語

境界線: 2ピクセルの黄色の実体

box-shadow: ボーダーシャドウ

最初のパラメータは左右の位置です
2番目のパラメータは上下の位置です
3番目のパラメータはぼかし効果です
4番目のパラメータは色です
ボックスシャドウ: 10px 10px 5px #888;

　　7、display

• none 不显示。
• block 显示为块级元素。
• inline 显示为内联元素。
• inline-block 行内块元素（会保持块元素的高宽）。
• list-item 显示为列表元素。

 　　8、盒子模型

　　什么是盒子模型？

　　

　　padding:用于控制内容与边框之间的距离;

　　margin: 用于控制元素与元素之间的距离; 

　　

　　一个参数，应用于四边。

　　两个参数，第一个用于上、下，第二个用于左、右。

　　三个参数，第一个用于上，第二个用于左、右，第三个用于下

　　边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），解决办法

　　

<span style="color: #008080;">1</span> <span style="color: #800000;">body </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">3</span> }

View Code

9.フロート

1 行に 2 つのブロックレベルのタグを表示すると、ドキュメント フローから切り離されます

• なし
• 左フロート左
• 右フロート右

clear クリアフロート:

• none : デフォルト値。両側に浮遊オブジェクトを許可します
• left : 左側では浮遊物は許可されません
• 右: 右側では浮遊物は許可されません
• 両方 : 浮遊オブジェクトは両側で許可されません

10、ポジション

1 static、デフォルト値 static: 特別な配置はなく、オブジェクトは通常のドキュメント フローに従います。

上、右、下、左、その他の属性は適用されません。 これについて言えば、定義について言及する必要があります。ドキュメント フローは、実際にはドキュメントの出力順序であり、通常は左から右へ

と表示されます。

トップダウン出力形式では、Webページ内の各要素がこの順序でソートされて表示され、float属性とposition属性によりドキュメントフローから要素を分離して表示できます。 デフォルト値は、要素を継続的に追跡させることです

文書フローは何も変更せずに表示されます。

2位:相対

相対: オブジェクトは通常のドキュメント フローに従いますが、上、右、下、左、その他の属性に基づいて通常のドキュメント フロー内でオフセットされます。そして、そのカスケードは z-index 属性によって定義されます。

絶対: オブジェクトは通常のドキュメント フローから分離されており、上、右、下、左、およびその他の属性を使用して絶対位置を決定します。そして、そのカスケードは z-index 属性によって定義されます。 Position:relative を設定すると、

を使用できます

上、下、左、右で要素をドキュメント内で表示される位置に相対的に移動します。 [要素は実際にはまだドキュメント内の元の位置を占めていますが、ドキュメント内の元の位置に対して視覚的に相対しているだけであることを意味します

移動】position:absolute を指定すると、要素はドキュメントの外に出て（つまり、ドキュメント内の位置を占めなくなり）、設定された上下左右に従って正確に配置できます。 要素が絶対的な場合

配置後、その参照は、それ自体に最も近い要素が相対配置を設定しているかどうかに基づいて、設定されている場合は、それ自体に最も近い要素を配置します。そうでない場合は、その祖先要素内で相対配置要素を探します。 html が見つかります。

3ポジション：固定

理論上、固定に設定された要素はブラウザ ウィンドウ内の指定された座標に配置され、ウィンドウがスクロールされているかどうかに関係なく、この位置に固定されます。

修正: オブジェクトは通常のドキュメント フローから分離されており、上、右、下、左などの属性を使用してウィンドウを基準点として配置します。スクロール バーが表示されると、オブジェクトは一緒にスクロールしません。そして、そのカスケードは z-index 属性によって決まります

正義。 注意

重要な点：要素がposition:absolute fix;で設定されている場合、要素をfloatに設定することはできません。これは共通の知識ポイントです。これらは 2 つの異なるストリームであり、1 つはフローティング ストリームであり、もう 1 つは「位置決め

」です。

フロー」。ただし、相対的には可能です。元々占有されていたスペースが依然としてドキュメント フローを占有しているためです。

次の 4 つの属性による位置決め:

• 左
• トップ
• そうです
• 下
• z-インデックス