CSS スタイル学習の基本のまとめと共有

十分な基礎知識がなければ CSS レイアウトを行うことは不可能です。この記事では、初心者向けによく使用される CSS 属性の基本的な概要を説明します。興味のある友人は参考にしてください。

CSSの基礎入門

カスケーディングスタイルシート（Cascading Style Sheet）は「CSS」と呼ばれ、通常「スタイルシート（Style Sheet）」とも呼ばれ、Webページのスタイルデザインに使用されます。たとえば、クリックされていないときはリンク ワードを青色にし、マウスをその上に移動すると赤色に変わり、下線が引かれるようにする場合、これはスタイルです。スタイルシートを設定することで、HTML上の各マークの表示属性を統一的に制御することができます。カスケード スタイル シートを使用すると、Web ページの外観をより効果的に制御できるようになります。カスケード スタイル シートを使用すると、Web ページ要素の位置と外観を正確に指定し、特殊効果を作成する機能が拡張されます。

CSSとは、英語のCascadingStyle Sheets（カスケーディングスタイルシート）の略で、HTMLやXMLなどのファイルスタイルを表現するために使用されるコンピュータ言語です。 CSS の最新バージョンは CSS3 です。これは、Web ページのパフォーマンスとコンテンツを完全に分離できるスタイル デザイン言語です。従来の HTML のパフォーマンスと比較して、CSS は Web ページ内のオブジェクトの位置とレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォント サイズ スタイルをサポートし、Web ページのオブジェクトとモデル スタイルを編集する機能があり、予備的な実行が可能です。デザインは現在、テキスト表示に基づいた最も優れた表現力のあるデザイン言語です。 CSS は、さまざまなユーザーの理解力に応じて記述方法を簡素化または最適化することができるため、あらゆるタイプの人にとって可読性が高くなります。

Ⅱ。 CSS の使用方法

サイト ページでスタイル シートを使用するには 3 つの方法があります:

外部スタイル: Web ページを外部スタイル シートにリンクします。

内部ページのスタイル: Web ページに埋め込みスタイル シートを作成します。

インライン スタイル: 個々の Web ページ要素にインライン スタイルを適用します。

各方法には長所と短所があります:

外部スタイル シートは、サイト上のすべてのページまたは一部のページに一貫して同じスタイルを適用する場合に使用されます。 1 つ以上の外部スタイル シートでスタイルを定義し、それらをすべての Web ページにリンクすると、すべての Web ページにわたって一貫した外観が保証されます。スタイルを変更する場合は、外部スタイル シートで 1 回変更するだけで済み、その変更はスタイル シートにリンクされているすべてのページに反映されます。通常、外部スタイル シートにはファイル拡張子として .css が付いています (ブリスベン ニュース リリース システムの共通スタイル Common.css など)。次に、このスタイルを必要とするページに次のようにリンクします。



現在の Web ページのスタイルには、埋め込みスタイル シートを使用します。埋め込みスタイル シートは、Web ページの

タグ内に「埋め込まれる」カスケード スタイル シートです。埋め込みスタイル シート内のスタイルは、同じ Web ページでのみ使用できます。 例:



インライン スタイルを使用して、カスケード スタイル シート属性を Web ページ要素に適用します。例:

CSS ドキュメント

Web ページが外部スタイル シートにリンクしている場合、Web ページ用に作成されたインライン スタイルまたは埋め込みスタイルは、外部スタイル シートの指定されたプロパティを拡張またはオーバーライドします。

Web ページで外部スタイル シートのスタイルを使用するには、[形式] メニューにある [スタイル シート リンク] コマンドを使用して、Web ページをスタイル シートにリンクします。 1 つまたは複数のスタイル シートを、Web ページ ビュー モードの現在の Web ページ、フォルダ リストで選択した Web ページ、またはサイト上のすべての Web ページにリンクできます。

[スタイル] ボックスには、見出し

1 などの標準 HTML タグと、埋め込みスタイル シートまたは Web ページにリンクされている外部スタイル シートに含まれるクラスまたは ID セレクターがリストされます。 Web ページ要素にスタイルを適用するには、スタイルを選択し、[スタイル] ボックスでスタイルまたはセレクターをクリックします。

Microsoft FrontPage 2000 では、特定の書式設定機能がインライン スタイルとして自動的に適用されます。例: ([書式] メニューの) [境界線と影] コマンドを使用して通常の段落の周囲にボックスを適用すると、FrontPage は書式設定情報を段落記号のインライン スタイル プロパティとして書き込みます (例:

3. CSS テキスト属性: color: #999999;

font-family: /*Text font*/

font-size: 9pt; *テキスト サイズ*/

font-style:itelic;/*テキスト イタリック*/

font-variant:small-caps;/*小さいフォント*/

letter-spacing: /*文字間のスペース*/

line-height: 200%; /*行の高さを設定*/

font-weight:bold;/*テキストの太字*/

vertical-align:sub;/*下付き文字*/

vertical-align:super;/*上付き*/

text-decoration:line-through;/*取り消し線を追加*/

text-decoration:overline;/*先頭行を追加*/

text-decoration :underline; /*下線を追加*/

text-decoration:none;/*リンクの下線を削除*/

text-transform: Capitalize; /*最初の単語を大文字にする*/

text-transform: uppercase; /

text-transform: lowercase; /*英語の小文字*/

text-align:right;/*テキストは右揃え*/

text-align:left;/*テキストは左揃え* /

text -align:center;/*テキストの中央揃え*/

text-align:justify;/*テキストの分散配置*/

vertical-align 属性

vertical-align:top;/*垂直方向に揃える上向き*/

vertical-align:bottom;/*垂直下方向に整列*/

vertical-align:middle;/*垂直方向中央に整列*/

vertical-align:text-top;/*テキストを垂直方向に整列します上向き*/

vertical -align:text-bottom;/*テキストを垂直下に整列します*/

4. CSS シンボル属性:

list-style-type:none;/*番号なし*/

list -style-type: 10 進数;/*アラビア数字*/

list-style-type: lower-roman;/*小文字のローマ数字*/

list-style-type:upper-roman;/*大文字のローマ数字* /

list-style-type: lower-alpha;/*英小文字*/

list-style-type:upper-alpha;/*英大文字*/

list-style-type:disc;/ *実線の円記号*/

list-style-type:circle;/*中空円記号*/

list-style-type:square;/*実線の四角記号*/

list-style-image:url( /dot.gif);/*画像記号*/

list-style-position:outside;/*凸行*/

list-style-position:inside;/*indent*/

5. style ：

background-color:#F5E2EC;/*背景色*/

background:transparent;/*遠近感のある背景*/

background-image: url(/image/bg.gif); /*背景画像* /

background-attachment:fixed; /*ウォーターマーク固定背景*/

background-repeat:repeat; /*リピート配置 - Webページのデフォルト*/

background-repeat: no-repeat; * /

background-repeat:repeat-x; /*x 軸で配置を繰り返します*/

background-repeat:repeat-y; /*y 軸で配置を繰り返します*/

背景の位置

background-position: 90% 90%; /*背景画像の x 軸と y 軸の位置*/

background-position: top; /*下揃え*/

background-position: left; /*左揃え*/

background-position: right; /*右揃え*/

background-position: center;
6. CSS 接続プロパティ:

a/*すべてのハイパーリンク*/
a:link/*ハイパーリンクのテキスト形式*/
a:visited/*訪問済みリンクのテキスト形式*/

a:active/*Pressedリンク形式 */

a:hover/*マウスでリンク*/

マウスカーソルスタイル:

指をリンク CURSOR: 手

十字体カーソル:十字線

下矢印カーソル:S-サイズ変更

十字矢印カーソル:move

右を指す矢印:move

疑問符を追加 カーソル:help

左を指す矢印:w-resize

上を指す矢印 カーソル:n-resize

上を指す矢印 と to右カーソル:ne-resize

上向きの矢印と左カーソル:nw-resize

テキスト 入力カーソル:テキスト

右斜め下の矢印 カーソル:se-resize

左斜め下の矢印 カーソル:sw-resize

ファンネル カーソル:待機

カーソル パターン (IE6) p {cursor:url("カーソル ファイル名.cur"),text;}


7. CSS ボーダー リスト:


border-top: 1px ソリッド #6699cc ; /*上のボーダー*/
border -bottom: 1px ソリッド #6699cc; /* 下のボーダー*/
border-left: 1px ソリッド #6699cc;

border-right: 1px ソリッド # 6699cc; /*右ボーダー* /

上記は推奨の書き方ですが、以下のように従来の方法でも可能です:

border-top-color: #369 /*上ボーダーの上の色を設定します* /

border-top-width:1px /*上枠の上幅を設定*/

border-top-style:solid/*上枠の上スタイルを設定*/

その他の枠スタイル

solid/*Solidフレーム*/

ドット/*ドットフレーム* /

ダブル/*ダブルフレーム*/

溝/*立体内凸フレーム*/

リッジ/*立体レリーフフレーム*/

インセット/ *凹型フレーム*/

outset/*凸型フレーム*/


8. CSS フォーム アプリケーション:


テキスト ボックス ;input type="submit" value="submit" name="B1">
チェックボックス
選択ボタン
複数行のテキスト ボックス

ドロップダウン メニューオプション 1

オプション 2 9. CSS 境界線のスタイル:

margin-top:10px;/*上マージン*/
margin-right:10px;/*右マージン値*/

margin-bottom:10px;/*下マージン値*/

margin-left:10px;/*左マージンの値*/


10. CSS 境界線を空白にする

padding-top:10px;/*上の境界線を空白のままにする*/ padding-right:10px;/*right境界線を空白のままにする*/

padding-bottom:10px;/*下の境界線を空白のままにする*/

padding-left:10px;/*左の境界線を空白のままにする*/


11. スクロールバーのスタイル


Scrollbar -face-color:#f3f3f3;/*スクロールバーの盛り上がった部分の色*/ Scrollbar-highlight-color:#f1f1f1/*スクロールバーの影の部分の色*/

Scrollbar- shadow-color:#fcfcfc/ *三次元スクロールバーの影の色*/

Scrollbar-3dlight-color:#fcfcfc/*スクロールバーの明るい端の色*/

Scrollbar-arrow-color:#34837 /*上下ボタンの三角矢印の色*/

Scrollbar-track-color:#fcfcfc/*スクロールバーの背景色*/

Scrollbar-darkshadow-color:#66c0f4/*三次元スクロールバー強い影の色*/

Scrollbar-base-color:#fcfcfc/* スクロールバーの基本色*/

上記は CSS スタイルの基礎的な研究です 矛盾がある場合はご容赦ください。

以上がCSS スタイル学習の基本のまとめと共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。