css和html相结合的第一种方式：
1，每一个html标签中都有一个style样式属性，该属性就是css代码
例：
这是一个div区域
2，使用style样式属性，该属性的值就是css代码。一般定义在head标签中，首先加载
例：
3，将上面style标记里的内容写在文件div.css中，再导入。div.css放在同一个文件夹中
@import url(div.css);
4.直接导入css样式
(rel表示与页面的关系)
css代码格式：
选择器名称{属性名:属性值;属性名:属性值;...}
1,html标签选择器
2,class选择器
例：div.biaoqian{}只适用于div区域1
.biaoqian{}适用于所有的
3,id选择器(id值在页面中是唯一的，id通常都是为了去表示页面的一些特定区域使用的)
例：div.#id1{}只适用于div区域2
#id2{}适用于所有的
优先级：html标记 < class选择器 < id选择器标记 < 标记内属性
4,扩展选择器
1,关联选择器(选择器中的选择器)
例：div b {}只适用于此区域
2. 組み合わせセレクター (複数のタグに対してこのように設定)
例: body,div,{background-color:#36F;color:#F23;}
3. 疑似要素セレクター
例: ハイパーリンクのステータス
a: link {} //訪問されていません
' - ' s 's' s ‐ ‐ ‐ ‐-- a：link {} ////マウスを超えて移動する効果:first-letter{} 段落の最初の文字
input: focus フォーカスのある要素
レイアウト: float
位置決め:position:
属性:relative 相対位置決めは元の位置に基づいており、元の位置はまだそこにあります
Relative位置は下向きで右が正の方向です
絶対位置: 位置属性が最も近い親を基準として、元の位置は失われます
z-index レベル属性は存在しません 単位
CSS テキスト属性:
font-size はフォントのサイズを設定できます。単位は px ピクセル値の半分です。
Text-align はテキストの配置を左、右、中央に設定します。
line -height は設定します。要素の行の高さ
text-indent 最初の行のインデント
font-weight テキストの太さを標準に従って表示する標準に設定し、太字で表示するように設定します
font-style テキストの表示スタイルを標準に設定して斜体で表示する標準に従って表示します。
text-decoration は、テキスト装飾スタイルの下線、下線、上線、および取り消し線なしを設定し、テキスト装飾スタイルを削除します。
font-variant フォントは大文字、スモールキャップは大文字、normal は標準の小文字です
color はフォントの色を設定します
font-family テキストフォント
2 つのパラメータがある場合、内側の余白をパディングします (上下 1 つ、左右 2 つ)。 3 つのパラメータがある場合、1 つは上、2 つは左と右の 3 つのパラメータです。 right は自動であり、センタリングに相当します。インライン要素には左と右のマージンのみがあり、上と下には負の値を設定できませんが、ブロック レベルの要素には設定できません。特定の幅、デフォルトは 100% 固定高さが設定されていない場合、要素の高さは内容に応じて変更されます
ブロックレベルのラベルは行レベルのラベル p{display:inline;} に変換されます
行レベルラベルはブロックレベルのラベルに変換されます a{display:block ;} 行レベルの要素は幅と高さを設定できません
行レベルの要素は margin: 0 auto を使用できません ; センタリングはブロックレベルの要素に変換する必要があります
overflow:hidden;オーバーフローしたテキストを非表示にすると、ネストされた div と float のバグを解決できます
overflow:scroll ; スクロール バーを追加します
overflow:auto; 自動的に選択します
clear:left; 左側のフロートをクリアします
background-image 属性: 背景画像には影響しませんテキストの表示
background-image:url(dog.jpg); 背景画像を設定します
background -repeat:;背景画像の繰り返し方法を制御します
Background-position:100px 300px;背景の位置を制御します。最初のパラメータは要素の左側からの距離を表し、2番目のパラメータは要素の上部からの距離を表します
複数同時に設定します要素：背景色、背景画像、背景画像の繰り返し方法、背景の順です左からの画像の距離、上の位置からの背景画像の距離
background-attachment:固定; 背景画像に固定
CSS スプライト技術:固定サイズの要素に背景の一部のみを表示させる
例:background:url( Dogs.jpg) no-repeat -370px -230px;
マウススタイルカーソル: hand は手のタイプです ポインタは手のタイプとの互換性が強いです クロスヘアはテキストの十字タイプです エフェクト wait は の効果ですデフォルトはデフォルトの効果です。e-resize は右向きの矢印です。nw-resize は上向きの矢印です。 w-resize は左向きの矢印です。 sw-resize は下向きの矢印です。 s-resize は下向きの矢印です。 se-resize は右下を向いています。 Auto システムによって自動的に与えられる効果です。要素の表示状態visible 現在の要素は表示状態です。 hidden 現在の要素は非表示です。場所はまだあります
display: none; この要素を書き込まないのと同じで、位置は失われます
opacity:0-1; (w3c 標準) filter:alpha(opacity=0-100); (IE)
list-style で遠い点がキャンセルされます。 li
命名規則: ID 名は一意である必要があります クラスは親子関係を持つ複数のスタイルを持つことができ、それは命名を通じて反映される必要があります キャメルケース命名方法の合理的な注釈: use_name_box または use-name-box
優先順位: タグセレクター < ; クラス セレクター
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
