CSS学習のまとめについて
CSS学習のまとめについて
W3C
World Wide Web Consortiumの略で、中国語はW 3 C組織または万維網連盟である.W 3 C標準またはweb標準と呼ばれるweb標準は一連の標準である.
構造層:HTMLはウェブページの展示構造を記述するために使用される.表現層:CSSは装飾ページの美観度を修飾するために使用される.動作レイヤ:JavaScriptがページを完了するコンポーネント;
CSS
CSS(CSS)は、Cascading Style Sheetの略.主にhtml xhtml html html html html html html html html html 5 xmlを修飾するために使用され、Webページにこのような千変万化の形式文法があります:選択子{属性:値}body{font-size:12 px;
CSSで書かれた4種類のフォーマットセレクタ:
1、埋め込み式導入:styleタグをheadタグにネストする
Document
iframe。
，iframe 。
2、行内スタイル
iframe。
3、外鎖スタイルcssをファイルとしてlinkラベルでhtmlに導入する
4.埋め込みスタイル内嵌と外鎖の総合的な使用で、あまりよく使われない
スタイルの表示は距離によって異なります.つまり、ターゲットに最も近いスタイルを表示するには、htmlに複数のhtmlを接続して適用することができます.
ライン内スタイルシート、インラインスタイルシート、外部スタイルシートはそれぞれ利点があり、実際の開発ではよく
混在する必要がある:
•Webサイト全体の統一スタイルに関するスタイルコードは、独立したスタイルファイル*に配置されます.css
•一部のスタイルの異なるページでは、外部スタイルファイルをリンクするだけでなく、インラインスタイルを定義する必要があります.
•あるページでは、一部のコンテンツは「ユニーク」で、行内スタイルを採用しています.
CSSの特徴:1、継承:Webページの中性子要素、親要素のスタイルを継承します.例えば、段落pの文字サイズを制御するには、bodyタグに直接スタイルを付けることができます.2、積層:Webページのサブエレメントが親エレメントと同じスタイルを定義すると、サブエレメントのスタイルは親エレメントのスタイルの後に定義されたスタイルを上書きし、前に定義されたスタイルを上書きします.
一般的なスタイルのプロパティ:
CSS
説明
色
color
フォントサイズ
font-size
フォント
font-family:Arial,‘宋体’
テキストの配置
text-align
テキストのインデント
text-indent:2 emは負の値とすることができる
行の高さ
line-height:150% line-height:1.5em
フォントの太さ
font-weight:normal[正常]bold[太字]
外枠スタイル
border-style
枠線の幅
border-width
枠線の色
border-color
じょうめんきょり
top
左余白
left
幅
width
高さ
hight
背景色
background-color
背景画像
background-image
•構文の説明
この構文の4つの属性値のうちの1つを任意に選択できます.ここで、leftは左揃えを表す.rightは右揃えを表します.センターは中央揃えを表します.
Text-alignテキストが中央にあるかどうかしか制御できませんdivが中央にあるかどうかを制御できませんdivを中央に置くには箱モデルのmargin:0 autoを通過します.
すべてのページにはhnラベルが必要で、検索エンジンがtext-indent:-9999 emを検索するのに役立ちます.ページのタイトルを非表示にします.Text-transform大文字と小文字の変換に使用
重複する背景画像を設定する——background-repeat background-repeat:repeat|repeat-x|repeat-y|no-repeat背景画像の位置を設定する——background-position
擬似クラス
≪ステータス｜Status｜emdw≫
構文
リンクにアクセスしていません
a:link{color:#ff0000}
アクセスされたリンク
a:visited{color:#00ff00}
マウスをリンクに移動
a:hover{color:#ff00ff}
マウスをリンクに
a:active{color:#0000ff}
ボックスモデルの内側余白paddingは、ブラウザのエッジとコンテンツの間の距離ボーダーborder:1 px solid blackピクセル値の実線色を記述するために、コンテンツの内部外側余白marginを埋め込むために使用されます.
margin:100 px上下左右は100 pxの距離margin:100 px 200 pxである.上下100 px、左右200 px margin:100 px 200 px 300 px上100 px左右200 px下300 px margin:100 px 200 px 300 px 400 px上、右、下、左
margin-top margin-left margin-right margin-bottom枠線も4方向に適用
ブロック要素とインライン要素ブロック要素は高さと幅の属性を持っているが、ラベルdiv pなどのブロック要素を表すデフォルトの属性を他の要素と同業者に表示することは許されない:display:block;
インライン要素に幅と高さの属性がない場合、ラベルa spanインライン要素を表すデフォルトの属性display:inlineを他の要素と同行して表示できます.
ブロック要素とインライン要素の間でDisplayを変換できます:noneは要素を隠すことができます
ボックス1を設定し、枠線色複合属性border-colorを使用する場合、1色のみを設定すると、4つの枠線の色は同じになります.2色を設定すると、枠線の上下が1色、左右が別の色になります.3色を設定し、枠線の色順は上、左右、下である.4の色を設定し、枠線の色順を上、右、下、左にします.
2、枠線幅属性border-widthは複合属性で、4つの枠線の幅を同時に設定できます.
3、border-styleは複合属性であり、他の4つは単一の枠線のスタイル属性であり、1つの値しか取れないが、複合属性border-styleは同時に1～4つの値を取ることができる.border-styleプロパティの4つの値の取り方について説明します.-値を取ります.4つの枠線でこの値を使用します.e:s-2つの値をとります:上下の枠線は1つ目の値を使用し、左右の枠線は2つ目の値を使用し、2つの値は必ずスペースで区切らなければなりません.-3つの値をとります:上の枠線は1つ目の値を使用して、左右の枠線は2つ目の値を使用して、下の枠線は3つ目の値を使用して、値の間はスペースで区切らなければなりません.—4つの値をとります.4つの枠線は、上、右、下、左の順に値を呼び出します.値の間もスペースで区切らなければなりません.
レイアウト1、ロケーションレイアウト:プロパティ:positon説明:オブジェクトのロケーション値を設定する:static静的ロケーション:ページ内の各オブジェクトのデフォルト値.absolute絶対位置決め:オブジェクトをドキュメントストリームから分離し、left、right、top、bottomの4つの方向を親オブジェクトに対して絶対位置決めします.このような親オブジェクトが存在しない場合はbodyオブジェクトに従います.relative相対位置決め:オブジェクトはドキュメントから分離されず、left,right,topを設定します.bottomの4つの方向は、自身の位置に対して相対的に位置決めされる.
2、フローティングレイアウト:フローティングはcss実装レイアウトの一種であり、divを含む任意の要素をフローティングで表示することができる.
基本構文:float:left|right|none leftは、フローティング要素が左に位置し、左に位置合わせされていることを示します.rightはフローティング要素が右側にあり、右揃えであることを示します.noneはフローティングではなく、デフォルト値を表します.
3、フローティングをクリア要素にフローティング属性がある場合、その親要素または後の要素に影響を与え、レイアウトの乱れ現象が発生し、フローティングを解消する方法でフローティング要素の影響を解決することができる.クリア:clear
基本構文clear:left|right|both|none leftは、ある要素の左側にフローティング要素が許可されていないことを示します.rightは、ある要素の右側にフローティング要素があることを許可しないことを示します.bothは、ある要素の左右にフローティング要素が許されないことを示します.noneは、ある要素の左右にフローティング要素が許可されていることを示します.
overflow visible[デフォルト値.コンテンツを切り取らずスクロールバーを追加しない],auto[必要に応じてオブジェクトコンテンツが切り取られたりスクロールバーが表示されたりする],hidden[オブジェクトのサイズを超えたコンテンツを表示しない],scroll[常にスクロールバーを表示する]
3つの非表示要素の方法:
zoomスケール:normal:デフォルト.オブジェクトの実際の寸法number:パーセント|符号なし浮動小数点実数を使用します.浮動小数点の実数値が1.0またはパーセントが100%の場合、この属性に相当するnormal値zoom:1はie 6高度適応問題を解決する