Internet-technologies-css
提供：Dev Guides
CSS
前書き
*CSS* は *Cascading Style Sheets* の頭字語です。*。css *拡張子を持つCSSファイルとして知られる別のファイルとしてHTML要素のプレゼンテーションを定義するのに役立ちます。CSSは、1か所で変更を加えるだけで、HTML要素のフォーマットを変更するのに役立ちます。 行われたすべての変更は、その要素が表示されたWebサイトのすべてのWebページに自動的に反映されます。
CSSルール
CSSルールは、スタイルシートを作成するために作成する必要があるスタイルです。 これらのルールは、関連するHTML要素の外観を定義します。 CSS構文の一般的な形式は次のとおりです。
Selector {property: value;}キーポイント
- セレクタは、CSSルールが適用されるHTML要素です。
- プロパティは、セレクタに対応して変更する属性を指定します。
- プロパティは指定された値を取ることができます。
- プロパティと値はコロン（:)で区切られます。
- 各宣言はセミコロン（;）で区切られます。
CSSルールの例を次に示します。
P { color : red;}
h1 (color : green; font-style : italic }
body { color : cyan; font-family : Arial; font- style : 16pt}CSSをHTMLに埋め込む
以下は、HTMLドキュメントにCSSを追加する4つの方法です。
- インラインスタイルシート
- 埋め込みスタイルシート
- 外部スタイルシート
- インポートされたスタイルシート
インラインスタイルシート
- インラインスタイルシート*はHTML要素に含まれています。 それらは要素とインラインに配置されます。 インラインCSSを追加するには、CSSプロパティを含むことができるスタイル属性を宣言する必要があります。
構文：
<Tagname STYLE = “ Declaration1 ; Declaration2 “> …. </Tagname>インラインスタイルシートを使用した次の例を考えてみましょう。
<p style="color: blue; text-align: left; font-size: 15pt">
Inline Style Sheets are included with HTML element i.e. they are placed inline with the element.
To add inline CSS, we have to declare style attribute which can contain any CSS property.
</p>出力-
埋め込みスタイルシート
埋め込みスタイル*シートは、特定の要素のすべての出現に同じ外観を適用するために使用されます。 これらは、 *<style> 要素を使用して<head>要素で定義されます。
'_<style> 要素には type 属性を含める必要があります。 type 属性の値は、ブラウザによってレンダリングされるときに含まれる構文のタイプを指定します。_
構文
<head> <title> …. </title>
<style type =”text/css”>
…….CSS Rules/Styles….
</style>
</head>埋め込みスタイルシートを使用した次の例を考えてみましょう。
<style type="text/css">
p {color:green; text-align: left; font-size: 10pt}
h1 { color: red; font-weight: bold}
</style>外部スタイルシート
外部スタイルシート*は、CSSルールを含む個別の *.css ファイルです。 これらのファイルは、rel属性付きの<link>タグを使用して、任意のHTMLドキュメントにリンクできます。
構文：
<head> <link rel= “stylesheet” type=”text/css” href= “url of css file”>
</head>外部cssを作成してHTMLドキュメントにリンクするには、次の手順を実行します。
- まず、CSSファイルを作成し、いくつかのHTML要素のすべてのCSSルールを定義します。 このファイルにexternal.cssという名前を付けましょう。
p{
Color: orange; text-align: left; font-size: 10pt;
}
h1{
Color: orange; font-weight: bold;
}- 次に、HTMLドキュメントを作成し、* externaldemol。*という名前を付けます。
<html>
<head>
<title> External Style Sheets Demo </title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<h1> External Style Sheets</h1>
<p>External Style Sheets are the separate .css files that contain the CSS rules.</p>
</body>
</html>インポートされたスタイルシート
- インポートされたスタイルシート*により、他のスタイルシートからスタイルルールをインポートできます。 CSSルールをインポートするには、スタイルシートのすべてのルールの前に@importを使用する必要があります。
構文：
<head><title> Title Information </title>
<style type=”text/css”>
@import URL (cssfilepath)
… CSS rules…
</style>
</head>インラインスタイルシートを使用した次の例を考えてみましょう。
<html>
<head>
<title> External Style Sheets Demo </title>
<style>
@import url(external.css);
</style>
</head>
<body>
<h1> External Style Sheets</h1>
<p>External Style Sheets are the separate .css files that contain the CSS rules.</p>
</body>
</html>
