CSS基礎知識学習ノート_html/css_WEB-ITnose

1. 基本的な CSS スタイルの説明

1.1 CSS 背景
background-attachment: 背景画像が固定されるか、ページの残りの部分と一緒にスクロールするか
Background-color: 要素の背景色を設定します
Background-image:画像を背景に設定します
background-position:背景画像の開始位置を設定します
background-repeat:背景画像を繰り返すかどうか、どのように繰り返すかを設定します
background-size:背景画像のサイズを指定します
background-orgin:指定します画像の配置領域
background-clip:背景の描画領域を指定
1.2 css textcolor:文字の色
direction:文字の方向
line-height:行の高さ
letter-spacing:文字間隔
text-align: 要素を整列させる
text-decoration: テキストに追加する 変更する
text-indent: 要素内のテキストの最初の行をインデントする
text-transform: 要素内の文字
unicode-bidi: テキストの方向を設定する
White-space: 要素内の空白の処理方法
word-spacing: 単語の間隔
text -wrap: 自動行折り返し
text-shadow: テキストに影を追加

1.3 css フォント font-family: フォントを設定family
font-size: フォント サイズを設定します
font-style: フォント スタイルを設定します
fongt-variant: テキストを小文字または通常のフォントで表示します
font-weight: フォントの太さを設定します

1.4 CSS リンク a :link 通常の未訪問のリンク
a:visited ユーザーが訪問したリンク
a:hover マウスポインター リンクの上にあります
a:active リンクがクリックされた瞬間
text-decoration: この属性は主に下線を削除するために使用されますリンク内
background-color: 背景色

1.5 CSS リスト CSS リスト属性は柔軟に配置でき、ロゴを変更したり、画像をリスト項目のロゴとして使用したりできます
list-style: リスト項目の略語
list- style-image: リスト項目の画像
list-style-position: リスト項目のロゴの位置
list-style-type: リストのタイプ

1.6 CSS テーブル テーブルの境界線:

#tb,th,td,tr{ border: 1px solid blue; }

折りたたみ境界線:

#tb{ border-collapse: collapse; }

1.7 CSS アウトライン アウトライン: アウトラインのプロパティを設定します
アウトライン-カラー: アウトラインの色を設定します
アウトラインスタイル: アウトラインのスタイルを設定します
アウトラインの幅: アウトラインの幅を設定します
2.css ボックス モデル

内部margin: コンテンツの外側、ボーダーの内側
padding すべてのマージンを設定します
padding-bottom、left、right、top 特定の方向のマージンを個別に設定します

Border: 優れたボーダーを作成でき、用途に使用できます任意の要素
border-style: 10 個のスタイルを定義
border-(top、bottom、left、right)-style: 片面スタイルを定義
border-width: 境界線の幅の設定
border-(top、bottom、right、left) )-width 単一の境界線の幅
border-color 境界線の色
border-(上、左、下、右)-color 単一の境界線の色

CSS3 border: border-radius 丸い境界線
box-shadow 境界線の影
border-画像境界画像

margin: margin 全体のマージン
margin-(上下左右) 片側マージン

外縁 距離結合: は重ね合わせの概念です 3. CSS 配置とフローティング

CSS 配置: 位置: 静的、相対、絶対、固定;
上
左
右
下
オーバーフロー
….

CSS フローティング : フロート属性: 左、右、なし、継承
クリア属性: フローティング属性を削除
left, right: 左右のフロートを削除します
Both: 左右のフロートを両方削除します
継承: 親からクリア値を継承します
4. CSS セレクター

派生セレクター :

li strong{    color：red；}

で強いタグ効果を指定しますリスト項目。すでに定義されている効果は上書きされません。

id セレクター:

#id { color:red; }

id セレクターは派生セレクターと組み合わせて使用​​できますが、id セレクターは id と組み合わせて使用​​するのは簡単ではありません

クラス セレクター:

.pclass{ color:red; }

クラス セレクターは、派生セレクター

属性セレクター: デフォルトの属性セレクター:

[title]{ color:red; }   

名前付き属性セレクター:

[title=te]{ color:red; }

IE6 以前のバージョンでは、属性セレクターはサポートされていません

属性セレクターは完全である必要があります マッチングは機能します

メントセレクター: > 記号を使用しますが、一度に 1 レベルしか配置できません

隣接する兄弟セレクター: ラベル + ラベルの形式で、1 つだけ作成するだけで済みます わかりやすい