CSSスタイルシートとは何ですか? CSSスタイルシートの例を詳しく解説-CSSチュートリアル-php.cn

CSSスタイルシートとは何ですか? CSSスタイルシートの例を詳しく解説

零下一度

リリース： 2017-06-16 14:52:32

オリジナル

3029 人が閲覧しました

スタイルシートとは

CSSとはCascading Style Sheetの略です。「カスケードスタイルシート」と訳されます。 Web ページのスタイルを (拡張) 制御し、Web コンテンツからスタイル情報を分離できるようにするために使用されるマークアップ言語です。

Webページにスタイルシートを追加する方法

次の3つの方法でWebページにスタイルシートを追加できます。ターゲットに最も近いスタイル定義が優先されます。優先度の高いスタイルは、優先度の低いスタイルの重複しない定義を継承しますが、重複する定義をオーバーライドします。例外については重要な宣言を参照してください。

スタイルシートへのリンク

最初に外部スタイルシートファイル (.css) を作成してから、HTML リンクオブジェクトを使用できます。例は次のとおりです。

<head>
<title>title of article</title>
<link rel=stylesheet href="www.dhtmlet.com/rainer.css" type="text/css">
</head>

ログイン後にコピー

XML では、次のように宣言領域に追加する必要があります。

<? xml-stylesheet type="text/css" href="www.dhtmlet.com/rainer.css" ?>>

ログイン後にコピー

内部スタイルブロックオブジェクトを定義します (スタイルブロックの埋め込み)

< に追加できます。 HTML ドキュメントのタグを HTML> タグとの間に挿入します。定義方法については、スタイルシートの構文を参照してください。例は次のとおりです。

<html>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
-->
</style>
<body>

ログイン後にコピー

ここでスタイルオブジェクトの type 属性を "text/css" に設定すると、このタイプをサポートしていないブラウザはスタイルシートを無視できることに注意してください。

インラインスタイル

インライン定義では、オブジェクトのマークアップ内でオブジェクトの style 属性を使用して、それに適用されるスタイルシート属性を定義します。例は次のとおりです。

<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁<p>

ログイン後にコピー

スタイルシートの構文 (CSS 構文)

Selector { property: value }
パラメータの説明:
Selector -- セレクター
property : value -- スタイルシート定義。プロパティとプロパティ値はコロン (:) で区切られます。定義はセミコロン (;) で区切られています

「継承」値

各プロパティには、指定された値 (Inherit) があります。これは、親オブジェクトの値をコンピュータの値と同等にすることを意味します。この値は通常、バックアップとしてのみ使用できます。明示的に宣言すると、強調するために使用できます。

CSSとはCascading Style Sheetの略です。カスケードスタイルシート、結合スタイルシートなどを翻訳します。
例を挙げてみましょう。たとえば、テーブルや div は家の構成要素であり、Web サイト全体のフレームワークを設定するために使用されます。 CSS は家の装飾です。洗練されていないウェブサイトは見苦しいです。
私たちは通常、ウェブサイトの色やテキストなどを変更するためにCSSを使用します。
CSS についてもっと知りたい場合は、オンラインで検索できます。オンラインにはたくさんあります。私の実践からお伝えしているだけです。最後に、スタイルとフレームワークは切り離せないものであると言いたいだけです。

以上がCSSスタイルシートとは何ですか? CSSスタイルシートの例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。