コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

head領域にCSSを導入する方法

青灯夜游
リリース： 2021-07-02 16:26:04
オリジナル
3809 人が閲覧しました

導入方法: 1. style タグを使用して導入する、構文 ""; 2. リンクを使用して、構文 ""。

head領域にCSSを導入する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

ヘッド領域に CSS を導入するには 2 つの方法があります。

  • 内部スタイル シート - スタイル タグで定義します

  • 外部スタイル シート - リンク タグを使用して

##1 を導入します。内部スタイル シート - スタイル タグを使用して定義します

CSS コードを記述しますHTML ドキュメントの head タグ内で、style タグで定義されている基本的な構文形式は次のとおりです。 

<head>  
<style type="text/css"> 
css代码
</style> 
</head>
ログイン後にコピー

構文では、style タグは通常、head タグの後に配置されます。 HTML ドキュメント内の任意の場所に配置できます。

CSS コードの一般的な形式: 

css选择器{ 
  属性:值;
  属性:值;
  .....
}
ログイン後にコピー

2. 外部スタイル シート -- リンク タグを使用して導入します

すべてのスタイルを 1 つにまとめますまたは CSS 拡張子を持つ複数の外部スタイル シート ファイルでは、外部スタイルはリンク タグを介して HTML ドキュメントにリンクされます。基本的な構文形式は次のとおりです: 

<link rel="stylesheet" type="text/css" href="css文件路径" />
ログイン後にコピー

  • rel 属性: 定義現在のドキュメントと他のリンクされたドキュメント間の関係。「スタイルシート」とは、リンクされたドキュメントがスタイル シート ファイルであることを意味します。

  • href 属性: リンクされた外部スタイル シート ファイルの URL を定義します。相対パスまたは絶対パス

(学習ビデオ共有:

css ビデオ チュートリアル 、html ビデオ チュートリアル )

以上がhead領域にCSSを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css head html
ソース：php.cn
前の記事：HTMLのテキストエリアのサイズを設定する方法 次の記事：HTMLで外部CSSを呼び出す方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
このページをレスポンシブにするにはどこから始めればよいでしょうか? <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8...
から 2024-04-04 21:21:25
0
1
457
テーブルではなく DOM を通じてデータをレンダリングする方法 作成中のアプリケーションについて質問があります。Oracle データベースを使用しており、データベースから情報を取得し、テーブルを介して画面に表示していますが、データを個別に処理し...
から 2024-04-04 18:17:27
0
1
3567
3. JS 3D モデルが追加されましたが、表示されません 自分の Web サイトに 3D モデルを追加しようとしています。 3 つの .js を使用しています。あらゆることを試しましたが、3D モデルを表示できませんでした。開発者ツールの...
から 2024-04-03 19:06:13
0
1
264
onblurイベントを通じて入力値を取得するにはどうすればよいですか? onblur イベントを介して入力された値を取得しようとしていますが、JS モジュールを使用すると機能しません。 <!DOCTYPEhtml><htmllang=...
から 2024-04-03 08:55:32
0
1
360
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート