HTMLにおけるCSSスタイルの役割は何ですか-フロントエンドQ&A-php.cn

HTMLにおけるCSSスタイルの役割は何ですか

藏色散人

リリース： 2023-02-02 10:31:27

オリジナル

2489 人が閲覧しました

HTML の CSS スタイルの機能は、ページのコンテンツと変更効果を分離して管理することであり、CSS を通じてさまざまな変更効果を追加できます。HTML タグの場合、結果として得られるページ効果は比較的単純です。属性の変更は可能ですが、より多様なページ効果には依然として CSS スタイルシートの助けが必要です。

HTMLにおけるCSSスタイルの役割は何ですか

#HTML における CSS スタイルの役割は何ですか?

HTML における CSS スタイルシートの役割

1.CSS スタイルシートの役割:

HTML タグの場合、結果として得られるページ効果は比較的単純です。属性の変更はありますが、より多様なページ効果には CSS スタイルシートの助けが必要です。スタイルシートを使用すると、ページのコンテンツと変更効果を分離して管理できます (html はページと関連コンテンツを生成し、css はさまざまな変更効果を追加するために使用されます)

2. CSS スタイルシートの適用 1 (内部スタイルシート):

に配置されます。形式 1:

<style  type="text/css">
选择器(关键词) {属性1:属性值1;属性2:属性值2...}
</style>

ログイン後にコピー

font-size: フォントサイズを設定します

font -family: フォントスタイルを設定します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
p {color:red;font-size: 35px;font-family: "微软雅黑";}
h3 {color: pink;}
</style>
</head>
<body>这是我的第一句话。 
这是我的第二句话
这是我的第三句话
<h1>我是标题标签H1</h1>
<h2>我是标题标签H2</h2>
<h3>我是标题标签H3</h3>
</body>
</html>

ログイン後にコピー

形式 2:

多くの場合、一部のタグは同じスタイル効果を必要とするため、ラベルが指定されている限り、スタイルを共有操作として設定できます。必要な場合は、直接引用できます。

<style  type="text/css">
.类名 {属性1:属性值1;属性2:属性值2...}
</style>

ログイン後にコピー

タグリファレンス:

<開始タグ class="クラス名">

質問: タグの場合、オプションがあります。コンテナスタイルとクラススタイルの参照を使用すると、最終的な結果はどうなりますか?

異なるパーツの属性はマージされます。同じパーツの属性はクラススタイルの影響を受けます

##font-familyフォントtype font-styleフォントスタイル (スタイル)color を設定または取得します。 text Colortext-alignテキスト配置

テキスト属性	説明
font-size	フォントサイズ

CSS スタイルシートの背景属性の設定:

背景色:background-color

背景画像:background-image

背景画像の並べ方を設定:background-repeat:

repeat-x に沿って X 軸に沿ってタイルを配置します

repeat-yY 軸に沿ってタイルを配置します

no-repeat 実際の画像を使用して背景の位置を占めます

repeat 全体に展開しますページ全体

背景画像を読み込むときは、 url()---> src 関数と同等

background-image:url (画像のパス情報)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style  type="text/css">
.testcss {color: green;font-size: 25px;font-family: "微软雅黑";}
.test1 {color: yellow;}
.tet4 {background-image:url(img/tupian03.jpg);background-repeat: repeat-y;}
</style>
</head>
<body class="test4">
我是第一个段落文字
我是第二个段落文字
我是斜体标签i
我是第二个斜体标签i
我是删除线标签del
</body>
</html>

ログイン後にコピー

3. CSS スタイルシート 2 (インラインスタイルシート) の適用

3.1 概要: スタイルシートは、特定の行の内容、またはスタイルシートは特定の行 (特定のタグ内) に埋め込むことができます。)

3.2 形式: スタイルを属性として扱う

<开始标签 style="属性1:属性值1;属性2:属性值2..."></结束标签>

ログイン後にコピー

I は最初の段落のコンテンツです

私は 2 番目の段落のコンテンツです

私は大きなタグのコンテンツです

#4. CSS スタイルシートアプリケーション 3 (外部スタイルシート)

4.1 概要: スタイルシートの html ファイルの記述を埋め込まず、別途 css ファイルに配置します。本当の意味でhtmlファイルとcssファイルは別々に分かれているので、htmlファイルにスタイルが必要な場合は関連付けるだけです。

4.2 形式: 別の CSS ファイルを作成し、タグ内の内容をコピーし、style ステートメントを直接記述します。

4.3HTML ファイルを外部スタイルシートに関連付けるにはどうすればよいですか?これらはすべて

方法 1:

<link href="写上引用的外部css文件" rel="stylesheet" type="text/css" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<link href="css/外部css.css" rel="stylesheet" type="text/css" />
</head>
<body>
我是段落一
<h1 >我是标题标签h1</h1>
<h2 class="test5">我是标题标签h2</h2>
</body>
</html>

ログイン後にコピー

推奨学習:「

css ビデオチュートリアル

」に配置されています。

以上がHTMLにおけるCSSスタイルの役割は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。