CSS の共通プロパティ Basic Tutorial_html/css_WEB-ITnose

カテゴリ: WEB フロントエンド 時間: 2015 年 9 月 9 日

CSS は Web フロントエンド開発において非常に重要な位置を占めています。 CSS はコンテンツと収益化の分離の問題をうまく解決できるため、後のメンテナンスが大幅に容易になります。 CSS スタイルを導入するには、外部スタイル シート、内部スタイル シート、インライン スタイルの 3 つの主な方法があります。以下は、Web 開発で一般的に使用される CSS プロパティの詳細な紹介です。

1. CSS スタイルの導入方法

1. 外部スタイルシート

3. >

2. レイアウトの共通スタイル属性とボックスの原則 (マージン/パディング)

border: 1px 実線の赤、境界線のスタイル値: 実線、一点鎖線、点線。上、右、下、左をそれぞれ制御できます。

幅: 300px;高さ: 100px;背景色: 黄色;背景画像:url();

表示: ブロック(ブロックレベル)|なし(非表示)|インライン( インライン) | インラインブロック (ブロックレベルで同じ行内) | テーブルセル (テーブルの特性を表示)

margin margin

margin: 10px の略語

margin:10px 15px 20px 5px; 右上、左下

margin:5px auto; 通常、要素は固定幅でなければなりません。

パディング: 内側のマージン、使用法はマージンと同じです

3. テキスト属性 (デフォルトは親要素のスタイルを継承します)

font -size: 60px; サイズ

color: 赤; color

font-weight: 100 ～ 900、400 の任意の整数値、単位なし

フォントスタイル: イタリック; フォントスタイル

行の高さ: 60px; 行の高さ

フォントファミリー: 太字、フォント

テキスト整列: right|left |center;水平方向の配置

text-indent: 10px;テキストの最初の行のインデント

text-decoration:underline|overline|line-through|none;装飾効果

letter-spacing: 20px; 文字間隔

break-word: テキスト区切り改行属性

word-break:break-all 単語区切り属性

vertical-align:sub|super|; テキストの垂直方向の配置、M の正方形

layout-flow:vertical-ideographic;テキストの垂直方向の配置

cursor:pointer;マウス ポインターの形状

リストスタイル: none|アルメニア語(ドット)|丸(中空ドット)|10進数(数値、最大値は999、999行を超えると自動的に001になります)| lower-alpha(英語の小文字)文字 )|url(画像アドレス);

4. 背景属性

background-image: url(./images/leixuesong.jpg);背景画像

background-color: #FFCC00;背景色

background-repeat: no-repeat|repeat-x|repeat-y;背景画像の繰り返し方法

background-position: - 50px -50px; left|right|center|top|bottom 背景画像の位置

background: url(./images/002.png) no-repeat -100px -150px;すべての背景属性の省略形

5. フローティングと配置

float:left|right; 通常、要素の幅を設定する必要があります

clear:left|right| Both (両端); 通常、Clear float は float と組み合わせて使用​​され、通常は両方が単独で使用されます。

overflow:hidden|auto|scroll; ラベルのサイズに応じて水平または垂直にスクロール バーを自動的に表示できます。要素コンテンツのオーバーフローを防ぐため

position:Absolute|static|fixed|relative;

z-index:100;

left:100px;

ブロックレベル要素の最も重要な機能の 1 つは、次のとおりです。非ブロックレベルの要素 (インライン要素) は、すべて同じ行にあり、排他的な行を占めます。表示、クリアフロート、オーバーフローなどのプロパティは、一部のブラウザスタイルの非互換性を効果的に防ぐことができます