CSS+DIVの使い方まとめ_html/css_WEB-ITnose

(元のリンク:)

CCS = カスケード スタイル シート

インライン スタイル シート (推奨されません):

内部スタイル テーブル (非推奨):

& lt; style type = "text/css" & gt; p {color:#f00;}

& & lt;/style & gt ;

外部スタイル シート (通常は head のタイトルの下):

。 .. 例:

p {

color: #F00;

font-size: 12px;

基本タイプセレクター:

タグセレクター: < で記述されます。 :p{} などの内部のタグ。このラベルの内容をすべて選択します。カスタムラベルをサポートします。

クラス セレクター: .30font{} など、「.」で始まるものは、クラス「30font」を持つすべての要素を選択することを意味します。

ID セレクター: 「#」で始まります。

複合型セレクター:

疑似クラス セレクター: ":" で区切られます (例: "a:link"、"a:hover"、 の場合は "a")。 " (マウスを押す)、"a:visited"; または ".myClass:hover"

グループ セレクター: "," で区切られ、複数の要素を同時に選択します (例: "a,p,h3 ”

)タグはセレクターを指定します: たとえば、p.aa は class="aa" の p タグを表し、p#aa は id="aa" の p タグを表します

セレクターが含まれます: スペースで区切られ、A 内に B を示します、「#top a」などは、id="top" 内の タグを意味します。 兄弟隣接セレクター: 「h1+p」など、

に隣接することを意味します。 ;タグ

属性セレクター: 「p[align]」など、「[]」で区切られているのは、

タグ

ワイルドカード セレクター: 「*」はすべての要素を選択することを意味します

フォントおよびテキスト属性:

font-family: フォント名

font-size: フォント サイズ、単位 px が必要です

font-weight: 太字。ボールド、ボールド、ライト、100、200、... 900 (100、200... の意味)

font-style: フォント スタイル。通常、斜体、斜体 (斜体も、一部の特殊なフォントでのみ有効)

font-variant: 英語の文字を大文字に変換します。 Normal: 通常のフォント、small-caps: 小さな大文字フォント

line-hight: 行の高さ

text-transform: Capitalize: 最初の文字を大文字にする、uppercase: すべて大文字、小文字: すべて小文字、 none: 変更なし

text-装飾：文字装飾。下線、上線、スルーライン、ブリンク、なし、スペースで区切って複数指定可能

color: color

text-indet: 最初の行のインデント(単位が必要)

text-align: テキストの配置、左、右、中央、両端揃え (両端を揃える)

letter-spacing: 単語の間隔 (単位 px が必要)

Background 属性:

background-color: 背景色

background-image :画像(背景色より優先されます)

background-repeat: 背景画像を並べて表示するかどうか。 repeat (デフォルト)、no-repeat、repeat-x、repeat-y (水平および垂直タイル)

background-attachment: スクロール バーの動きに従うかどうか。固定: 移動しない、スクロール: 移動 (デフォルト)

background-position: 背景の位置、背景画像の左上隅の原点座標 (x, y) または右、左、上、下の相対変位、中央

背景属性を一緒に記述するには、次のように属性値をリストし、スペースで区切ります。

}

背景平铺：repeat-x 或 repeat-y，把图片按x轴或y轴（横向或竖向）平铺

优先级排序：默认 < 标签 < class < ID

框模型（或盒模型）：

内联对象，按行显示：display:inline，由line-hight决定行高。如

, 等

块对象，按块显示：display:block，由width和height决定宽和高，默认占一行。如

内联对象转换为块对象后，就可以使用width和height属性了：a{display:block; width=10px; height:20px;}

padding：内填充（分top, bottom, left, right）

margin：外边距（分top, bottom, left, right）

border：边框（分top, bottom, left, right）

width：内容的宽度

height：内容的高度

注：当两个元素上下排列时，他们间的margin会自动合并（都不是float或绝对定位的情况下）

border的属性（分top, bottom, left, right）：

style：线条样式（dotted, solid, double, 等）

width：粗细（单位px）

color：颜色

可以缩写：border: solid 1px #FFF;

单独设置一条边：

border-bottom: solid 2px #00F;

border-bottom-width: 2px;

（注：后面会覆盖前面的）

margin和padding的设置:

margin: 1px （上下左右）

margin: 1px 2px 3px 4px; （上 右 下 左）

margin: 1px 2px; （上下 左右）

margin: 1px 2px 3px; （上 左右 下）

（注：padding的设置方法跟margin一样）

浮动（float）：

浮动到普通流的上一层

float: left，浮动后向左，直到左边碰到边界或碰到同一层元素的右边界

float: right，浮动后向右，直到右边碰到边界或碰到同一层元素的左边界

清理（clear）：

使浮动层继续在普通流保留占位

clear: both, left, right，应用于普通流，使普通流根据上一层的占位情况来决定自己的位置

一般可以在浮动层和普通流直接加一个clear div来分隔排版，如：

周囲のマージン: auto (例: margin:0px auto;)

ブロックには特定の幅値 (width) が必要です

注: 本文にはデフォルトで 8px のマージンがあります。キャンセルメソッド: body{margin:0px;}

ブロックは垂直方向に中央に配置されます (あまり使用されません):

width: 500px; 位置: 左: 50%; :-250px;

ブロック内のテキストを中央揃えにします:

水平方向の中央揃え: text-align: center 垂直方向の中央揃え: 行の高さ = ボックスの高さ (例: height:200px line-) height:200px (1 行で div 全体を埋めます)

2. ul list:

デフォルトは、padding と margin のキャンセルメソッド: ul{padding:0px; margin:0px;}

list -style: リストスタイル (none, )

list-style-image:url(images/a.jpg);

水平レイアウト: li{float:left}

分割線の設定: li{background:url(images /1.png) リピートなし下中央 ;}

位置決め (position 属性経由):

static: デフォルトの位置決め方法。行またはブロックごとに表示されます。

relative: 相対的な配置、要素は特定の距離だけオフセットされます (元の位置を基準にして配置するには、上、右、下、左を使用します。占有されていた元のスペースは解放されません)

absolute: 要素は完全に削除されますドキュメント フロー (フロートと同様) から取得し、その親ボックスに対して相対的に配置します (上、右、下、左の配置を使用)。例: #aaa{position:absolute; top:100px; left:50px;}

fixed: 絶対と同様に、違いは位置がブラウザ ウィンドウからの距離であることです。 (フローティング広告の作成に使用できます)

注: それらが重なっている場合は、z-index 属性を使用して誰が一番上にあるかを決定でき、より大きい値を持つものが一番上に表示されます。

:

固定値: width: 100px など;

デフォルト値: 入力しないでください パーセンテージ: width: 80% など、親のパーセンテージ。

min-height、min-width: 要素の最小の高さと幅

max-height、max-width: 要素の最大の高さと幅

親ボックスを超えるコンテンツの処理:

overflow: hidden: 余分なコンテンツをカットします

overflow:scroll: 常にスクロールバーを表示します

overflow:auto: コンテンツがカットされると、スクロールバーが表示されますが表示されます(bodyとtextareaのデフォルト値はauto)

overflow- x:hidden: 水平スクロールバーを無効にする

overflow-y:scroll: 常に垂直スクロールバーを表示する

注: 親ボックスが設定されていない場合高さを指定すると、親ボックスは max-height に達するまで高くなります。

ブラウザのスクロール バー設定:

例: html{

neighbors-base-color:#F00;

}

注: IE でのみ有効のようです。

Photoshopのカットプロセス:
3. ガイドを使用する
4. スライスツールを使用する
5. 背景をキャンセルして画像を透明にする
6. ウェブ用の形式で保存...
7. Save :Slice: すべてのユーザーのスライス

Save
Rename

元の記事は、Clement-Xu の csdn ブログからのものであることを示してください。 )

🎜 🎜 🎜 🎜