CSS property_html/css_WEB-ITnose

CSS -- プロパティ

css 属性のキーと値のペア、プロパティ: 値。主に次のカテゴリにあります:

テキスト関連の属性: テキストのフォント、色、変更、影、その他の属性を制御します。

font-family 「Arial」、「宋体」などのフォント タイプを設定します。
font-size フォント サイズを設定します。一般的な測定単位は pt と px です。
font-style フォント スタイル、オプションの値を設定します。標準、斜体、斜体
font -weigh はフォントの「太さ」を設定し、一般的な値は標準と太字です
フォントは上記のさまざまなフォント属性を包括的に設定します

段落関連の属性: 表示を制御しますテキストのインデントやテキストの配置方法を含む、段落または div 全体の効果。

text-align テキストの配置を設定します。オプションの値は left、center、right、justify です。
text-indent 最初の行のインデントを設定します。値は絶対または相対的な長さの単位とパーセンテージです。
line-height を設定します行の高さ、その値は絶対または相対的な長さの単位とパーセンテージで指定できます
Letter-spacing 文字間隔を設定します。その値は絶対または相対的な長さの単位で指定できます
color テキストの色を設定します

背景関連の属性: 背景色を制御します、背景画像、その他のプロパティ。

テーブル関連のプロパティ: テーブルの外観を制御します。

サイズ関連の属性: ターゲット オブジェクトの長さ、幅、最小長、幅、およびその他の属性を制御します。

CSS スタイル シートでは、長さの単位は 2 つのカテゴリに分類されます:

位置関連の属性: ページ上で中断されているかどうかを含め、ターゲット オブジェクトの位置を制御します。ここでは、この種の関連属性について説明する必要があります。実際、これは CSS の位​​置決めメカニズムです。

ドキュメントフロー
ラインボックス: 水平方向に順番に配置、配置できない場合はスクロールバーが表示されます
ブロックボックス: 垂直方向に順番に配置され、配置できない場合はスクロールバーが表示されます
1. 相対配置、元の位置ドキュメント フローではまだ保持されているため、現在の位置は元の位置に対してオフセットされます。

position: relative;#pos {position: relative;top: 5px;left: 55px;}

2、絶対位置指定position:Absolute;
要素が存在しなかったかのように、ドキュメント フローから元の位置を削除します。現在の位置が他の要素と重なっている場合、他の要素の表示を覆い隠すことになります。これが CSS 中間層の概念です。現在の位置を配置するには 2 つの状況があります:
① 親コンテナと祖先コンテナが配置されていません: ブラウザの左上隅を基準にしています

#pos {position: absolute;top: 0px;left: 0px;}

② 配置されている祖先要素があります: 最も近い位置にある祖先要素を基準にしています

<div> </div><div> </div><div id="pos"><div id="test">测试</div></div><div> </div><div> </div>#pos {position: absolute;top: 30px;left: 100px;}#test {position: absolute;top: 5px;left: 20px;}

3、floating : ドキュメント フローから切り離され、1 レベル上にフローティングされます。同じコンテナ内のすべてのフローティング要素は、float 属性値に従って順番に配置されます。たとえば、すべてが float:left の場合、それらは順番に配置されます。左から右へ。また、ドキュメント フロー内の通常のフローティングされていない要素も見えにくくなります。

<div> </div><div> </div><div> </div><div> </div><div> </div>div {border-style: solid;border-width: 1px;border-color: black;width: 50px;height: 50px;margin-right: 5px;float: left;}

境界線関連のプロパティ: 使用する色、太さ、線種など、ターゲット オブジェクトの境界線の特性を設定します。

アウトライン関連属性: ターゲット オブジェクトの周囲にハローを生成するために使用されます。このハローは、ページの実際の物理レイアウトを占有しません。輪郭関連の属性により、ハローの色、線幅、線種を設定できます。

块元素和行元素：

HTML元素按其显示方式可分为“块级”（block）元素和“行内”(inline)元素两种：
块级元素： 前后换行、可设定块大小（宽度和高度）、块的定位、块边框、块间距、块内和块边框间空隙等。如body,p,tr,td,div等。
行内元素： 位于当前行中，前后不换行，不单独定位。如span元素。

  <p>一段文字中的<span style=="font-size:20pt; color:red">一部分显示效果有所不同</span>，可以采用span元素来实现</p>

可以使用CSS的display属性设置/修改元素的显示方式，其常用属性取值为：block、inline和none

以上这些属性我们大概知道就OK了，具体的相关属性翻ipa文档就好了，如下图。

特别介绍3个常用的属性

1，display，用于设置目标对象是否以及如何显示。该属性的常用值是none，用于设置目标对象隐藏，一旦这个对象隐藏，其占用的页面空间也会释放。如果没有为该属性指定值，目标对象就会显示出来。这个还是比较常用的，一般的我们在页面上控制一部分页面的显示和隐藏，一般都是如下设置；

显示：document.getElementById('id').style.display='' ；隐藏：document.getElementById('id').style.display='none' ；

2，visibility，用于设置目标对象是否显示。与display不同的是，通过该属性隐藏某个html元素后，该元素占用的页面空间会被依然保留，不会被释放。该属性的2个常用值是：visible和hidden，分别用于控制对象的显示和隐藏。

显示：document.getElementById('id').style.visibility='visible' ；隐藏：document.getElementById('id').style.visibility='hidden' ；

3，cursor，用于设置目标对象上光标的形状。该属性常用的值auto（自动光标），crosshair（十字线光标），default（客户端光标），hand（手形光标），move（十字箭头光标），help（带问号的帮助光标），text（文本光标），wait（沙漏光标），url（自定义光标）。比如：

<div style="cursor:wait;"></div>