CSSの正式名称はCascading Style Sheetです。カスケード スタイル シート。
1. CSS の 4 つの実装方法:
1. 埋め込み型:
2. 外部リンク型:
3. インポート型
4. 属性型:
2. CSS 定義:
オブジェクトを選択 {属性 1: 値 1; 属性 2: 値 2; 属性 n: 値 n...}
のように：
td{font-size:12px;color:#FFFF00}
.myname{font-size:12px;color:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration:underline;}
3 つ。
1.HTMLセレクター(タグ名)
2.クラスセレクター(.NAME)
3.IDセレクター(#IDname)
4. 特別なオブジェクト (a:hover a:link a:visited a:active)
1.HTML セレクター
HTML セレクターは、DIV、TD、H1 などの HTML のマークアップ文字です。 HTML セレクターのスコープは、スタイルが適用されるすべてのページのすべてのタグです。
例：
た
{
色: #FF0000;
}
-->
注: このコードの機能は、表のセル内のテキストを自動的に赤色に変えることです。
2.クラスセレクター
クラス セレクターを定義するには、その名前にドット「.」を追加する必要があります。 「.classname」など。クラス セレクターのスコープは、「class="classname"」を含むすべてのタグです。
例：
.fontRed
{
色: #FF0000;
}
-->
注: 2 番目には「class="fontRed"」がないため、テキストは赤くなりません。
3.IDセレクター
ID セレクターを定義するには、その名前にドット「#」を追加する必要があります。 「#ID名」など。 ID セレクターのスコープは、「ID="classname"」を含むすべてのタグです。
例:
#fontRed
{
色: #FF0000;
}
-->
注: 2 番目には「ID="fontRed"」がないため、テキストは赤くなりません。
4. 特殊オブジェクト リンクオブジェクトに設定される特殊オブジェクトには次の 4 種類があります。
a:マウスを上に移動したときの hover ハイパーリンク
a:link 通常の、アクセスできないハイパーリンク
a:訪問済み 訪問済みのハイパーリンク
マウスがクリックされたときの a:active ハイパーリンク特殊オブジェクトのスコープは、すべてのマーカーです (「すべて」という単語を覆す方法が間もなく登場するため、この文は議論の対象となります)。
例：
a：ホバー
{
色: #0000FF;
テキスト装飾: 下線;
}
-->
非常に便利なので、以下の点に注意してください。 ！ ！
a.クラス名:ホバー
a#ID名:ホバー
これら 2 つの書き込みメソッドは、それぞれ .classname と #IDname で使用されます。そのスコープは、「class="クラス名"」または「ID="IDname"」を含むすべてのタグになります。この記述方法は、同じページ上で複数の a:hover 効果を実現するのに役立ちます。Ywang のホームページのナビゲーション バーのテキストと、マウスを移動したときの通常の記事タイトルの違いを確認できます。
4. アプリケーション:
1. マーカーを自動的に適用する
2.特殊クラス class="NAME"
3.ID ID="ID名"
4. 特別なオブジェクトが自動的に適用されます。 5. CSS プロパティ
CSS プロパティは多数あります。たとえば、上記で最もよく使用されている color は、テキストの色を示します。背景色は背景色を表します。ここが一番重要ですが、難しいことではないのでマニュアルを参照してください。
CSS タグのプロパティ/プロパティ リファレンス 現在サポートされているスタイル シート (CSS) タグのプロパティのリストを次に示します。
CSS タグの属性/属性
動作属性 動作
フォントとテキスト属性の方向
方向[ディレック??ン]ガイド
フォント
フォントファミリー
フォントサイズ
フォントスタイル
font-variant [?v??ri?nt] バリアント
font-weight [ウェイト] ウェイト
ime-mode [m?ud] モード
レイアウトグリッド [?leiaut] レイアウト植字 [ɡrid] グリッド
レイアウト-グリッド-文字 [t?ɑ:](書き込み...)
レイアウトグリッド線
レイアウトグリッドモード
レイアウトグリッドタイプ
文字間隔 [?let?] 文字 [?speisi?] 間隔
改行[ブレーク]改行
line-height [ハイト] 高さ
最小高さ
Ruby-align [?ru:bi] ルビー
Ruby-overhang [??uv??hæ?] 突き出ます
Ruby-position [p??zi??n] 位置決め
テキスト整列
text-autospace [speis] 自動間隔
text-decoration [?dek??rei??n] 装飾
text-indent [in?dent] インデント組版
text-justify [?d??stifai] 配置
テキスト-カシダ-スペース
text-overflow [??uv??fl?u] オーバーフロー
text-transform [træns?f?:m] 変更
テキストの下線の位置
unicode-bidi [?bi:di]
垂直整列
ホワイトスペース
単語の区切り
ワードラップ
書き込みモードの
色と背景の添付ファイル
背景色
背景画像
背景位置
背景位置-x
背景位置y
背景リピート
カラー
レイアウト属性の境界線
ボーダーボトム
境界線の下の色
ボーダーボトムスタイル
ボーダーの下の幅
境界線の崩壊*
境界線の色
左端
境界線の左の色
ボーダー左スタイル
境界線の左幅
境界線右
境界線の右の色
境界線右スタイル
ボーダー右幅
ボーダースタイル
ボーダートップ
境界線の上部の色
ボーダートップスタイル
ボーダー上部の幅
境界線の幅
クリア
フロート
レイアウトフロー
マージン
マージン-ボトム
左マージン
右マージン
マージントップ
パディング
パディングボトム
パディング左
右パディング
パディングトップ
スクロールバー-3dライトカラー
スクロールバーの矢印の色
スクロールバーのベースカラー
スクロールバー-ダークシャドウ-カラー
スクロールバーの表面の色
スクロールバーのハイライト色
スクロールバーの影の色
テーブルレイアウト
ズーム
分類属性表示
リスト形式
リストスタイル画像
リストスタイルの位置
list-style-type
位置決め属性の下部
クリップ
身長
左
オーバーフロー
オーバーフロー-X
オーバーフローっぽい
位置
右
トップ
可視性
幅
z-index
印刷属性ページ
pageBreakAfter
pageBreakBefore
フィルター属性フィルター
疑似クラスおよびその他の属性: active
@charset
カーソル
:最初の文字
:最初の行
@フォントフェイス
:ホバー
@輸入
！重要
：リンク
@メディア
@ページ
:訪問しました
CSS 画像の境界線効果を実現するには、主に 2 つの方法
。たとえば、CSS ファイルで img の境界線 (境界線) を直接定義する方法です。
img.framed {
パディング: 6px;
境界線: 1px 実線 #CCCCCC;
背景色: #FFFFFF;
その後、HTML ファイル内で、または Web ページが更新されたときに、埋め込み画像定義に class="framed" を使用すると、対応する境界線効果が得られます。
上記の方法の利点は、比較的単純であることですが、達成される効果は比較的単調であり、必ずしも満足のいく結果が得られるわけではなく、影や色の変化などの特殊な効果が得られる場合もあります。これは、画像の置換と位置変換を使用することでうまく実現できます。ここでは詳しく説明しませんが、基本的な CSS を学習すれば、より高度な CSS 効果に挑戦することは難しくないと思います。
テーブルの境界線の CSS 構文を整理する
Dreamweaver がテーブルの作成に優れた機能を発揮することはわかっていますが、特定の効果を実現するには、ある時点で CSS と組み合わせる必要があります。まず、テーブルの境界線の CSS 構文を整理しましょう。 CSSを使って表の枠線を美しくする方法を別途紹介します。
表の境界線の特定の CSS 構文
には、上境界線の幅、右境界線の幅、下境界線の幅、左境界線の幅、境界線の幅、境界線の色、境界線のスタイル、上境界線、下境界線、左境界線、右境界線、境界線、幅、が含まれます。高さ、関連するラベルなど。
1. 上部境界線の幅の
構文: border-top-width: <value>
使用可能な値: Thin Medium | Thick <length>
初期値: Medium
適用対象: すべてのオブジェクト
下位互換性: なし
上部境界線の幅属性は、次の指定に使用されます。 a 要素の上端の幅。値は 3 つのキーワードのいずれかになります。いずれもフォント サイズや長さの影響を受けず、比例幅を実装するために使用できます。負の値は許可されません。また、上の境界線、境界線の幅、または境界線のプロパティを省略するために使用することもできます。
2. 右ボーダー幅の
構文: border-right-width: <value>
使用可能な値: Thin | Thick <length>
初期値: Medium
適用対象: すべてのオブジェクト
下位互換性: いいえ
右ボーダー幅属性は、次の指定に使用されます。要素 右の境界線の幅。値は 3 つのキーワードのいずれかになります。いずれもフォント サイズや長さの影響を受けず、比例幅を実装するために使用できます。負の値は許可されません。右の境界線、境界線の幅、または境界線のプロパティを省略するために使用することもできます。
3. 下部境界線の幅の
構文: border-bottom-width: <value>
使用可能な値: Thin Medium | Thick <length>
初期値: Medium
適用
対象: すべてのオブジェクト
下位互換性: No
要素 下の境界線の幅。値は 3 つのキーワードのいずれかになります。いずれもフォント サイズや長さの影響を受けず、比例幅を実装するために使用できます。負の値は許可されません。また、下の境界線、境界線の幅、または境界線のプロパティを省略するために使用することもできます。
4. 左ボーダー幅の
構文: border-left-width: <value>
使用可能な値: Thin | Thick | <Length>
適用対象
: すべてのオブジェクト
下位互換性: いいえ
左ボーダー幅属性は、次の指定に使用されます。要素 左の境界線の幅。値は 3 つのキーワードのいずれかになります。いずれもフォント サイズや長さの影響を受けず、比例幅を実装するために使用できます。負の値は許可されません。また、左側の境界線、境界線の幅、または境界線のプロパティを省略するために使用することもできます。
5. 境界線の幅の
構文: border-width: <value>
使用可能な値: [ Thin | Thick | <Length> ]{1,4}
初期値: 未定義
適用対象: すべてのオブジェクト
下位互換性: いいえ
境界線の幅属性を設定します。 1 ～ 4 の値を持つ要素の境界。値はキーワードまたは長さです。負の長さは許可されません。 4 つの値をすべて指定すると、それぞれ上、右、下、左の境界線スタイルに適用されます。値が指定されている場合は、それが各エッジに適用されます。 2 つまたは 3 つの値が指定された場合、省略された値は反対側に等しくなります。 このプロパティは、top、right、bottom、および left プロパティの短縮形です。省略されたボーダー属性を使用することもできます。
6. 境界線の色の
構文: border-color: <value>
許可される値: <color>{1,4}
初期値: color 属性の値
が適用される対象: すべてのオブジェクト
下位互換性: いいえ
border color 属性は境界線を設定します要素の色。 1 ～ 4 つのキーワードを使用できます。 4 つの値をすべて指定すると、それぞれ上、右、下、左の境界線スタイルに適用されます。値が指定されている場合は、それが各エッジに適用されます。 2 つまたは 3 つの値が指定された場合、省略された値は反対側に等しくなります。省略されたボーダー属性を使用することもできます。
7. 境界線のスタイルの構文
: border-style: <value>
許容
値: [none
| dotted double | outset |
with: いいえ
border-style プロパティは、要素の境界線のスタイルを設定するために使用されます。このプロパティは、表示される境界線を指定するために使用する必要があります。 1 ～ 4 つのキーワードを使用できます。 4 つの値をすべて指定すると、それぞれ上、右、下、左の境界線スタイルに適用されます。値が指定されている場合は、それが各エッジに適用されます。 2 つまたは 3 つの値が指定された場合、省略された値は反対側に等しくなります。省略されたボーダー属性を使用することもできます。
なし: スタイルなし。
点線: 点線;
破線: 破線;
実線: 実線。
二重: 二重線;
溝: 溝のライン;
尾根：尾根。
はめ込み: 凹面。
アウトセット: 凸型。
8. 上部境界線の
構文: border-top: <value>
許可される値: <上部境界線の幅> || <境界線のスタイル> || <color>
初期値: 未定義
適用対象: すべてのオブジェクト
下位互換性: いいえ
上部境界線属性は要素の境界線の幅、スタイル、色を設定するための省略表現。指定できる境界線スタイルは 1 つだけであることに注意してください。省略されたボーダー属性を使用することもできます。
9. 右境界線の
構文: border-right: <value>
許可される値: <右境界線の幅> || <境界線のスタイル> || <color>
初期値: 未定義
適用対象: すべてのオブジェクト
下位互換性: いいえ
右境界線属性は要素の右枠の幅、スタイル、色を設定するための省略表現。指定できる境界線スタイルは 1 つだけであることに注意してください。省略されたボーダー属性を使用することもできます。
10. 下部境界線の
構文: border-bottom: <value>
使用可能な値: <下部境界線の幅> || <境界線のスタイル> || <カラー>
初期値: 未定義
適用対象: すべてのオブジェクト
下位互換性: いいえ
下部境界線属性は要素の下端の幅、スタイル、色を設定するための省略表現。指定できる境界線スタイルは 1 つだけであることに注意してください。省略されたボーダー属性を使用することもできます。
11. 左境界線の
構文: border-left: <value>
許可される値: <左境界線の幅> || <境界線スタイル> || <色>
初期値: 未定義
適用対象: すべてのオブジェクト
下位互換性: いいえ
左境界線プロパティは、要素の左枠の幅、スタイル、色を設定するための省略表現。指定できる境界線スタイルは 1 つだけであることに注意してください。省略されたボーダー属性を使用することもできます。
12. 境界線の
構文: border: <value>
許可される値: <border width> || <border style> || <color>
初期値: 未定義
適用対象: すべてのオブジェクト
下位互換性: なし
border プロパティは設定です。要素の境界線の幅、スタイル、色。
ボーダー宣言の例は次のとおりです。
H2 { border: Groove 3em }
A:link { 境界線: 青一色 }
A:訪問済み { 境界線: 細い点線 #800080 }
A:active { border: Thick double red }
border 属性は 4 種類の境界線のみを設定でき、1 セットの境界線の幅とスタイルのみを指定できます。要素の 4 つの境界線に異なる値を与えるには、Web ページ作成者は、上境界線、右境界線、下境界線、左境界線、境界線の色、境界線の幅、境界線のスタイルなどの 1 つ以上の属性を使用する必要があります。上境界線の幅、右境界線の幅、下境界線の幅、または左境界線の幅。
13. width
構文: width: <value>
許容値: <length> | <percent> | auto
初期値: auto
適用対象: ブロック レベルおよび置換要素
下位互換性: いいえ
width 属性の初期値は「auto」です。つまり、要素の元の幅です (要素自体の幅もあります)。パーセンテージは親要素の幅を指します。負の長さの値は許可されません。
14. 高さの
構文: height: <value>
許容値: <length> | auto
初期値: auto
適用対象: ブロック レベルおよび置換要素
下位互換性: なし
height 属性の初期値は、要素の「auto」です。元の高さ (要素自体の高さもあります)。パーセンテージは親要素の幅を指します。負の長さの値は許可されません。
15. ラベル
テーブルのラベルに関しては、テーブル スタイル全体の定義をテーブルに配置する必要があります。
td セル ラベル、セル スタイルの定義は td に配置する必要があります。
BODY は Web ドキュメントの主要な要素であり、すべての表示範囲は <BODY> 要素内にあります。
BUTTON フォームフィールドのボタンは、「送信」、「リセット」などの形式にすることができます。
DIV は、Web ページ上の領域を定義します。この領域の高さ、幅、または絶対位置は次のようになります。
IMG画像要素、「src」属性を指定して画像のソースを指定します
INPUT 入力フォーム欄
MARQUEE 移動字幕効果
SPAN は、Web ページ上の領域を定義します。この領域の高さ、幅、または絶対位置は次のようになります。
TEXTAREA テキストエリア
TFOOT 複数行入力テキスト ボックス
TH テーブルのヘッダー セル
THEADテーブルのタイトル
TRテーブル行