CSS構文とは何ですか?使い方やルールを詳しく紹介-CSSの知識-php.cn

CSS構文とは何ですか?使い方やルールを詳しく紹介

奋力向前

リリース： 2021-07-08 17:46:31

オリジナル

6627 人が閲覧しました

前回の記事『HTML要素とは？要素の文法規則について簡単に説明します。」を参照すると、誰もが HTML 要素と文法規則を理解できるようになります。次の記事では、CSS 構文を紹介し、CSS スタイルシートを使用する 3 つの方法について学びます。！

CSS構文とは何ですか?使い方やルールを詳しく紹介

#1. CSS 構文

CSS ルールセット (ルールセット) はセレクターと宣言ブロックで構成されます

CSS構文とは何ですか?使い方やルールを詳しく紹介

例の説明

p は CSS のセレクターです (スタイルを設定する HTML 要素を指します:

）

color は属性、red は属性値

text- align は属性、center は属性値

コード例:

<html>
<head>
<style>
p
{
	color:red;
	text-align:center;
} 
</style>
</head>
<body>
<p>php</p>
<p>php中文网</p>
</body>
</html>

ログイン後にコピー

レンダリング:

CSS構文とは何ですか?使い方やルールを詳しく紹介

CSS 例:

CSS 宣言は常にセミコロン (

; ) が終わると、ステートメントは常に中括弧 ({}) で囲まれます。

p 
{ 
color:red; 
text-align:center; 
}

ログイン後にコピー

コメントはコードを説明するために使用され、ブラウザーで自由に編集できます。それを無視します。

CSS コメントは

/* で始まり */ で終わります。例は次のとおりです:

/*这是个注释*/ 
p 
{ 
text-align:center; 
/*这是另一个注释*/ 
color:black; 
font-family:arial; 
}

ログイン後にコピー

2. CSSの指示はどうですか？

CSS の使用方法: 編集ツール

テキスト編集ツールのスタイルシートを使用するには、通常 3 つの方法があります:

1)ドキュメントヘッダー を挿入: 単一の Web アプリケーションに適しています

2) 行内に を挿入: ドキュメントの 1 か所または 2 か所に CSS

3 を挿入します。ページ )外部リンクスタイルファイル : CSS を使用する複数の Web ページに適しています

HTML Web ページで CSS を使用するさまざまな方法と、css を呼び出すさまざまな方法があります

1. ヘッダー内部的にスタイルを挿入します。

<style type="text/css">……</style>

ログイン後にコピー

コード例:

<html>
<head>
<title>中文网(php.com)</title>
<style type="text/css">
body {background-color:yellow;}
h1   {font-size:36pt;}
h2   {color:blue;}
p    {margin-left:50px;}
</style>
</head>
<body>

ログイン後にコピー

注: ここでは、スタイルオブジェクトの type 属性は「

text」に設定されています。 /css 」は、スタイルシートを無視するブラウザではサポートされていません。

2. インライン挿入スタイル

<p style=“font-size:16pt;color:blue”>蓝色16号文字</p>

ログイン後にコピー

は

font-size:16pt;color:blue"<span style="background-color: rgb(248, 248, 248);">&gt を採用します;</span> の形式は、HTML の任意の行にスタイルを記述します。これは、より便利で柔軟です。

3. 外部リンクスタイル

最初に外部スタイルシートファイル (

.css) を作成し、次に HTML リンクオブジェクトを使用します

<head>
<title>中文网(php.com)</title>
<link rel=stylesheet
href="//m.sbmmt.com/php.cn"
type="text/css">
</head>

ログイン後にコピー

この方法は、複数のドキュメントを同時に定義するのに非常に適しています。これにより、複数のドキュメントで同時に同じスタイルを使用できるようになり、冗長なコードが大幅に削減されます。

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

<? xml-stylesheet type="text/css" href="//m.sbmmt.com/php.css" ?>

ログイン後にコピー

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

HTML ドキュメントの

タグと

タグの間に # を挿入できます。 . ##ブロックオブジェクト。 #注意事項

注意してください

推奨研究:

以上がCSS構文とは何ですか?使い方やルールを詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。